HTML Mock-Up

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ENTER YOUR WINDOW TITLE HERE </title>
<link href="gr.css" rel="stylesheet">or
<style>
…all style rules here…
</style>
</head>
<body>
ENTER ALL YOUR
WEB PAGE CONTENT HERE
<!-- The following will be useful to validate your work -->
<p>
Validate:
<a href="
<a href="
</p>
</body>
</html> / Page Template
p
{
font-size: 14pt;
} / The font-size

Sans-Serif
Arial, sans-serif;
Helvetica, sans-serif;
Gill Sans, sans-serif;
Lucida, sans-serif;
Helvetica Narrow, sans-serif;
sans-serif;
Serif
Times, serif;
Times New Roman, serif;
Palatino, serif;
Bookman, serif;
New Century Schoolbook, serif;
serif;
Monospace
Andale Mono, monospace;
Courier New, monospace;
Courier, monospace;
Lucidatypewriter, monospace;
Fixed, monospace;
monospace;
Cursive
Comic Sans, Comic Sans MS, cursive;
Zapf Chancery, cursive;
Coronetscript, cursive;
Florence, cursive;
Parkavenue, cursive;
cursive;
Fantasy
Impact, fantasy;
Arnoldboecklin, fantasy;
Oldtown, fantasy;
Blippo, fantasy;
Brushstroke, fantasy;
fantasy;
/ Font Families
{
background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif;
} / Page Background
Text Color
Text Font
<p style="font-size:14pt">Text</p> / Inline (somewhere in body)
h1
{
background:blue;
color:yellow;
} / Headline background color
Headline text color
h1
{
border-width:2px;
border-style:solid;
border-color:#ff0000;
} / CSS border Property
If used with a BLOCK ELEMENT (e.g., h1, h2, p, div, ...), the border extends to browser’s margin (or specified width)
<h2> Heading with Border </h2>
If used with an INLINE ELEMENT (e.g., a, i, em, b, span, ...), the border closely outlines the element content
<a href="test.html"> This anchor tag has a border </a>
h2
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: red;
} / Configuring Specific Sides of a Border
Use CSS to configure a line on one or more sides of an element
◦border-bottom
◦border-left
◦border-right
◦border-top
h2
{
border:2px solid #ff0000;
}
h2
{
border:2px solid #ff0000;
padding:5px;
} / The CSS padding Property
Configures empty space between the content of the HTML element and the border
Padding is set to zero by default
Example: Without Padding
Example: With 5px of Padding
h2
{
border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;
} / Use CSS to configure padding on one or more sides of an element
padding-bottom
padding-left
padding-right
padding-top
.new
{
color:#FF0000;
font-style: italic;
}
/ Use class selector
  • It applies CSS to a certain "class" of elements on a Web page
  • Does not associate the style to a particular tag element
Configure with .classname (prefixed with a dot)
  • The sample creates a class called “new” with red italic text. Note: the dot (.) is not part of the id’s name.
  • To use the class above , code the following HTML:

<p class="new"> This is text is red and in italics</p>
#new
{
color: #FF0000;
font-size:2em;
font-style: italic;
}
/ idselectors in CSS
  • Use id selector - Applies a CSS rule to ONE element on a Web page (unique ID)
  • Configure with #idname (prefixed with #) - The sample creates an id called “new” with red, large, italic text. Note: the # is not part of name. To use this id, code the following HTML (without #):
