Week 3 Practical

Complete at beginning of class. Code this from scratch. Do not style the page with CSS or add any other elements. Test your work in a browser after every change in code.

  1. Create a root folder for a web page on a topic of your choice. Give it an appropriate name.
  2. Create an images folder inside it.
  3. Place a small, relevant image inside the images folder and name it appropriately.
  4. Create a new HTML file called index.html and save it to your root folder.
  5. Code the basic HTML skeleton in index.html.
  6. Give the HTML page a relevant <title> element  in the <head>.
  7. Give the HTML page a relevant <h1> element in the <body>.
  8. Add a paragraph <p> of text under the <h1>.
  9. Display your image somewhere on the page.
  10. Save everything and test the page in a browser.
  11. ZIP the root folder and turn it in to the appropriate basket in Dropbox.

You may refer to last week’s lesson, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

Review Week 3 Practical

I will run through all the steps above in a demonstration, after you have attempted it for yourself.

Student Showcase

We will take a look at any of your new work which is ready to share.

For the 3 Wireframes and Site Structure Diagram projects, we will discuss the degree to which your submission meets the stated requirements.

More HTML and CSS: HTML Exercise 2

In this exercise, you will be building more HTML skills and really diving into CSS.

Your page will end up looking like this on a phone:

Leafy Seadragon website design

And on the desktop:

Leafy Seadragon website design

File and Folder Structure

We’re going to pretend that a client sent your the content files in the download above. Now create the folder structure for your web site.

  1. On your external drive, create a new folder and name it seadragons.
  2. Create a new folder inside the root folder called images. Move the two image files from the download into the images folder: leafy-sea-dragon.jpg and leafy-sea-dragon_small.jpg.
  3. Create another new folder inside the root folder called workdesk. Move the text file from the download into the workdesk folder: seadragons.txt.

Prepping Your HTML and CSS Docs

  1. In Adobe Edge Code (or Adobe Brackets if you don’t have Adobe CC installed), create a new file.
  2. Save the file as index.html into your root folder.
  3. Open the styles.css file in Edge Code as well.

Visualizing the HTML Structure Using Wireframes

One of the best ways to decide which HTML elements you will need to structure your page, is to draw wireframes for your design.

Mobile
Leafy Seadragon mobile wireframe
Desktop
Leafy Seadragon desktop wireframe

For both designs, the blocks with dark purple outlines will be our main page areas: <header>, <section>, then <footer>.

Inside the middle <section>, there are three <article> elements outlined in pale purple.

The HTML Skeleton

Enter the following code into index.html. Type it for practice, rather than copying from here. Copying and pasting will bring over the wrong quite of quotes marks, too.

The HTML Skeleton

The Wireframe Structure

Enter the following structural elements inside the <body> element. Look at the wireframes again to see why we are adding these.

structural HTML elements

The Header Content

Enter this code inside the <header> element. This places the smaller of the two photos, and the page heading, in the browser. Click the image if you need it larger.

HTML for a heading and image in the header element

Start saving and testing your file in the browser after each step going forward,

HTML for Links: the Anchor Element

What makes the web so powerful is its ability to link from one document to another. This digital kind of link is otherwise known as a hyperlink, or anchor element. There are many kinds of hyperlinks, described below. The basic structure of a hyperlink is:

<a href=”path”>label</a>

The a stands for anchor. The href is short for hyper-reference. The label is the text (or image) that appears on the web page and typically conceals the link’s path (the URL).

Here is an example of a link written within a paragraph of text:

<p>Check out my <a href=”portfolio.html”>artwork</a>!</p>

We want the photo to link to a larger version–the other image file.

Surround the <img> tag with an anchor element like this (click to make larger):

HTML anchor element

Heading for the Articles and Footer

The rest of our content will come from the seadragons.txt file. Each <article> element will start with a <h2> element. So will the <footer> element. These are all <h2> elements because they are all in the same level of hierarchy on the page.

HTML article and footer headings

Paragraphs for the First Article

Copy over the paragraphs for the first article from the text file. Wrap each one in a <p> element.

Paragraphs for the First Article

HTML for Lists

HTML can be used to format lists of things. Some lists belong in a specific order, and some can be arranged in any order.

An example of an ordered list would be a series of steps in a set of instructions; it makes no sense to randomly change the sequence of the listed items. Track listings on music CDs are also ordered lists.

An example of an unordered list would be items that you want to pack in your suitcase; it typically wouldn’t matter what order the items were listed in.

