Week 2 - HTML & CSS

20 views
Skip to first unread message

Molly

unread,
Apr 1, 2015, 3:43:15 PM4/1/15
to hourofcode-at-so...@googlegroups.com

Hello, all!


HTML & CSS are primary tools for all web developers, regardless of whether you work in Front-End or Back-End. In this thread, we'll review what we've learned about these tools, and add some new information as well.

As we go along, I'd highly recommend that you reference W3Schools.com (http://w3schools.com). It's a valuable and helpful resource you can use again and again!

HTML5 - Review
Creating a basic HTML page
  1. DOCTYPE html → beginning and end of every document
    <!DOCTYPE html> <!-- start of document -->
    </html> <!-- end of document -->

  2. Basic tag syntax:
    <tagname>I now show up! Yay!</tagname>

  3. All HTML pages contain: a head and a body
    1. Head → contain information about the page, links to external files, and metadata
    2. Body
      1. Div blocks → used to organize website's structure into “blocks” (more about this in CSS section)
      2. Paragraphs
      3. Footers → contain general website information and credits
  4. Head
    1. Title
      <head>
      <title>
      Welcome to My Website! This will show up in the browser's window/tab, but not on the page itself
      </title>
      </head>

    2. Linking to CSS / Javascript
      <head>
      <link rel="stylesheet" type="text/css" href="mystylesheet.css">
      <script src="myjavascriptfile.js"></script>
      </head>

  5. Body
    1. Page Content, such as paragraphs, divs, images, etc.
      <body>
      <p>Here is my first paragraph.</p>
      <p>Here is my second paragraph.</p>
      <img src="myimage.jpg" alt="Here's an image">
      </body>

HTML5 - In Depth
  1. HTML is for "marking-up" text to:
    1. clearly indication sections within the document
    2. uniformly format data without a particular design or "style"
  2. Thus, HTML is intended for the presentation of data and information
  3. Elements
    1. Headers
      <h1>Header One - I'm the biggest!</h1>
      <h2>Header Two - I'm a little bit smaller than Header One</h2>
      .
      .
      .
      <h6>Header Six - I'm the smallest!</h6>

    2. Paragraphs
      <p>These tags are used to indicate paragraphs.</p>

    3. Comments
      <p>These tags are used to indicate paragraphs.</p>

    4. Images
      <img src="myimage.jpg" alt="this is a picture" />

    5. Links
      <a href="http://www.website.com/somethingsomething.html">Something!</a>
      <a href="newpage.com" target="_blank"></a> <!-- open in a new window or tab -->
      <a href="google.com"><img ... /></a>
      <a href="pagename.org/mypage" title="follow this link to my page!">My Page</a>

    6. Quotations and block quotes
      <q>short quote</q>
      <blockquote>paragraph quote</blockquote>

CSS - Theory
  1. CSS: Cascading Style Sheets
  2. CSS can be written anywhere in an HTML document: in the head, in-line, or linked to externally.
  3. Only ever use external! There may be some cases where you'll need to do in-line styling, but they are few and far between.

CSS - Content
  1. Go to CSSzengarden.com
    1. Select the following Designs one at a time
      1. Steel by Steffen Knoeller
      2. Apothecary by Trent Walton
      3. Screen filler by Elliot Jay Stocks
      4. A Robot Named Jimmy by meltmedia
    2. Note that the content (data) of the page is exactly the same in each example
    3. The only thing that changes is the CSS file, which defines: 
      1. Color
      2. Layout (element positioning)
      3. Design images (such as the logo, background image, etc) used in the document
  1. Linking to an external CSS stylesheet file
    <link rel="stylesheet" href="spreadsheet_name.css">

  2. Define CSS in header
    <style>attribute: style;</style> <!-- in header -->

  3. Define CSS in-line
    <span style="color: green;">This text is now green.</span>

  4. Comments
    /* This is a single line comment */
    /* This is a multi-line comment
    which uses the same syntax as above */

  5. Block-level elements vs. Inline elements
    1. Most HTML elements are defined as block level elements or inline elements.
      1. Block level elements normally start (and end) with a new line, when displayed in a browser.
        1. Examples: paragraphs, lists, tables
      2. Inline elements are normally displayed without line breaks
        1. Examples: bolding or italicizing text, links, images
  6. Block-level elements
    <div id="sub-section">
        <p>This is a sub-section of the document</p>
    </div>

  7. Inline elements
    One popular search engine is <a href="http://www.google.com">Google</a>.

  8. How to alter an element by type
    h1 {
        color: red;
    }
    p {
        font-family: Arial, Sans-serif; 
        color: #000000; /* hexadecimal value for black */
    }

  9. How to alter an element by group or class
    <!-- HTML5 code -->
    <div id="article-content">
        <p class="large-text">Have you ever wanted to make your 
            own website? It's surprisingly easy to do!
        </p>
        <p class="normal-text">The first thing you need to know 
            is that HTML and CSS are used to make simple websites, 
            like those we'll be building today.
        </p>
    </div>
    /* CSS code */

    /* Defining the div with id "main-article"
       Use id selector '#', followed by the div id
       ex: #div-id, #main-column
    */
    #article-content {
        font-family: "Times New Roman", Times, serif;
        font-size: normal;
    }

    /* Defining the paragraphs with classes
       "large-text" and "normal-text"
       Use class selector '.', followed by the class name
       ex: .class-name, .subsection
    */
    p.large-text {
        font-size: large;
        font-weight: bold;
    }

    p.normal-text {
        color: #000000;
        font-weight: normal;
    }

  10. Classes vs. IDs
    1. Classes are for groups of elements, which may show up multiple times within a document
    2. IDs are for unique elements of a page, which will typically show up only once in a document
Online Resources:
  1. W3Schools: http://w3schools.com
  2. CodeCademy: http://www.codecademy.com/en/tracks/web
  3. Look at the source code of other websites!
I hope you've enjoyed this quick look at HTML & CSS! Please let us know if you have any questions about this information, or other HTML and/or CSS issues. 

Happy Coding!
Reply all
Reply to author
Forward
0 new messages