HTML.pdf

HTML stands for Hyper Text Markup Language.
which is the most widely used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a
major version of HTML and it was published in late 1999. Though HTML 4.01
version is widely used but currently we are having HTML-5 version which is
an extension to HTML 4.01, and this version was published in 2012.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactiv
and dynamic. It can turn text into images, tables, links, etc.

some of the key advantages of learning HTML:
•Create Web site - You can create a website or customize an existing web
template if you know HTML well.
•Become a web designer - If you want to start a carrer as a professional
web designer, HTML and CSS designing is a must skill.
•Understand web - If you want to optimize your website, to boost its speed
and performance, it is good to know HTML to yield best results.
•Learn other languages - Once you understands the basic of HTML then
other related technologies like javascript, php, or angular are become
easier to understand.
HTML is being widely used to format web pages with the help of different tags available in
HTML language

HTML text Editors
•An HTML file is a text file, so to create an HTML file we can use any text editors.
•Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.
•There are various types of text editors available which you can directly download,
but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
•After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.

HTML code with Notepad. (Recommended for Beginners)
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of
Windows, from where you easily access it.
Step 1: Open Notepad (Windows)

Step 3: Save the HTML file with .htm or .html extension.
Open the HTML page in your web browser.
To run the HTML page, you need to open the file location, where you have saved the file and then
either double-click on file or click on open with option

Building blocks of HTML
An HTML document consist of its basic building blocks which are:
•Tags: Tags are the commands used in HTML. They are enclosed between angle brackets
< and >. There are two types of tags. They are container tag and empty tag: Most of the tags
coming in HTML appear in pair. That means there will opening tag and closing tag. They are
called container tags. Some other tags necu only opening tag, they are called empty tags
Eg: <HTML>………</HTML> -container tag
<BR> - Empty tag
•Attribute: An attribute in HTML provides extra information about the element, and
it is applied within the start tag. An HTML attribute contains two fields: name &
value.
Syntax
Name -- The property we want to set.
Value - The value we set to the property name

HTML Elements
A pair of tags and the content enclosed between these tags are known as
an element

Structure Tags
Some basic tags are used primarily to give structure to HTML documents. Such
tags are called structure tags. They include:
<HTML>.......... </HTML>
<HEAD>.......... </HEAD>
<TITLE>......... </TITLE>
<BODY>.......... </BODY>
<HTML> tag
Is the first tag in an HTML document and the </HTML>is last tag. Everything else in the
document is in between these two tags."
The Head section and Body section lies inside the <HTML> and </HTML> tags. *** tag
pair.
Attributes of <HTML> tag
dir - it specifies direction of the text displayed on a Web page. It can take values ltr
(left-to-right) or rtl (right-to-left).
Lang -It specifies the language we use within the webpage.

<HEAD>
It contains the head of an HTML document, which holds information about
the document such as its title, scripts used, style, definitions, etc. It is also a
container tag pair.
<TITLE>
• It contains the title of the HTML document, which will appear in the web
browsers title bar.
• The tag pairs <TITLE> and </TITLE> is used inside the tag pair <HEAD> and
</HEAD>.
•provides a title for the page when it is added to favorites
•displays a title for the page in search engine-results

<BODY>
The body tag pair <BODY> and </BODY> specifies the document body section. The
body section contains the content displayed in the browser window, Hence. all other tags,
which define the document content, are given in the body section
Attributes of <BODY> tag
attributes of <BODY> tag include:
background: sets an image as background for the document.
bgcolor: This attribute sets background colour for the document body body .
Text : It specfies the colour of the text content of the page. Its default text value is Black

Specifying colors in HTML
 Specifying color In HTML we may come across many situations where we need to
specify colour of the web pages. We can give colour in two ways.
 Color_name: Specifies the background colour with a colour name(like "red").
 • Hex_number: Specifies the background colour with a hexadecimal code
 with a preceding hash sign (like "#ff6080", "#303030" etc.). Figure 3.3 shows few
colours with their name and Hex values.

Example 1
<HTML>
<HEAD>
<TITLE>Simple page</TITLE>
</HEAD>
<BODY BACKGROUND="D:HTMLBACK.JPG" Bgcolor="#AA9768"
Text= "RED">
Welcome to HTML
</BODY>
</HTML>

