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

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

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

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

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

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

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

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

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

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

★★★  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 Text Formatting Element :

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