GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 1: HTML Review

Site Structure

  • The site should have its own unique folder.
  • The file name for the home page should be index.html.
  • All of your CSS rules should be in an external stylesheet, typically at the top level inside your site folder, and often named styles.css.
  • All site images should be inside a subfolder, typically called images.
  • Any files which are related to the site but not intended for web access (such as Photoshop files) should go into a separate subfolder, such as workdesk.
  • All file and folder names should conform to a naming convention:
    • No spaces.
    • No uppercase letters.
    • No special characters other than - or _.
    • No period except where it immediately precedes the file extension (e.g. photo.jpg).
    • Use meaningful file and folder names, as they are "read" by search engines.

site map sample

HTML Skeleton

HTML skeleton

HTML Syntax

HTML Syntax

  • All HTML markup (tags, attributes and values) should be lowercase.
  • An element is typically made up of an open tag, content, and a close tag.
  • Element attributes are always located in the open tag, and are separated from the tag name and other attributes by a space.
  • All attributes values must contained within double quotes.
  • Elements which have no content, such as the image element, are called empty elements. They must be closed inside the tag. Examples:
    • <img />
    • <br />
    • <hr />
    • <link />

 

HTML Block vs. Inline Elementsempty element

  • Block elements stand alone: they start on a new line and take up all of the available space from left to right. Examples:
    • <h1>
    • <p>
    • <div>
    • <table>
    • <tr>
  • Inline elements go with the flow: they stay inline with other content and only take up enough space for the element's content. Examples:
    • <img />
    • <a>
    • <strong>
    • <em>
    • <span>

HTML Basic Elements

Element Name Markup Element Type
Paragraph <p>content</p> block
Heading 1 <h1>content</h1> block
Division Element for Content Area <div class="classname">content</div> block
Image <img src="images/imagename.gif" /> inline, empty
Line Break <br /> inline, empty
Horizontal Rule <hr /> block, empty
Emphasis (italicized by default) <em>content</em> inline
Stronger Emphasis (bold by default) <strong>content</strong> inline
Unordered List <ul>[list items]</ul> block
Ordered List <ol>[list items]</ol> block
List Item <li>content</li> block
Anchor Element <a href="http://domain.com">label</a> inline

HTML for Links

Absolute Link

An outside link.

<a href="http://google.com">Google</a>

Relative Link

An inside link.

In the Same Folder

<a href="about.html">About Our Company</a>

Down One Level

<a href="about/index.html">About Our Company</a>

Up One Level

<a href="../index.html">About Our Company</a>

Email Link

<a href="mailto:[email protected]">Email me!</a>

Image Link

<a href="http://facebook.com"><img src="images/facebook-icon.gif" alt="Facebook" /></a>

Some Final Formalities

To make your pages validate, you'll need these bits included in your HTML markup.

  • Put the DOCTYPE at the top of the code:
    <!DOCTYPE HTML>
  • Add a meta tag inside the head which identifies the content type:
    <meta charset="utf-8">
  • Make sure all images have alt attributes.

HTML5

HTML5 logoHTML has been in continuous evolution since it was introduced to the Internet in 1990.

HTML5 is the latest version of HTML/XHTML. It attempts to solve issues found in previous iterations of HTML, and addresses the needs of Web Applications, an area previously not adequately covered by HTML. HTML5 aims to reduce the need for proprietary plug-in-based rich internet application technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

The HTML standard defines a single language that can be written in HTML and XML. Although we currently call the latest draft of HTML "HTML5", the group that is working on developing the standard consider it a "living document. They recommend that we stop using version numbers.

HTML5 is unevenly supported by the various browsers.

html5readiness

What Is New to HTML5?

HTML5 introduces a bunch of new functionality within the browser window. For example, there is a new drag-and-drop feature using a new HTML attribute called draggable set to "true" and a bit of JavaScript.

There is also a canvas element which allows you to draw within the browser window. Previously, this kind of drawing could only be done in something like Flash.

One very big implementation of HTML5 is the use of the video element on YouTube.com. traditionally, YouTube has used a Flash Shockwave player to stream videos. However, Apple mobile devices such as iPhone and iPad do not recognize Flash. Users visiting the site from those devices are given HTML5 versions of the video players instead.

There are far too many new pieces to cover in a single lesson, so we'll stick to the new elements here.

Elements That Are New in HTML5

HTML5 allows us to skip using a bunch of divs with IDs to define the page content areas in our web pages. Instead, we have a host of new tag names to use.

