Scribd Logo
Upload

Welcome to Scribd!

  • Session 2.1

    Uploaded by

    Hana hana
    8 views28 pages
    The document provides an introduction to HTML 5 basics, including: - An overview of HTML, its evolution from SGML, and its management by the W3C. - Explanations of HTML elements, tags, and syntax for creating structured web pages. - Details on tools for HTML development like Notepad, Notepad++, and Dreamweaver. - Steps for creating a first web page, including necessary page structure and elements.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides an introduction to HTML 5 basics, including: - An overview of HTML, its evolution from SGML, and its management by the W3C. - Explanations of HTML elements, tags, and syntax for creating structured web pages. - Details on tools for HTML development like Notepad, Notepad++, and Dreamweaver. - Steps for creating a first web page, including necessary page structure and elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views28 pages

    Session 2.1

    Uploaded by

    Hana hana
    The document provides an introduction to HTML 5 basics, including: - An overview of HTML, its evolution from SGML, and its management by the W3C. - Explanations of HTML elements, tags, and syntax for creating structured web pages. - Details on tools for HTML development like Notepad, Notepad++, and Dreamweaver. - Steps for creating a first web page, including necessary page structure and elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    Session 2.

    HTML 5 Basics

    1
    Contents

     Introduction to HTML
     HTML versions
     Beginning HTML Programming
     General Syntax
     Introduction to Adobe Dreamweaver
     Creating your first Web Page
     Understanding the Structure of a Page
     Running your First Web Page

    2
    What is a markup? Demo

    3
    What is a markup? Demo

    4
    What is a markup? Demo

    5
    Introduction to HTML

     Evolved from SGML


     HTML is used to create web pages
     W3C manages its standards
     HTML is a makeup language
     What is a markup? Demo

    6
    HTML
     Hypertext Markup Language (HTML) is the main
    markup language for creating web pages and other
    information that can be displayed in a web browser.
     The purpose of a web browser is to read HTML
    documents and compose them into visible or audible
    web pages. The browser does not display the HTML tags,
    but uses the tags to interpret the content of the page.
     HTML elements form the building blocks of all websites.
    HTML allows images and objects to be embedded and
    can be used to create interactive forms.
     It provides a means to create structured documents by
    denoting structural semantics for text such as headings,
    paragraphs, lists, links, quotes and other items. It can
    embed scripts written in languages such as JavaScript
    which affect the behavior of HTML web pages.
    7
    Standard Generalized Markup
    Language
     SGML (Standard Generalized Markup Language) is a
    standard for how to specify a document markup
    language or tag set. Such a specification is itself a
    document type definition (DTD).
     SGML is not in itself a document language, but a
    description of how to specify one. It is metadata.
     SGML is based on the idea that documents have
    structural and other semantic elements that can be
    described without reference to how such elements
    should be displayed. The actual display of such a
    document may vary, depending on the output medium
    and style preferences.
     The language that this Web browser uses, Hypertext
    Markup Language (HTML), is an example of an SGML-
    8 based language.
    W3C

     The World Wide Web Consortium (W3C) is the main


    international standards organization for the World Wide
    Web (abbreviated WWW or W3).
     W3C tries to enforce compatibility and agreement among
    industry members in the adoption of new standards
    defined by the W3C.
     W3C also engages in education and outreach, develops
    software and serves as an open forum for discussion
    about the Web.

    9
    HTML Versions

    10
    HTML Complier

     Browser is the complier


     Rendering Engine parses HTML
     We don’t need any extra tool

    11
    Tools for HTML Development

     Microsoft Notepad
     Notepad++
     Adobe Dreamweaver

    12
    Beginning HTML Programming

     HTML uses TAGS


     (<) and (>) are opening and closing tags
     XHTML is strict, HTML is loose
     DTD = Document Type Definition
     DTD is necessary

    13
    Beginning HTML Programming

     HTML is written in the form of HTML elements consisting


    of tags enclosed in angle brackets (like <html>), within
    the web page content. HTML tags most commonly come
    in pairs like <h1> and </h1>, although some tags
    represent empty elements and so are unpaired, for
    example <img>.
     The first tag in a pair is the start tag, and the second tag
    is the end tag (they are also called opening tags and
    closing tags). In between these tags web designers can
    add text, further tags, comments and other types of
    text-based content.

    14
    <!doctype> declaration

     doctype Declaration is the abbreviation for Document


    Type Declaration (DTD).
     The doctype Declaration (DTD or Document Type
    Declaration) does a couple of things:
    1. When performing HTML validation testing on a web page
    it tells the HTML (Hypertext Markup Language) validator
    which version of (X)HTML standard the web page coding
    is supposed to comply with. When you validate your web
    page the HTML validator checks the coding against the
    applicable standard then reports which portions of the
    coding do not pass HTML validation (are not compliant).
    2. It tells the browser how to render the page in standards
    compliant mode.

    15
    <!doctype> declaration

    3. The <!doctype> declaration must be the very first thing


    in your HTML document, before the <html> tag.
    4. The <!doctype> declaration is not an HTML tag; it is an
    instruction to the web browser about what version of
    HTML the page is written in.
    5. In HTML 4.01, the <!doctype> declaration refers to a
    DTD, because HTML 4.01 was based on SGML. The DTD
    specifies the rules for the markup language, so that the
    browsers render the content correctly.
    6. HTML5 is not based on SGML, and therefore does not
    require a reference to a DTD.

    16
    The General Syntax

    < element attribute = “value”>


    CONTENT
    </element>

    17
    Understanding Page Structure

     Necessary Structure is
     First Line DOCTYPE
     HTML -> head -> title -> body

    18
    HTML Web Page

    <!doctype html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>

    19
    HTML Examples
     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 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
    20
    21
    22
    Creating your first Web Page

     Ctrl +N = New Document Window


     Select HTML and Select Doctype (DTD)
     You have your first page ready.
     Save it with name: index.html, default.html

    23
    Creating your
    Creating first
    your Web
    first Page
    Web Page

    24
    Running your First Web Page

     Press F12 to run in default browser.


     You can also add browsers in this list.
     A primary and secondary browser can be set.
     Secondary browser shortcut = Ctrl +F12

    25
    W3C Validator

    26
    Adobe Dreamweaver Validator

    27
    Thank you!

    28

    You might also like