Scribd Logo
Upload

Welcome to Scribd!

  • HTML CSS JavaScript Basics

    Uploaded by

    Harshit Mehta
    5 views24 pages
    HTMLS CSS

    Original Title

    4. HTML CSS JavaScript Basics

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTMLS CSS

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views24 pages

    HTML CSS JavaScript Basics

    Uploaded by

    Harshit Mehta
    HTMLS CSS

    Copyright:

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

    Tutorial 1: Getting Started with

    HTML5

    Session 1.1

    Objectives
    Explore the history of the Internet, the

    Web, and HTML


    Compare the different versions of HTML
    Study the syntax of HTML tags
    Define a Web page head, body, and title
    Work with the HTML5 structural elements

    Introducing HTML
    Web pages are written in HTML
    HTML = HyperText Markup Language
    Characteristics:
    Describes the content and structure of a

    document
    Uses tags
    HTML Ancestor
    SGML = Standard Generalized Markup

    Language

    XHTML and the Development


    of HTML 5

    Tools for Creating HTML


    Documents
    Basic text editor such as Windows Notepad

    (PC) or TextEdit (Mac).


    Other software programs that enable you to
    create documents in different formats, such
    as Microsoft Word or Adobe Acrobat,
    include tools to convert their documents
    into HTML for quick and easy publishing on
    the Web
    Web publishing software manages all of the
    code and extended features of your site

    Entering Elements and


    Attributes
    An HTML document is composed of

    elements that represent distinct items in


    the Web page, such as a paragraph, the
    page heading, or even the entire body of
    the page itself
    Elements are marked by one or more tags

    A two-sided tag is a tag that contains

    some document content. General syntax


    for a two-sided tag:
    <element>content</element>
    6

    Marking Elements with


    Tags

    A two-sided tags opening tag (<p>) and

    closing tag (</p>) should completely


    enclose its content
    Elements can contain other elements
    Tags cannot overlap

    <p>CBIS 3219: Web Development</p>

    Adding an Attribute to an
    Element
    To add an element attribute, use the format

    <element attribute1=value1
    attribute2=value2
    ...>content</element>
    where attribute1, attribute2, etc. are the
    names of attributes associated with the
    element, and value1, value2, etc. are the
    values of those attributes.
    <p align =left>CBIS 3219: Web
    Development</p>
    8

    Exploring the Structure


    of an HTML File
    <html>
    <head>
    head content
    </head>
    <body>
    body content
    </body>
    </html>

    HTML is like a
    Sandwich???

    Practice
    Create a new html page and save it as

    basic.html
    Create the root html element and nest the
    head and body elements within it.

    Document Type
    Declaration

    Prior to the opening <html> tag, many HTML

    files also include a Document Type


    Declaration, or doctype, to indicate the type
    of markup language used in the document.
    Doctype for HTML 4.01:
    <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01/EN
    http://www.w3.org/TR/html4/strict.dtd>

    Doctype for XHTML:


    <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0
    Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd>

    Doctype for HTML5:


    <!DOCTYPE html>

    Practice
    Add the doctype for HTML5 to the basic

    page.

    Head Element
    Page Title (appears in the title bar of the

    browser)
    Syntax:
    <title>document title</title>
    Example:

    <title>Shop clothes for women, men,


    maternity, baby, and kids | Gap </title>

    Practice
    Set the page title of the Basic page to The

    J-Prop Shop Special This Month.

    Adding Comments
    Purpose: Explain your code to yourself or
    others.
    Comments are not displayed in the browser.
    Comments can be spread over several lines if

    necessary.
    Syntax:
    <!-- comment -->
    Example:

    <! The doctype of this document indicates that


    HTML5 is used -->

    Practice
    Within the head element, insert the

    comment
    The J-Prop Shop
    Sample Page for the Basic Stick
    Author: Your name
    Date: the date

    Defining the Structure of the


    Page Body

    Example of the J. Whitney Bunting College of Business


    Web site:
    http://www.gcsu.edu/business/deanswelcomeundergrad.h
    tm

    Insert HTML5 Structural


    Elements
    Example:

    <header>
    </header>
    <nav>
    </nav>
    <section>
    </section>
    <aside>
    </aside>
    <footer>
    </footer>

    Within the section structural


    element
    <section>
    <article>
    </article>
    <article>
    </article>
    </section>

    No Structural Element in
    HTML 4.01 or XHTML
    Replace the structural elements with div

    elements.
    Syntax:
    <div id=id>
    content
    </div>

    Practice
    Within the body element, create structural

    elements for the page header, main


    section, and footer.

    Summary of tags
    <doctype>
    <html>
    <head>
    <body>
    <title>
    <header>, <section>, <article>, <nav>,

    <aside>, <footer> or <div>


    Comments: <!-- Tips: use comments to
    explain your code-->

    You might also like