<p id="new"> This is text is red and in italics</p>
p {…} - Applies to all p elements (only one element selector)
h1,h2,h3 {…} - Applies to all h1,h2, and h3 elements (multiple elements)
.note {…} - Applies to any element that has class="note"
p.note {…} - Applies to any p element that has class="note"
#footnotes {…} - Applies to the one element that has id="footnotes"
p#footnotes {…} - Applies to whichever p element has id="footnotes" (This would be weird since there is little point in including the p) / Selector Variations
footer
{
color:green;
} / CSS Contextual Selector Example
To use this id, code the following HTML (without #):
<footer>
<p>Questions?</p>
</footer>
(Key Concept—Contextual selectors help us reduce the number of classes and ids)
#container
{
margin-left: auto;
margin-right: auto;
width:80%;
} / Centering Page Content with CSS
Embedded style examples:
body
{
margin-top:50px;
margin-bottom:50px;
margin-left:100px;
margin-right:100px;
}
Inline style examples (alternative to 3rd example above)
<body style="margin:50px 100px"> / Margin Sizes - Margin sizes (like other size properties) can be given in units of pt, in, cm or px
img
{
border-style:none;
} / Browsers automatically add a border to image links, but you can configure CSS to eliminate the border
figure
{
width: 640px;
border: 1px solid #000000;
padding: 5px;
} / Configure border & padding for an image
figcaption
{
text-align: center;
font-family: Papyrus, fantasy;
} / Configure a caption for an image
body
{
background-image: url(background1.gif);
} / Configures a background-image =
h2 {
background-color: #d5edb3;
color: #5c743d;
font-family: Georgia,Times New Roman,serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
} / Using background-repeat
body
{
background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
no-repeat bottom right,
url(trilliumgradient.png);
} / Multiple Background Images
h1
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
} / Rounded Corners
  • -webkit-border-radius (for Safari & Chrome)
  • -moz-border-radius (for Firefox)
  • border-radius (W3C syntax)

#wrapper
{
-webkit-box-shadow: 5px 5px 5px #828282;
-moz-box-shadow: 5px 5px 5px #828282;
box-shadow: 5px 5px 5px #828282;
} / box-shadow Property
h1
{ background-color: #FFFFFF;
opacity: 0.6;
} / opacity Property
- Configure the opacity of the background color
Opacity range:
◦0 Completely Transparent
◦1 Completely Opaque
horizontal offset,
vertical offset, blur radius,
and valid color value
{
position: relative;
left:30px;
font-family:Arial,sans-serif;
} / Relative Positioning - Changes location of an element in relation to where it would otherwise appear
{
position: absolute;
left:200px;
top:100px;
font-family:Arial,sans-serif;
width:300;
} / Absolute Positioning - Precisely specifies the location of an element within the browser window
h1 {
background-color:#cccccc;
padding:5px;
color: #000000;
}
p {
font-family:Arial,sans-serif;
}
#yls {
float: right;
margin: 0 0 5px 5px;
border: solid;
} / float Property
Elements that seem to “float" to the right or left side of the window or an element within it are often configured using the float property.
<div id="leftcolumn">
<ul>
<li<a href="index.html">Home</a</li>
<li<a href="menu.html">Menu</a</li>
<li<a href="directions.html">Directions</a</li>
<li<a href="contact.html">Contact</a</li>
</ul>
</div> / Navigation links in an Unordered List
#leftcolumn ul { list-style-type: none; }
#leftcolumn a { text-decoration: none; } / CSS removes the list marker and underline
<div id="nav">
<ul>
<li<a href="index.html">Home</a</li>
<li<a href="menu.html">Menu</a</li>
<li<a href="directions.html">Directions</a</li>
<li<a href="contact.html">Contact</a</li>
</ul>
</div> / Navigation links in an Unordered List
HTML Attribute / CSS Property
.shadow
{
box-shadow: 3px 3px 5px 6px #ccc;
} / The box-shadow property can specify one or more drop shadows. The components of each shadow are interpreted as follows:
  • Required: The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
  • Required: The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
  • Optional: The third length is a blur distance. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
  • Optional: The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.
  • Optional: The color is the color of the shadow.
  • Optional: An inset keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it)

