HTML
What is HTML?
HTML stands for Hyper Text Markup Language
Open Notepad (PC)
create HTML Page:
Write or copy the following HTML code into Notepad >> Save the file on
your computer >> Select File >> Save as in the Notepad menu. >> Name
n
the file "[Link]" >> Click on Save
io
Now View the HTML Page in Your Browser >> Open the saved HTML file in
your favourite browser (double clicks on the file, or right-click - and
at
choose "Open with").
uc
A Simple HTML Document
Ed
<!DOCTYPE html>
<html>
lZ
<head>
<title>Page Title</title>
xe
</head>
<body>
Pi
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML
Example Explained
● The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML
page
● The <title> element specifies a title for the HTML page (which is
n
shown in the browser's title bar or in the page's tab)
io
● The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
at
paragraphs, images, hyperlinks, tables, lists, etc.
uc
● The <h1> element defines a large heading
● The <p> element defines a paragraph
Ed
Start tag Element content End tag
<h1> My First Heading </h1>
lZ
<p> My first paragraph. </p>
xe
Pi
HTML
Tag name Description
<!Doctype HTML> Used to indicate version of html document
<html></html> Start and end of HTML document
n
<head></head> Indicate Head Area
io
<title></title> Used to create document Title
at
<body></body> Create the body area for all content
uc
<p></p> Create paragraph
<div></div> Create a area
Ed
<ul> </ul> Create Unordered List
<ol></ol> Create Ordered List
lZ
<li></li> Create List Item
xe
<button></button> Create Button
<a href=””></a> Create Hyperlink
Pi
<img src=”” alt=””> Used to add Images
HTML
1. HTML Headings
HTML headings are titles or subtitles that you want to display on a
webpage.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
n
io
<h3>Heading 3</h3>
at
<h4>Heading 4</h4>
<h5>Heading 5</h5>
uc
<h6>Heading 6</h6>
Ed
</body>
lZ
[Link] Paragraph
The HTML <p> element defines a paragraph. A paragraph always starts
xe
on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
Pi
Example :
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
HTML
[Link] Text Formatting
HTML contains several elements for defining text with a special
meaning.
● <b></b> use for Bold
● <i></i> use for Italic
● <u></u> use for underline
n
● <sub></sub> use for subscript
io
● <sup></sup> use for superscript
● <br> create line break
at
● <hr> create a horizontal line
uc
Example :
<body>
Ed
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
lZ
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
xe
</body>
Pi
[Link] Styles
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
<body>
HTML
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
n
io
[Link] Color
at
You can set the background color for HTML elements:
uc
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
Ed
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
lZ
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
xe
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
Pi
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
HTML
[Link] Buttons
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
n
</body>
io
at
[Link] DIV Element uc
The <div> element is used as a container for other HTML elements.
<div>
Ed
<h2>London</h2>
<p>London is the capital city of England.</p> <p>London has over
lZ
13 million inhabitants.</p>
</div>
xe
[Link] Images
Pi
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500">
</body>
HTML
[Link] Lists
<body>
<h2>An Unordered HTML List</h2>
<ul>
n
<li>Coffee</li>
io
<li>Tea</li>
at
<li>Milk</li> uc
</ul>
<h2>An Ordered HTML List</h2>
Ed
<ol>
<li>Coffee</li>
lZ
<li>Tea</li>
xe
<li>Milk</li>
</ol>
Pi
</body>
HTML
10. HTML Links
Used to create hyperlink.
<body>
<h1>HTML Links</h1>
<p><a href="[Link] TUBE</a></p>
n
</body>
io
</html>
at
11. HTML Tables
uc
<table> </table> : create table area
Ed
<tr></tr> : Create Table Row
<th></th> : Create table Heading
<td></td> : Create table Column / Data
lZ
xe
<head>
<title>Page Title</title>
Pi
<style>
table, th, td {
border:1px solid black;
}
HTML
</style>
</head>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
n
<tr>
io
<th>Company</th>
at
<th>Contact</th> uc
<th>Country</th>
</tr>
Ed
<tr>
<td>Alfreds Futterkiste</td>
lZ
<td>Maria Anders</td>
xe
<td>Germany</td>
</tr>
Pi
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
HTML
</tr>
</table>
<p>To understand the example better, we have added borders to the
table.</p>
</body>
</html>
n
io
[Link] ALIGNMENT
at
<body>
<h1 style="text-align:center;">Centered Heading</h1>
uc
<p style="text-align:center;">Centered paragraph.</p>
Ed
</body>
lZ
13. Font style
<!DOCTYPE html>
xe
<html>
Pi
<head>
<title>Page Title</title>
</head>
<body>
HTML
<h1 style="font-family: Cooper Black;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
n
io
14. Html Forms
at
<h2>HTML Forms</h2> uc
<form action=””>
<label for="fname">First name:</label><br>
Ed
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
lZ
<input type="text" id="lname" name="lname" value="Doe"><br><br>
xe
<input type="submit" value="Submit">
</form>
Pi
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>