In HTML, we use the <ol> element for ordered lists. Ordered lists are numbered (starting from 1) by default.

We use the <ul> element for unordered lists. Unordered listed are bulleted by default.

Inside each list, individual items are known as list items. Each list item is contained within an <li>element.

Each list in an HTML document has:

  • Only one list element: either <ol> or <ul>
  • One or more list item elements (<li>) nested within the list element.

Below is an example of an ordered list: instructions from a recipe. Notice that the entire list begins with an open ol tag and ends with a close ol tag. Within the <ol> element, there are three list items, each enclosed within a <li> element.

<ol>
<li>Preheat oven to 425.</li>
<li>Place fish in oiled baking dish.</li>
<li>Bake for 25 minutes.</li>
</ol>

Create an Unordered List

Our list of locations in the second article does not need to appear in any order. Therefore, use an unordered list. The text is in the text file.

HTML unordered list

Create an Ordered List

However, the list in the third article describes a chronological sequence of events. It belongs in an ordered list. Click for a larger image. The text is in the text file.

HTML ordered list

Add the Text for the Footer

Copy the footer text over from the text file. Skip the links for now. Add pipes ( | ) between the three resources.

HTML footer

Different Kinds of Anchor Paths

There are different kind of paths you might write in the href attribute for an anchor element.

Absolute Paths

Links to locations outside of the current website required that you identify the entire URL. This is known as an absolute path. The absolute path in the link below is http://google.com.

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

Relative Paths

Relative paths describe the location of another document in relation to the current document, both within the same domain name/website.

If they are both inside the same folder, you would just put the file name as the path.

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

If the destination document is in a folder one level down from the current page, the folder name would be the first part of the path, followed by a forward slash (/), followed by the file name.

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

If the destination document is in a folder one level up from the current page, the path would begin with two periods (..), followed by a forward slash (/), followed by the file name. The two periods instruct the browser to “back up” in the file structure.

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

Email Links

Anchor elements can also be used to provide a link to an email address. The critical part here is to begin the path with mailto:

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

Add Links to the Footer

Wrap each of your resources in the footer with an anchor element. The paths are in the text file. Click for a larger image if needed.

html anchor elements

You can create a little hover tooltip that will remind you which kind of path is which, using the title attribute. Add the following title attributes to the open <a> tags. Click to make bigger.

title HTML attribute in anchor tag

In the browser, a tooltip will appear upon hover for each link.

HTML tooltip on hover

CSS Basics

CSS stands for Cascading Style Sheets. CSS is used to control the presentation of your pages. That is, the HTML handles the content and basic structure, but the CSS makes it all look really nice. More about this topic in Content vs. Structure vs. Presentation below.

A single file of CSS can control the look and feel for an entire website. This means that your website looks consistent from page to page. It also means that you can make a site-wide visual change in a split second. CSS is wirtten a little differently from HTML.

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

To make the CSS more readable, you can put one declaration on each line, like this:

p {
color:red;
text-align:center;
}

CSS and HTML Comments

Comments allow you to put notes inside your code without affecting the content or presentation of your pages. This helps you organize and keep track of your code, especially in large files. It can also help you with debugging your code: just temporarily comment out a region of code and see if the problem persists.

HTML comments begin with <!– and end with –>, like this:

<!– Main Navigation –>

CSS comments begin with /* and end with */, like this:

/* Footer styles */

Inline CSS vs. Internal CSS vs. External CSS

Inline CSS
  • inline CSS appears as an attribute within an HTML open tag
  • this CSS affects only the content within that particular HTML element
<p style="color: #ccc;">Hello, world!</p>
Internal CSS
  • internal CSS appears within the head element of a page
  • this CSS affects only the current page
<head>
<title>My Web Site</title>
<style type="text/css">
p {
color: #CCC;
}
</style>
</head>
External CSS
  • external CSS appears in its own file (a style sheet ), separate from the HTML files, with the file extension of .css
  • the external CSS file does not include the style tags you see in internal CSS
  • use a link element to link in the head element of the HTML file to the external style sheet (see Link to the CSS File below)

Link to the CSS File

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

Create a new black file in Adobe Edge Code. Save it as styles.css into your root folder.

Add the <link> element inside the <head> element back in the index.html file.

Link to the CSS File

Adding in the Presentation

Open the code snippets file in a browser. A bit at a time, we will add styles to the styles.css file, as I explain what each piece does in the browser.

CSS code snippets

The Box Model

All elements on a web page conform to what is called the box model. It’s how CSS sees HTML elements. CSS treats every single element as if it were represented by a box, block and inline elements alike.

Between the box and the border is the padding.

Between the border and the next element on the page is the margin.

the box model

The CSS width assigned to the box is added to the border thickness (times 2), the padding (times 2), and the margin (times 2) when calculating the total width of the element.

For example, the following CSS makes a box 332px wide. It has a 1px border (2px total), 20px of padding (40px total), and 20px of margin (40px total). Add that 82 pixels to the box’s width of 250px, and you get 332 pixels.

#specialoffer {
width: 250px;
border: solid 1px;
margin: 20px;
padding: 20px;
}

Content vs. Structure vs. Presentation

The page content includes such things as the text and images which actually appear in the browser window.

The page structure is created by the HTML markup. Structure defines your page pieces according to their functions and meanings, such as headings, body text, lists, hyperlinks, or divs for content areas.

More about semantic markup

All of the page’s presentation should be defined in the CSS. Presentation includes such things as colors, background images, font type and size, and the layout of content areas.

content, structure, presentation

Validating your Documents

You should always run your HTML and CSS files through a validator to determine if you have properly coded them. Below I’ve decoded some of the most common errors (listed alphabetically) that result from a validation test, and how to fix them in most cases.

Remember to only worry about the FIRST error in a list of errors. Fix it and upload your HTML or CSS file again for validation.

You will also need to rely on your own understanding of proper HTML and CSS syntax.

Be sure to validate today’s code prior to submitting your site.

Some Common HTML Validation Errors / Warnings

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

Your attribute value is missing double quotes. Put double quotes on both sides of an attribute value, like this:

<div id=”footer”>

character “&” is the first character of a delimiter but occurred as data

The ampersand (“&”) is a special character in HTML. It should be replaced by the character entitity &amp; in the code.

document type does not allow element “______” here

This error message often comes up for any line of code if there is a missing close tag right before it. Find and close any elements with missing close tags.

document type does not allow element “body” here

You have placed a <body> tag within the main content of your page, or you may have duplicate open <body> tags. Move or remove the <body> tag, as appropriate.

document type does not allow element “li” here; missing one of “ul”, “ol”, “menu”, “dir” start-tag

Your list is either missing an open <ul> or <ol> tag, or that tag is in the wrong place.

document type does not allow element “p” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag

You may have tried to nest a block element inside an inline element. For example, in the following code the <h1> element (a block element) is nested inside an <a> element (an inline element.) Always place block elements outside inline elements.

<a href=”creations.html”><h1>My Creations…</h1></a>

document type does not allow element “title” here

You have probably opened your <title> tag twice. Change the second one to a close </title> tag.

end of document in prolog

Believe it or not, sometimes the validator has errors itself. Try the page again in a few minutes, or try the Validate by Direct Input tab.

end tag for “br” omitted, but OMITTAG NO was specified

The break tag (an empty element) is written incorrectly as <br>. Rewrite it as <br />.

end tag for “p” omitted, but OMITTAG NO was specified

You have an open <p> element which was not closed. Put </p> in an appropriate location to close the <p> element.

end tag for element “div” which is not open

You have too many close </div> tags. Remove the extra one.

ID “menu” already defined

You have used an ID attribute more than once. Any given ID name can be used only once on an HTML page. Remove any duplicates.

required attribute “alt” not specified

You have an image tag which is missing the required “alt” attribute. Add the “alt” attribute and describe the image. Example:

<img src=”images/brick.jpg” alt=”photo of a red brick wall” />

there is no attribute “bgColor”

You are attempting to use an attribute with a tag that does not exist in the W3C recommendation. You should probably be using CSS instead to get what you want.

Some Common CSS Validation Errors / Warnings

Family names containing whitespace should be quoted.

You have a font name which contains more than one word and it is not surrounded by quotations marks. Add quotation marks around any font name consisting of more than one word.

Parse Error }

There is an extra } symbol. Remove it.

Parse Error Lexical error at line 1, column 18. Encountered: “/” (47), after : “<style type=u0094text”

You have put the HTML <style> tag inside a CSS document. Remove it.

Value Error : ________ is not a style value

You have put the wrong kind of value with your property. For example, in this bit of code, the border-top-style is not supposed to be a numerical value:

border-top-style: 800;

Value Error : ________ attempt to find a semi-colon before the property name. add it

The line above the line specified is missing its ending semi-colon. Make sure that all declarations end in a semi-colon.

Value Error : color ________ is not a color value

You have a missing pound sign (#) if front of the hexadecimal value representing your color. Add it.