23
By: Mr. Anoop Kumar Tiwari HYPER TEXT MARKUP LANGUAGE
By: Mr. Anoop Kumar Tiwari
HYPER TEXT MARKUP LANGUAGE
<html><head><title>Index</title></head>
<body> Here type your information or document that you want to look on the Web page.
</body></html>
Structure of HTML-
<b> Hyper Text Markup Language </b>
Hyper Text Markup Language
Use of Bold (<B>) Tag.
<i> Hyper Text Markup Language </i>
Hyper Text Markup Language
Use of Italic (<I>) Tag.
<u> Hyper Text Markup Language </u>
Hyper Text Markup Language
USE OF UNDERLINE (<U>) TAG.
<Body bgcolor=“red”>
This is the background color of the WEB PAGE….
To give background colour
<body background=“C:\Documents and Settings\Documents\My Pictures\Sunset.jpg”>
We are able to type upon this picture.
To add a picture in the background of the Web Page.
<Body text=“blue”>
Hyper Text Markup Language
BEFORE : Hyper Text Markup Language
AFTER: Hyper Text Markup Language
To give the default colour to thetext in the WEB Page.
<font color=“green”>
As: Hyper Text <font color=“green”>Markup Language.Hyper Text Markup Language
Note: Here default colour of the text is BLUE as we had done before.
To change the font colour-
<font face=“Arial”> This is in Arial Font</font>
This is in Arial Font.
To change the type of any FONT:
<font size=“10”>This is in size 10</font>
Before: This is in normal form.
After: This is in size 10.
TO CHANGE THE SIZE OF THE TEXT-
Can we use all the attributes in a tag?Ans: Yes.
<font color=yellow face=Arial size=10>
All the attributes had used in a tag like this….
<hr> is used to draw a simple line.
<hr noshade> is used to draw a solid line.
To draw a line on the Web Page-
<hr color=“red”>
<hr size=“5”>
<hr color=red size=5>
To change the size & color of <hr>-
<hr width=“200”>
Where as <hr> will show a complete line-
We can use all the attributes of <hr> tag as-<hr size=10 color=red width=200 noshade>
To change the width of <HR>..
There are 6 Levels of headings by default-<h1> HTML</h1>
<h2> HTML</h2>
<h3> HTML</h3>
<h4> HTML</h4>
<h5> HTML</h5>
<h6> HTML</h6>
HTMLHTMLHTML
HTML
HTML
HTML
WE CAN ALSO ADD HEADINGS IN WEB PAGES-
Use of Subscript & Superscript-
IN H2O ‘2’ IS IN SUBSCRIPT FORM, WE SHALL USE <SUB> TAG
We shall write H2O like this:
IN A2 ‘2’ IS IN SUPERSCRIPT FORM, WE WILL USE <SUP> TAG. We shall write A2 like
this:H<sub>2</sub>O
A<sup>2</sup>
ORDERED LISTIt shows an order of sequence.Order List may be in following kinds-1, 2, 3, 4, 5, …………A, B, C, D, E, ……….a, b, c, d, e, ………..I, II, III, IV, V, ……….i, ii, iii, iv, v, ………..
UNORDERED LISTIt does not show any order of sequence.Order List may be in following kinds-Disc ( )Circle ( )Square( )
There is two types of lists in HTML:
We can create lists in HTMl-
Another list in the list
Coding Output<html><head><title>Nested List</title>
<head><body>
<ol>Tags<li>Physical Tags</li> <ul><li>Bold</li>
<li>Italic</li></ul> <li>Logical Tag</li> <ul><li>Emphasis</li> <li>Strong</li></ul></ol>
</body></html>
1. Physical Tag • Bold • Italic
2. Logical Tag• Emphasis• Strong
Nested List:
CODEs in HTML<table>
<tr><td>Name</td><td>Class</td>
</tr><table>
OUTPUT
Name Class
TABLE IN HTML
• TR For creating a new row in the table
• TD For creating a new cell in the row of the table
• TH For creating a Heading in the row of the table
USE OF <TR>,<TD>&<TH>
Use of Border AttributeHTML CODE
<table border><tr><th>Name</th><th>Class</th><th>Address</th></tr><tr><td>Aditya</td><td>10</td><td>Sikandrabad</td></tr><table>
OUTPUT
Name Class Address
Aditya 10 Sikandrabad
<table height=“50%” width=“50%” border><tr> <td> Name</td><td>Class</td><td>Address
</td> </tr><tr> <td> Aditya</td><td>10</td><td> Sikandrabad
</td> </tr><tr> <td> Akash</td><td>10</td><td> Khurja </td>
</tr><tr> <td> Ajay</td><td>10</td>Ghaziabad </td>
</tr></table>
Use of “WIDTH” and HEIGHT” Attribute
