HTML and CSS – Anatomy of a Web Page – Structure and Syntax

View Github Repository Open presentation in a new window

robleto

See all presentation from robleto

HTML and CSS – Anatomy of a Web Page – Structure and Syntax

0 1

Learning-HTML-and-CSS

An online slide deck and sample project for a three-hour course on learning basic HTML and CSS

On Github robleto / Learning-HTML-and-CSS

HTML and CSS

An introduction to structure and style on the web

by Greg Robleto

Anatomy of a Web Page

Structure (HTML)

Style (CSS)

Functionality (JS)

Why does this matter?

Nearly all code has an output.

What is your output?

What is our output?

We are going to build this:

Structure and Syntax

HTML Structure

Elements

<a>

Tags

<a> ... </a>

Attributes

<a href="http://www.fool.com">The Motley Fool</a>

Required HTML

<!DOCTYPE html>
<html>
<head>
    <title> ...</title>
</head>
<body>
    ...
</body>
</html>

CSS Syntax

Selectors (type, id, class)

p { ... }               <!-- Type Selector -->
p#sfr { ... }           <!-- ID Selector -->
p.grey { ... }          <!-- Class Selector -->

Declaration

 color: #FFFF00;

Property & Value

font-size:              <!-- Property Selector -->
16px;                   <!-- Value Selector -->

Content

Typography (HTML)

Headers

<h1>Welcome to The Motley Fool</h1>
<h2>My Watched Stocks.</h2>

Paragraphs

<p>The stock Apple is a great buy because...</p>

Italic & Bold

According to<em>Stock Advisor</em>,
there is<strong>ONE</strong> great stock to buy...

Typography (CSS)

Font Properties

p {
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: bold;

Line Properties

line-height: 18px;

Text Properties

text-align: left;
text-decoration: underline;
text-indent: 0px;
text-transform: uppercase;
}

Typography (CSS3)

Embedding Web Fonts

@font-face {
   font-family: 'Fool-Master';
   src: url('Fool-Master.eot');
   src: url('Fool-Master.eot') format('embedded-opentype'),
        url('Fool-Master.woff') format('woff'),
        url('Fool-Masterl.ttf') format('truetype'),
        url('Fool-Master.svg') format('svg');
}

Hyperlinks (HTML)

Relative from this page

<a href="aapl.html">Apple</a>

Absolute on the server

<a href="http://www.fool.com/stocks/aapl.html">Apple</a>

Anchoring within the same page

<a href="#aapl.html">Apple</a>

Opening in another window

<a href="aapl.html" target="_blank">Apple</a>

Hyperlinks (CSS)

Basic Psuedo-class examples

