Difference between revisions of "Anatomy of a Webpage 2"

From FreekiWiki
Jump to navigation Jump to search
(first draft)
(updating the HTML structure)
Line 7: Line 7:
 
Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.
 
Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.
 
*Class
 
*Class
−
*Imports
+
When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes.
−
*Media Queries
+
*Order of Operations
−
*Transitions
 
−
*Frameworks
 
  
 
== Instructor Notes ==
 
== Instructor Notes ==
−
*Students should launch Leafpad, and create a new file on the desktop with their first name, in lowercase "name.html". Contents should be the Beginning HTML Structure. (below)
+
*Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.css".
−
*Double-click that file to open it in the browser.
+
*Students should also create a new HTML file. Contents should be the Beginning HTML Structure. (see below)
−
*Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
+
*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
 
**make changes
 
**save changes
 
**save changes
 
**reload browser
 
**reload browser
−
*Students should find a simple image (like a kitty) and download it to the desktop, named "name.jpg" or similar.
 
  
 
== Beginning HTML Structure ==
 
== Beginning HTML Structure ==
Line 25: Line 23:
 
   <head>
 
   <head>
 
     <title>My First Webpage</title>
 
     <title>My First Webpage</title>
 +
    <link rel="stylesheet" type="text/css" href="name.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
Line 46: Line 45:
 
*[http://caniuse.com/ Can I use...]
 
*[http://caniuse.com/ Can I use...]
 
*[http://css3generator.com/ CSS3 Generator]
 
*[http://css3generator.com/ CSS3 Generator]
 +
 +
== 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

Revision as of 04:06, 20 March 2013

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"