Element Function
<article> Defines an article. There can be multiple articles on the page.
<aside> Defines content aside from the page content, such as a sidebar. There can be multiple asides on the page.
<footer> Defines a footer for a document or section. There can be multiple footers; for example, one for the page, one for the article, and one for the sidebar.
<header> Specifies an introduction, or a group of navigation elements, for a document. There can be multiple headers; for example, one for the page, one for the article, and one for the sidebar.
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels.
<nav> Defines navigation links. There can be multiple navs on the page.
<section> Defines a section in a document which is not a header, footer, article, or aside. There can be multiple sections on the page.

Do we still use <div>? Sure, use it for bits of content you want to style but which aren't really page content blocks, per se.

XHTML Markup for Page Structure vs. HTML5

Here's a quick comparison of how the markup would differ from XHTML to HTML5. I've left out any content so we can see just the structure.

XHTML Markup Example

XHTML Markup Example

HTML5 Markup Example

HTML5 Markup Example

Notice two other major changes in HTML5:

  • The doctype definition is simply <!DOCTYPE HTML>.
  • No more clutter in the open <html> tag.

How Does This Change Our CSS?

When using HTML5, you are using a lot fewer IDs in your markup. So you'll see fewer # signs in the CSS. Instead, you define what's going on in the new page content area elements. Here's a quick comparison:

CSS for html5 and xhtml comparison

 

Why Bother Using the New Elements?

It all comes back to semantics. Web semantics means that as much as possible we are using markup which describes the kind of content within it.

The makers of HTML are trying to look to the future, when websites can be more responsive to various devices such as mobile tablets and phones, as well as future search technologies. So far, there aren't any technologies truly "hooking in" to the browser's new collection of page content parts, but it will undoubtedly happen.

One user base to consider is blind people who use software called screen readers to browse web pages. The screen readers will be able to provide a kind of "table of contents" using these new elements, allowing the user to jump to the desired page content area more handily.

Similarly, search engines will certainly figure out new algorithms for determining the relevance of content based upon which part of the page it is on.

A lot of blogs and other content providers allow people to read their content via syndiccation such as Google Reader. Providing sematic elements allows for its use within syndication feeds so that the correct content is delivered.

Getting Older Browsers to Play Along

All of the newest browsers supprt HTML5 to some degree. Unfortunately, many older ones do not—in particular, Internet Explorer 8 and older. So we have a work around.

FIRST, in the CSS define all the new elements as block elements. Otherwise, any elements the browser does not recognize are interpreted as inline.

HTML5 css define html5 elements as display block

SECOND, use a bit of JavaScript to implement the new elements fully. Right-click on the file linked below and save it into a folder in your root folder named js (for JavaScript.)

html5.js

THIRD, link to the JavaScript file inside the head of your html file. It will call the JavaScript only if Internet Explorer (version 8 or older) is accessing the page.

link to JavaScript file for HTML5 in Internet Explorer 8 and older

HTML5 Resources

html5Doctor.com

HTML5Rocks.com

Link to the CSS File

The best practice is to contain all CSS styles in an external style sheet, not using internal nor inline styles. You must link to the external style sheet from the html page using a link tag. The link tag must be nested inside the page's head element.

Sample link tag:

<link type="text/css" rel="stylesheet" href="styles.css" />

CSS Syntax

  • CSS rules can be created for HTML elements, for classes called from the HTML, or for IDs called from the HTML.
  • A CSS rule has two main parts: a selector, and one or more declarations.
  • The selector is the HTML element, class or ID you want to style.
  • Each declaration consists of a property and a value.
  • The property is the style attribute you want to change. Each property has a value. The property and value are separated by a colon.
  • CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly braces.

CSS syntax

CSS for Tags/Elements

CSS can change the presentation for already-existing HTML elements.

No extra code is required in the HTML page.

Simply create a CSS rule for the HTML element, for example:

p {font-size: 12px;}

CSS for Classes

Classes are CSS styles that can be called more than once inside a single HTML page. They are ideal for using a given style repeatedly throughout a page in varying places.

You must call the class from the HTML in order to apply its styling there. Classes are called as an attribute of an HTML element, for example:

<p class="saleitem">On Sale for Only $9.99!</p>

Classes are identified in the CSS stylesheet by putting a period (.) in front of the selector, for example:

.saleitem {color: #0000ff; font-weight: bold;}

If you want to call two classes for the same HTML element, simply separate them with a space within the same attribute value, for example:

<p class="saleitem featured">On Sale for Only $9.99!</p>

If you want to style only a portion of a block element, you can make use of the span HTML element. For example:

<p>On Sale for <span class="saleitem">Only $9.99!</span></p>

CSS for IDs

IDs are CSS styles that can be called only once inside a single HTML page. Therefore they are ideal for unique content areas.

You must call the ID from the HTML in order to apply its styling there. IDs are called as an attribute of an HTML element, for example:

<div id="header"><img src="images/banner.jpg" alt="company banner"></div>

IDs are identified in the CSS stylesheet by putting a pound sign (#) in front of the selector, for example:

#header {width: 960px; height: 150px;}

Compound CSS

You can combine CSS selectors in order to define what the criteria is for a style to be applied. CSS rules with one or more selectors is called compound.

Two selectors separated by a space means that the second selector must be nested within the first selector in the HTML for the style to be applied to the second selector.

This CSS rule removes the border from a linked image:

a img {border: none;}

You can keep adding selectors, with the nesting implied by the sequence of selectors.

This CSS rule assigns a left float only to list items inside of unordered lists found in the sidebar ID.

#sidebar ul li {float: left;}

Pseudo-classes apply styles to selectors that meet certain conditions. The selector is separate by the condition with a colon (:). For example, anchor elements can behave differently depending on the action of the user:

a:link {color: #FF0000;} /* unvisited link */
a:visited {color: #00FF00;} /* visited link */
a:hover {color: #FF00FF;} /* mouse over link */
a:active {color: #0000FF;} /* selected link */

Condensing CSS

If you want to style two elements with the same declaration, you can separate the selectors by a comma (,). For example:

h1, h2, h3, h4 {color: #cccccc;}

More advanced CSS selector rules at W3C

CSS3

CSS3 is the latest standard for CSS. It has much broader support among the browsers than does HTML5.

Click on the image below for a more comprensive listing of all the CSS3 properties and selector types, and which browser versions support each.

CSS3 browser support

CSS2 already has some very advanced selectors for pinpointing specific areas in your markup for styling. CSS3 goes even further with these advanced selectors. For example, you can select for a p tag with a title attribute containing specified letter strings.

The 30 CSS Selectors you Must Memorize

However, today I just want to share with you some of the easier and prettier CSS3 properties you can play with. Remember, selectors are what you are styling (such as #wrapper,) and properties are the characteristics you are defining (such as background-color.)

Vendor Prefixes

One thing to keep in mind is that many browsers were coming up with their own properties like border-radius and box-shadow long before those properties become part of the W3C recommendations. This kind of innovation is what drives advances in the W3C specifications, not the other way around.

So what happened is that in earlier versions of Firefox, Chrome, Opera, and Safari, they had their own vendor prefixes at the beginning of the property names, and each browser might have a slightly different implementation of the property.

The latest versions of these browsers now support the W3C names of the properties, but the older ones (such as Firefox 3) may still need the original vendor prefixes.

For example, this is how we get border-radius to work in both older and newer versions of browsers:

-moz-border-radius: 10px; // Firefox
-webkit-border-radius: 10px; // Safari and Chrome
-o-border-radius: 10px; // Opera
-ms-border-radius: 10px; // Microsoft (Internet Explorer)
border-radius: 10px; // all modern browsers, including IE

We put the shorter, W3C-defined property name last in the list so that it will override the earlier implementations in newer browsers.

Progressive Enhancement

In the past, web designers worrying about cross-browser compatability used the term graceful degradation to refer to giving the latest and greatest browsers the full-course meal experience while tossing a few scraps to the sad folk unfortunate enough to be using older browsers.

Nowadays we use the term progressive enhancement to refer to a focus on the content and its accessibility. The content forms the solid base on which you layer your style and interactivity. You already know that you should be separating your content from your markup (HTML structure) and from your presentation (CSS).

In the progressive enhancement approach, you define your content first, then develop an appropriate structure for it. After that, you layer on the CSS presentation, starting with the basics which all browsers support, and enhancing it with CSS3 for browsers that are the latest versions. On top of everything else, you might bring in some JavaScript interactivity.

But if all the CSS and JavaScript fail to work for some reason (or is disabled in the browser), users can still get at the content in a way that is clearly organized because the most semantic markup has been employed. Or looking at it another way, the more modern the browser is, the more the user will get out of the visual and interactive experience. But everyone has access to the content.

It's really just a matter of perspective, but your approach can make a big difference in your code, your search engine optimization, and ultimately in the user's experience. Progressive enhancement does more than just pay lip service to older browsers.

Core Principles of Progressive Enhancement
  • basic content should be accessible to all web browsers
  • basic functionality should be accessible to all web browsers
  • sparse, semantic markup contains all content
  • enhanced layout is provided by externally linked CSS
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • end-user web browser preferences are respected

Cool New CSS3 Properties and Values

The CSS3 properties shown below are pretty well supported across all modern browsers, including Internet Explorer 9.

Want a quick way to just plug in the property and values you want and have someone else write the code for you? Try the CSS3 Generator. You'll find it's great for most of what is covered in this lesson.

CSS3 Generator

Rounded Corners

With CSS3, you can create rounded borders. In the olden days, we had to use images created in Photoshop. Rounded corners on boxes can be obtained by using the border-radius property and assigning it a measurement, typically in pixels. In order to see the rounded corners, you also need to have a visible background-color, a border, or both.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

You can even give the four corners different values.

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 40px;
-webkit-border-radius: 5px 40px 5px 40px;
border-radius: 5px 40px 5px 40px;

Box Shadow

This property gives a drop shadow to a box element such as a div. It can serve as a type of border. The values shown below represent Horizontal Length (positive is right and negative is left), Vertical Length (positive is down and negative is up), Blur Radius, and then the color in RGBa (RGB plus the amount of opacity.)

-webkit-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);
-moz-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);
box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);

You can even apply multiple shadows to the same box.

-webkit-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);
-moz-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);
box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);

Text Shadow

This property puts a drop shadow right on your text. The values look similar to those of box-shadow. Text-shadow does not work in Internet Explorer at this time, so we use a proprietary filter from Microsoft instead.

text-shadow: 2px 2px 2px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);

RGBa

RGBa is actually a value, not a property. But it is very useful in creating transparency. RGBa can be used in place of any color value, so you can make font colors, borders, or background colors partly transparent. Color in RBGa is expressed in RGB notation rather than hexadecimal. The last number is the value is opacity expressed as a number between 0 and 1.

color: rgba(153, 204, 255, .7)

border: solid 10px rgba(153, 204, 255, .7);

background-color: rgba(153, 204, 255, .7);

Gradients

Gradients can be used to give your background a special effect. Often this techniques is used to mimic lighting on a surface. Gradients are created in CSS3 as a value, usually for the background property.

For gradients, you need to define the direction of the gradient, whether it is linear or rdial, where the color stops are and what color they are. That's a lot of stuff to code correctly. Luckily, there's an online tool just for creating gradients for your stylesheet.

Ultimate CSS Gradient Generator

background: #a1f279;
background: -moz-radial-gradient(center, ellipse cover, #a1f279 0%, #62c1fc 42%, #b9a9fc 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a1f279), color-stop(42%,#62c1fc), color-stop(100%,#b9a9fc));
background: -webkit-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: -o-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: -ms-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1f279', endColorstr='#b9a9fc',GradientType=1 );

There are many more besides these. For example, check out how you can specify multiple background images for the same box.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
1 Review Site review-site.zip
Project Overview Project Overview.doc

Assignment Details

Review Site

Create a simple web page and an external stylesheet for it, from scratch. You may not use Dreamweaver—it's important to refresh your coding skills.

Here are the requirements:

  • A site folder with the appropriate site structure.
  • The HTML page has the appropriate file name for a home page.
  • The HTML page has a page title.
  • The HTML page has the HTML5 doctype and correct meta tag.
  • The HTML page has at least one of each of these elements:
    • Div to create a wrapper around all the content
    • Heading inside a header element
    • Article element which includes:
      • Paragraph of text
      • Image
      • Hyperlink
      • Ordered or unordered list
    • Copyright info inside a footer element
  • The HTML page links to an external CSS stylesheet.
  • The CSS stylesheet includes at least 5 CSS rules. One rule must define the wrapper div mentioned above. Two rules must use some of the new CSS3 properties described to the left.
  • Follow the steps to the left under the heading Getting Older Browsers to Play Along.
  • The HTML passes validation.
  • The CSS passes validation.

Dummy text is okay and the page may contain random content.

It need not include navigation nor additional pages.

Project Overview

Write up a thorough Project Overview for your business:

  • Company name
  • Type of products
  • Why does this business even need a website?
  • Detailed list of product categories and the individual products within them
  • Audience
    • What types of visitors do you want to attract (demographics)? Be specific. 
    • How technically savvy is your expected audience?
    • How large to you expect your user base to be?
    • How do you plan to appeal to this audience?
  • How do you plan to appeal to this audience? Discuss some ideas about the theme/visual metaphor in terms of colors, textures, graphics and font choices, as well as the general layout.

How to Zip Files

Mac:
  1. Select all of the files together (or a folder.)
  2. Right-click (or Ctrl-click if right-click is not enabled) on your selection, and select Compress.
  3. A file called archive.zip will be created.
  4. Rename the Zip file as appropriate.
PC:
  1. Select all of the files together (or a folder.)
  2. Right-click and select Send To > Compressed (zipped) folder.
  3. A file will be created which has the same name as one of your files but ends instead in ".zip".
  4. Rename the Zip file as appropriate.