Basic HTML Elements
Basic HTML Elements
Basic HTML Elements
HTML Tags
HTML markup tags are usually called HTML tags
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
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>
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.
Welcome)
Anchor Tag
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
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
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.
<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).
<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
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>