Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Intro To html-p1

    Hochgeladen von

    api-234051847
    145 Ansichten29 Seiten

    Originaltitel

    intro to html-p1

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    145 Ansichten29 Seiten

    Intro To html-p1

    Hochgeladen von

    api-234051847

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 29

    GED 512

    Introduction
    to HTML

    Part I

    Dr. Roby
    Overview
    How HTML works
    What is (X)HTML?
    Anatomy of an HTML webpage
    Popular HTML elements
    Popular HTML tags
    Website anatomy
    Website architecture
    FTP: How to Go Live with your website
    Website #1 Assignment Rubric
    How HTML Works
    (X)HTML Code
    (Created using a text
    Reads editor such as Notepad
    or TextEdit

    Browser
    (such as Firefox) Displays

    Webpage
    What is an HTML Webpage?

    A webpage is a set of HTML code


    used to identify a page elements
    type, format, and structure
    What is HTML?

    HTML: Hypertext Markup Language

    Most web pages are written using


    mostly an HTML code format
    What is XHTML?

    XHTML is a reformulation of HTML so


    that it can address more complex
    documents and data structures
    What is XHTML?

    The X in XHTML comes from XML


    [eXtensible Markup Language], A
    widely used system for defining data
    formats
    What is XHTML?

    XHTML is a mash-up of HTML and


    XML. Everything you could do with
    HTML, you can do with XHTML and
    then some.
    Book Example
    See sample code on Page 25

    See webpage at:


    http://www.learningwebdesign.com/materials/chapter02/k
    itchen.html

    Link is also listed on Page 24 of Robbins book


    HTML Tags
    s t
    o
    m
    A All coding on a website created in HTML is
    l
    incased in tags

    Tags consists of an open bracket < then a


    code to announce the command you are
    about to use and then a close bracket >

    Each tag needs all 3 parts meaning


    <CODE>

    We refer to that CODE in the tag as the


    element name
    HTML Tags PAIRS
    s t
    o
    m
    A All HTML tags come in PAIRS (open and close)
    l

    The open tag has 3 parts, meaning <CODE>

    The close tag has 4 parts, meaning </CODE>


    NOTICE THE / AFTER THE OPEN BRACKET

    We refer to that goes in between the open


    and close tags as the content
    Anatomy of an HTML
    Webpage
    1. Announcement that this document is an
    HTML or XHTML document
    2. Initializing information specific to the HTML
    document such as the title and default style
    settings
    3. The webpage title that will show in the
    browser header
    4. The content that will show in the browser.
    Most of your time will be spent in this section
    Anatomy of an HTML
    webpage
    <!Doctype
    HTML>
    <HTML>
    <HEAD>
    <TITLE>
    Page title
    </TITLE>
    </HEAD>
    <BODY>
    Here is the page
    content
    </BODY>
    </HTML>
    Anatomy of an HTML
    webpage
    <HTML>
    <HEAD> The HTML tag
    announces that this
    <TITLE> is an HTML or
    Page title XHTML document
    </TITLE>
    </HEAD>
    <BODY>
    Here is the page
    content
    </BODY>
    </HTML>
    Anatomy of an HTML
    webpage
    <HTML>
    The Header tag provides
    <HEAD> information specific to
    <TITLE> the html document such
    Page title as the title and default
    format and style settings
    </TITLE>
    </HEAD>
    <BODY>
    Here is the page
    content
    </BODY>
    </HTML>
    Anatomy of an HTML
    webpage
    <HTML>
    The Title tag
    <HEAD> provides a title
    <TITLE> that will show in
    the browser
    Page Title
    header
    </TITLE>
    </HEAD>
    <BODY>
    Here is the page
    content
    </BODY>
    </HTML>
    Anatomy of an HTML
    webpage
    <HTML>
    <HEAD>
    The Body tag displays
    <TITLE> the content that will
    Page title show in the browser.
    </TITLE> Most of your time will
    be spent in this section
    </HEAD>
    <BODY>
    Here is the page
    content
    </BODY>
    </HTML>
    What Does HTML code Look
    Like?
    Book Example
    See the code on Page 25

    See the webpage at:


    http://www.learningwebdesign.com/materials/chapter02/k
    itchen.html

    Link is listed on Page 24 of Robbins book


    Our First Website
    Activity begins on Page 53
    We will build this page:
    http://http://learningwebdesign.com/chapter4/
    bistro
    Popular HTML tags

    Short list of popular tags


    (handout)
    Some Popular HTML elements

    Background color, picture, or repeating


    tile
    Text color
    Link color
    Visited link color
    Tables
    Lists
    Alignment for text, table, and image
    Width or height for tables or images
    Make Sure Your Pages Have
    Titles
    Sample Website Folder
    Structure
    mywebsite
    activities
    authors
    adams.html
    Benet.html
    sever.html
    poems
    styles
    images
    movs
    Website #1 Assignment Rubric

    Review Website #1 Assignment Rubric


    Handout
    Website Architecture
    Organization of website content

    Rules of Thumb
    Your homepage should be named index.html
    Dont use spaces in your file names; use a dash or
    underscore instead of a space
    Dont throw all documents into one big folder; organize
    and create logical nested folders
    Keep all images in one folder
    Create and organize content folders by module, page, or
    concept
    Keep a folder called Old to store replaced files until
    the replacement is permanent
    Place all important information above the fold
    Website Anatomy
    MUST HAVE:
    Domain Name Registration (i.e.,
    cocacola.com)
    Domain Name Hosting (i.e., GoDaddy)
    Content (your .html pages)
    NICE TO HAVE:
    AnyName@YourDomain.com
    Consistent and attractive formatting for all
    pages
    Consistent and user-friendly site navigation
    Contact information
    Website Anatomy
    MUST HAVE:
    Domain Name Registration (i.e.,
    cocacola.com)
    Domain Name Hosting (i.e., GoDaddy)
    Content (your .html pages)
    SHOULD HAVE:
    Email address (AnyName@YourDomain.com)
    Consistent and attractive formatting for all
    pages
    Consistent and user-friendly site navigation
    Contact information
    FTP: How to Get Stuff on the
    Web
    Website Hosting b Your Visitor
    s
    Server We dres
    Ad
    n t
    nte
    C o

    Web Address
    Your Visitor
    FTP of files
    Content

    Web
    Add
    ress

    C on
    ten
    t
    Your Computer
    Your Visitor
    How to Use Your CPP Web Space

    Your CPP web address is:


    www.csupomona.edu/~bronconame

    FTP your files from your computer to the CPP


    website hosting server. Directions for FTP-ing:
    http://www.csupomona.edu/~ehelp/sftp/winscp.html

    You get 50 MB of CPP server space by default.


    You may request additional space by calling
    x6776 (must have an academic reason)

    Das könnte Ihnen auch gefallen