a { color: #990000; }
a:hover { color: #003300; }     <!-- Link is hovered over -->
a:visited { color: #000066; }   <!-- Link has been visited -->

Advanced Psuedo-classes example

nav a { 
    border-right: solid 1px #CCCCCC;
    }
nav a:last-child { border-right: none; }

Unordered Lists (HTML)

<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
</ul>
  • Milk
  • Eggs
  • Bread

Ordered Lists (HTML)

<ol>
    <li>Beat the eggs and milk together</li>
    <li>Dip the bread into the batter</li>
    <li>Fry the breat until browned</li>
</ol>
Beat the eggs and milk together Dip the bread into the batter Fry the breat until browned

Lists (CSS)

Margin and Padding Resets

ol, ul {
    margin: 0px;
    padding: 0px;
}

List Styles

li {
    list-style-type: circle;
    list-style-image: url('checkbox.gif');
    list-style-position: outside;
}

Class Exercise #1

In-Class Assignment

For the next 30 minutes, apply the learnings to markup and style the typographical elements of the 404 page to look like this:

Media

Images (HTML)

HTML

<img src="elvis.png" alt="The Motley Fool" />

Sizing with CSS

img {
    width: 200px;
    height: 200px;
}

Image Positioning (CSS)

Floating

img {
    float: left; 
    margin-right: 10px;
    margin-bottom: 10px;
}

The best places for your short- and mid-term savings

There's a vast array of appropriate places to stash the money you may need to access soon, including basic checking and savings accounts, high-yield savings accounts, money market accounts and funds, certificates of deposit, Treasury bills, and all sorts of bonds. These types of accounts are safe harbors: They won't provide killer rates of return (and may not even keep up with inflation), but they do provide a guarantee that the money you deposit will all be there when you need it.

Image Clearing (CSS)

Clearing

footer {
    clear: both;
}

The best places for your short- and mid-term savings

There's a vast array of appropriate places to stash the money you may need to access soon, including basic checking and savings accounts, high-yield savings accounts, money market accounts and funds.
Home | About The Motley Fool | Fool Disclosure | Work at The Fool

Figure & FigCaption (HTML5)

HTML

<div class="image-wrapper">
    <img src="elvis.png" alt="The Motley Fool" />
    <p class="caption">The Motley Fool</p>
</div>

HTML5

<figure>
    <img src="elvis.png" alt="The Motley Fool" />
    <figcaption>The Motley Fool</figcaption>
</figure>

Rich Media (HTML5)

Canvas (Dynamic Images)

<canvas id="fool-logo" width="200" height="200"></canvas>

Audio

<audio src="marketfoolerypodcast.mp3"></audio>

Video

<video src="investorbeat.mp4" width: 480" height="320"></video>

Forms

Text Fields (HTML)

Input and Label Fields

<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Fool">

Username:

Input Types (HTML5)

<input type="email" ... >
<input type="time" ...>
<input type="date" ...>
<input type="url" ...>
<input type="phone" ... >

Text Fields (CSS3)

Text Inputs vs Button Inputs

<input type="text" name="search" id="search" placeholder="Search">
<input type="button" value="Go">

CSS3 By Selector

input [type="text"] { ... }
input [type="button"] { ... }

Text Fields (HTML)

Textarea

<textarea name="comments">Add your comments here</textarea>

Add your comments here

Multiple Choice Inputs (HTML)

Radio Buttons (Select One)

<input type="radio" name="day" value="Friday" checked> Friday
<input type="radio" name="day" value="Saturday"> Saturday
<input type="radio" name="day" value="Sunday"> Sunday

Friday Saturday Sunday

Checkboxes (Select One or More)

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday

Friday Saturday Sunday

Multiple Choice Inputs (HTML)

Dropdown List (Select One)

<select name="day">
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

FridaySaturdaySunday

Multiple Selection List (Select One or More)

<select name="day" multiple>
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

FridaySaturdaySunday

Form Buttons (HTML)

Button

<input type="button" value="Go">

Submit Button

<input type="submit" name="submit" value="Submit Form">

Reset Button

<input type="reset" name="reset" value="Reset Form">

More Form Elements (HTML)

Hidden Input

<input type="hidden" name="tracking_code" value="abc_123">

Fieldset, Legend & File Input Demo

<fieldset>
    <legend>Upload a File</legend>
    <input type="file" name="file">
</fieldset>
Upload a File

Tables

Table Structure (HTML)

Table

<table> ... </table>

Table Row

<table>
    <tr> ... </tr>
    <tr> ... </tr>
</table>

Table Data

<table>
    <tr> 
        <td> ... </td>  
        <td> ... </td>  
        <td> ... </td>      
    </tr>
</table>

Table Structure (HTML)

<table>
    <tr> 
        <th> Company </th>  
        <th> Ticker </th>   
        <th> Price </th>        
    </tr>
    <tr> 
        <td> Apple </td>    
        <td> AAPL </td> 
        <td> $405.75 </td>      
    </tr>
    <tr> 
        <td> Google </td>   
        <td> GOOG </td> 
        <td> $810.54 </td>      
    </tr>
</table>
Company Ticker Price Apple AAPL $405.75 Google GOOG $810.54

Table Attributes (HTML)

Spanning Multiple Columns

<tr>
    <td rowspan="2"> Berkshire Hathaway </td>   
    <td> BRK-A </td>    
    <td>$160,000.00 </td>   
</tr>
<tr>
    <td> BRK-B </td>    
    <td> $106.61 </td>  
</tr>
Berkshire Hathaway BRK-A $160,000.00 BRK-B $106.61

Table Attributes (HTML)

Spanning Multiple Rows

<tr>
    <td colspan="2"> Data Points </td>
</tr>
<tr>    
    <td> P/E Ratio</td> 
    <td>17.82 </td> 
</tr>
Data Points P/E Ratio 17.82

Table Attributes (HTML)

Horizontal Alignment

<!-- Depreciated version -->
<td align="center"> Data Points </td>   

<!-- Preferred version using CSS -->
td { text-align: center; }

Vertical Alignment

<td valign="top"> Berkshire Hathaway </td>

Layout

Layout Boxes (HTML)

HTML

<div> ... </div>

HTML5

<header> ... </header>
<nav> ... </nav>
<article> ... </article>
<section> ... </section>
<aside> ... </aside>
<footer> ... </footer>

Backgrounds (CSS)

Background Image

body { 
    background-color: #1a82f7;
    background-image: url(foolBG.png); 
    background-position: 0px 0px; <!-- top & left -->
    background-repeat: no-repeat;
}

Background Color

div#main-container { background-color: #FFFFFF; }

Backgrounds (CSS3)

Background Gradiant (CSS3)

div#header {   
    /* fallback */ 
    background-color: #1a82f7; 
    background: url(images/linear_bg_2.png); 
    background-repeat: repeat-x; 

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #2F2727, #1a82f7);

    /* IE 10 */
    background: -ms-linear-gradient(top, #2F2727, #1a82f7);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

Margin, Border and Padding (CSS)

The Box Model

div {
  margin: 20px;
  border: 6px solid #ccc;
  padding: 20px;
  width: 400px;
  height: 100px;
}

Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px

Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Back to work

For the rest of class and/or homework, finish building this: