Scribd
Upload
4 views

HTML

This document serves as an introduction to HTML, explaining its purpose as a markup language for creating web pages and detailing the structure of an HTML document. It covers various HTML elements and tags, including their functions and attributes, such as the <a> tag for hyperlinks and the <p> tag for paragraphs. Additionally, it provides insights on web browsers, file extensions, and the importance of the <!DOCTYPE> declaration.

Uploaded by

Majid Latif
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML

This document serves as an introduction to HTML, explaining its purpose as a markup language for creating web pages and detailing the structure of an HTML document. It covers various HTML elements and tags, including their functions and attributes, such as the <a> tag for hyperlinks and the <p> tag for paragraphs. Additionally, it provides insights on web browsers, file extensions, and the importance of the <!DOCTYPE> declaration.

Uploaded by

Majid Latif
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML DOCUMENt

HTML
Table of Contents
INTRO TO HTML...........................................................................................................................................2
What is HTML?........................................................................................................................................2
HTML Page Structure..............................................................................................................................2
Web Browsers.........................................................................................................................................3
Extension and running............................................................................................................................3
HTML ELEMENTS/Tags................................................................................................................................4
HTML <! --...--> Tag.................................................................................................................................4
The <!DOCTYPE> Declaration.................................................................................................................4
HTML <a> Tag..........................................................................................................................................4
HTML <abbr> Tag....................................................................................................................................5
HTML <address> Tag...............................................................................................................................5
HTML Headings Tags...............................................................................................................................5
HTML Paragraphs Tag.............................................................................................................................5
HTML Horizontal Rules...........................................................................................................................6
HTML Line Breaks....................................................................................................................................6
The HTML <pre>......................................................................................................................................6

Page |1
INTRO TO HTML
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 (the building blocks of
a web page). These elements tell the browser how to display
the content.
It’s also worth noting that HTML is not considered a programming
language as it can’t create dynamic functionality.

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>

Page |2
The content inside the <body> section will be displayed in a
browser. The content inside the <title> element will be shown in
the browser's title bar or in the page's tab. The shortcut key to
auto complete the HTML Structure is: "!" After typing, press
the "TAB" key on the keyboard.

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to
read HTML documents and display them correctly. A browser does
not display the HTML tags but uses them to determine how to
display the document.

Extension and running


You can use either .htm or .html as file extension. There is no
difference; it is up to you.
Open the saved HTML file in your favorite browser (double
click on the file, or right-click - and choose "Open with").

Page |3
HTML
ELEMENTS/Tags
An HTML element consists of a start tag, content, and an end tag.

HTML <! --...--> Tag


The comment tag is used to insert comments in the source code.
You can use comments to explain your code. This tag doesn’t
support any standard or event attribute.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type and
helps browsers to display web pages correctly. It must only
appear once, at the top of the page (before any HTML tags).
Its declaration is not case sensitive. The <!
DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

HTML <a> Tag


The <a> tag defines a hyperlink, which is used to link from one
page to another.
The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

Page |4
If the <a> tag has no href attribute, it is only a placeholder for a
hyperlink.

HTML <abbr> Tag


The <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Tip: Use the global title attribute to show the description for
the abbreviation/acronym when you mouse over the element.

HTML <address> Tag


The <address> tag defines the contact information for the
author/owner of a document or an article.
The text in the <address> element usually renders in italic.

HTML <area> Tag


The <area> tag defines an area inside an image map (an
image map is an image with clickable areas).
<area> elements are always nested inside a <map> tag.
Note: The usemap attribute in <img> is associated with
the <map> element's name attribute, and creates a relationship
between the image and the map.

HTML <article> Tag


The <article> tag specifies independent, self-contained
content.
Potential sources for the <article> element:
 Forum post
 Blog post
 News story

Page |5
HTML <aside> Tag
The <aside> tag defines some content aside from the content
it is placed in.
The aside content should be indirectly related to the surrounding
content.
Tip: The <aside> content is often placed as a sidebar in a
document.

HTML <audio> Tag


The <audio> tag is used to embed sound content in a
document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with
different audio sources. The browser will choose the first
source it supports.
The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.

HTML <b> Tag


The <b> tag specifies bold text without any extra importance.

HTML <base> Tag


The <base> tag specifies the base URL and/or target for all
relative URLs in a document.
The <base> tag must have either an href or a target attribute
present, or both.
There can only be one single <base> element in a
document, and it must be inside the <head> element.

HTML <bdi> tag


BDI stands for Bi-Directional Isolation.

Page |6
The <bdi> tag isolates a part of text that might be formatted in a different
direction from other text outside it.
This element is useful when embedding user-generated content with an unknown
text direction.
<li>User <bdi>‫<إيان‬/bdi>: 90 points</li>

HTML Headings Tags


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
The shortcut key to create all headings tags: h$*6{I'm a
Heading $}
Use HTML headings for headings only. Don't use headings to
make text BIG or bold. Each HTML heading has a default size.
However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs Tag


A paragraph always starts on a new line and is usually a
block of text. The HTML <p> element defines a paragraph. You
cannot be sure how HTML will be displayed. Large or small
screens, and resized windows will create different results. With
HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code. The browser will automatically
remove any extra spaces and lines when the page is displayed. A
paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
Example

Page |7
<p>This is a paragraph. </p>

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page and
is most often displayed as a horizontal rule. The <hr> element is
used to separate content (or define a change) in an HTML page.
The <hr> tag is an empty tag, which means that it has no end
tag.

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. The <br> tag is an empty tag.
Example
<p>This is<br>a paragraph<br>with line breaks. </p>

The HTML <pre>


The HTML <pre> element defines preformatted text. The
text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks. It
is the solution of Poem Problem.

Page |8

You might also like