Commonly used Tags
We have discussed the structure tags and their important attributes. There are tags,
which are used to format text contents in the body section. They are called as formatting
tags. Now let us see some of them.
Heading Tags (<H1> to <H6>)
A document generally contains different types of heading. Headings are typically
displayed in larger and or bolder fonts than normal body texts. HTML has six levels of
headings. Heading tags available in HTML are: <H1>,<H2>,<H3> <H4>, <H5>, and <H6>.
Here <H1> creates the biggest text and <H6> the smallest.
<P> Tag -Paragraph
The <P> tag helps to create paragraphs. The content of the paragraph should be
enclosed between <P> tag and </P> tag. The align attribute sets alignment of the text in
paragraph. It takes left, right, center, or justify as value. of the text in the paragraph. It
takes left, right, center, or justify as values
<BR> Tag –line break
To create a line break within a block of text, <BR> tag is used It s an empty tag.
.

<S> and <STRIKE> Tags
The <S> and <STRIKE> tags displays the text in strike through
style.
<CENTER> Tag
This tag is used to align the content at centre. The content can
be text, image, table, etc.
<SUB> and <SUP> tag
The <SUB> tag is used to create subscripts in a webpage.
Simillarly the super scripts can be represented by the tag
<SUP>
<B>, <I> and <U> tags
The <B> tag sets the enclosed text into to bold face.
The <I> tag displays the contents enclosed in italics.
The <U> tag used to underline a text in HTML. All these tags
are container tags.

Here is a sample webpage using above discussed tags. Example 2:
<HTML>
<HEAD>
<TITLE>Simple page</TITLE></HEAD>
<BODY bgcolor="#F08FF1" Text= "black">
<H3>SAMPLE HTML WEBPAGE</H3>
<B>It is bold face</B>
<BR> <I> It is in italics</I>
<BR> <U>It is underlined</U>
<BR>
<CENTER> It is given in centre </CENTER>
<p>Do you know! Approximate speed of light is 1.08X 10 <SUP>9</SUP> per Hour.</p>
<BR> <p>Chemical formula of water is H<SUB>2</SUB>O. </p>
</BODY>
</HTML>

<FONT> Tag
The <FONT> tag allows us to change the size, style and colour of the text enclosed
within <FONT> and </FONT> tags. It is generally used for changing the appearance of a
short segments of the documents.
The attributes of <FONT> tag
Color: Sets the text colour.
Face: Specifies the font face.
Size: Specifies the font size whose values range from 1 to 7
Inserting Comments
We can insert comments in the source code. They will not display in the browser
window. Comments help in improving readability of the program.
In HTML comments are placed in between  tags.
Any text given between  will be ignored by the browser.
Eg: <!-This is just comment, not to display -->

<html>
<head>
<title>Font Tag</title>
</head>
<body>
<h2>Example of font tag</h2>
<p>This is normal text without any font styling</p>
<p>
<font color="blue">Text with normal size and default face</font>
</p>
<p>
<font size="5" color="green">Text with Increased size and default face</font>
</p>
<p>
<font color="red" face="cursive">Text with Changed face</font>
</p>
</body>
</html>

List in HTML
 Lists are used to group related pieces of information together.
 There are three kinds of lists in HTML.
 They are:
 1. Ordered lists.
 2. Unordered lists.
 3. Definition lists.
 1. Ordered Lists Ordered lists are used to present the items in some numerical or
alphabetical order. An example is, listing top goal scorers in a tournament. We use the tag
pair <OL> and </OL> to create ordered list.
 The list items in the ordered list are obtained by adding <LI> tag within <OL>. The
ordered list is also called numbered list.

Attributes of <OL> Tag
Type
We can customize the numbering system used in ordered lists by using the Type attribute.
Type can have following values:
• 1 - Default numbering scheme (1, 2, 3, ...)
• A - Upper case letters (A, B, C, ...)
• a - Lowercase letters (a, b, c, ...)
• I - Large roman numerals (I, II, III, ...) A
• i - Small roman numerals (i, ii, iii, ...)
Start
We need not start listing from the beginning. We can start numbering from any arbitrary
value. Start attribute is used to set the start value. Eg: To start numbering from 3, we can
use <OL Start = 3>,

Example 3
<HTML>
<HEAD>
<TITLE> Ordered List
</TITLE>
</HEAD>
<BODY Bgcolor="#BE9C9C">
<H4> List of top 5 Indian states </ H4>
<OL Type = "1" Start = "1">
<LI> Kerala
<LI> Punjab
<LI> Maharashtra
<LI> Himachal Pradesh
<LI> Haryana
</OL>
</BODY>
</HTML>

• Unordered lists, or bulleted lists, are used when a set of items can be
placed any order.
• An example is a shopping list.
• We can create Unordered lists with the tag pair <UL> and </UL>.
• Each item in the list is given using <LI> tag.
• <UL> element <UL> has type attribute. It can take three values:
disc(Default value),square and circle , which set the type of bullet that
appears before each list item.
Unordered Lists

