Table of Contents
Hypertext Markup Language
HTML Concepts HTML 5 HTML Document Structure HTML Common Elements The past, the present, the future Section Elements
Semantic Structural Tags
2
Hypertext Markup Language
HTML – Hyper Text Markup Language Hypertext 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 3 4 Creating HTML Pages HTML – Past, Present, Future
An HTML document must have an .htm or 1991 – HTML first mentioned – Tim Berners -Lee – HTML tags .html file extension 1993 – HTML (first public version, published at IETF) 1993 – HTML 2 draft HTML files can be created with text editors: 1995 – HTML 2 – W3C NotePad, NotePad ++, PSPad 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur ” Or HTML editors (WYSIWYG Editors): 1997 – HTML 4 – ”Cougar ” – CSS Microsoft WebMatrix 1999 – HTML 4.01 (final) Microsoft Expression Web 2000 – XHTML draft 2001 – XHTML (final) Microsoft Visual Studio 2008 – HTML5 / XHTML5 draft Adobe Dreamweaver 2011 – feature complete HTML5 2022 – HTML5 – final specification 5 6
HTML Terminology Concepts in HTML HTML Terminology Tags Tags, Attributes and Elements 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 7 HTML Tags Attributes
Tags are the smallest piece in HTML Document Attributes are properties of HTML Elements Start with " <" and end with " >" Used to set size, color, border, etc … Two kinds of tags Put directly in the tags Opening Opening Has value surrounded by " " tag Mark the start of an
The value is always a stringHello Pesho!
HTML element Closing go to Google Closing tag Mark the end of anSome tags don't have closing tag HTML element Start in "
Most Common Attributes HTML Elements
There are some attributes that are common for every HTML element HTML Elements are combination of tags and Id, class, name, style attributes
And some attributes are specific Opening tag with some or none attributes and a closing tag For example the attribute src of the img element go to Google … Shows the path to the image to be shown
11 12 HTML Document Structure HTML HTML Document, Doctype , Head, Body Terminology Live Demo
1 1
HTML Document Structure Head Element The head tag contains markup that is not Some elements are essential to each HTML The tag contains markup that is not Document: visible to the user (i.e. the person using the browser) html , head , body , doctype But helps the browser to render correctly the The html element HTML document Used to mark the beginning and ending of a What is in there? HTML document Styles, scripts All the content of the web page is inside this tag Declare encodings … Etc.. The title tag - the text in the tab of a browser 15 16 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 Document Structure Most common Doctype Most common Doctype Live Demo
HTML 5 Doctype 17 1
Text Formatting Text formatting tags modify the text between the opening tag and the closing tag Ex. Hello makes "Hello" bold HTML Common Elements Used in 90% of all the sites
20 Some Simple Tags Headings and Paragraphs Hyperlink Tags Heading Tags (h1 – h6) Link to Telerik Web site
Heading 1
Sub heading 2
Sub heading 3
Image TagsParagraph Tags
This is my first paragraph
Text formatting tagsThis is my second paragraph
This text is emphasized. Sections: div and span
new line
21 22
Ordered Lists:
- Tag Unordered Lists:
- Apple
- Apple
- Orange
- Orange
- Grapefruit
- Grapefruit
- tag, definition in
- tag
- HTML Common Elements
- HTML
- A markup language … Live Demo
- CSS
- Language used to …
25
Block and Inline Elements
Block elements add a line break before and after them, and expand to 100% width
,,
, < ul > are block elements
Inline elements don ’t break the text before and after them , , < em > are inline elements Section Elements http://www.w3.org/TR/CSS2/visuren.html#blo The
and The ck -boxes28 The
Tagcreates logical divisions within a page Block style element Used with CSSExample:
div -and -span.html
DIV Live Demo exampleThis one is only a test.
29
The Tag
Inline style element
Useful for modifying a specific portion of text Don't create a separate area (paragraph) in the document Makes sense only with some CSS Live Demo span.html
This one is only a test.
This one is another TEST.
31
- Tag
Create an Ordered List using
Attribute values for type are 1, A, a, I, or i Attribute values for type are: 1. Apple i. Apple disc , circle or square 2. Orange ii. Orange 3. Grapefruit a. Apple iii. Grapefruit • Apple o Apple Apple b. Orange I. Apple A. Apple • Orange o Orange Orange B. Orange c. Grapefruit II. Orange C. Grapefruit III. Grapefruit • Pear o Pear Pear 23 24 Definition lists:
- tag
Create definition lists using
- Pairs of text and associated definition; text is in