HTML Notes
Uploaded by
Wani SuhailHTML Notes
Uploaded by
Wani SuhailPage | 1
HTML
INTRODUCTION TO HTML
HTML is a Hyper Text Markup Language which is used to create Web pages. It is
text based simple Language. It is not a case sensitive language.
WEB PAGE
It is an interactive document that stores information that can be viewed on a global
network of computers.
ESSENTIALS
To prepare web pages and write HTML documents, the following things are
required.
a) Window based computer system with any text editor like Notepad,
Notepad ++.
b) Internet Explorer.
STATIC AND DYNAMIC WEB PAGES
Web pages can be either static or dynamic. Static means unchanged or constant,
while Dynamic means changing or lively. Therefore, static web pages contain the
same prebuilt content each time the page is loaded, while the content of dynamic
web pages can be generated on the fly.
STRUCTURE OF A WEB PAGE
The complete document is written between <html> and </html> tags. The <html>
tag is a start tag whereas </html> tag is ending tag. Other main tags which are used
in between these tags are <head>, <body> and <title>.
<HTML>
<HEAD>
<TITLE>
……………………
……………………
</TITLE>
</HEAD>
Page | 2
<BODY>
…………….
</BODY>
</HTML>
Tags can be written in any case, upper case, lower case or mixture of both. The
<head> tag is used for providing header information. This tag is a container tag. The
document title is written in <title> tags.
Body tag is used to represent the body of the document. It is a container tag. The
whole text to be represented as body of the document is written in between
<body> and </body> tags.
DESIGINING WEB PAGES
1. Open notepad
2. Type the HTML commands and your text to be displayed as web page.
3. Save your file with .html or .htm extension
LOOKING AT THE WEB PAGE
The HTML file created by you will be displayed as web page.
1. Open the internet explorer
2. Click open and select the file you have been made in notepad with
.html or .htm extension
3. After selecting the file, click on open button. The file will open as a
web page on the screen.
HTML TAGS
HTML tags and their respective attributes are used to create HTML documents so
that you can view them in browsers and other user agents.
There are two types of tags in HTML
(I) Container tags (ii) Empty tags
Container tags are those tags which are used in pairs. One part is used as starting
tag and the other part is used as closing tag. For example <body> and </body> tag
is a container tag.
Empty tag is a solo tag (single tag). It doesn’t have any end tag. For example <br>
tag which is used for line break, is an empty tag.
BASIC HTML TAGS
Page | 3
Description Tag What it does?
HTML tag <html> The first tag we use to indicate that the contents of the
file are in HTML.
Head Tag <head> The tag is used to indicate the introduction content like
the title of the page.
Title Tag <title> The tag is used to give a webpage title that describes the
page in the title bar.
Body Tag <body> The tag used to enclose the actual contents along with the
respective tags of the web page.
OTHER TAGS IN HTML
After we use Basic HTML tags, the remaining tags appear in the body section of the
webpage. We can use a various tags to create Headings, Paragraphs or Line Breaks,
Lists…
Description Tag What it does?
Heading <H1> to <H6> This tag is used to divide the text that we type into
Levels different sections using Heading Levels which indicate a
different Size and Style for each level.
Paragraph <P> This Tag is used to indicate a break and space between
Break one paragraph and the other.
Line Break <Br> This Tag is used to give a Line Break so that the next
sentence is typed on the new line.
Numbered or <ol> This Tag is used to create a Numbered List which has a
Ordered List certain sequence or order.
Bullet or <Ul> This Tag is used to create Bulleted List which doesn’t have
unordered List special order with marks before the text.
List Items <Li> This Tag is used to type the contents or each item of the
Bulleted or Numbered List.
BOLD TAG
You can create the bold text in the web page by using <b> or <strong> tag.
<B> Bold Text </B> or <Strong> Strong Text </Strong>
ITALIC TAG
Page | 4
You can create the italic text by using <I> tag or <em> tag or <var> tag.
<I> Italic Text </I> <em> emphasized text </em> <var> text </var>
SMALL AND BIG TAG
T hes e tags are used to make text look sm all and b i g in s i ze.
<small> small text </small>
<big> big text </big>
UNDERLINE AND STRIKE THROUGH TEXT
To underline your text, use the underline tag. Type <u> tag. To strike through (or
cross out) your text, use the strike through tag. Type <s> tag.
<U> Underline Text </U>
<S> Strike out text <s>
SUPER SCRIPT AND SUBSCRIPT TEXT
Superscript text is smaller than regular text and is raised off the base line. In n 2, 2 is
written as superscript. To create superscript use the superscript tag pair. Type
<sup> … </sup>. Subscript text is smaller than regular text and is lowered below
the baseline. The n in Xn is subscript. To create subscript, use the subscript tag pair.
Type <sub> … </sub>.
ATTRIBUTES OF PARAGRAPH ELEMENT
Paragraphs can be aligned to the left, center or right. By default the paragraph
starts from the left of the web page. The following attributes can be used with <p>
tag.
The center, Right attribute of <p> tag starts from the center of the web page.
Center
<p align=”center”> My name is Sameer </p> or <center> hello </center>
Right
<p align=”right”> My name is Sameer </p>
ATTRIBUTES OF <BODY> TAG
Bgcolor
Page | 5
The attribute is used to change the color of the background of the web page.
<body bgcolor=”pink”>
The above command changes the background color to pink. You can select any
color from the various colors.
Text
The attribute text is used to choose text color in the web page
<body text=”name of color”>
You have to write the name of the color to be given to the text of the web page.
<body text=”pink”>
The above command selects the pink color to the text of the web page.
Topmargin
The attribute sets the top margin of the web page. The value of the topmargin is
given in pixels.
<body topmargin=”50”>
The above command will display the text 50 pixels away from the top of the web
page.
Leftmargin
The attribute leftmargin sets the left margin of the text. Its value is also given in
pixels.
<body leftmargin=”50”>
The above command will display text 50 pixels away from the left of the web page.
LISTS
Ordered lists are those lists which have some sequence or serial numbers. For
example 1,2,3,… or a,b,c… etc are ordered lists. These lists are also known as
numbered lists. Ordered lists are created between <ol> and </ol> tags.
Attributes for ordered lists are:
(i) Type = “a” for starting list from a,b,c etc. (small letters)
(ii) Type = “A” for starting list from A,B,C etc. (capital letters)
(iii) Type = “i” for starting list from roman numbers.
(iv) Type = “1” for starting list from Numbers. Etc.
Page | 6
For example:
<body>
INPUT DEVICES
<ol>
<li> keyboard
<li> mouse
<li> scanner
<li> joystick
</ol>
Unordered lists are those lists which do not have any serial number. A bullet sign is
placed before each item of the lists. An unordered list is created between <ul> and
</ul> tags. Attributes of unordered lists are circle, disc, square.
DEFINITION LIST
Definition list is used to define a word. The word to be defined is used within <dl>
and </dl> tags. Tags <dt> and <dd> are used between the definition list tag. The tag
<dt> is used before the word to be defined whereas <dd> is used for writing
definition of the word.
HORIZONTAL RULERS
Horizontal rulers can be shown in the web pages to identify some portion of the
text in a particular way. For drawing horizontal ruler, <hr> tag is used. The tag <hr>
is an empty tag. It doesn’t require any closing tag.
Attributes of <hr> tag
The attributes that can be used with <hr> tag are
(i) Size (ii) width (iii) noshade (iv) color
Illustrations given to the above attributers are
<Hr size=”16”> changes size of horizontal ruler.
<Hr width=”44”> changes width of horizontal ruler.
<Hr noshade> produces a solid blank line without shade.
<Hr color=”red”> changes color of horizontal ruler.
TAGS USED TO FORMAT TEXT
Description Tag What it does?
Page | 7 Bold tag <B> Used to make the typed text bold.
Italic tag <I> Used to make the typed text italic.
Underline tag <U> Used to make the typed text appear with
an underline.
Alignment <P ALIGN=”LEFT”> Used to change the alignment of the text.
<P ALIGN=”CENTER”>
<P ALIGN=”RIGHT”>
Font Face <FONT FACE=”Arial”> Used to change the font face of the text
you type.
Font Size <FONT SIZE=”9”> Used to change the font size of the text
you type.
Font color <FONT COLOR=”RED”> Used to change the color of the text you
type.
Blink <BLINK> Used to show text which blink at regular
intervals.
MARQUEE TAG
You can create a scrolling marquee (i.e. scrolling text or scrolling images) by using
the <marquee> tag. You can make the text/images scroll from right to left, left to
right, top to bottom, or bottom to top - it's your choice!
Note that if you can't view the examples, it's likely that your browser doesn't
support the marquee tag.
<Marquee> Your scrolling text goes here </marquee>
A HTML MARQUEE CAN HAVE FOLLOWING
ATTRIBUTES:
Width: how wide the marquee is. This will have a value like 10 or 20%etc.
Height: how tall the marquee is. This will have a value like 10 or 20% etc.
Direction: which direction the marquee should scroll. This will have value
either up, down, left or right.
Behavior: what type of scrolling? This will have value scroll, slide and
alternate.
scrolldelay: how long to delay between each jump. This will have a value like
10 etc.
Scrollamount: how far to jump. This will have a value like 10 etc.
Loop: how many times to loop. The default value is INFINITE, which means
that the marquee loops endlessly.
Bgcolor: background color. This will have any color name or color hex value.
Hspace: horizontal space around the marquee. This will have a value like 10
Page | 8
or 20%etc.
Vspace: vertical space around the marquee. This will have a value like 10 or
20%etc.
ATTRIBUTES OF <MARQUEE> TAG
CHANGING DIRECTIONS
<marquee direction="left"> your scrolling text goes here </marquee>
<marquee direction="right"> your scrolling text goes here </marquee>
<marquee direction="up"> your upward scrolling text goes here</marquee>
<marquee direction="down"> your downward scrolling text goes here</marquee>
CHANGING BEHAVIOR
<marquee behavior="alternate">your bouncing text goes here</marquee>
<marquee behavior="scroll">your bouncing text goes here</marquee>
<marquee behavior=”slide”> Bounce </marquee>
CHANGE THE SCROLLING SPEED
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll
speed</marquee>
<marquee scrolldelay=”200”> slow text </marquee>
CHANGING COLOR, HEIGHT AND WIDTH
<marquee bgcolor=”pink” direction=”left”> scroll text with color </marquee>
<marquee width=”50%”> Scroll text with 50% marquee effect </marquee>
<marquee bgcolor=”red” height=”30”> scrolling text </marquee>
We can also change the loop (no of times to repeat) of the marquee text by using
loop attribute.
<marquee loop=”3”> Text to repeat the scrolling in three times </marquee>
TABLES
Page | 9
Tables play an important role in displaying data in a web page.
STRUCTURE OF A TABLE
A table is made of rows and columns. The horizontal area is row and vertical area is
column. The intersection of row and column is called a cell. Data is entered in cells.
Four basic elements are needed to create tables. These are table tag, table row,
table data and table heading.
TABLE TAG
The <table> tag begins the table, you place what you want inside and end the table
with the </table> tag. To begin adding contents to your table, you will need the
<tr> and <td> tags. The <tr> stands for table row and the <td> stands for table data,
which is what you will place after this tag. You end a table section with the </td>
tag and each table row with the </tr> tag.
TABLE ROW
The <tr> and </tr> tags are used to draw rows of table. Tr means table row. A row
is a group of cells in horizontal direction.
TABLE DATA
The <td> and </td> tags are used to show data in a table. Td means table data. The
<td> tag defines a standard cell in a HTML table.
TABLE HEADING
The <th> tag defines a header cell in a HTML table.
HTML table has two kinds of cells:
1. Header cells: Contains header information.
2. Standard Cells: Contains Data.
The text in a th element is bold and centered.
TABLE SIZE
We can set the size of the table based on pixels. For example <tr height=”50”> &
Page | 10
<tr width=”30”>. Table width and height can be set by using percentage. For
example width=70%.
TABLE COLOR
The color attribute is used to change the background color of the table. The color
attribute is used with the table tag. The following example shows how to add a
background color for an entire table using generic values of color. <table
bgcolor=”pink”>. We can change the color of the cells in a table too by using color
attribute.
TABLE BORDER
If we do not specify a border attribute the table will be displayed without any
borders. Sometimes this can be useful, but most of the time, we want the borders
to show. To display a table with borders, we will have to use border attribute. For
example <table border=”2”>.
CELL SPACING &CELL PADDING
Cell spacing is used to provide space between each cell and cell padding is used to
create more space between the cell content and its border.
A SAMPLE TABLE
<table border=”2” bgcolor=”pink” width=”80%” height=”40%”>
<tr height=”20%”> <th> Name </th> <th> Class </th> </tr>
<tr> <td> Sameer </td> <td> 12th </td> </tr>
</table>
COLSPAN AND ROWSPAN
Table cells can span across more than one column or row. The attributes COLSPAN
("how many across") and ROWSPAN ("how many down") indicate how many
columns or rows a cell should take up.
For example, we might want to create header cells for each department in our
table of names and phone numbers. In this table, the header cells in the first and
fifth rows span across two columns to indicate the department for each group of
Page | 11
names.
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing
because it requires you to think through how the cell affects the rows after the row
it starts in. It's particularly useful in this situation to add borders to the table during
the design process, even if the table won't ultimately use borders.
This table code creates two header cells which span three rows each:
<TABLE BORDER=2 CELLPADDING=4>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH>
<TD>Raha Mutisya</TD> <TD>1493</TD>
</TR>
<TR>
<TD>Shalom Buraka</TD> <TD>3829</TD>
</TR>
<TR>
<TD>Brandy Davis</TD> <TD>0283</TD>
</TR>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH>
<TD>Claire Horne</TD> <TD>4827</TD>
</TR>
<TR>
<TD>Bruce Eckel</TD> <TD>7246</TD>
</TR>
<TR>
<TD>Danny Zeman</TD> <TD>5689</TD>
</TR>
</TABLE>
IMAGES
Page | 12
Image can be inserted in the web page. The <img> tag embeds am image in an
HTML page. It should be noted that images are not technically inserted into an
HTML page, they are linked to HTML pages. The <img> tag creates a holding space
for the referenced image. The <img> tag has two required attributes: src and alt. in
HTML the <img> tag has no end tag.
The alt attribute is used to define an “alternate text” for an image. The value of the
alt attribute is an author-defined text.
<img src=”[Link]” alt=”Rose”>
We can change the height and width of the image too by using height and width
attribute.
<img src=”[Link]” height=”200” width=”100”>
ADDING BACKGROUND GRAPHICS
We can put an image on the background of the document. The text is displayed on
the image. The image placed behind the text by making it the background of the
document is called Background image. The background tag is used with the body
tag.
<body background=”[Link]”>
BACKGROUND COLOR
We can fill any background color in our web page. For background color, the
attribute bgcolor is used with body tag.
<body bgcolor=”aqua”>
ANCHOR TAG
HTML anchor <a> tag is also very useful for creating bookmark links. HTML
bookmark tag links help in linking the different parts of a single HTML document.
HTML bookmark tag link navigates the web page to the targeted location of same
or different web page. Name attribute of HTML anchor <a> tag provides the
feature of bookmark links.
<a href=”location of the file”> Click here to go to the next page </a>
FORMS AND FRAMES
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons,
Page | 13
submit buttons and more. A form can also contain select lists, text area, field set,
legend and label elements. The <form> tag is used to create an HTML form.
HTML FORMS – THE INPUT ELEMENTS
The most important form element is the input element. The input element is used
to select user information. An input element can vary in many ways, depending on
the type of attribute. An input element can be of type text field, checkbox,
password, radio button, submit button and more.
TEXT FIELDS
<Form>
First name:
<input type=”text” name=”firstname”> <br>
Last name:
<input type=”text” name “lastname”>
</form>
By using size attribute we can change the text field size of the input element.
<input type=”text” name=”firstname” size=”50”>
We can also put the sample text in the text fields of input element by using value
attribute.
<input type=”text” name=”firstname” size=”50” value=”Sameer”>
PASSWORD FIELD
<input type=”password”> The characters in a password field are marked (shown as
asterisks or circles).
RADIO BUTTONS
Radio buttons let user to select one option from limited number of choices.
<form>
Select sex:
<input type=”radio” name=”sex” value=”male”> Male <br>
<input type=”radio” name=”sex” value=”female”> female <br>
</form>
CHECK BOXES
Check boxes let a user to select one or more options of limited number of choices.
Page | 14
<form>
<input type=”checkbox” name=”vehicle” value=”bike”> I have a bike <br>
<input type=”checkbox” name=”vehicle” value=”Car”> I have a car <br>
</form>
SUBMIT BUTTON
A submit button is used to send form data to a server. The data is sent to the page
specified in the form’s action attribute. The file defined in the action attribute
usually does something with the received input.
<Form>
<input type=”submit” name=”submit” value=”submit”>
</form>
HTML FRAMESET ELEMENT
The frameset element holds two or more frame elements. Each frame element
holds a separate document. The frameset element states only how many columns
or rows there will be in the frameset.
The <frame> tag defines one particular window (frame) within a frameset.
Example how to set a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second
column is set to 75% of the width of the browser window.
<frameset cols=”25%,75%”>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>
Note: - the frameset column size can also be set in pixels (cols=”200,500”) and one
of the columns can be set to use the remaining space, with an asterisk.
NOTES BY: UNITECH COMPUTER EDUCATION
(A UNIT OF THE CHINAR VALLEY GROUP)
B/Z BUILDING OPP. CITY COMPUTERS TRAL
CELL: 9906567693, EMAIL: unitechtral@[Link]