Example 4
<HTML>
<HEAD>
<TITLE> Unordered List</TITLE>
</HEAD>
<BODY Bgcolor=“black“ text=“white”>
<centre> <H4> List of permanent members of United Nations Security Council </H4>
<UL Type = “disc " > .
<LI> United States
<LI> Russia
<LI> United Kingdom
<LI> France
<LI> China
</UL>
</center>
</BODY>
</HTML>

Definition Lists
There is another type of listing called definition list.
Definition lists helps in grouping terms and its definitions into a single list.
The important tags used in definition lists are
<DL>,<DT> and <DD>,
<DL>: It holds the list definitions.
<DT> : It defines a term in the list.
<DD>: It gives a definition for a term.

<HTML>
<HEAD>
<TITLE> Ordered List
</TITLE>
</HEAD>
<BODY Bgcolor="YELLOW">
<H4> List of top 5 Indian states </ H4>
<DL>
<DT> kERALA
<DD> SOUTHERS STATE
<DT> MAHARASTHRA
<DD> EASTERN COSTAL STATE
<DT>DELHI
<DD>CAPITAL TERRITORY
</DL>
</BODY>
</HTML>

Inserting Image-IMG tag
 The tag <IMG> provides us to insert images into our HTML pages.
 The following is the simple way of using this tag
 The <IMG> tag is an empty tag.
 <IMG> tag has many attributes.
 Src is the main attribute of <IMG> tag and this specifies the URL of
the image to be inserted.
 Height attribute specifies the height of the image and
 width attribute specifies the width of the image. Both are given in
pixels. Here is an example.
 <IMG Src = "D:dcapicture1.png" Height = "20" Width = "40">

Example
<HTML>
<HEAD>
<TITLE> IMG Tag </TITLE>
</HEAD>
<BODY>
<h2>Demonstration of IMG tab<h2>
<img src="D:dcapicture1.png" Height = "400" Width = "800">
</BODY>
</HTML>

Creating Link-the A tag
❖ HTML provide the ability to hyperlink text, image etc. to another document or section
of a document.
❖ Hyperlink is often referred as links.
❖ In HTML, the <A> tag is used for hyperlinks. This tag is called Anchor tag and anything
between the tag pair <A> and </A> becomes the part of the link where user can
click to reach the linked document.
❖ The main attribute of <A> tag is href. It stands for hyper reference.
❖ The href specifies the link's destination. Let us see an example.

<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY Bgcolor="Linen" text ="Sienna">
<CENTER>
<p><b> This is DCA Batch 7 home page </b></p>
<A HREF="http://scolekerala.org/2019-21/dca/">Home page of official DCA website</A>
</CENTER>
</BODY>
</HTML>

Design a web page to show image as link (include two different links)
Main Page

Creating tables
A table is a structured element that consists of rows and
columns of cells.
AN HTML table allow us to arrange data such as
text,images,links ..into rows and columns
The HTML tables are created using the <TABLE> TAG in
which <TR> tag <TD> tag are used to create rows and
cells respectively.
 Various tags used in creating a table are given below

<TABLE> Tag
In HTML <TABLE> tag is used to create a table.
It is a container the whole content of table should be enclosed within the tag pair <TABLE>,</TABLE>.
Attributes of <TABLE> Tag
<TABLE> tag has many attributes. Some of the in below.
1. Border: it specifies the thickness of the border around the table. It IS specified in pixels
2. Bordercolor: It assigns border colour to the table.
3.Bgcolor: It specifies the background colour of the table. S
4. Background: It allows to set an image as background of the table.
5.Align: It determine the position of table inside the browser window. The possible values are left
(default), right or center.
6. Cellspacing: It determines the space to be left between cells. The value is
given in pixels.
7. Cellpadding: It specifies the space in between the cell border and cell content. The value is given
in pixels.
8. Width: The width attribute specifies the width of a table, It is given in number of pixels or in
percentage of window size.

TR TAG-(RAW IN TABLE)
Inside <TABLE> tag each rows are created using <TR> tag.
It is a container tag. The whole row is enclosed within the tag pair <TR> and </TR>
.ach row is made up of cells. A cell is the smallest component of a table.
There are two types of cells. They are heading cells and data cells.
The data cell describe the data title of followed.
Data cells are ordinary cells containing data.
<TH> Tag –Heading in a RAW cell
• <TH>tag is used to define heading cells.
• It is a container tag. The heading cells <TH> tag is used to define heading cells. It is a containe
Tag .
• Heading cells are displayed in bold face and in centered form
• <TH> tag always comes inside the <TR> tag.
<TD> Tag –Data in a raw cell
<TD> tag is similar to <TH> tag.
It is a container tag used to display data cells.
The data are given between <TD> and </TD> tags.
Similar to <TH> tag <TD> tag is also placed within the<TR> tag

