Hyper Text Markup Language and Quick Tour of HTML

Introduction to HTML

In order to learn web design, you must learn HTML, and in this article we will learn HTML, So follow through to the end.

what is html?

HTML stands for Hyper Text Markup Language.

HTML is the standard markup language for creating Web pages, and Using
HTML, you can create a Web page with text, graphics, sound, and video.
It Describes the structure and content of a web page; not a programming language.
It consists of building blocks called elements, which tell the browser how to display the content.
HTML elements are represented by tags, which label pieces of content such as "heading", "paragraph", "table", and so on.
HTML tags are element names surrounded by angle brackets.
Syntax: <tagname>content </tagname> .

Do HTML codes appear in a browser?

Browsers do not display the HTML tags, but use them to render the content of the page.

HTML Versions:

Since the early days of the web, there have been many versions of HTML:

what is HTML syntax:

HTML documents are composed of textual content and HTML elements.
An HTML element can contain text, other elements, or be empty. It is identified in the HTML document by tags.
HTML elements can also contain attributes. An HTML attribute is a name=value pair that provides more information about the HTML element.
HTML Attributes are always specified in the start tag.

What is <!DOCTYPE> in HTML?

Short for Document Type Definition, Tells the browser what type of document it is about to process.

The most important HTML tags:

HTML5 does not require the use of the <html> <head> and <body>.

The element is sometimes called the root element as it contains all the other HTML elements in the document.

Head and Body in HTML:

HTML pages are divided into two sections: the head and the body, which correspond to the and elements.

The head contains descriptive elements about the document and The body contains content that will be displayed by the browser.

What is inside the header in html:

The <head> element contains a variety of additional elements.

In the Example:

Element declares the character encoding used for the document (ex. UTF-8).
Element specifies an external CSS style sheet file that is used with this document.
<script> element references an external Javascript file.

Headings in html:

HTML provides six levels of heading (h1, h2, h3, …), with the higher heading number indicating a heading of less importance.

The browser has its own default styling for each heading level and These are easily modified and customized via CSS.

HTML paragraph:

The HTML <p> element defines a paragraph and Paragraphs are the most basic unit of text in an HTML document.

Div tag in HTML:

This <div> tag is also a container element for other HTML elements and is used to create a logical grouping of content and The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

HTML span:

The <span> element:

it is often used as a container for some text.
It is used to group inline-elements in a document.
it provides no visual change by itself.
it has no required attributes, but style, class and id are common.

When used together with CSS, the element can be used to style parts of the text:

link tag in html:

HTML links are hyperlinks that we can click on it and jump to another document.

Links are created using the <a> element (the "a" stands for anchor).

A link has two main parts: the destination and the label.

The href attribute specifies the destination address of the link.
The link label (text) is the visible part.

Types of Links in html:

You can use the anchor element to create a wide range of links:

Links to external sites (or to individual resources such as images or movies on an external site).
Links to other pages or resources within the current site.
Links to other places within the current page.
Links to particular locations on another page.
Links that are instructions to the browser to start the user’s email program.
Links that are instructions to the browser to execute a Javascript function.
Links that are instructions to the mobile browser to make a phone call.

URL Absolute and Relative Referencing:

When referencing a page or resource on an external site, a full absolute reference is required. That is:

the protocol (typically, http://).
the domain name.
any paths.
the file name of the desired resource.

When referencing a resource that is on the same server as your HTML document, then you can use briefer relative referencing, and If the URL does not include the "http://" then the browser will request the current server for the file.

If all the resources for the site reside within the same directory, then you can reference those other resources simply via their filename.

If there are too many files within a single directory, a relative pathname is required along with the filename.

Pathnames on the web follow Unix conventions.

Forward slashes ("/") are used to separate directory names from each other and from file names.
Double-periods ("..") are used to reference a directory "above" the current one in the directory tree.

How To Use The tag <a> To Make Links & Open Them Where You Want?

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same window/tab as it was clicked (this is default).
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
framename - Opens the linked document in a named frame.

Applications toiall