Basic HTML

HTML INTRODUCTION
 HTML is the standard markup language for creating Web pages.

 The first version of HTML was written by Tim Berners-Lee in 1993.
Since then, there have been many different versions of HTML. The most
widely used version throughout the 2000's was HTML 4.01, which
became an official standard in December 1999.
 What is HTML?
1. HTML stands for Hyper Text Markup Language.

2. HTML is the standard markup language for creating Web pages.
3. HTML describes the structure of a Web page.
4. HTML consists of a series of elements.
5. HTML elements tell the browser how to display the content.
6. HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
 Simple HTML Document:-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 Description of the above code:-
1. The <!DOCTYPE html> declaration defines that this document is an HTML5

document:-
2. The <html> element is the root element of an HTML page.
3. The <head> element contains meta information about the HTML page.
4. The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab).
5. The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
6. The <h1> element defines a large heading.
7. The <p> element defines a paragraph.
 Bold Tag:-
It is used to bold the contents of the webpage.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>My first paragraph</b></p>
</body>
</html>
 Italic Tag:-
It is used to italic the contents of the webpage.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><i>My first paragraph</i></p>
</body>
</html>
 Underline Tag:-
It underlines the contents of the webpage.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><u>My first paragraph</u></p>
</body>
</html>
 Heading Tags:-
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is Heading 1</h1>
</body>
</html>
 Paragraph Tag:-
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My first paragraph</p>
</body>
</html>
 Horizontal Tag:-
Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks
the line accordingly.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My first paragraph</p><hr>
<p>Hello Everyone</p>
</body>
</html>
 Ordered and Unordered Lists :-
a) Ordered HTML List:-
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Students List</title>
</head>
<body>
<ol>
<li>Neha</li>
<li>Nikita</li>
<li>Akansha</li>
<li>Ankita</li>
</ol>
</body>
</html>
b) UnOrdered HTML List:-
An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag. The list items will be marked with bullets (small black circles) by default.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Students List</title>
</head>
<body>
<ul>
<li>Neha</li>
<li>Nikita</li>
<li>Akansha</li>
<li>Ankita</li>
</ul>
</body>
</html>
 Superscript Tag:-
The <sup> tag is used to add a superscript text to the HTML document. The <sup>
tag defines the superscript text. Superscript text appears half a character above the
normal line and is sometimes rendered in a smaller font.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
x<sup>2</sup> + y<sup>3</sup> + z<sup>4</sup>
</body>
</html>
OUTPUT:-
x2 + y3 + z4
 Subcript Tag:-
The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag
defines the subscript text. Subscript text appears half a character below the normal
line and is sometimes rendered in a smaller font.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
x<sub>2</sub> + y<sub>3</sub> + z<sub>4</sub>
</body>
</html>
OUTPUT:-
x2 + y3 + z4
 HTML Background with colors:-
The bgcolor attribute is used to control the background of an HTML element,

specifically page body.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor = “red”>
</body>
</html>
 Font Tag:-
Font tag is used for changing the font style, color and size.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<font color = “green”>
</font>
</body>
</html>
 Image Tag:-
Images can improve the design and the appearance of a web page. The
HTML <img> tag is used to embed an image in a web page.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src = “pic.jpg” align = “left”>
</body>
</html>
 Table Tag:-
A table in HTML consists of table cells inside rows and columns.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border = “4” align = “center”>
<tr><td>Name</td><td>Course</td><td>Roll Number</td></tr>
<tr><td>Neha</td><td>BCA</td><td>1</td></tr>
<tr><td>Nisha</td><td>B.com</td><td>2</td></tr>
<tr><td>Nikita</td><td>MCA</td><td>3</td></tr>
<tr><td>Anita</td><td>MCA</td><td>4</td></tr>
</table>
</body>
</html>
 Form Tag:-
The HTML <form> element is used to create an HTML form for user input.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label>NAME:</label> <input type = “text”> <br>
<label>DOB:</label> <input type = “date”> <br>
<label>ADDRESS:</label> <input type = “text”> <br>
<label>E-MAIL:</label> <input type = “e-mail”> <br>
<label>PASSWORD</label> <input type = “password”> <br>
<label>GENDER:</label> <input type = “radio” value = male>MALE</input> <br>
<label>GENDER:</label> <input type = “radio” value = female>FEMALE</input>
<br>
<input type = “SUBMIT”>
</form>
</body>
</html>
 Anchor Tag:-
The <a> tag defines a hyperlink, which is used to link from one page to another. The
most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href = “https://www.w3schools.com”>W3Schools</a>
</body>
</html>

Basic HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic HTML

Uploaded by

Copyright:

Available Formats

HTML INTRODUCTION

 HTML is the standard markup language for creating Web pages.

1. HTML stands for Hyper Text Markup Language.

 Simple HTML Document:-

 Description of the above code:-

1. The <!DOCTYPE html> declaration defines that this document is an HTML5

It is used to bold the contents of the webpage.

It is used to italic the contents of the webpage.

It underlines the contents of the webpage.

 Ordered and Unordered Lists :-

a) Ordered HTML List:-

 HTML Background with colors:-

The bgcolor attribute is used to control the background of an HTML element,

A table in HTML consists of table cells inside rows and columns.

You might also like