NICT Computers H T M L Notes
1
NICT Computers H T M L Notes
INTRODUCTION TO HTML:
Hyper Text Markup Language (HTML) is the encoding Scheme used to create and format a web
document. A user need not be an expert programmer to make use of HTML to create hypertext
document that can be put on the internet.
ORIGIN OF HTML:
HTML is not an invention but is an improved version of Standard Generalized Markup Language (SGML).
Tim burners-lee at Corn designed the original HTML document type in 1990. In 1992, Dan Connolly
wrote the HTML document type and a brief HTML specification. Since 1993, cross-sections of the people
have contributed to the evolution of the HTML.
EVOLUTION OF HTML:
HTML evolved in the following four stages:
Level 0- included only the basic structural elements and assumed that all browsers
supported all features of level 0.
Level 1- advanced features included highlighted text and graphics that were supported
depending on the browser capability.
Level 2 –advanced the World Wide Web (WWW) as an interactive medium and the feature
of fill out forms on the internet.
Level 3- introduction frames, inline, video, sound, etc.
INTERNET EXPLORER EDITOR:
To write the HTML commands to create a web page, the user can select the source option from the
VIEW menu. It displays the HTML commands for that particular page in notepad. The menu options of
the notepad are discussed in the section that follows.
WORKING WITH INTERNET EXPLORE & CREAEATING HTML PROGRAM:
1. Double click on INTERNET EXPLORER icon at desktop. (or) find it all programs / start
menu.
2. A web browser window appears.
3. Click on SAVE option.
4. Type the name for the HTML FILE with extension .HTML
EX: [Link]
5. CLICK on save.
To open an existing Html file:
1. Click on OPEN from file.
2. Click on browser.
3. Select the saved file name.
4. Click on open,then click on OK.
2
NICT Computers H T M L Notes
To write or adding HTML Code:
1. Click on VIEW then select source. (Alt v+c)
2. Then type the html coding in notepad window.
3. Save the code (for that press alt F+S).
4. Exit from code window (press alt F+X)
To RUN the Html File:
1. Click on REFRESH tool at tool bar. OR PRESS FUNCTION KEY F5
INTRODUCTION TO HTML ELEMENTS:
This section will introduce the various HTML tags or HTML elements used to construct an HTML file.
Each HTML document corresponds to a single page. An HTML tag comprises a left angular bracket (<), a
less than symbol followed by the name of the tag and closed by a right angular bracket(>).
HTML elements can be categorized as container elements and empty elements. Container elements are
paired and have a starting and ending tag. The end tag is identical to the start tag except that it has a
slash (/) that precedes the text within angular brackets. The parameters of the element are placed
between the start and the end tag.
Empty elements do not have the end tag but only the start tag. An empty element takes attributes that
are given within angular brackets , along with the tag name.
ELEMENTS OF HTML:
DOCUMENT STRUCTURE ELEMENTS
The document structure elements are required within a HTML document for it to conform to html
standards. Apart from the prologue document identifier which is used in the beginning to identify the
document as an Html document. These are three kinds.
1. HTML element: this element identifies the document as one containing html elements.
Ex: <HTML>
…………………
………………………
……………………..
</HTML>
[Link] element: this element contains an unordered collection of information about the HTML
document. The TITLE element is used between <HEAD> AND </HEAD> element.
TITLE Element: this element needs to be used in the <HEAD> Element since it specifies the TITLE of the
document.
3
NICT Computers H T M L Notes
Example:
<HTML>
<HEAD>
<TITLE>
NICT COMPUTERS
</TITLE>
</HEAD>
</HTML>
3. BODY Element: this element contains all the text and images that make up the page, together with all
the HTML elements that provides the control and formatting of the page. The body is consists of the
following attributes:
a) BGCOLOR: this attribute allows setting of the background color for the document.
Ex: <BODY BGCOLOR =”RRGGBB”>
Color codes are the hexadecimal red-green-blue .Use the following hexadecimal color formats
code for the desired colors.
White #FFFFFF Dark Blue #00008B Brown #A52A3A
Yellow #FFFF00 Gray #808080 Purple #800080
Light Yellow #FFFFE0 Green #00FF00
Blue #0000FF Red #FF0000
Note: in this color code #rrggbb, r,g,b can be hexadecimal values i.e. 0-9 and A-F.
b) TEXT: this attribute is used to control the color of all normal text in the document.
Ex: <BODY TEXT = “COLOR CODE”>
C) MARGIN : This attribute set the LEFTMARGIN , TOPMARGIN of the body text.
Ex: <BODY LEFTMARGIN =”VALUE”>
<BODY TOPMARGIN =”VALUE”>
The following is the complete example for the html document:
<HTML>
<HEAD>
<TITLE>
NICT COMPUTER
</TITLE>
</HEAD>
<BODY BGCOLOR =”#2F80F9” TEXT COLOR =”#FFFF00” LEFTMARGIN =”100” TOPMARGIN =
“100”>
- . - . . .. (body text)……… …….. ….
</BODY>
</HTML>
4
NICT Computers H T M L Notes
ANCHOR ELEMENT:
The anchor element is the most important element in HTML. The element marks the text as a
hypertext link. It is defined by the <A> element. The <A> element accepts several attributes ,
but either the NAME or HREF is required.
HREF: if the HREF attribute is present, the text between the opening and closing anchor
elements becomes hypertext. If the user select this hypertext, the control moves to the
document specified by the value of the attribute.
syntax:
<A HREF=”[Link]#NAME”>MESSAGE TEXT </A>
Example:
<A HREF =”[Link]#ABC”>click to connect nict </A>
BLOCK FORMATING ELEMENTS:
The various elements that are used for formatting of blocks of text within HTML document
rather than single characters. Block formatting elements should all be located within the BODY
element of the document.
The following are some block formatting elements:
a. Address Element: This element essentially formats an address section. It specifies
information such as address, signature and authorship, often at the top or bottom of a
document.
For example, the code:
<ADDRESS>
Nict Computers
Panchayat Complex
J k pur – 765017
Rayagada, Odisha.
</ADDRESS>
b. FONT ELEMENT: This element requires the following attributes.
a. SIZE: It represented as <FONT SIZE=value>. The value ranges from 1-7.
For example:
<FONT SIZE = 5> Changes the font size </FONT>
b. COLOR : It changes the color of the text that will appear on the screen.
For example:
<FONT COLOR =”COLORCODE”> Changes the font color </FONT>
5
NICT Computers H T M L Notes
c. FACE: It changes the typeface of the text.
For example.
<FONT FACE =”font name”> Changes the text face </FONT>
Complete example of FONT Attribute:
<FONT SIZE=5 COLOR =”#FF5295” FACE = “ARIAL”> a man cannot play a dual role
in his real life </FONT>
c. HEADING ELEMENTS : HTML defines six levels of headings. A heading element can be used
to specify all the font changes, paragraph breaks before and after.
It contains the ALIGN attribute. It supports 3 kinds of alignments i.e. left, right, center. The
level of headings are from <H1> to <H6>
For example:
<H1 ALIGN=CENTER> NICT COMPUTERS</H1>
<H2 ALIGN= RIGHT> [Link] -765017 </H2>
<H3> CERTIFIED FROM NICT, BENGLORE </H3>
PARAGRAPH ELEMENT:
This element indicates a paragraph. The text between <P> and </P> elements is surrounded by a
vertical space of one line of half a line. The paragraph can be aligned left, right or center by using the
ALIGN attribute.
Syntax:
< P ALIGN = CENTER> Some sample text </P>
LIST ELEMENTS:
HTML supports several types of list elements that should be included within the BODY element
of the document.
a) Unordered list Element: The unordered list element is used to present a list of item which is
separated by white space or is marked by bullets. It starts with the <UL> element followed by
the <LI> (list item) element.
Example :
<UL> <LI> Item No.1<LI> Item No.2 <LI> Item No.3 <LI>Item No.4 ……</UL>
b) Order List Element: The ordered list element is used to present a numbered list of items in the
order of importance or the items sorted by sequence. It must begin with the <OL> element
followed by a <LI> element.
Example:
6
NICT Computers H T M L Notes
<OL> <LI> Item No.1<LI> Item No.2 <LI> Item No.3 <LI>Item No.4 </OL>
The order list can also take the following attributes.
i) Type: this attribute specified the type of number style. i.e.
A : capital letters. A,B,C….
a : Small letters . a,b,c,….
I : Large roman Numbers , I,II,III…
i : Small roman Numbers, I,ii,iii…
1 : numbers 1,2,3,….
ii) Start : it is an attribute used to specified the start position of the type.
Example :
<OL TYPE = A START = 5> <LI> Item No.1<LI> Item No.2 <LI> Item No.3 <LI>Item No.4 </OL>
c) Definition List Element: This element is to be used when a number of items and definitions are
to be included in the HTML document. This is a container element that contains two other
elements <DT> and <DD>. Where DT stands for Data Term and DD is Data Definition.
Example :
<DL>
<DT>Term1 : <DD>This is the definition of the first term. <DT>Term2 : <DD>This is the definition
of the second term. <DT>Term3 : <DD>This is the definition of the third term. </DL>
CHARACTER FORMATTING ELEMENTS:
The character formatting elements are also called physical formatting elements. In this kind of
formatting, formatting of the document and putting effectively on the user’s screen is done by the
author of the document.
a) Boldface Element: It specifies that the text should be displayed in boldface.
Example:
The instructions <B> must be read </B> before continuing.
b) Big element: It specifies that the enclosed text should be displayed, if practical, by using a
bigger font as compared to the current font.
Example:
This is normal text, with <BIG> this part </BIG> being big text.
c) Italics Element: It specifies that the text should be displayed in italic font.
Example: Anything between the <I> element </I> should be italics.
7
NICT Computers H T M L Notes
d) Small text element: It specifies that the enclosed text should be displayed, if practical, by using
a smaller font as compared to the current font.
Example: this is normal text, with <SMALL> this part </SMALL>being small text.
e) Strike Element: It states that the enclosed text should be displayed with a horizontal line
striking through the text.
Example: this text would be <STRIKE> struck through </STRIKE> a line.
f) Subscript Element: It specifies that the enclosed text should be displayed as subscript font.
Example: H<SUB>2</SUB>O<SUB>2</SUB>
g) Superscript Element: It specifies that the enclosed text should be displayed as superscript font.
Example : A<SUP>2</SUP>+B<SUP>2</SUP>
h) Underline Element: It specifies that the enclosed text should be displayed as underline.
Example : This is a <U>main point</U> of the exercise ….
HORIZONTAL RULE ELEMENT:
The Horizontal rule element is a divider of text such as a full width horizontal rule or equivalent
graphic.
Example:
<HR>
<ADDRESS> Nict computers <br>Panchayat complex building, <br> shop No.30 &31 <br> J K Pur
<br>
HORIZONTAL RULE ELEMENT:
This element specifies that a horizontal rule to be drawn across the page. The default rule is a shaded
engraved line. If accepts the following attributes.
1. SIZE : it determines the thickness of the horizontal line.
Ex: <HR size=3>
2. WIDTH: It determines the width of the horizontal rule. It specifies an exact width in pixels, or a
relative width as a percentage of the document width.
Ex: <HR WIDTH=50%>
3. ALIGN: It determines the position of the horizontal rule in the document. It provides 3 kinds of
alignments, i.e. left, right, and center.
Ex: <HR ALIGN=CENTER>
4. COLOR: The color of the horizontal line can be set in the following way.
<hr color=color code>
<hr color = “#568845”>
8
NICT Computers H T M L Notes
MARQUEE ELEMENT:
The marquee element allows the author to create a scrolling text marquee. It highlights the scrolling
text. Marquee can be left or right aligned. It has a number of attributes.
Align: The attribute can be set to top, middle or bottom of the marquee line.
BEHAVIOR: it can be set to scroll, slide or alternate.
BGCOLOR: It specifies a background color to the marquee line.
DIRECTION: It specifies the direction in which the text will scroll. It provides left and right
directions.
HEIGHT: It specifies the height of the marquee.
WIDTH : It specifies the width of the marquee.
LOOP: It specifies the number of times the marquee can move or scroll.
SCROLLAMOUNT: It sets the number of pixels between each successive draw of the marquee.
FORMS:
Forms are an effective means of making Web pages user-friendly. Forms are used in HTML for
getting inputs from the user. In a form, the user is typically presented with a number of input
mechanisms that help the user to enter data. These could be text fields, radio buttons, check boxes ,
list boxes etc...
Input Elements:
The input element represents a field that has the contents that may be edited by the user. The
attributes of the input elements are :
1) Type: this attribute defines the type of data the field accepts. They are:
a. Checkbox : it is used for that can take multiple values at the same time.
Example:
<INPUT TYPE = Checkbox>
b. Text: it is used for single line text entry fields in conjunction with the SIZE and MAXLENGTH
attributes.
<INPUT TYPE =TEXT SIZE = 25 MAXLENGTH =100>
c. Textarea : it is used to multiple lines text entry .
<INPUT TYPE = TEXTAREA MAXLENGTH = 200>
d. Radio : it is used to accept a single value from a set of alternatives. Each radio button field in the
group should be given the same name.
<INPUT TYPE = RADIO NAME = “X”>
e. Submit: It creates a button that submits the form.
<INPUT TYPE = SUBMIT>
f. Reset: It creates a button, when selected it resets the values of all the fields in the form to their
initial values.
<INPUT TYPE = RESET>
9
NICT Computers H T M L Notes
2) SELECT : The select element is a container element. This element allows the user to select one of the
sets of alternatives described by textual labels.
Example:
<SELECT NAME = “Flavour”>
<OPTION>Vanilla
<OPTION>Chocolate
<OPTION>Pineapple
<OPTION>Run’N’ Raisin
</SELECT>
OPTION: This option element can only occur within a Select element. It represents only one choice in the
list.
GRAPHICS IN HTML DOCUMENT:
Graphics enhance the communication of ideas and add aesthetic value of to the document. Graphics
also make the document interesting and easier for the user to read. There are a number of graphics
formatting supported by most of the WWW browsers.
Image Element: the image element is used to incorporate in-line graphics into a HTML. This element
cannot be used for embedding other HTML text. It is an empty element and is written as using the
following:
a) SRC : The value of this attribute is the URL of the image to be embedded. (Where SRC is the
source of the graphic file).
Syntax : <IMG SRC = “image_URL”>
Example : <IMG SRC = “[Link]”>
b) Width: used to set the width of the image.
c) Height: used to set the height of the image.
d) Vspace: used to set the vertical space for the image.
e) Hspace: used to set the horizontal space for the image.
f) Align: used to set the alignment for the image that is left, middle, right
g) ALT : this attribute is used to give alternate text that will be displayed in place of the image.
Example:
<IMG SRC =”[Link]” WIDTH=150 HEIGHT = 150 VSPACE= 50 HSPACE=100 ALIGN= TOP
ALT “SUNSET”>
10
NICT Computers H T M L Notes
ADVANCED HTML :
Introduction to Table Elements:
Tables are used to display data in a tabular format on the screen. Tables are useful in communicating
data in a meaningful way to the end-user. For example, if the information to be shown is the
comparison between various browsers that are available, a table will be appropriate for the job.
TABLE Element: The HTML <TABLE> element is the basic table element which wraps all the other table
elements. All the other table elements have to be included between <TABLE>….</TABLE> element. It
has the following attributes:
a) Border : it draws borders around all the table cells or a default space is left for borders. The size of the
border can be specified by using: BORDER = value, where value should be a pixel value.
b) Cellspacing =<value>: This attribute used for control over the space between the cells in a table.
c) Cellpadding = <value> : This attribute allow control over the space inserted between the cell data and
cell wall in a table.
For example:
<TABLE BORDER = 0 CELLSPACING=1 CELLPADDING = 2>
d) Width= <value/percent> : it sets the width of a table.
e) Height =<value/percent> :It sets the height of a table.
f) Align : it is used to align a table to the left or right of the page.
g) Valign : it specifies that the table can be top or bottom aligned. The default is center aligned.
h) BGCOLOR : It allows the background color to be set for the table.
Ex: <TABLE BGCOLOR=”color code”>
i) BORDERCOLOR : It allows the border color to the borders of the table.
Ex:
<TABLE BORDER BORDERCOLOR = ”COLORCODE”>
j) BACKGROUND: This attribute supports the placing of an image in the background of a table.
Syntax: <TABLE BACKGROUND =”URL” or [Link]>
K) FRAME: The frame attribute requires the Border attribute to be set, and it affects the display of the
table border. It can accept the following values:
a. Void : removes all the external borders.
b. Above: Displays external border at the top of the table only.
c. Box : displays a box around the table.
d. Inside : displays borders on the horizontal sides of the table.
L) <TR>….</TR> Element: THIS element specifies a table row. The number of rows in a table depends on
how many <TR> elements are contained within the table. The <TR> element can have the following
attributes:
Align ,Valign ,Bgcolor ,Bordercolor.
11
NICT Computers H T M L Notes
M) <TD>…</TD> Element: This element stands for table data, and it specifies a standard table data cell.
Table data cell must only appear within table rows. Each row need not have the same number of cells.
The <TD> element can have the following attributes:
Align ,Valign ,Bgcolor ,Bordercolor,width, height, nowrap, collspan,rowspan.
a) NOWRAP : is used in any table cell, the lines within the cell cannot be broken to fit the width of the
cell.
b) COLSPAN: Is appears within any table cell, and it specifies the number of columns the cell can span.
Ex: <TD COLSPAN = 2> …..</TD>
c) ROWSPAN : it specifies the number of row the cell can span.
Ex: <TD ROWSPAN =2>…..</TD>.
N) <TH>…</TH>: This attribute stand for table header. Header cells are identical to data cells in all
respects. Except that header cells are in a bold font, and are center aligned by default.
Syntax: <TH>…..</TH>
EXAMPLE:
<HTML>
<HEAD>
<TITLE> TABLE </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BORDERCOLOR=YELLOW CELLSPACING=5 CELLPADDING=10 WIDTH=1000
HEIGHT=400 ALIGN = CENTER BGCOLOR="#342321">
<TR BGCOLOR=BLUE ALIGN=CENTER>
<TD>SLNO</TD><TD>ROLLNO</TD><TD>NAME OF THE STUDENT</TD><TD>DATE OF
JOIN</TD><TD>COURSE</TD>
</TR>
<TR>
<TD>01</TD><TD>NICT-JK-001</TD><TD>MANEESH PANDA</TD><TD>10-04-
2014</TD><TD>PGDCA</TD>
</TR>
<TR>
<TD>02</TD><TD>NICT-JK-002</TD><TD>SUSANT BEHERA</TD><TD>10-04-
2014</TD><TD>PGDCA</TD>
</TR>
</TABLE>
</BODY>
</HTML>
12
NICT Computers H T M L Notes
FRAMES IN HTML :
(Introduction to Frames)
The layout of the Web pages can be made flexible by using frame, which allows the visible client area to
be divided into more than one sub region. Each frame or sub region has the following properties.
Frames allow the user to create the Web pages in a different manner from the usual way. Information
such as messages, title graphics and table of contents that the page designer wants to keep constant
and always visible can be stored on a separate frames.
Frames are generated by:
FRAME documents
FRAMESET tag
FRAME tag
FRAME document: The basic structure of a FRAME document resembles the HTML document, except
that the <BODY> container is replaced by a <FRAMESET> container that describes the sub HTML
documents, or frames, that make up the page.
Syntax:
<HTML>
<HEAD>
<TITLE>
………….
</TITLE>
</HEAD>
<FRAMESET>
.
.
.
.
</FRAMESET>
</HTML>
FRAMESET ELEMENTS:
This is the main container for the Frame. It contains the following tags:
1. ROWS: It is the attribute, which takes a comma separated list of values. These values can be
either pixel values or percentage values between 1 and 100. The value * is used for get the
remaining value.
Syntax:
ROWS = “row_height_value_list”
Example:
<FRAMESET ROWS=”25%,150,*”>
2. COLS: It is the attribute, which takes a comma separated list of values. These values can be
either pixel values or percentage values between 1 and 100. The value * is used for get the
remaining value.
Syntax:
13
NICT Computers H T M L Notes
COLS= “COL_height_value_list”
Example:
<FRAMESET COLS=”25%,150,*”>
FRAME ELEMENT:
This element defines a single frame in a <FRAMESET>. The FRAME tag is not a container
element so it has no matching end tag. It has the following attribute:
SRC =URL
The SRC attribute takes as its value the URL of the document to be displayed in the frame.
FRAMES without SRC displayed as a blank space, the size the frame would have been.
NAME = “Window_name”
The name attribute is used to assign the name to a frame.
SCROLLING =”YES/NO/AUTO”
This attribute describes if the frame should have a scroll bar or not.
NORESIZE:
This attribute has no value. It is just a flag that informs the user that the frame is not resizable.
Complete example of Frame:
<HTML>
<HEAD>
<TITLE> FRAME PROGRAME </TITLE>
</HEAD>
<FRAMESET ROWS=”20%,50%,*”>
<FRAME SCROLLING = “YES” NAME =”ABC” NORESIZE SRC =”[Link]”>
<FRAMESET COLS =”50%,*”>
<FRAME SCROLLING = “YES” NAME =”XYZ” NORESIZE SRC =”[Link]”>
<FRAME SCROLLING = “YES” NAME =”MNO” NORESIZE SRC =”[Link]”>
</FRAMESET>
<FRAME SCROLLING = “YES” NAME =”XYZ” NORESIZE SRC =”[Link]”>
<FRAME SCROLLING = “YES” NAME =”MNO” NORESIZE SRC =”[Link]”>
</FRAMESET>
</HTML>
14