Scribd
Upload
9 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
Available Formats
Download as PDF, TXT or read online on Scribd
9 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
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