Introduction to HTML
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
HTML consists of a series of elements
HTML elements tell the browser how to display the
content
HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
HTML tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by
angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, with a forward
slash before the tag name
Start and end tags are also called opening tags and
closing tags
History of HTML
Structure of HTML Page
Some Important HTML Tags
HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
The DOCTYPE declaration defines the document
type
The text between <html> and </html> describes
the web page
The text between <body> and </body> is the
visible page content
The text between <h1> and </h1> is displayed as
a heading
The text between <p> and </p> is displayed as a
paragraph
What is HTML?
HTML, otherwise known as HyperText
Markup Language, is the language used to
create Web pages
Using HTML, you can create a Web page
with text, graphics, sound, and video.
Hyper means we can navigate from one
web page to another page where they need
not be linear pages.
Tags
HTML is written in the form of tags
A tag is a keyword enclosed by pair of angle
brackets ( Example: < > )
Where some text is placed between tags.
HTML elements have two basic properties
Attributes
contents
More Tags...
The opening and closing tags use the same
command except the closing tag contains
and additional forward slash /
For example, the expression <b >
Warning </b> would cause the word
Warning to appear in bold face on a Web
page.
There are some tags which has opening tag
but not closing tag, also known as Empty
HTML Elements.
Eg - <br>,<hr> i.e Break and Horizontal rule
Nested Tags
Whenever you have HTML tags within other
HTML tags, you must close the nearest tag
first
Example:
<h1> <iI> The Nation </Ii> </h1>
Structure of a Web Page
All Web pages share a <html>
<head>
common structure
<title> Example </title>
All Web pages should </head>
contain a pair of <body>
<HTML>, <HEAD>, This is where you would include
the text and images on your Web
<TITLE>, and <BODY> page.
tags. </body>
</html>
Comment Statements
Comment statements are notes in the HTML
code that explain the important features of
the code
The comments do not appear on the Web
page itself but are a useful reference to the
author of the page and other programmers
To create a comment statement use the
<!-- Write ur comment here --> tags
HTML Elements
An HTML element is defined by a start tag,
some content, and an end tag.
HTML Elements
The HTML element is everything from the
start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about
elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
For example:
The href Attribute
The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page the
link goes to:
<a href="[Link] W3Schools</a>
The <TITLE> Tag
Choose the title of your Web page carefully;
The title of a Web page determines its ranking
in certain search engines
The title will also appear on Favorite lists,
History lists, and Bookmark lists to identify
your page
Headings
Web pages are typically organized into sections
with headings; To create a heading we use the
expression
<Hn> .</Hn> where n is a number between 1
and 6
In this case, the 1 corresponds to the largest
size heading while the 6 corresponds to the
smallest size
Text Formatting
Manipulating text in HTML can be tricky;
Oftentimes, what you see is NOT what you get
For instance, special HTML tags are needed to
create paragraphs, move to the next line, and
create headings
Text Formatting Tags
<b> Bold Face </b>
<strong> This is also same like bold but shows
importance </strong>
<i> Italics </i>
<u> Underline </u>
<p> New Paragraph </p>
<br> Next Line
Example on Text Formatting Tags
<!DOCTYPE html">
<head>
<title>Example on Text Formatting Tags</title>
</head>
<body>
<p><b> Bold Face </b> <br>
<strong> this is also same like bold but shows importance </strong> </p>
<p><i>The text will appear as Italics </i> </p>
<p><u>This text will appear in Underline </u> </p>
<p> New Paragraph will be started from this tag,
we can write the paragraph as
many number of lines and sentences </p>
<br>
</body>
</html>
Other Formatting Tags
<pre>- Preformatted Text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
pre: Defines preformatted text
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-
width font, and the text preserves both spaces
and line breaks. The text will be displayed
exactly as written in the HTML source code.
<mark>- Marked text
The HTML <mark> element defines
text that should be marked or
highlighted:
Example
<p> Please come with your <mark>
Observation and Record </mark> for
your WT Lab
</p>
<small> Tag
The HTML <small> element defines smaller
text:
Example:
<h6> this will display heading is small font </h6>
<small> This will display text in very small
</small>
Note: h6 is smaller than compared with small
attribute.
<del> - Deleted Text tag
The HTML <del> element defines text that
has been deleted from a document. Browsers
will usually strike a line through deleted text:
Example:
<p>My Interested Job is <del>
Software</del> Government. </p>
<ins> - Inserted text
The HTML <ins> element defines a text
that has been inserted into a document.
Browsers will usually underline inserted text:
Example:
<p>
My Interested Job is <del>
Software</del> <ins>Government </ins>.
</p>
<sub> - Subscript text
The HTML <sub> element defines subscript
text. Subscript text appears half a character
below the normal line, and is sometimes
rendered in a smaller font. Subscript text can
be used for chemical formulas, like H2O:
Example:
<p>This is an example on
<sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines
superscript text. Superscript text appears half
a character above the normal line, and is
sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like
WW W[1]:
<p>This is an example on
<sup>superscripted</sup> text.</p>
Example on Text Formatting Tags
<!DOCTYPE html>
<head>
<title>Text Formatting tags </title>
</head>
<body>
<pre>Please come with your
Observation and Record
for your WT Lab </pre>
<p> Please come with your <mark> Observation and Record </mark> for your WT Lab
</p>
<h6> this will display heading is small font </h6>
<small> This will display text in very small </small>
<p>My Interested Job is <del> Software</del> Government. </p>
<p>
My Interested Job is <del> Software</del> <ins>Government </ins>. </p>
<p>This is an example on <sub>subscripted</sub> text.</p>
<p>This is an example on <sup>superscripted</sup> text.</p>
</body>
</html>
Tables
Tables can be used to display rows and columns
of data, create multi-column text, captions for
images, and sidebars
The <table> tag is used to create a table;
the <tr> tag defines the beginning of a row while
the <td> tag defines the beginning of a cell
<th> is used to define the table heading for a cell
<thead> is used to define the heading for the entire
table
Adding a Border
The BORDER=n attribute allows you to
add a border n pixels thick around the
table
To make a solid border color, use the
BORDERCOLOR= color attribute
Creating Simple Table
<TABLE BORDER=10> Here s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
When a Web browser displays a table, it often
adds extra space. To eliminate this space use
the WIDTH =n attribute in the <TABLE> and
<TD> tags
Keep in mind - a cell cannot be smaller than its
contents, and if you make a table wider than
the browser window, users will not be able to
see parts of it.
Centering a Table
There are two ways to center a table
Type <TABLE ALIGN=CENTER>
Enclose the <TABLE> tags in opening and closing
<CENTER> tags
Wrapping Text around a Table
It is possible to wrap text around a table. This
technique is often used to keep images and captions
together within an article.
To wrap text around a table, type <TABLE ALIGN =
LEFT> to align the table to the left while the text
flows to the right.
Create the table using the <TR>, <TD>, and </TABLE>
tags as you normally would
Adding Space around a Table
To add space around a table, use the
HSPACE=n and VSPACE=n attributes in the
<TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>
Nesting Tables
Create the inner table
Create the outer table and determine which cell of
the outer table will hold the inner table
Test both tables separately to make sure they work
Copy the inner table into the cell of the outer table
Don t nest too many tables. If you find yourself doing
that, find an easier way to lay out your Web page
Example:
Colspan and Rowspan Attributes
You will use colspan attribute if
you want to merge two or more
columns into a single column. Similar
way you will use rowspan if you want
to merge two or more rows.
Changing the Font
The expression <font face = fontname >
</font>
can be used to change the font of the enclosed
text
To change the size of text use the expression
<font size=n> . </font> where n is a number
between 1 and 7
Changing the Font
To change the color, use <font
color= red > . </font>; The color can also
be defined using hexadecimal
representation ( Example: #ffffff )
These attributes can be combined to change
the font, size, and color of the text all at once;
For example, <font size=4 face= Courier
color= red > . </font>
Aligning Text
The align attribute can be inserted in the <p>
and <hn> tags to right justify, center, or left
justify the text
For example, <h1 align=center> The New York
Times </h1> would create a centered heading
of the largest size
Page Formatting
To define the background color, use the
BGCOLOR attribute in the <BODY> tag
To define the text color, use the TEXT attribute
in the <BODY> tag
To define the size of the text, type <BASEFONT
SIZE=n>
Example
<html>
<head>
<title> First Example Program </title>
</head>
<body>
<h1 style="background-color:tomato;">
This is where you would include the text and images on your Web page.
</h1>
</body>
</html>
HTML Lists
HTML offers web authors three ways for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain
<ul> An unordered list. This will list items using
plain bullets.
<ol> An ordered list. This will use different
schemes of numbers to list your items.
<dl> A definition list. This arranges your items in
the same way as they are arranged in a
dictionary.
HTML Un-Ordered List
An unordered list is a collection of related
items that have no special order or sequence.
This list is created by using HTML <ul> tag.
Each item in the list is marked with a bullet.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>Angular</li>
</ul>
</body>
</html>
The type Attribute
You can use type attribute for <ul>
tag to specify the type of bullet you
like. By default, it is a disc. Following
are the possible options
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
HTML Ordered Lists
If you are required to put your items in a
numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one
and is incremented by one for each successive
ordered list element tagged with <li>
Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>Angular</li>
</ol>
</body>
</html>
The type Attribute
You can use type attribute for <ol>
tag to specify the type of numbering
you like. By default, it is a number.
Following are the possible options
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Html definition/description list
In order to create the definition or
description list in html,we have 3 important
tags. They are as follows:
<dl> this is root element ofdefinition list </dl>
<dt> defines the definition type or name of data
<dd> defines the data of hat definition type
Example on definition list
<dl>
<dt>Programming</dt>
<dd>C</dd>
<dd>CPP</dd>
<dd>JAVA</dd>
<dt>Designing</dt>
<dd>HTML</dd>
<dd>CSS</dd>
</dl>
HTML FORMS
HTML Forms are required when you want
to collect some data from the site visitor. For
example during user registration you would
like to collect information such as name, email
address, credit card, etc. A form will take input
from the site visitor and then will post it to a
back-end application such as database, ASP
Script or PHP script etc.
Example
Html form tag
form -create an html form,
contains form elements . form
elements .
<form>
form elements
</form>
Form elements
Form Elements are text fields, text area
fields, drop-down menus, radio buttons, check
boxes.
Sub-Element
<input> element which contains main attribute
type.
text type
Text Input
<form>
First name: <br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input
<html>
<body>
<form>
First name: <br>
br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other <br>
</form>
</body>
</html>
Other tags
<input type = checkbox >
<input type = file >
<textarea rows= 5 cols= 100 >
</textarea>
Type = Submit button attribute
<body>
<form action="[Link]">
First name:<br>
<input type="text" name="firstname > <br>
Password:<br>
<input type="password" name="pass" ><br><br>
<input type="submit" value="Submit">
</form>
File Upload Box
<body>
<form>
<input type="file" name="fileupload"/>
</form>
</body>
Html form Elements
Some of the main elements in HTML form tag is:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
label element
The <label> element defines a label for
several form elements. The for attribute of
the <label> tag should be equal to
the id attribute of the <input> element to
bind them together.
Syntax:
<label for="fname">First name:</label>
<input type="text" id="fname >
The select element
The <select> Element
The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option> element
The <option> elements defines an option that
can be selected.
By default, the first item in the drop-down list
is selected.
To define a pre-selected option, add
the selected attribute to the option:
Syntax:
<option value="fiat" selected>Fiat</option>
Allow multiple selections
Use the multiple attribute to allow the user to
select more than one value:
Syntax:
The <fieldset> and <legend> Elements
The <fieldset> element is used to group
related data in a form.
The <legend> element defines a caption for
the <fieldset> element.
Html Frames
Frame Creation
HTML Frames -Creating Frames
Divide your browser window into multiple sections where each
section can load a separate HTML document.
A collection of frames in the browser window - A frameset.
The window is divided into frames with rows and columns.
<frameset> tag instead of <body> tag
The rows attribute of <frameset> tag defines horizontal frames
cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
This <frame> tag is currently not used in HTML5, so we need to
use<iframe> instead of that.
Syntax
<html>
<frameset cols="70%,30%">
<frame src="[Link] />
<frame src="[Link] />
</frameset>
</html>
