HTML INTRODUCTION	HTML EDITORS	HTML ELEMENTS	HTML ATTRIBUTES	HTML HEADINGS
HTML PARAGRAPHS	HTML LINKS	HTML IMAGES	HTML TABLES	HTML LISTS	HTML FORMATTING

HTML INTRODUCTION :

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 STRUCTURE :

Try it your self.

Back

HTML EDITORS :

Learn HTML Using Notepad or Visual Code Studio :

Web pages can be created and modified by using professional HTML editors
However, for learning HTML we recommend a simple text editor like Notepad or V.s code studion (PC) .
We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad.

Step 1 :

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Open Start > Programs > Accessories > Notepad

Step 2 :

Write or copy the following HTML code into Notepad:

Step 3 :

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.html" and Save as type "All Files".

Step 4 :

View the HTML Page in Your Browser.
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:

Try it your self.

Back

HTML ELEMENTS :

An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
EXAMPLES :

Nested Html Elements :

HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.

Elements Explanation:

html :

The html element is the root element and it defines the whole HTML document.

Body :

Then, inside the html element there is a body element.
The body element defines the document's body.
Then, inside the body element there are two other elements;

h1 :

The h1 element defines a heading.
In Html we have 6 types heading.

p :

The p element defines a paragraph.

NOTE : (Never Skip the End Tag)

Empty HTML Elements :

HTML elements with no content are called empty elements.
The br tag defines a line break, and is an empty element without a closing tag.

Example :

Try it your self.

Back

HTML ATTRIBUTES :

HTML attributes provide additional information about HTML elements.
All HTML elements can have attributes.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".

Attributes Explanation :

href :

The a tag defines a hyperlink.
The href attribute specifies the URL of the page the link goes to.

src :

The tag is used to embed an image in an HTML page
The src attribute specifies the path to the image to be displayed.

Width & Height :

The img tag should also contain the width and height attributes.
which specify the width and height of the image (in pixels) and (%).

alt :

The required alt attribute for the img tag specifies an alternate text for an image.
if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Title :

The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Try it your self .

Back

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.

Try it your self.

Back

HTML PARAGRAPHS :

The HTML p element defines a paragraph.
A paragraph always starts on a new line, and is usually a block of text.
Browsers automatically add some white space (a margin) before and after a paragraph.

Try it your self.

Back

HTML LINKS :

HTML links are hyperlinks.
Links are found in nearly all web pages.
Links allow users to click their way from page to page.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.

Links-Syntax :

The HTML a tag defines a hyperlink. It has the following syntax :

Target Attribute :

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _self - Default. Opens the document in the same window/tab as it was clicked.
- _blank - Opens the document in a new window or tab.
- _parent - Opens the document in the parent frame
- _top - Opens the document in the full body of the window

HTML Links Tag :

Example :

Try it your self.

Back

HTML IMAGES :

Images can improve the design and the appearance of a web page.
The img tag use to insert image in our webpage.
Images are not technically inserted into a web page; images are linked to web pages. The img tag creates a holding space for the referenced image.
The img tag is empty, it contains attributes only, and does not have a closing tag.
The img tag has two required attributes :
- src - Specifies the path to the image.
- alt - Specifies an alternate text for the image.

Image Size :

Width.
Height.

Alternatively, you can use the width and height attributes:
The width and height attributes always define the width and height of the image in pixels and Percentage.

Try it your self.

Back

HTML TABLES :

A table in HTML consists of table cells inside rows and columns.
HTML tables allow web developers to arrange data into rows and columns.

Example :

A simple HTML Table :

Table Cells :

Each table cell is defined by a td and a /td tag.
td stands for table data.
Everything between td and /td are the content of the table cell.

Table Rows :

Each table row starts with a tr and ends with a /tr tag.
tr stands for table row.

Table Headers :

Sometimes you want your cells to be table header cells. In those cases use the th tag instead of the td tag:
th stands for table header.

HTML Table Tags :

Try it your self.

Back

HTML LISTS :

HTML lists allow web developers to group a set of related items in lists.
We have three types of list in HTML.
1. Order List.
2. Unorder List.
3. Description List.

Order 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.

Unordered 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.

Description List :

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The dl tag defines the description list, the dt tag defines the term (name), and the dd tag describes each term.

HTML List Tags :

Try it your self.

Back

HTML FORMATTING :

HTML contains several elements for defining text with a special meaning.

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
del - Deleted text
ins - Inserted text
sub - Subscript text
sup - Superscript text

HTML B And Strong Elements :

The HTML b element defines bold text, without any extra importance.

The HTML strong element defines text with strong importance. The content inside is typically displayed in bold.

HTML I And Em Elements :

The HTML i element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

The HTML em element defines emphasized text. The content inside is typically displayed in italic.

HTML Mark Element :

The HTML mark element defines text that should be marked or highlighted.

HTML Del Element :

The HTML del element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text.

HTML Ins Element :

The HTML ins element defines a text that has been inserted into a document.
Browsers will usually underline inserted text.

HTML Sub Element :

The HTML sub element defines subscript text.
Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O.

HTML Sup Element :

The HTML sup element defines superscript text.
Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1].

HTML INTRODUCTION :

What Is HTML ?

HTML STRUCTURE :

Back

HTML EDITORS :

Learn HTML Using Notepad or Visual Code Studio :

Follow the steps below to create your first web page with Notepad.

Step 1 :

Step 2 :

Step 3 :

Step 4 :

Try it your self.

Back

HTML ELEMENTS :

EXAMPLES :

Nested Html Elements :

Elements Explanation:

html :

Body :

h1 :

p :

NOTE : (Never Skip the End Tag)

Empty HTML Elements :

Example :

Try it your self.

Back

HTML ATTRIBUTES :

Attributes Explanation :

href :

src :

Width & Height :

alt :

Title :

Try it your self .

Back

HTML HEADINGS :

Try it your self.

Back

HTML PARAGRAPHS :

Try it your self.

Back

HTML LINKS :

Links-Syntax :

Target Attribute :

HTML Links Tag :

Example :

Try it your self.

Back

HTML IMAGES :

Image Size :

Try it your self.

Back

HTML TABLES :

Example :

Table Cells :

Table Rows :

Table Headers :

HTML Table Tags :

Try it your self.

Back

HTML LISTS :

Order List :

Unordered List :

Description List :

HTML List Tags :

Try it your self.

Back

HTML FORMATTING :

HTML Formatting Elements :

HTML B And Strong Elements :

HTML I And Em Elements :

HTML Mark Element :

HTML Del Element :

HTML Ins Element :

HTML Sub Element :

HTML Sup Element :

HTML Text Formatting Element :

Try it your self.

Back

If we need to more learn about HTML and other lanuages.