HTML Tutorial For Beginners
What is HTML?
Hyper Text Markup Language (HTML) is a language which runs on a computer that has a Web browser installed in it. It has a collection of styles (indicated by tags) that define the various components of a World Wide Web document.
An HTML document can be PC, Macintosh or Unix operated machine.
HTML was invented for the Internet by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics (CERN) in Geneva.
HTML document are created as plain-text (ASCII) files using any text editor (e.g., Emacs or vi on UNIX machines; Edit on a Macintosh; Notepad on a Windows machine).
HTML files have an .html or .htm extension.
An HTML document can be PC, Macintosh or Unix operated machine.
HTML was invented for the Internet by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics (CERN) in Geneva.
HTML document are created as plain-text (ASCII) files using any text editor (e.g., Emacs or vi on UNIX machines; Edit on a Macintosh; Notepad on a Windows machine).
HTML files have an .html or .htm extension.
What is an Element?
The source code of a web page is constructed using a series of standardized keywords and abbreviations known as HTML. Each keyword or abbreviation in HTML is known as an "Element" and each element is enclosed in angle brackets like this < > This 'angle brackets and HTML element' assembly is known as "Tag".
All HTML elements have at least an opening or start tag and a majority of them also have an end or closing tag.
HTML document has four main tags
- <HTML>
- <HEAD>
- <TITLE>
- <BODY>
Different types of Tags:
Container tag: Tag that include both an opening and a closing tag is called a Container tag. e.g.: <body> </body>
Empty tag: Tag do not have a closing tag or an end tag such as <br> or <hr> is called Empty tag.
Simple tag: A tag, which contains a text or objects, and no other tags within it, is called a Simple tag.
Nested tag: Tags within another tag are called nested tags. It is to be remembered that the tag opened last should be closed first.
A simple HTML document 1
<html>
<head>
<title> HTML Example</title>
</head>
<body>
Welcome to the world of HTML.
This is an example web page.
This is an example web page.
</body>
</html>
BR tag in HTML
<br> tag is used to break the line.Example of br tag
<html>
<head>
<title> HTML Example</title>
</head>
<body>
Welcome to the world of HTML.<br>
This is an example web page.
This is an example web page.
</body>
</html>
Heading Tag And Subheading Tag
<H1> .................................</H1>
<H2> .................................</H2>
<H3> .................................</H3>
<H4> .................................</H4>
<H5> .................................</H5>
<H6> .................................</H6>
Example of heading tag in HTML
<html>
<head>
<title> HTML Example</title>
</head>
<body>
<h1>My Home page</h1>
<h2 align="right">My Home page</h2>
<h3 align="left">My Home page</h3>
<h4 align="center">My Home page</h4>
<h5>My Home page</h5>
<h6>My Home page</h6>
<h2 align="right">My Home page</h2>
<h3 align="left">My Home page</h3>
<h4 align="center">My Home page</h4>
<h5>My Home page</h5>
<h6>My Home page</h6>
Welcome to the world of HTML.
</body>
</html>
Paragraph Tag And Its Attributes in HTML
<P>............................</P><p align="right">.......................................</p>
<p align="left">.......................................</p>
<p align="center">.......................................</p>
Example of paragraph tag in HTML
<html>
<head>
<title> HTML Example</title>
</head>
<body>
<h1>My Home page</h1>
<p>Welcome to the world of HTML.</p>
<p align="right">Welcome to the world of HTML.</p>
<p align="left">Welcome to the world of HTML.</p>
<p align="center">HTML is very easy to learn. This is the first paragraph.</p>
</body>
</html>
Center Tag in HTML
<center>................................</center>Example of center tag in HTML
<html>
<head>
<title>Center</title>
</head>
<body>
<center><h1> Hello World</h1></center>
</body>
</html>
Body Tag And Its Attributes
Some elements may include one or more attributes which is additional information that is included inside the start tag.
Ex: The attributes for the <body> are given below.
Attribute Description
Ex: The attributes for the <body> are given below.
Attribute Description
| BGCOLOR | This command changes the default background color as per the specified color. |
| BACKGROUND | This command uses any image as the background of web page. |
| TEXT | This command changes the body text color from its default value to the color specified with this attribute. |
| LEFTMARGIN | The margin refers to the area which is left blank between the edge of the paper and the position from where yhe text starts. |
| TOPMARGIN | This attribute is used to set the top margin of the web page. |
Example of bgcolor and text in HTML
<html>
<head>
<title>Example Page</title>
</head>
<body bgcolor="skyblue" text="yellow">
<h1>My HTML Page</h1>
This is an example of HTML File.
</body>
</html>
Example of background in HTML
<html>
<head>
<title>Example Page</title>
</head>
<body background="D:\wallpaper\abc.jpg">
<h1>My HTML Page</h1>
This is an example of HTML File.
</body>
</html
Font tag and its attributes
<font size="7">...................................</font>
<font color="green">...........................</font>
<font face="Times new roman">..........</font>
<font size="7" color="green" face="times new roman">................................</font>
[Note: font size must be 1 to 7]
Example of font tag in HTML
<html>
<head>
<title>Font</font>
</head>
<body>
<font size="5"> Hello world</font><br>
<font color="pink"> Hello world</font><br>
<font face="algerian"> Hello world</font><br>
<font size="5" color="pink" face="algerian"> Hello world</font>
</body>
</html>
<head>
<title>Web page</title>
</head>
<body>
<h1>Hello India</h1>
<hr>
Hello World
<hr size="10">
Hello Jharkhand
<hr color="red">
Hello Mumbai
<hr align="right" width="10">
Hello Delhi
<hr size="10" color="blue" align="right" width="10">
</body>
</html>
HR Tag and its attributes
The hr tag (<hr>) or the horizontal rule is simply a line which can be used on web pages to divide different sections.Example of hr tag
<html><head>
<title>Web page</title>
</head>
<body>
<h1>Hello India</h1>
<hr>
Hello World
<hr size="10">
Hello Jharkhand
<hr color="red">
Hello Mumbai
<hr align="right" width="10">
Hello Delhi
<hr size="10" color="blue" align="right" width="10">
</body>
</html>
Img tag and its attributes
<img src="path of wallpaper">
<img src="path of wallpaper" alt="nature" height="200" width="300">
Example of img tag in HTML
<html>
<head>
<title>Image File</title>
</head>
<body>
<img src="D:\wallpaper\abc.jpg"><br>
<img src="D:\wallpaper\abc.jpg" alt="Nature" Height="200" width="300">
</body>
</html>
Marquee and its attributes
<marquee>..................................</marquee><marquee bgcolor="brown">.................................</marquee>
<marquee direction="right">....................................</marquee>
<marquee direction="up">....................................</marquee>
<marquee direction="down">....................................</marquee>
<marquee behavior="alternate">................................</marquee>
<marquee behavior="slide">................................</marquee>
<marquee behavior="scroll">................................</marquee>
<marquee scrollamount="20">................................</marquee>
Example of marquee tag in HTML
<html><head>
<title>My web page</title>
</head>
<body>
<marquee>Hello World</marquee>
<marquee bgcolor="brown">Hello World</marquee>
<marquee direction="right">Hello World</marquee>
<marquee behavior="alternate">Hello World</marquee>
<marquee behavior="slide">Hello World</marquee>
<marquee behavior="scroll">Hello World</marquee>
<marquee scrollamount="20">Hello World</marquee>
<marquee bgcolor="skyblue" behavior="alternate" direction="right" scrollamount="20">Hello World</marquee>
</body>
</html>
I tag (Italic), B tag (Bold) and U tag (Underline)
<i>...............................</i><b>...............................</b>
<u>................................</u>
Example of I tag, B tag and U tag in HTML
<html><head>
<title>My Web Page</title>
</head>
<body>
<i>This is my web page</i><br>
<b>This is my web page</b><br>
<u>This is my web page</u>
</body>
</html>
Small Tag and Big Tag
<small>...................................</small><big>......................................</big>
Example of small tag and big tag in HTML
<html<head>
<title>My Web Page</title>
</head>
<body>
<big>Hello India</big>
<small>Hello India</big>
</body>
</html>
Hyperlink in HTML
A hyperlink which links the web page to another file or document is called hyperlink.To create a link, Anchor tag or <a> is used along with the attribute href.
<a href="url">text</a>
Example of anchor tag (a tag)
<html><head>
<title>My web page</title>
</head>
<body>
<h1>Welcome to My Education Hub</h1>
<a href="home.html">Home</a>
<a href="profile.html">Profile</a>
<a href="service.html">Services</a>
<a href="product">Product</a>
</body>
</html>
Superscript(Sup tag) and Subscript(Sub tag) in HTML
<sup>..........</sup><sub>...........</sub>
Example of sup tag and sub tag
<html><head>
<title>My Web Page</title>
</head>
<body>
(a + b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab <br>
H<sub>2</sub>O
</body>
</html>
Ordered list(ol tag), Unordered list(ul tag) and List item(li tag)
<ol><li>.......................</li>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
</ol>
<ol type="A/a/I/i">
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
</ol>
<ol start="5">
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
</ol>
<ul>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
</ul>
<ul type="square/circle/disc">
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
<li>.......................</li>
</ul>
Example of ol tag and ul tag in HTML
<html><head>
<title>My web </title>
</head>
<body>
<ol>
<li>India</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>Bangladesh</li>
</ol>
<ol type="A">
<li>India</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>Bangladesh</li></ol>
<ol start="5">
<li>India</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>Bangladesh</li>
</ol>
<ul>
<li>India</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>Bangladesh</li>
</ul>
<ul type="square">
<li>India</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>Bangladesh</li>
</ul>
</body>
</html>
Table tag and its attributes in HTML
<tr> : - Table row<th> :- Table heading
<td> :- Table data
Example of table tag in HTML
<html><head>
<title>Data</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="blue" cellspacing="5" cellpadding="5">
<tr><th>Name</th><th>City</th><th>State</th><th>Mobile</th></tr>
<tr><td>Mohan</td><td>Bokaro</td><td>Jharkhand</td><td>123233908978</td></tr>
<tr><td>Sohan</td><td>Patna</td><td>Bihar</td><td>123733908978</td></tr>
<tr><td>Rohan</td><td>Bokaro</td><td>Jharkhand</td><td>125233908978</td></tr>
<tr><td>Rohit</td><td>Bokaro</td><td>Jharkhand</td><td>123833908978</td></tr>
</table>
</body>
</html>
Form tag in HTML
Example of form tag in HTML
<html><head>
<title>Registration form</title>
</head>
<body>
<form>
First Name : <input type="text" placeholder="First Name"><br>
Last Name : <input type="text" placeholder="Last Name"><br>
Date of Birth : <input type="date"><br>
<input type="radio">Male <input type="radio"> Female <input type="radio">Other <br>
Marital Status <input type="checkbox"><br>
Address : <textarea cols="20" rows="3"></textarea><br>
City : <input type="text" placeholder="B S City"><br>
State : <select>
<option>Select State</option>
<option>Assam</option>
<option>Andhra Pradesh</option>
<option>Arunachal Pradesh</option>
<option>Bihar</option>
<option>Jharkhand</option>
</select>
Mobile No. : <input type="text"><br>
Email Id : <input type="email"><br>
Password : <input type="password"><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Frame in HTML
Example 1 of frame in HTML
<html><head>
<title>Frame</title>
</head>
<frameset cols=""50%,*">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
Example2 of frame in HTML
<html><head>
<title>Frame</title>
</head>
<frameset rows=""50%,*">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
Example3 of frame in HTML
<html><head>
<title>Frame</title>
</head>
<frameset cols=""50%,*"rows="50%,*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
<frame src="page4.html">
</frameset>
</html>
0 comments:
Post a Comment