<TR> attributes
The characteristics of a row can be changed using the attributes of
<TR> tag.
1. Align: It specifies the horizontal alignment of the cell text in that
particular
row. This can take value left, right or center. The default is left for data
and
center for headings.
2. Valign: Specifies the vertical alignment of the cell content of any row.
The
available values are top, middle, bottom and baseline.
3. Bgcolor: It sets background colour to a particular row. This can be
used to highlight a row

Attributes of <TH > and <TD>
Tags Most of the attributes are common for <TH> and <TD> as both these tags are
used for creating table cells.
Let us discuss some of the main attributes.
1. Align: It specifies the horizontal alignment of the content within the cell. It
can take the values left, right or center. The default align value is center for
<TH> and left for<TD>.
2. Valign: Valign specifies the vertical alignment of the content within the
cells. It can take value top, bottom, middle or baseline.
3. Bgcolor: We can set background colour for any cell using this attribute.
4.Colspan: Usually a cell spans over a single column but sometimes we may need
columns occupying more than one cell. Colspan value defines the number of column
occupied by that particular cell.
5. Rowspan : Rowspan attribute specifies the number of rows to be spanned
by the cell.

<HTML>
<HEAD> <TITLE> Table</TITLE> </HEAD>
<BODY Bgcolor="#E9E9E9">
<TABLE Border= "2" cellspacing= "2" cellpadding=“4”
bgcolor="Ivory" width="75%">
<TR>
<TH rowspan= "2"> Class </TH>
<TH colspan="2"> Students </TH>
</TR>
<TR>
<TH > Boys</TH>
<TH> Girls</TH>
</TR>
<TR>
<TH> Plus One </TH>
<TD> 28 </TD>
<TD> 32 </TD>
</TR>
<TR>
<TH> Plus Two </TH>
<TD> 30 </TD>
<TD> 29 </TD>
</TR>
<TR>
<TH> SSLC </TH>
<TD> 21 </TD>
<TD> 19 </TD>
</TR>
</TABLE>
</BODY>

Design a web page to show the product details of a computer, printer and scanner with images

Frameset
• Frameset helps in partitioning the browser window into different
sections.
• So, we can accommodate more than one webpage in a
browser window.
• Here each section accommodates different html pages.
• Each individual section created by frameset is called a frame.
• To create a FRAMESET page we need <FRAMESET> and <FRAME>
tags.

<FRAMESET> tag
The <FRAMESET> tag is used to partition the window into different frame
sections.
The frames are defined within <FRAMESET> and </FRAMESET> tag.
The main attributes are:
Cols: It determines the number of vertical frames in the frameset page and
its dimensions. The column width can be given either in per
centage of total width or in number of pixels.
Rows: Similar to Cols, Rows attribute defines the number and dimension of
horizontal frames.
Border: It sets the thickness of border. Here the value is given in pixels.
Bordercolor: It sets the border colour of the frame.

<FRAME> tag
For each division inside the <FRAMESET> tag, there, <FRAME> tag.
<FRAME> tag is an empty tag.
This tag always comes with src attribute.
Src attribute specify the page(any file like html) to be loaded in the frame.
Main attribute of <frame> tag
src:
It specifies the URL of the document to be loaded in the frame.
marginwidth and marginheight: we can set horizontal and vertical
margins to the frame by using marginwidth and marginheight,
respectively. The values are given in pixels.
Name : It gives a name for the frame.

<HTML>
<HEAD> <TITLE> A simple Frameset</TITLE> </HEAD>
<FRAMESET Cols = "40%,60%">
<FRAME Src= "table.html">
<FRAME Src="second%20page.html">
</FRAMESET>
</HTML>

Form in HLTML
• Sometimes we need to collect user input for some sort of processing.
• We use HTML forms to collect data from the webpage viewer.
• For example when we want to login into a site site asks our username and
password for verifying the user. It is a simple implementation of HTML form.
• A form will send the collected data to a back-end application such as
Common Gateway Interface (CGI), Active Server Pages (ASP), PHP, etc.
for processing.
• A <FORM> may contain many controls like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.

<FORM> Tag
A <FORM> tag provides a container for creating a form. An HTML form
starts with <FORM> and ends with </FORM> tag.
Attributes of <FORM>
Some important form attributes are:
Action: It specifies the URL of the form handler, which is ready to process
the received data.
Method: the method used to upload data. The most frequently used
method are GET and POST. The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction (with method="post")to
the URL specified by action attribute

