HTML 5

Table of Contents
Hypertext Markup Language
HTML Concepts
HTML Document Structure
HTML Common Elements
Section Elements
Semantic Structural Tags

Hypertext Markup Language

Hypertext Markup Language
HTML – Hyper Text Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)
Looks (looked?) like:
A Microsoft Word document
The markup tags provide information about the page content structure
A HTML document consists of many tags

Creating HTML Pages
An HTML document must have an .htm or .html file extension
HTML files can be created with text editors:
NotePad, NotePad ++, Sublime Text
Or HTML editors (WYSIWYG Editors):
Microsoft WebMatrix
Microsoft Expression Web
Microsoft Visual Studio
Adobe Dreamweaver

HTML – Past, Present, Future
1991 – HTML first mentioned – Tim Berners-Lee – HTML tags
1993 – HTML (first public version, published at IETF)
1993 – HTML 2 draft
1995 – HTML 2 – W3C
1995 – HTML 3 draft
1997 – HTML 3.2 – “Wilbur”
1997 – HTML 4 – ”Cougar” – CSS
1999 – HTML 4.01 (final)
2000 – XHTML draft
2001 – XHTML (final)
2008 – HTML5 / XHTML5 draft
2011 – feature complete HTML5
2022 – HTML5 – final specification

HTML Terminology
Tags, Attributes and Elements

HTML Terminology
Concepts in HTML
Tags
Opening tag and closing tag
The smallest piece in HTML
Attributes
Properties of the tag
Size, color, etc…
Elements
Combination of opening, closing tag and attributes

HTML Tags
Tags are the smallest piece in HTML Document
Start with "<" and end with ">"
Two kinds of tags
Opening
Mark the start of an
HTML element
Closing
Mark the end of an
HTML element
Start in "
Hello Pesho!
Opening tag
Closing tag
Opening tag
Opening tag
Closing tag
Closing tag

Attributes
Attributes are properties of HTML Elements
Used to set size, color, border, etc…
Put directly in the tags
Has value surrounded by " " or ' '
The value is always a string
go to Google
Some tags don't have closing tag
Some tags don't have closing tag

Most Common Attributes
There are some attributes that are common for every HTML element
Id, class, name, style
And some attributes are specific
For example the attribute src of the img element
Shows the path to the image to be shown

HTML Elements
HTML Elements are combination of tags and attributes
Opening tag with some or none attributes and a closing tag
go to Google
…

HTML Document Structure
Some elements are essential to each HTML Document:
html, head, body, doctype
The html element
Used to mark the beginning and ending of a HTML document
All the content of the web page is inside this tag
…

Head Element
The head tag contains markup that is not visible to the user (i.e. the person using the browser)
But helps the browser to render correctly the HTML document
What is in there?
Styles, scripts
Declare encodings
Etc..
The title tag - the text in
the tab of a browser

Body Element and Doctype
body element contains all the visible to the user markup
Headings, text, hyperlinks, images, etc…
Textboxes, sliders, buttons…
Doctype is kind of the validator of the page
Tells the browser in which version of HTML the page is written
HTML 5 Doctype

HTML Common Elements
Used in 90% of all the sites

Text Formatting
Text formatting tags modify the text between the opening tag and the closing tag
Ex.
Hello
makes "Hello" bold
Many of the formatting tags are deprecated
Use CSS instead

Some Simple Tags
Hyperlink Tags
Image Tags
Text formatting tags
title="Telerik">Link to Telerik Web
site
This text is
emphasized.
new line
This one is
more emphasized.

Headings and Paragraphs
Heading Tags (h1 – h6)
Paragraph Tags
Sections: div and span
This is my first paragraph
This is my second paragraph
Heading 1
Sub heading 2
Sub heading 3
This is a div

Apple
Orange
Grapefruit
Ordered Lists:
Tag
Create an Ordered List using
:
Attribute values for type are 1, A, a, I, or i
Apple
Orange
Grapefruit
Apple
Orange
Grapefruit
Apple
Orange
Grapefruit
Apple
Orange
Grapefruit
Apple
Orange
Grapefruit

Unordered Lists:
Tag
Create an Unordered List using
:
Attribute values for type are:
disc, circle or square
Apple
Orange
Pear
Apple
Orange
Pear
Apple
Orange
Pear
Apple
Orange
Grapefruit

Definition lists:
tag
Create definition lists using
Pairs of text and associated definition; text is in
tag, definition in
tag
Renders without bullets
Definition is indented
HTML
A markup language …
CSS
Language used to …

Definition list

Section Elements
The
and The

The
Tag
creates logical divisions within a page
Block element
Used with CSS
Example: style="font-size:24px; color:red">DIV example