What is HTML?
HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
OUTPUT:
My First Heading
My first paragraph.
HTML Editor:
Step 1: Open Notepad (PC)
Step 2: Write Some HTML
Step 3: Save the HTML Page
Step 4: View the HTML Page in Your Browser
HTML Documents:
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
OUTPUT:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://duratalsharq.com/">Go to your school website</a>
</body>
</html>
OUTPUT:
HTML Links
HTML links are defined with the a tag:
This is a link
The link's destination is specified in the href attribute.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided
as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img
src="https://t4.ftcdn.net/jpg/00/97/58/97/360_F_97589769_t45CqXyzjz0KXwoBZT9PRaWGHRk
5hQqQ.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
OUTPUT:
HTML Images
HTML images are defined with the img tag:
HTML Formatting Elements
Formatting elements were designed to display special types of text:
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
<!DOCTYPE html>
<html>
<body>
<h2>THE elements define table headers</h2>
<table border="2px">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output:
THE elements define table headers
Person 1 Person 2 Person 3
Emil Tobias Linus
16 14 10
To understand the example better, we have added borders to the table.
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
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
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
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
An Unordered HTML List
● Coffee
● Tea
● Milk
An Ordered HTML List
1. Coffee
2. Tea
3. Milk
