Document Sample
HTML, XHTML and CSS Powered By Docstoc
					      Course outline
Web Design overview
Introduction to HTML

                Dr. Liu
   Software Needed
   Basic HTML5 tags and functions
   Walk thought the very first hand coding
    webpage with basic HTML5 tags
   How to submit your homework?
Software Needed
   Textpad/HtmlEditor-kit(option)
   Web Browser: IE, Firefox, Google Chrome , Safari
   How to write a html file, then view them in web
Web browsers
   Web Browser: browser display window (Internet explorer or firefox
    browser window) This is the part of the Web browser where the
    actual contents of an HTML document are displayed.
   URL: The Uniform Resource Locator is a "standard" way of easily
    expressing the location and data type of a resource. URLs is formed
     protocol is An agreement on the format for transmitting data
        between two devices. Such as Http, FTP, telnet, and so on
       address is merely the server and pathname of a given
        resource or page.
   Content: The actual 'meat' of a document -- all of the words,
    images, and links which a user can read and interact with.
What is an HTML file?
   HTML(5) stands for Hyper Text Markup Language
       An HTML file is a text file contains markup tags
       The markup tags tell the Web browser how to display the
       An HTML file must have an htm, html, or dynamic php and
        asp file extension
       An HTML file can be created using a simple text editor like
        Textpad, notepad.
       HTML documents are text files made up of HTML elements.
       HTML elements are defined using HTML tags.
           For example: <body>
   HTML tags are used to mark-up HTML elements
   HTML tags are surrounded by the two characters < and >
   HTML tags normally come in pairs like <b> and </b>
     The first tag in a pair is the start tag, the second tag is the end
      tag. These pair of tags called containers.
     Containers have to be balance-paired, nested each other, and
      can not overlapped

   Example:
   The text between the start and end tags is the
    element content
   HTML tags are not case sensitive, <b> means the
    same as <B>
       However, for the new generation HTML  HTML5, you
        have to keep everything in lower case. You are
        required to write all tags in lower case in this class.
       The World Wide Web Consortium (W3C) recommends
        lowercase tags since their HTML 4 recommendation,
        and XHTML (the next generation HTML) demands
        lowercase tags.
       HTML5 simplified the DOCTYPE tag and give more
        meaningful tags, such as: article, aside, nav, section
