Difference between revisions of "Anatomy of a Webpage 2"

From FreekiWiki
Jump to navigation Jump to search
m (oh so very basic)
 
(first draft)
Line 1: Line 1:
−
== CSS ==
+
This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.
−
*class and ID
+
 
−
*selectors
+
== Basic Terminology ==
−
*media queries (?)
+
*Elements
−
*LESS (?)
+
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
 +
*Imports
 +
*Media Queries
 +
*Transitions
 +
*Frameworks
 +
 
 +
== 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)
 +
*Double-click that file to open it in the browser.
 +
*Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
 +
**make changes
 +
**save changes
 +
**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 ==
 +
<html>
 +
  <head>
 +
    <title>My First Webpage</title>
 +
  </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 ==
 +
*[https://developer.mozilla.org/en-US/ MDN]
 +
*[http://www.w3schools.com/ W3Schools]
 +
*[http://www.webplatform.org/ http://www.webplatform.org/]
 +
*[http://caniuse.com/ Can I use...]
 +
*[http://css3generator.com/ CSS3 Generator]

Revision as of 03:55, 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
  • Imports
  • Media Queries
  • Transitions
  • Frameworks

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)
  • Double-click that file to open it in the browser.
  • Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
    • make changes
    • save changes
    • 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

<html>
  <head>
    <title>My First Webpage</title>
  </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

Retrieved from "http://wiki.freegeek.org/index.php?title=Anatomy_of_a_Webpage_2&oldid=66649"