HTML
~MOHAMEDY HIT
HTML Introduction
MOHAMEDY HIT
2
HTML Introduction
• What is HTML?
HTML is a markup language for describing web documents
(web pages).
• HTML stands for Hyper Text Markup Language
MOHAMEDY HIT
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
3
HTML Example
MOHAMEDY HIT
4
Example Explained
• The DOCTYPE declaration defines the document type to be
HTML
• The text between <html> and </html> describes an HTML
document
• The text between <head> and </head> provides information
MOHAMEDY HIT
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 5
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>
MOHAMEDY HIT
• 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
NOTE.
• The start tag is often called the opening tag. The end tag is
6
often called the closing tag.
HTML Page Structure
MOHAMEDY HIT
7
NOTE
• Only the <body> area (the white area) is displayed by the browser
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration helps the browser to display a
web page correctly.
• There are different document types on the web.
• To display a document correctly, the browser must know both
MOHAMEDY HIT
type and version.
• The doctype declaration is not case sensitive. All cases are
acceptable:
8
Common Declarations
HTML5
• <!DOCTYPE html>
HTML 4.01
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
MOHAMEDY HIT
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
9
HTML Versions
MOHAMEDY HIT
10
HTML Editors
MOHAMEDY HIT
11
HTML Editors
• Write HTML Using Notepad or TextEdit
• HTML can be edited by using professional HTML editors like:
• Microsoft WebMatrix
• Sublime Text
• However, for learning HTML we recommend a text editor like
MOHAMEDY HIT
Notepad (PC) or TextEdit (Mac).
• We believe using a simple text editor is a good way to learn
HTML.
• Follow the 4 steps below to create your first web page with
Notepad.
12
Step 1: Open Notepad
To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen). Click All
Programs. Click Accessories. Click Notepad.
MOHAMEDY HIT
To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at
the bottom left on your screen). Type Notepad.
13
Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
MOHAMEDY HIT
14
Step 3: Save the HTML Page
• Save the file on your computer.
• Select File > Save as in the Notepad menu.
• Name the file "index.html" or any other name ending with
html or htm.
• UTF-8 is the preferred encoding for HTML files.
MOHAMEDY HIT
• ANSI encoding covers US and Western European characters
only.
15
• You can use either .htm or .html as file extension. There is no
difference, it is up to you.
Step 4: View HTML Page in Your Browser
• Open the saved HTML file in your favorite browser. The result
will look much like this:
MOHAMEDY HIT
16
MOHAMEDY HIT
HTML Basic
17
HTML Basic Examples
HTML Documents
• All HTML documents must start with a type declaration:
<!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with
MOHAMEDY HIT
</html>.
• The visible part of the HTML document is between <body>
and </body>.
18
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags:
MOHAMEDY HIT
19
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
MOHAMEDY HIT
20
HTML Links
• HTML links are defined with the <a> tag:
• <a href= “http://www.google.com”>This is a link 1< /a>
MOHAMEDY HIT
• <a href= “http://www.facebook.com”>This is a link 2< /a>
• <a href= “about_us.html”>This is a link 3< /a>
21
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:
MOHAMEDY HIT
• <img src= “mohamedyhit.jpg" alt= “mohamedy" width= "104"
height= "142">
22
MOHAMEDY HIT
HTML Elements
23
HTML Elements
• HTML elements are written with a start tag, with an end tag,
with the content in between:
• <tagname>content</tagname>
• The HTML element is everything from the start tag to the end
tag:
MOHAMEDY HIT
• <p>My first HTML paragraph.</p>
Note: 24
• Some HTML elements do not have an end tag.
Nested HTML Elements
• HTML elements can be nested (elements can contain
elements).
• All HTML documents consist of nested HTML elements.
• This example contains 4 HTML elements:
MOHAMEDY HIT
25
HTML Example Explained
• The <html> element defines the whole document.
• It has a start tag <html> and an end tag </html>.
• The element content is another HTML element (the <body>
element).
• The <body> element defines the document body.
• It has a start tag <body> and an end tag </body>.
MOHAMEDY HIT
• The element content is two other HTML elements (<h1> and
<p>).
• The <h1> element defines a heading.
• It has a start tag <h1> and an end tag </h1>.
• The element content is: My First Heading.
• The <p> element defines a paragraph.
26
• It has a start tag <p> and an end tag </p>.
• The element content is: My first paragraph.
Don't Forget the End Tag
• Some HTML elements will display correctly, even if you forget
the end tag:
MOHAMEDY HIT
• The example above works in all browsers, because the closing
tag is considered optional.
• Never rely on this. It might produce unexpected results and/or 27
errors if you forget the end tag.
Empty HTML Elements
• HTML elements with no content are called empty elements.
• <br> is an empty element without a closing tag (the <br> tag
defines a line break).
• Empty elements can be "closed" in the opening tag like this:
<br />.
• HTML5 does not require empty elements to be closed. But if
MOHAMEDY HIT
you want stricter validation, or you need to make your
document readable by XML parsers, you should close all HTML
elements.
HTML Tip: Use Lowercase Tags
• HTML tags are not case sensitive: <P> means the same as <p>.
• The HTML5 standard does not require lowercase tags, but
28
W3C recommends lowercase in HTML4, and demands
lowercase for stricter document types like XHTML.
HTML Attributes
MOHAMEDY HIT
29
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about
an element
• Attributes are always specified in the start tag
MOHAMEDY HIT
• Attributes come in name/value pairs like:
name="value"
30
The lang Attribute
• The document language can be declared in the <html> tag.
• The language is declared in the lang attribute.
• Declaring a language is important for accessibility applications
(screen readers) and search engines:
MOHAMEDY HIT
31
• The first two letters specify the language (en). If there is a
dialect, use two more letters (US).
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 "About Mohamedy_Hit":
MOHAMEDY HIT
• When you move the mouse over the element, the title will be
displayed as a tooltip
32
The href Attribute
• HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
• <a href= “http://www.google.com”>This is a link 1< /a>
MOHAMEDY HIT
• You will learn more about links and the <a> tag later
33
Size Attributes
• HTML images are defined with the <img> tag.
• The filename of the source (src), and the size of the image (width
and height) are all provided as attributes:
MOHAMEDY HIT
• <img src= “mohamedyhit.jpg" width= "104" height= "142">
• The image size is specified in pixels: width="104" means 104
screen pixels wide.
• You will learn more about images and the <img> tag later
34
The alt Attribute
• The alt attribute specifies an alternative text to be used, when
an HTML element cannot be displayed.
• The value of the attribute can be read by "screen readers".
This way, someone "listening" to the webpage, i.e. a blind
person, can "hear" the element.
MOHAMEDY HIT
• <img src= “mohamedyhit.jpg" alt= “mohamedy" width=
"104" height= "142">
35
We Suggest: Always Use Lowercase Attributes
• The HTML5 standard does not require lower case
attribute names.
• The title attribute can be written with upper or
lower case like Title and/or TITLE.
• W3C recommends lowercase in HTML4, and
demands lowercase for stricter document types
MOHAMEDY HIT
like XHTML.
We Suggest: Always Quote Attribute Values
• The HTML5 standard does not require quotes
around attribute values.
36
• W3C recommends quotes in HTML4, and demands quotes for
stricter document types like XHTML.
• Sometimes it is necessary to use quotes. This will not display
correctly, because it contains a space:
• <p title=About Mohamedy> abc def ghi jkl mno pqr stu vwxyz </p>
Note:
• Using quotes are the most common. Omitting quotes can produce
MOHAMEDY HIT
errors.
Single or Double Quotes?
• Double style quotes are the most common in HTML, but single style
can also be used.
• In some situations, when the attribute value itself contains double
quotes, it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'> 37
• Or vice versa
<p title="John 'ShotGun' Nelson">
HTML Headings
MOHAMEDY HIT
38
HTML Headings
• Headings are important in HTML documents.
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading.
• <h6> defines the least important heading.
MOHAMEDY HIT
• Note:
• Browsers automatically add some empty space (a margin) 39
before and after each heading.
Headings Are Important
• Use HTML headings for headings only. Don't use
headings to make text BIG or bold.
• Search engines use your headings to index the
structure and content of your web pages.
MOHAMEDY HIT
• Users skim your pages by its headings. It is
important to use headings to show the document
structure.
• h1 headings should be main headings, followed by
h2 headings, then the less important h3, and so on.
40
HTML Horizontal Rules
• The <hr> tag creates a horizontal line in an HTML page.
• The hr element can be used to separate content:
MOHAMEDY HIT
41
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:
MOHAMEDY HIT
42
• Meta data means data about data. HTML meta data is data about
the HTML document.
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.
The HTML <meta> Element
• The HTML <meta> element is also meta data.
• It can be used to define the character set, and other
MOHAMEDY HIT
information about the HTML document.
More Meta Elements
• In the section about HTML styles you discover more meta
elements:
• The HTML <style> element is used to define internal CSS style
sheets.
• The HTML <link> element is used to define external CSS style
sheets. 43
HTML Paragraphs
MOHAMEDY HIT
44
HTML Paragraphs
• HTML documents are divided into paragraphs.
• The HTML <p> element defines a paragraph.
MOHAMEDY HIT
• Browsers automatically add some white space before and
after a paragraph.
45
HTML Display
• 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 output by adding extra
MOHAMEDY HIT
spaces or extra lines in your HTML code.
• The browser will remove extra spaces and extra lines when
the page is displayed.
• Any number of spaces, and any number of new lines, count as
only one space.
46
MOHAMEDY HIT
47
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:
MOHAMEDY HIT
• The <br> element is an empty HTML element. It has no end
tag.
48
The HTML <pre> Element
• 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:
MOHAMEDY HIT
49
MOHAMEDY HIT
HTML Styles
50
The HTML Style Attribute
• Setting the style of an HTML element, can be done with the
style attribute.
• The HTML style attribute has the following syntax:
MOHAMEDY HIT
• The property is a CSS property. The value is a CSS value.
51
HTML Background Color
• The background-color property defines the background color
for an HTML element:
• This example sets the background for a page to lightgrey:
MOHAMEDY HIT
52
HTML Text Color
• The color property defines the text color for an HTML
element:
MOHAMEDY HIT
53
HTML Fonts
• The font-family property defines the font to be used for an
HTML element:
MOHAMEDY HIT
54
HTML Text Size
• The font-size property defines the text size for an HTML
element:
MOHAMEDY HIT
55
HTML Text Alignment
• The text-align property defines the horizontal text alignment
for an HTML element:
MOHAMEDY HIT
56
MOHAMEDY HIT
HTML Text Formatting Elements
57
HTML Formatting Elements
• In the previous chapter, you learned about HTML styling, using the
HTML style attribute.
• HTML also defines special elements for defining text with a special
meaning.
• HTML uses elements like <b> and <i> for formatting output, like
bold or italic text.
• Formatting elements were designed to display special types of
MOHAMEDY HIT
text:
• Bold text
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text 58
• Subscripts
• Superscripts
HTML Bold and Strong Formatting
• The HTML <b> element defines bold text, without any extra
importance.
MOHAMEDY HIT
• The HTML <strong> element defines strong text, with added
semantic "strong" importance.
59
HTML Italic and Emphasized Formatting
• The HTML <i> element defines italic text, without any extra
importance.
MOHAMEDY HIT
• The HTML <em> element defines emphasized text, with added
semantic importance.
• Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these tags: 60
<b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".
HTML Small Formatting
• The HTML <small> element defines small text:
MOHAMEDY HIT
61
HTML Marked Formatting
• The HTML <mark> element defines marked or highlighted
text:
MOHAMEDY HIT
62
HTML Deleted Formatting
• The HTML <del> element defines deleted (removed) text.
MOHAMEDY HIT
63
HTML Inserted Formatting
• The HTML <ins> element defines inserted (added) text.
MOHAMEDY HIT
64
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
MOHAMEDY HIT
65
HTML Superscript Formatting
• The HTML <sup> element defines superscripted text.
MOHAMEDY HIT
66
MOHAMEDY HIT
HTML Quotation and Citation Elements
67
HTML <q> for Short Quotations
• The HTML <q> element defines a short quotation.
• Browsers usually insert quotation marks around the <q>
element.
MOHAMEDY HIT
Example
• <p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
68
HTML <blockquote> for Long Quotations
• The HTML <blockquote> element defines a quoted section.
• Browsers usually indent <blockquote> elements.
Example
MOHAMEDY HIT
• <p>Here is a quote from WWF's website:</p>
<blockquote
cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally. 69
</blockquote>
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.
MOHAMEDY HIT
Example
• <p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>
70
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.
MOHAMEDY HIT
Example
• <address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA 71
</address>
HTML <cite> for Work Title
• The HTML <cite> element defines the title of a work.
• Browsers usually display <cite> elements in italic.
Example
MOHAMEDY HIT
• <p><cite>The Scream</cite> by Edvard Munch. Painted in
1893.</p>
72
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:
MOHAMEDY HIT
Example
• <bdo dir="rtl">This text will be written from right to
left</bdo>
73
MOHAMEDY HIT
74
