Scribd
Upload
3 views

Basic HTML

Uploaded by

Anil Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Basic HTML

Uploaded by

Anil Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<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>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p><i>My first paragraph</i></p>
</body>
</html>

 Underline Tag:-

It underlines the contents of the webpage.

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<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>
<title>Page Title</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</head>
<body bgcolor = “red”>
<p>My first paragraph</p><hr>
<p>Hello Everyone</p>
</body>
</html>
 Font Tag:-

Font tag is used for changing the font style, color and size.

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<font color = “green”>
<p>My first paragraph</p><hr>
<p>Hello Everyone</p>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</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>
<title>Page Title</title>
</head>
<body>
<a href = “https://www.w3schools.com”>W3Schools</a>
</body>
</html>

You might also like