HTML:
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the
document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end
tag
The end tag is written like the start tag, but with a slash before
the tag name
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Teacher :Abdulkarim Al-Yemeni
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body>
tag:
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
The HTML <title> Element
The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the
browser tab.
Title icon:
<link rel="short icon" href="image.png">
The HTML <meta> Element
The HTML <meta> element is also meta data.
It can be used to define the character set, and other information about the
HTML document.
<meta charset="utf-8">
Teacher :Abdulkarim Al-Yemeni
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
<h1>---------------------</h1>
<h2>---------------------</h2>
<h3>----------------------</h3>
<h4>-----------------------</h4>
<h5>------------------------</h5>
<h6>--------------------------</h6>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>-----------------------------
-----------------------------------</p>
<p>----------------------------------
---------------------------------------
----.</p>
Right to Left
<html dir="rtl">
<p dir="rtl">------------------------ </p>
Left to Right
<html dir="ltr">
<p dir="ltr">----------------------------- </p>
Alignment
<p align="left">Left aligned paragraph</p>
<p align="center">Centered paragraph</p>
<p align="right">Right aligned paragraph</p>
Teacher :Abdulkarim Al-Yemeni
Font color
This is <font color="red">Red</font>
and this is <font color=" #0066cc">Blue</font>
<font color="rgb(204,112,202)"> -------------- </font>
Font size
<font size="+4">Size 7</font><br>
<font size="+3">Size 6</font><br>
<font size="+2">Size 5</font><br>
<font size="+1">Size 4</font><br>
<font size=“+0">Size 3</font><br>
<font size="-1">Size 2</font><br>
<font size="-2">Size 1</font><br>
<big>size 4</big>
<small>size 2</small>
<big><big>size 5</big></big>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
<p>This is<br>a para<br>graph with line breaks</p>
Teacher :Abdulkarim Al-Yemeni
HTML Horizontal Rules
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
hr color:
<hr color="red">
hr size:
<hr width="300px">
<hr width="30%">
hr color and size:
<hr width="30%" color="blue" size="10">
Teacher :Abdulkarim Al-Yemeni
HTML Display
<p>----------------------------------------</p>
<p>
---------------------------------------------------
-------------------------------------------
-------------------
-------------------------------
-------------------------------------------
</p>
The HTML <pre> Element
<pre>
----------------------------
--------------------------------
---------------------------------------
------------------
------------------------------------
</pre>
The title Attribute
HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title attribute. The value of
the attribute is
" This is My paragraph ":
<p title="This is My paragraph">
Hi …………………………………..
………………………………………
…………………………………………
</p>
Teacher :Abdulkarim Al-Yemeni
HTML Bold and Strong Formatting
The HTML <b> element defines bold text, without any extra importance.
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong"
importance.
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
HTML Italic and Emphasized Formatting
The HTML <i> element defines italic text, without any extra importance.
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
The HTML <em> element defines emphasized text, with added semantic
importance.
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
Teacher :Abdulkarim Al-Yemeni
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) text.
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting
The HTML <sup> element defines superscripted text.
<p>This is <sup>superscripted</sup> text.</p>
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
<p>The <abbr title="World">Hi</abbr> ----------</p>
Teacher :Abdulkarim Al-Yemeni
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner)
of a document or article.
The <address> element is usually displayed in italic. Most browsers will
add a line break before and after the element.
<address>
Written by my name.<br>
Visit us at:<br>
Example.com<br>
Box 564, Sana'a<br>
Yemen
</address>
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML <code> For Computer Code
The HTML <code> element defines a piece of programming code:
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
you can put the <code> element inside a <pre> element:
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
Teacher :Abdulkarim Al-Yemeni
HTML <var> For Variables
The HTML <var> element defines a variable.
The variable could be a variable in a mathematical expression or a
variable in programming context:
Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
HTML <kbd> For Keyboard Input
The HTML <kbd> element defines keyboard input:
<kbd>File | Open...</kbd>
HTML <samp> For Computer Output
The HTML <samp> element defines sample output from a computer
program:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-
reslog-v6.189
</samp>
HTML Comment Tags
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Teacher :Abdulkarim Al-Yemeni
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height)
are provided as attributes:
<img src="img.jpg" alt="world" width="104" height="142">
Alignment
<img src="folder/img.jpg" align="left">
<img src="folder/img.jpg " align="middle">
<img src="folder/img.jpg " align="right">
Border
<img src="folder/img.jpg " border="0">
HTML Lists
Unordered List:
Item
Item
Item
Item
Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Teacher :Abdulkarim Al-Yemeni
Unordered HTML Lists
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):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of
the marker:
Type Description
Type=disc The list items will be marked with bullets (default)
Type=circle The list items will be marked with circles
Type=square The list items will be marked with squares
Type=none The list items will not be marked
<ul type="----">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.
The list items will be marked with numbers:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Teacher :Abdulkarim Al-Yemeni
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the
marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers
<ol type="------">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
List can be nested (lists inside lists):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Teacher :Abdulkarim Al-Yemeni
HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
€ Euro € €
© Copyright © ©
® registered trademark ® ®
Entity names are case sensitive.
Teacher :Abdulkarim Al-Yemeni
