Anatomy of a Webpage 2

From FreekiWiki
Revision as of 05:06, 20 March 2013 by Bsandberg (talk | contribs) (updating the HTML structure)
Jump to navigation Jump to search

This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.

Basic Terminology

  • Elements

HTML elements are also knows as tags, such as <html>, <div>, and <p>.

  • ID

Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.

  • Class

When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes.

  • Order of Operations

Instructor Notes

  • Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.css".
  • Students should also create a new HTML file. Contents should be the Beginning HTML Structure. (see below)
  • Double-click the HTML file to open it in the browser.
  • Begin building the CSS and altering the HTML structure, bit-by-bit, discussing things such as proper syntax.
    • make changes
    • save changes
    • reload browser

Beginning HTML Structure

<html>
  <head>
    <title>My First Webpage</title>
    <link rel="stylesheet" type="text/css" href="name.css">
  </head>
  <body>
    <h1>Headline</h1>
    <p>Paragraph text.</p>
    <h2>Headline</h2>
    <p>Paragraph text.</p>
    <div>
      <h1>Headline</h1>
      <p>Paragraph text.</p>
      <h2>Headline</h2>
      <p>Paragraph text.</p>
    </div>
  </body>
</html>

Resources

Extra Credit

Saving these for the future, or if there's extra time in class.

  • Browser Prefixes

CSS which applies only to certain browsers or rendering engines.

  • Media Queries

CSS which is dependent upon the size of the browser window.

  • Transitions

Making CSS move.

  • Frameworks & Utilities
    • LESS
    • Bootstrap
Retrieved from "http://wiki.freegeek.org/index.php?title=Anatomy_of_a_Webpage_2&oldid=66650"