background-image1
{
background-position:top center
}
background-image2
{
background-position:top right
} / Background image (left is default)
Pseudo-class / Purpose
:first-of-type / Applies to the first element of the specified type
:first-child / Applies to the first child of an element (CSS2 selector)
:last-of-type / Applies to the last element of the specified type
:last-child / Applies to the last child of an element
:nth-of-type(n) / Applies to the “nth” element of the specified type
Values: an integer number, odd, or even
tr: nth-of-type(even) {
background-color: #eaeaea;
} / To Zebra Stripe a Table
#nav ul { list-style-type: none;}
#nav a { text-decoration: none;
padding-right: 10px; }
#nav li { display: inline; }
#nav ul { list-style-type: none;}
#nav a { text-decoration: none;
padding-right: 10px; }
#nav li { display: inline; }- horizontal display / CSS that removes the list marker and underline, adds padding, and configures items for inline display (horizontal)
background-color: #8FA5CE;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#8FA5CE));
background-image: -moz-linear-gradient(top, #FFFFFF, #8FA5CE);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE);
linear-gradient(#FFFFFF, #8FA5CE); / Gradients
a smooth blending of shades from one color to another
Use the background-image property
◦linear-gradient()
◦radial-gradient()
body
{
background-image: url(background1.gif);
} / CSS background-image Property
h2 {
background-color: #d5edb3;
color: #5c743d;
font-family: Georgia,Times New Roman,serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
} / Using background-repeat
body {
background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
no-repeat bottom right,
url(trilliumgradient.png);
} / CSS3 Multiple Background Images
#yls {
float: right;
margin: 0 0 5px 5px;
border: solid;
} / float Property
a:link {color:#000066;}
a:visited {color:#003366;}
a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
a:active {color:#FF0000;} / Pseudo-classes and the anchor element - and more than just the color can be changed (font style, size, background image, and most anything)

<header>
<hgroup>
<h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1>
<h2>the best coffee on the coast</h2>
</hgroup>
</header> / hgroup element
<a href="contact.html">
Contact
</a> / Elative Link
<a href=" target="_blank" >
Yahoo!
</a> / Opening a Link
in a New Browser Window
{
background-position:top center/right
} / Placing background image – default is left
Left-column navigation
◦float: left; width:150px;
Right-column content
◦float: right; width: 200px;
Center column
◦No float/width – uses remaining available width that’s unused by the floating columns
◦margin: 0 210px 0 160px;
Footer – clears the float
◦clear: both; / Three Column Layout

HTML Code

<br> / Line Break
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6> / The Heading Elements
<p>…paragraph goes here…</p>
<p> Sentence1. Sentence2. …more sentences…
Last sentence.
</p> / The Paragraph Element
<blockquote>
…text goes here…
</blockquote> / The blockquote
<div>Text</div> / div element - Configures a structural block area or “division” on a web page with empty space above and below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li> … </li>
</ul> / HTML Unordered List - Displays itemized information with bullet points.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li> … </li>
</ol> / HTML Ordered List –Numbered List
<dl>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
</dl> / HTML Description List - Useful to display a list of terms and definitions or a list of FAQ and answers. Each term/phrase starts on a new line. Each description (following the term) is indented
<a href=" / Absolute link - Link to other Web sites
<a href="index.html">Home</a> / Relative link - Link to pages on your own site
<a href="mailto:">
</a> / Email Links
<p style="font-size:14pt"> / Inline (somewhere in body)
Useful for Windows, Mac, Other, and Generic choices:
  • font-family: Arial, Geneva, Helvetica, sans-serif
  • font-family: Times New Roman, Times, serif
  • font-family: Courier New, Courier, fixed, monospace
  • font-family: Comic Sans, Comic Sans MS, cursive
/ The font-family Property
Margin:0 auto 0 auto
Top left bottom right / Margins
<hr> / Configures a horizontal line
.name / <p class="name"</p>
#name / <p id="name"> Text</p> (Applies a CSS rule to ONE element on a Web page)
background-color
color
line-height
margin
text-align
text-decoration
width
font-weight - Configures the boldness of text
font-style - Configures text to an italic style
font-size - Configures the size of text
font-family - Configures the default typefaces of text / Some common CSS properties (see table 3.1)
<img src="cake.gif" alt="birthday cake" height="100" width="100"> / HTML Image Element
src attribute – identifies the file name of the graphic
alt attribute – Configures alternate text content (description)
height attribute – sets the height of the graphic in pixels
width attribute – sets the width of the graphic in pixels
Required: Configure the alt attribute
◦Alternate text to convey meaning/intent of the image
◦Don’t use the file name of the image (non-descriptive)
◦Use alt="" for purely decorative images (no text)
<a href="index.html">
<img src="home.gif"
height="19“
width="85"
alt="Home">
</a> / Image Links
<span> tag / The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
<p style="text-align:center;"> </p> / Inline center
<link rel="icon" href="favicon.ico"
type="image/x-icon" > / Favorites Icon – favicon
A square image
associated
with a Web
page
Usually named:
favicon.ico
May display in the browser address bar, tab, or favorites/bookmarks list
We showed how to turn off bullets, but you can alter the visual effects in other ways in ul, ol, or li elements with CSS, such as the following:
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-image:url(arrow.gif)
list-style-type:decimal →1. 2. 3.
list-style-type:lower-roman →i ii iii iv
list-style-type:upper-roman →I II III IV
list-style-type:lower-alpha →a. b. c.
list-style-type:upper-alpha →A. B. C. / List-style-type can alter the visual effects in other ways in ul, ol, or li elements with CSS - you can also affect color, font, size, background, start-at count, and more
Configure a class:
◦If the style applies to multiple elements on a page
◦Use the . (dot) notation in the style sheet (in the selector)
◦Use the class= attribute in the HTML
Configure an id:
◦If the style is specific to only one element on a page
◦Use the # notation in the style sheet (in the selector)
◦Use the id= attribute in the HTML.
Create meaningful names, not presentational ones
◦Poor: redTextBetter: cautionaryNote
◦Ten most commonly used class names:
footer, menu, title, small, text, content, header, nav, copyright, button / Deciding to Configure a class or id
/ New HTML5 Structural Elements

CSS Properties

CSS Property Groups

  • Animation
  • Background
  • Border and outline
  • Box
  • Color
  • Content Paged Media
  • Dimension
  • Flexible Box
  • Font
  • Generated content
/
  • Grid
  • Hyperlink
  • Linebox
  • List
  • Margin
  • Marquee
  • Multi-column
  • Padding
  • Paged Media
  • Positioning
/
  • Print
  • Ruby
  • Speech
  • Table
  • Text
  • 2D/3D Transform
  • Transition
  • User-interface

HTML Style Sheet

Help Links
/ How the Internet Works -
HTML/CSS tutorials -
HTML Validator -
CSS Validator -
The World Wide Web Consortium sets standards for HTML and related languages.
/
Browsers are given Domain Names in the URL, but the packet itself needs the IP addresses / Try this (from DOS command prompt - cmd):
  • nslookup domainName - Gives the IP address (inside IP address if a Graceland site)
  • nslookup domainName s2.graceland.edu - Same as above except outside IP address if a Graceland site

General Web Page Structure
HeadSection - There is one and only one head section - Contains info to describe the Web page document
<head>
…head section info goes here
</head>
BodySection Contains text and elements to display on the page. There is one and only one body section.
<body>
…body section info goes here
</body> / <html>
<head>
<title> (insert text for the browser’s title bar here)</title>
</head>
<body> (insert visible Web page elements here)</body>
</html>
Special Characters - All characters, including space or tab, have alternative text or numeric codes. Some special symbols can only be written in HTML using such codes. /
Document Type Definition (DTD) - doctype statementidentifies the version of HTML used in your fileplaced at the top of a web page document / <!DOCTYPE html>
HTML – Template with CSS / <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gary Rees' World </title>
<style>
Body
{
background:#FFFF56;
color:red;
}
</style>
</head>
<body>
Hello World!
<br<br>
WOW WOW WOW WOW - This is kule!
</body>
</html>
Some common CSS properties (see table 3.1) / background-color
color
font-family
font-size
font-style
font-weight
line-height
margin
text-align
text-decoration
width
CSS Embedded styles / Embedded styles include selectors and are listed as content of the style element in the head section:
<style>
body {
background:yellow; color:blue;
}
h1,h2
{
background:blue; color:yellow;
}
</style>
Configured in the header section of a Web page.
Use the HTML <style> element
Apply to the entire Web page document
Style declarations are contained between the opening and closing <style> tags
CSS Inline style / But inline style settings are set in an attribute within the tag itself down in the body section:
<body style="background:yellow; color:blue;">
<h1 style="background:blue; color:yellow;">
Introduction </h1>
CSS Embedded Styles /
  • Configured in the header section of a Web page.
  • Use the HTML <style> element
  • Apply to the entire Web page document
  • Style declarations are contained between the opening and closing <style> tags

The Heading Elements / <h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
The Paragraph Element - Groups a set of text together with a gap of space between elements above or below it. / <p>…paragraph goes here…</p>
<p> Sentence1. Sentence2. …more sentences…
Last sentence.
</p>
The line break element - The browser decides where lines will wrap but you can force it with the BR-tag / BR is a stand-alone tag (<br> or <br/>)
The blockquote element - This is like a paragraph but it is indented for special emphasis (e.g. like a quote) / <blockquote>
…text goes here…
</blockquote>
Phrase Elements / Bold text = <b>
Emphasized text = <em>
Italicized text = <i>
Mark text <mark>
Small text <small>
Strong text <strong.
Subscript text = <sub>
Superscript text = <sup>
HTML Unordered List - Displays itemized information with bullet points. Bullet style is a disc (depending on browser) but the type attribute can change that. / <ul>…</ul> – Encloses an entire unordered list
(usually with multiple line items)
<li>…</li> – Contains an item in the list
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
HTML Ordered List - Displays itemized information as ordered. There are only 2 different tags used for this. The items are numbered with numerals by default but the type attribute can change it. / <ol>…</ol> – Encloses an entire ordered list
(usually with multiple line items)
<li>…</li> – Contains an item in the list
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
HTML Description List - Useful to display a list of terms and definitions or a list of FAQ and answers. Each term/phrase starts on a new line. Each description (following the term) is indented. Uses 3 different tags. / <dl>…</dl> – Encloses an entire definition list with multiple terms and their descriptions
<dt>…</dt> – Contains a term/phrase/sentence.
Gives space above and below it.
<dd>…</dd> – Contains a description of the term.
Is indented with space above and below
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
div element - Configures a structural block area or “division” on a web page with empty space above and below. Can contain other block display elements, including other div elements / <div>Home Services Contact</div>
The anchor element (a-tag) - Hyperlinks are defined in anchor elements (A-tag). Every Hyperlink has two parts:
The link destination (a URL specified in an href attribute)
The link label which is the visible part we click on / Absolute link
Link to other Web sites
<a href="
Relative link
Link to pages on your own site
<a href="index.html">Home</a>
Email Links using the <a> tag - Automatically launch the default mail program configured for the browser. If no browser default is configured, a message is displayed / <a href="mailto:">
</a>
Making Color Choices /
  • Monochromatic
  • Choose from a photograph or other image
  • Begin with a favorite color
  • Use one of the sites below to choose other colors

CSS properties for configuring text / font-weight
◦Configures the boldness of text
font-style
◦Configures text to an italic style
font-size
◦Configures the size of text
font-family
◦Configures the default typefaces of text
The font-size Property / Embedded (in head/style section): p {font-size: 14pt;}
Inline (somewhere in body): <p style="font-size:14pt">