Document Sample
HTML and CSS Powered By Docstoc
					HTML & CSS
  Web & New Media
  Infocomm Studies
 Hwa Chong Institution
          Overall Objectives
 To create a functional website (at least 3-
  pages) using basic HTML and CSS
 To be able to embed external media (i.e.
  images, web 2.0 technologies) into the
1.   Understand HTML to create web pages
2.   Link web pages
3.   Add images
4.   Understand CSS to format web pages
5.   Embed external media
    1. Understand HTML to create web pages

   HTML – HyperText Markup Language
        “Mark-up” texts on how they will be displayed in
         browser i.e. headings, paragraphs)
   <html>…</html>
        Indicate that the contents is HTML
   <head>…</head>
        Contains web page information i.e.
   <body>…</body>
        Contains main content and structure
   HTML code structure
        (Refer to the right image)
   Saving in HTML format
        .html or .htm
                             HTML Tags
   Has 3 parts: start tag, content, end tag
        note: some do not have end tag as they have no content
   <p>…</p>
        To make paragraph
   <h1>...</h1>,<h2>…</h2> etc. to <h6>…</h6>
        To make different size headings
   <b> or <strong>..</strong>
        To make bold text
   <em>..</em>
        To make emphasized text / italic
   <u>..</u>
        To underline text
   <br>
        To make line break, note no closing tag
   <hr>
        To make horizontal rule / line, note no closing tag
   <a href=“…”>…</a>
        To create link
   <img src=“…”>
        To add image, note no closing tag
                 Link web pages
   <a href=“…”>…</a>
   For example:
    <a href=“”>Hwa Chong
       Link to HCI’s homepage
       Absolute URL (external page)
   <a href=“contact.html”>Contact Us</a>
       Link to a contact’s web page
       Relative URL (internal page)
   <a href=“contact.html”
    target=“_blank”>Contact Us</a>
       Link to a contact’s web page on a NEW window
                  3. Add images
   <img src=“…” width=“…” height=“…”
    border=“…” alt=“…”>
   For example:
    s/logo2.gif” width=“143” height=“59”
    border=“3” alt=“Gmail”>
       Add Gmail’s logo with the stated dimensions
       Show tooltip / label “Gmail” when mouse-over the logo
    4. Understand CSS to format web pages

   CSS – Cascading Style Sheets
   Defines how html elements are
   3 ways to use CSS:
      1. Internal style sheet (not our focus)
      2. Inline styles (not our focus)
      3. External style sheet (our focus)
           External Style Sheet
   Styles normally saved
    in external .css files
     Itchanges
      appearance and
      layout of multiple
      pages all at once

     Itis located in the
      same folder as the
      html file
          External Style Sheet
   Each page link to .css file using <link>
    tag which goes inside head section
     <head>
      <link rel="stylesheet" type="text/css"
   .css file looks
    something like this
    on the right:
          External Style Sheet
   Without styles

   With styles
        5. Embed external media
 Use   of <object>…</object> tags
  Embed youtube video
  Embed flickr image gallery slideshow
  Embed google form
  Embed google map

   YouTube Video
   Flickr Image
   Google Maps

Shared By: