Scribd
Upload
58 views14 pages

HTML Page Structure

Uploaded by

Nashowan Gamal Alhadrmi
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
58 views14 pages

HTML Page Structure

Uploaded by

Nashowan Gamal Alhadrmi
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/ 14

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 &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
€ Euro &euro; &#8364;
© Copyright &copy; &#169;
® registered trademark &reg; &#174;
Entity names are case sensitive.

Teacher :Abdulkarim Al-Yemeni

You might also like