New features of HTML5
   Based on HTML, CSS, DOM, and JavaScript
   Reduce the need for external plugins (like
   Better error handling
   More markup to replace scripting
   HTML5 should be device independent
   The development process should be visible
    to the public
New features of HTML5
   The <canvas> element for 2D drawing
   The <video> and <audio> elements for media
   Support for local storage
   New content-specific elements, like <article>,
    <footer>, <header>, <nav>, <section>
   New form controls, like calendar, date, time,
    email, url, search
   New tags:
Basic HTML Tags and
   Tags can have attributes. Attributes can provide additional
    information about the HTML elements on your page.This tag
    defines the body element of your HTML page: <body>. With an
    added bgcolor attribute, you can tell the browser that the
    background color of your page should be red,
       <body bgcolor = "red" >
       <table border = "0" >
   Attributes always come in name/value pairs like this:
   Attributes are always added to the start tag of an HTML element.
Basic HTML tags and functions
   Basic document tags
       The tags which divide up a Web page into its basic sections,
        such as the header information and the part of the page which
        contains the displayed text and graphics.
       <html></html> tag: it tells a Web browser where the HTML in
        your document begins and ends
       <head></head> tag: it contains all of the document's
        header information
       <title></title> tag: The content your put inside of this title
        container will appear at the top of the browser's title bar
       <body></body> tag: all of the stuff that gets displayed in
        the browser window, like graphics, and links, etc.
Basic HTML tags and functions
   Basic html file stucture:
             <!DOCTYPE html>
             <html lang= “en”>
Basic HTML tags and functions
   Basic comment tag
       Format:
         <!– this is a comment-->

         Comment tag is not a container, that means there
          is NO end tag for the comment tag
Basic HTML tags and functions
   Basic formatting tags
     Headings: The heading tags are most commonly used to set
      document apart or section titles.
           <h1>…</h1>
           <h2>…</h2>
           ……
           <h6>…</h6>

       Paragraph:
           Within one paragraph, no matter how much whitespace you put
            between words, the words will be separated by one space in a Web
           <p>…</p>
           What I should do then if I want to write in separate line?
Basic HTML tags and functions
   Basic formatting tags
       Line Break - empty tag
           <br> : There is no </br> exist. This will break a line without start a new
           An empty tag means it do not have end tag
       Horizontal rule – empty tag
           <hr> insert a single Horizontal rule in the page.
           Another session separator: like put a hr before the copy right
       Preformatted tag
           <pre> … </pre>
           For example a part of program, a poem
               for i = 1 to 10
                   print i
               next i
Basic HTML tags and functions
   Basic formatting tags
       font style elements
         Bold: <b>…</b>
           Italic: <i>…</i>
       Usage defined elements
         Emphasis: <em>…</em>

         Strong: <strong>…</strong>
Basic HTML tags and functions
   Anchor tag: <a>…</a>
       Attributes:
         href stands for "Hypertext REFerence," which is the
          location of the file I want to load.
          <a href =“”>mercer</a>
       Text link:
       Mail link:
          <a href="">e-mail us</a>
       A named anchor: Using the NAME attribute, you can invisibly
        mark certain points of a document as places that can be jumped
        to directly
          <a name="tips">Useful Tips Section</a>
          <a href="#tips">Jump to the Useful Tips Section</a>
Basic HTML tags and functions
   img tag: <img> Images are placed in Web documents using
    the img tag.
       Format:
        <img src=“XX.jpg" alt=“MercerUniv.">
       Attributes:
         src identify the location of the file I want to load.
            <img SRC="URL of graphic” >
           Alt give user information about the image
            <img SRC="URL of graphic” alt = “screen tip of the image”>
       Image link:
        <a href="http:// /"><img src=“XX.jpg"
Basic HTML tags and
   List
       <ul> </ul>
       <ol> </ol>
       <li> <li>
   Example:
        <li>this is the first condition </li>
        <li>this is the second condition </li>
        <li>this is the third condition </li>
Cascading Style Sheet

HTML 4.0        XML valid HTML
                 Next Generation of HTML
                  with clearer and better
                     formats and rules
Web Design Cycle

          Feng Liu
Procedure of web design
   Test with users though your product pipeline
                User/task Analysis




Procedure of web design
   User/task Analysis
     Who are the users: observe users/ talk to users
     Old website: borrow from the history / avoid mistakes
     Task Goal / Specification
     Ask yourself what your audience wants, and center your site
       design on their needs.
   Design:
     content logic analysis
     page level / site level design
   Prototype : sample pages
     Try users shoes, walk as them
   Development : coding
   Test : go through all phases
Goals and specifications
   Goals and strategies
       What is the mission of your organization?
       How will creating a Web site support your mission?
       What are your two or three most important goals for the
       Who is the primary audience for the Web site?
       What do you want the audience to think or do after having
        visited your site?
       What Web-related strategies will you use to achieve those
       How will you measure the success of your site?
       How will you adequately maintain the finished site?
   Production issues
       How many pages will the site contain?
       What special technical or functional requirements are
       What is the budget for the site?
       What is the production schedule for the site, including
        intermediate milestones and dates?
       Who are the people or vendors on the development team
        and what are their responsibilities?
Site production checklist
   Production
       In house design / outsourcing?
       Role assignment
   Technology
       What kind of platform should your site support?
       Audience/ network?
       Dynamic HTML (HyperText Markup Language) and advanced
       Is any plug-ins required ?
       Is environments required?
       Special security or confidentiality features required
       Contact info for support personnel?
       Database support?
   Sever support
   Budgeting issue
   General information and strategies

   Site design

   Page design
   Best strategy: apply few fundamental design
    principle consistently in every Web page
    you created.
Site objective
   Academic discussion group
   Entertainment
   E-commerce
   Non-profit Org
   Etc
Information analysis
   Chunking Information into logical units
   Logical priority Establish a hierarchy (no
    shallow/ no deep => balance)
   Structure relations
   information structure >> Your site
   Analyze the functional and aesthetic success
Information Relation:
   The success of the organization of your Web site will
    be determined largely by how well your system
    matches your users' expectations.
       logical site organization allows users to make successful
        predictions about where to find things.
       Consistent methods of displaying information permit users
        to extend their knowledge from familiar pages to unfamiliar
Your user metal model based on
your site logical like this?
                         -you dead
Site Structure
Site structure: Create site diagram
Sample of page level design of New
Frontier for Learning in Retirement
Site level structure sample

  About NFLR    Calendar      gallery     classes     Mailing list

               registration   courses      event    student          instructors
Files structure
Page Design        Contrast

      Clarity / Consistency
Visual hierarchy
   Important elements are emphasized:
    emphasis everything = emphasis nothing.
   Content is organized logically and predictably
   Contrast is essential
Page Design Grid
   Consistency and predictability
       A consistent approach to layout and navigation
        allows readers to adapt quickly to your design and
        to confidently predict the location of information
        and navigation controls across the pages of your
Site Elements
   Home page: Master page layout grid
   Menus and sub-sites Resource lists, "other related
    sites" pages
   Site map
   News! / latest update time
   Search
   Contact information/directions
   FAQ pages / user feedback
Compare two designs
 SEFF     site redesign
Design principles
   Avoid blinking text and unnecessary animation.
    Use simple rollover effect for buttons.

   Doing research: Search similar sites to see what's
    out there, and make your site unique. By looking at
    the similar or related sites, you can also get ideas
    and add something you missed

   Content Keep content fresh, simple, and smart.

   Avoid using too many high-tech features or you'll
    lose the majority of your viewers.
   Ensure that your page downloads as quickly as possible;
    10 second is the MAX.

   Functional element should serve as a purpose.

   Avoid using too much of any element or technique: Too
    much emphasis = no emphasis.

   Don't automatically enable sound files. Make user control it
   Verify that your page looks good in Internet Explorer
    and FireFox (at a minimum) at various resolutions on
    Windows and Macintosh systems.

   White space Create eye relief and visual space with
    strategically placed blank areas (white space).

Shared By: