Scribd
Upload
52 views27 pages

Web Programming and Development

HTML uses tags to structure and present content on web pages. Tags are keywords surrounded by angle brackets that tell the browser how to display headings, paragraphs, lists, links, and other elements. Common tags include <p> for paragraphs, <ul> and <ol> for unordered and ordered lists, <a> for links, <table> for tables, and <form> for interactive forms. Forms often include <input> tags for text fields, checkboxes, and other data entry widgets.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
52 views27 pages

Web Programming and Development

HTML uses tags to structure and present content on web pages. Tags are keywords surrounded by angle brackets that tell the browser how to display headings, paragraphs, lists, links, and other elements. Common tags include <p> for paragraphs, <ul> and <ol> for unordered and ordered lists, <a> for links, <table> for tables, and <form> for interactive forms. Forms often include <input> tags for text fields, checkboxes, and other data entry widgets.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 27

WEB PROGRAMMING AND

DEVELOPMENT
HTML stands for HyperText Markup
Language. This is the language used to
create and link Web pages together.

Tags are the basic coding units in the HTML


system. They are key words or phrases
that are enclosed by angle brackets < >.
RULES IN USING TAGS
Each tag must be enclosed in <brackets>.
You can use small or capital letters.
Most tags come in pairs: the starting tag and
the ending tag.
Example: <title> Introduction to HTML </title>
The browser ignores spaces around tags.
Example: <TITLE>
Introduction to HTML
</TITLE>
COMMAND FUNCTION
<HTML> </HTML> The beginning and the end of the HTML
document.
<HEAD> </HEAD> Used for header information.
<TITLE> </TITLE> Indicates the beginning and the end of the
title
<BODY> </BODY> Contents of the body of the Web page
<Hn> </Hn> Indicates the heading section. “H” represents the
heading and “n” represents the size. <H1> is the largest and <H6> is
the smallest.
<P> Indicates the beginning of the paragraph and inserts a blank
line before and above the paragraph. It does not need a closing tag.

<HR> Inserts a horizontal line.


<BR> Breaks a line text and marks the start of a new line.
The opening bracket is followed by an element,
which is a browser command, and ends with the
closing bracket.

<font size=“2”>

An element may also be followed by attributes,


which are words describing the properties of the
element, and further instruct the browser.

<font size=“2”>
Attributes are only contained in the opening
HTML tags to the right of the element and are
separated by a space and followed by an equal (=)
sign.

The value follows the equal sign and is enclosed in


quotes.

<font size=“2”>
CREATING A MARQUEE
Moving text and images can be displayed within a
document using the marquee tag. Text or images
can get the attention of a Web page visitor can be
produced by applying different attributes on the
marquee tag.
SYNTAX:
<marquee direction=“direction” behavior =“behavior”>
text content
</marquee>
MARQUEE TAG ATTRIBUTE
direction left, right, up, down
behavior scroll, slide, alternate
scrollamount “number”
height “number”
weight “number”
loop “number” or “infinite”
CREATING A HYPERLINK
The <a> tag defines an anchor. It create a link to
another document, by using the href attribute.
The a element is usually referred to as a link or a
hyperlink.

SYNTAX:
<a href = “file location”> Text used for link </a>
The most important attribute of the a element is
the href attribute, which indicates the link’s
destination.
By default, links will appear as follows in all
browsers:
•An unvisited link is underlined and blue
•A visited link is underlined and purple
•An active link is underlined and red
UNORDERED LISTS
An unordered list is a list of items. The list items
are marked with bullets (typically small black
circles).
An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.

HANDS-ON
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
ORDERED LISTS
An ordered list is also a list of items. The list items
are marked with numbers.
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.

HANDS-ON
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
DEFINITION LISTS

A definition list is not a list of single items. It is a


list of items (terms), with a description of each
item (term).
A definition list starts with a <dl> tag
(definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag
(definition description).
HANDS-ON
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
CREATING FORM TAG

A form is an area that can contain form elements.


Form elements are elements that allow the user
to enter information (like text fields, textarea
fields, drop-down menus, radio buttons,
checkboxes, etc.) in a form.
A form is defined with the <form> tag.
INPUT

The most used form tag is the <input> tag. The


type of input is specified with the type attribute.
The most commonly used input types are:

Text Fields
Text fields are used when you want the user to
type letters, numbers, etc. in a form.
HANDS-ON
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Radio Buttons
Radio Buttons are used when you want the user to
select one of a limited number of choices.
HANDS-ON
<form>
<input type="radio" name="sex" value="male">
Male
<br>
<input type="radio" name="sex" value="female">
Female
</form>
Checkboxes
Checkboxes are used when you want the user to
select one or more options of a limited number of
choices.
HANDS-ON
<form>
Select the transportation that you like:
<input type="checkbox" name="vehicle" value=“bike”>
bike
<br>
<input type="checkbox" name="vehicle" value=“car”>
car
<br>
<input type="checkbox" name="vehicle“ value=“airplane">
airplane
</form>
Select and Option Tag
The select tag creates a list field in which some
choices are hidden. Start and end tags surround
list options which are marked with <option>. It
defines each individual choice that the user will
see.
HANDS-ON
<html>
Select the transportation that you like:
<select name="vehicle”>
<option> bike
<option> car
<option> airplane
</select>
</html>
Tables
Tables are defined with the <table> tag. A table is
divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag).
The letters td stands for "table data," which is the
content of a data cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules,
tables, etc.
HANDS-ON
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tables and the Border Attribute
If you do not specify a border attribute the table
will be displayed without any borders. Sometimes
this can be useful, but most of the time, you want
the borders to show. To display a table with
borders, you will have to use the border attribute:
HANDS-ON
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Frames
With frames, you can display more than one HTML
document in the same browser window. Each HTML
document is called a frame, and each frame is
independent of the others.
The Frameset Tag
•The <frameset> tag defines how to divide the
window into frames
•Each frameset defines a set of rows or columns
•The values of the rows/columns indicate the amount
of screen area each row/column will occupy
The Frame Tag
•The <frame> tag defines what HTML document
to put into each frame
Example:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

You might also like