Scribd
Upload
15 views

HTML Notes

HTML is the standard markup language used to create web pages. It provides a structure and layout for web content using elements like headings, paragraphs, links, images, forms, tables and lists. Common elements include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <table> for tables and <ul> and <ol> for unordered and ordered lists.

Uploaded by

layanmohammed768
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

HTML Notes

HTML is the standard markup language used to create web pages. It provides a structure and layout for web content using elements like headings, paragraphs, links, images, forms, tables and lists. Common elements include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <table> for tables and <ul> and <ol> for unordered and ordered lists.

Uploaded by

layanmohammed768
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like