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 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 . 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)   2008 – HTML5 / XHTML5 draft   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 string

Hello Pesho!

HTML element  Closing go to Google Closing tag  Mark the end of an
Some 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 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 Tags

 Paragraph Tags

This is my first paragraph

 Text formatting tags

This is my second paragraph

This text is emphasized.  Sections:
new line

This one is more emphasized. This is a div

21 22

Ordered Lists:

    Tag Unordered Lists:
      Tag

       Create an Ordered List using

        :  Create an Unordered List using
          :

            • Apple
            • Apple
            • Orange
            • Orange
            • Grapefruit
            • Grapefruit

         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
        tag, definition in
        tag

        HTML Common Elements
        HTML
        A markup language …
        Live Demo
        CSS
        Language used to …
         Renders without bullets  Definition is indented

        25

        Block and Inline Elements

         Block elements add a line break before and after them, and expand to 100% width