HTML Introduction
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords 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
Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page:
HTML basic Syntax
<html>
<head>
<title>webpage</title>
</head>
<body>
</body>
</html>
An HTML element starts with a start tag / opening
tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start
and the end tag
Some HTML elements have empty content
Save the file as filename.html
The <html> element defines the whole HTML document.
The <body> element defines the body of the HTML document
The <title> element names the webpage.
The <p> element:
<p>This is my first paragraph</p>
The <p> element defines a paragraph in the HTML document
The element has a start tag <p> and an end tag </p>
The element content is: This is my first paragraph
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This
is
is
is
is
is
is
a
a
a
a
a
a
heading</h1>
heading</h2>
heading</h3>
heading</h4>
heading</h5>
heading</h6>
Use HTML headings for headings only. Don't use headings to make text BIG or
bold.
Text Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags.
<b>Welcome</b> --- Defines bold text. (Welcome)
<i>Welcome</i>--- Defines italic text.( Welcome)
<big>Welcome</big>--- Defines big text.(
Welcome)
<small>Welcome</small>--- Defines small text.(Welcome)
<strong> Welcome</strong>--- Defines strong text. (Instead of <b>)
<sub> Welcome </sub>--- Defines subscripted text.(Welcome)
<sup> Welcome </sup>--- Defines superscripted text.(Welcome)
<strike>Welcome</strike>-- Defines strike through text.(Welcome)
<u>Welcome</u>---Defines under lined text. (Welcome)
<em>Welcome </em>--- Defines emphasized text. (Instead of <i>)
Anchor Tag
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
<a href=url >Link to another document </a>
The href attribute defines the link "address".
<a href="http://www.google.com/">Visit Google Webpage!</a>
<a> element defines a link to google.com
Image Tag
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no
closing tag.
The syntax of defining an image:
<img src=url >
Example: <img src=deitel.gif>
The url points to the location where the image is stored. And src is the must
attribute.
<img src=url height= width= alt=Message>
The height & width attributes are used to set the height & width of the image. And
alt attribute is used to display message when the mouse pointer is placed on the
image.
Image as Anchor
In HTML , both text and images can act as anchors to link to other pages.
The syntax is:
<a href=url>
<img src=url
height= width= alt=Message >
Example:
<a href="http://www.google.com/">
<img src=deitel.gif height=50 width=50 ></a>
Formatting Text
<font> is the element used to format the text
<font> tag has the following attributes
color to change the font color of text
<font color=blue>Welcome</font>
size to change the font size of text
to increase size of text size= +1
<font size=+2> Welcome</font>
to decrease size of text size= -1
<font size=-2> Welcome</font>
face to change the font type
<font face=Times new roman> Welcome</font>
HTML LISTS
Html supports 2 types of lists
Ordered List
Unordered List
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.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<ol> tag has one attribute i.e.,
type - used to change the sequence type
ex:-
type=1
type=A
type=a
type=i
type=I
<ol type=I>
type attribute in <li> tag also.
We can insert
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.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul> tag has one attribute i.e.,
type - used to change the bullet type
ex:-
type=circle
type=square
type=disc
<ul type=circle>
<li> tag also
We can insert type attribute in
Nested List
List with in another List
<ul>
<li>Coffee</li>
<ol>
<li> Instant Coffee </li>
<li> Filter Cofee </li>
<li>Tea</li>
</ol>
<li> Green Tea </li>
<li> Lemon Tea </li>
</ul>