form controls
• There are different ypes of form controls that we can use to
collect data using HTML
• We can create most of these controls in HTML by using
<INPUT> tag.
<INPUT> Tag
<The <INPUT> tag is an empty tag, that can be used to make
different types of controls such as Textbox, Radio Button,
Submit Button etc. The type attribute determines the type of
controls created by this tag.

Name: It is used to give a name to the input control. The
data value is passed to the server along with the name of
the control.
Value: It is used to set the default value inside the control.
Size :This attribute sets the width of the text input control in
terms of characters. It is applicable only to input type text
and password.
Maxlength: Maxlength limits the number of characters user
can type into the field. It is also applicable only to text and
password.

<HEAD>
<TITLE> Login</TITLE>
</HEAD>
<BODY Bgcolor= "#FFFOCO">
<FORM Action= " login.php" Method="post">
<P>
Name:       
<INPUT Type="text" Name= "Username" size=" "25" />
</P>
<P> Password: <INPUT type="password" name= "Psswd" size="30" Maxlength="25" />
</P>
<BR>
                   
<INPUT Type= "reset" value= "Clear">
<INPUT Type= "submit" value= "Send">
</FORM>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Examination Registration</TITLE></HEAD>
<BODY Bgcolor="#9FEDEB">
<FORM>
<BR>
Enter Register No:<INPUT Type="Text" Name="Exam" >
<BR>
<BR>
Select your course:
<INPUT Type="radio" Name="course" value="DCA"> DCA
<INPUT Type="radio" Name="course" value="PGDCA"> PGDCA
<BR>
<BR> Select Paper for Examination:
<INPUT Type= "checkbox" Name= "Exam" value="Paper1" >
Paper1
<INPUT Type= "checkbox" Name= "Exam" value= "Paper2" >
Paper2 <INPUT Type= "checkbox" Name= "Exam" value= "Paper3" >
Paper3
<INPUT Type= "checkbox" Name= "Exam" value= "Paper4" > Paper4
<INPUT Type= "checkbox" Name= "Exam" Value: "Paper5”
paper5
</FORM>
</BODY>
</HTML>

<TEXTAREA> tag
<INPUT Type = "text" > can be used for single line entry.
If we want to enter multiple lines in a form <TEXTAREA> tag can be used.
Container tag pair <TEXTAREA> and </TEXTAREA> creates a text area control.
Data which needs multiline space such as address can be accepted using <TEXTAREA> tag.
The main attributes of <TEXTAREA> tag are
Name: Name is used to give a name to the control.
Rows: It specifies the number of rows in a textarea control.
Cols: Cols Indicates the number of columns of textarea, i.e., number of char
acters in a line. Any text we include between tag pair <TEXTAREA> and </TEXTAREA> appears
as the default text when we enter data in the box, it overrides default text.

<HTML>
<HEAD>
<TITLE>School Address</TITLE>
</HEAD>
<BODY>
<FORM >
<TEXTAREA Name= "School” rows= "10" ols="30" >
Enter your School address,
</TEXTAREA>
</FORM>
</BODY>
</HTML>

<Select> tag
A select box, or drop down box, provides a list of various options in
the form of a drop down list, from where a user can select one or
more options.
It is helpful when multiple options are to be given a limited space.
<SELECT> and <OPTION> are the main tags needed
to create a select box.
The container tag pair <SELECT> and </SELECT> encloses a select
box.
The main attributes of <SELECT> tag are:
Name: It gives a name to the control.
Size: This can be used to present a scrolling list box.
Multiple: It allows users to select multiple items
from the menu.

Option tag
<OPTION> tag is an empty tag placed inside the container tags
<SELECT> and </SELECT>.
It lists out the options provided in the select box.
The main attributes are;
Selected: The selected attribute is used to indicate default selection.
value: The value attribute is used here to allow the submission of a value that
differs from the content of the <OPTION> tag. If it is not present, then the
content is used as the value.

<HTML>
<HEAD>
<TITLE>select the state </TITLE
</HEAD>
<BODY Bgcolor="#D15B5B">
<FORM>
<select name="state">
<option value="kerla" selected>Kerala</option>
<option value="TN">Tamil Nadu</option>
<option value="MH">mAHARASHTRA</option>
<option value="dEL">dELHI</option>
<OPTION> PUNJAB</OPTION>
</select>
</FORM>
</BODY>
</HTML>

HTML.pdf

More Related Content

What's hot

Similar to HTML.pdf

More from aneebkmct

Recently uploaded

HTML.pdf