MM1123 Fundamentals of Web Page Scripting :: Art Institute

Week 2: HTML Basics

Weekly Quiz

Please go to the eCompanion and take the Week 2 Quiz. You will have 15 minutes to complete it at the beginning of class.

Your First Web Page

In this exercise, you will be writing code for your first web page.

Your page will end up similar to this one: Otter

sample for first web page

Gathering Content

To prepare, find a topic on Wikipedia. It should have an introduction of a couple of paragraphs, and it should have at least one photo. You are going to use these resources for your page content.

File and Folder Structure

file folder structure for first web pageNow create the folder structure for your web site.

  1. On the desktop, right+click and choose New > Folder.
  2. Name the folder first-web-page. This is know as your site folder or root folder.
  3. Open this folder and create another new folder called images. Most web designers keep all of the images files for their site in a folder called images.
  4. Save a topic image from Wikipedia into this images folder. Select an image which is no wider than 300px. Rename the file but don't change the file extension (.jpg, .gif, etc.)—same rules as before: lowercase, no spaces or special characters.

Creating Your HTML Document

Next, we need to create the file for your HTML code.

  1. PC: Click the Start Button and go to Programs > Accessories > Notepad. We'll use Notepad as our text editor because it doesn't allow any fancy formatting that is incompatible with HTML coding.
  2. Mac: Open TextEdit either through the Applications folder in the hard drive, or using the sreach icon in the upper-right corner. Be sure to work in Plain Text mode (which you can set in the Format menu.) If you work in Rich Text mode, you will ruin your coding.
  3. Save the file as index.html into your root folder (first-web-page) on your desktop.

Beginning Our HTML

open and close html tagsTime to start coding! First, we need to tell the web browser that it is about to read an HTML file. We also like to tell it when the HTML file is complete.

  1. At the top of your index.html file, type in <html>, which is the open tag.
  2. Hit the Enter key a couple of times and type in the close tag: </html>

html open and close head and body tagsHTML files, like people, have a head and a body.

  1. Just under the open html tag, type in <head>.
  2. Press Enter twice and type </head>.
  3. Press Enter once and type <body>.
  4. Press Enter twice and type </body>.

In the head goes information about the page that doesn't directly display within the browser window. One of these items is the page title, which displays way up at the top of the browser, in the title bar.

  1. html title elementIn between the two head tags, type in <title></title>.
  2. Click your cursor in between the two title tags, then type a title for your topic. Save your file (Ctrl+S).

View in a Browser

View your page in a browser window:

  1. Locate your index.html file within your root folder on the desktop.
  2. Right+click on the file and choose Open With > [browser of your choice].

opening an html file with a browser

Where did the content inside the title tags go? Is there any content inside the browser window?

Don't close the browser--we'll keep refreshing the page as we add more code.

html title element alone in browser window

Adding Content

Go back to Notepad/TextEdit. In the body goes the stuff that will display inside the browser window.

  1. Click on the line just below your open body tag.
  2. Copy-and-paste two paragraphs from your Wikipedia page. Remove any characters which are not basic keyboard characters (such as pronounciation or non-English characters.) For aesthetic purposes, remove all the citations (they look like this: [14].)

Save your file and refresh the page in your browser window.

What does the new content look like?

html paragraph elements in browser window without markup

Adding Structure

html paragraph elementsOkay, we clearly need to create some structure for our paragraphs. This is where the M in HTML comes in: markup.

  1. Click right before your first paragraph in Notepad/TextEdit.
  2. Type in <p>, which is the open paragraph tag.
  3. Click right after your first paragraph and type the close paragraph tag: </p>.
  4. Put open and close paragraph tags around your second paragraph.

Save your file and refresh the page in your browser window.

How has the page changed?

It would be nice to have a page heading.

  1. Click right after the open body tag and press the Enter key to start a new line.
  2. Type in <h1></h1>. These are the open and close tags for a level one heading.
  3. Click right in between the two tags and type in a heading for your page. It may be identical to your page title.

Save your file and refresh the page in your browser window.

How has the page changed?

html paragraph and heading 1 elements in browser window without CSS styling

Adding an Image

So far, this page is pretty close to what the the very first web pages looked like. Not too fancy. Let's add an image.

  1. Just after your very first open paragraph tag, type in <img src="">. This is an image tag.
  2. Click right in between the two double-quotes and type in images/.
  3. Immediately after the forward slash [/], type in the file name for your image. This completes the path from the html file to the image file.

Save your file and refresh the page in your browser window.

Where was the image placed? How does it align with the text?

html image elementIn order for blind people and search engines to understand what the image is, we need to provide alternate text.

  1. Click right after the second double-quote within the image tag.
  2. Type in a space, then this code: alt=""
  3. Click in between the two double-quotes and type in a short description of your image.
  4. After the final double-quote, type in a space and a forward slash, so that the tag ends like this: />. This "closes" the tag inside of itself.

Save your file and refresh the page in your browser window.

plain content in browser window without CSS styling

Adding Presentation

html div elementFinally, we have a very nice way to make this page look pretty. It is called CSS, which is short for Cascading Style sheets. We will look at CSS is depth later.

To use CSS, we need to add a little more structure to our page.

  1. Click right after the open body tag and press the Enter key to start a new line.
  2. Type in <div id="content">. This is an open div (division) tag, which helps us break our page up into content divisions. The class attached to the div will allow us to apply some fancy formatting to it in the CSS.
  3. Click right after your final close paragraph tag and press Enter to start a new line.
  4. Type in the close div tag: </div>.

Now we need to put the actual CSS code up in the head.

  1. Click right after the close title tag within the head, and press Enter to start a new line.
  2. Copy and paste the following code:
css style element within html

<style type="text/css">
<!--
#content {
background-color: #fff;
padding: 20px;
width: 600px;
margin-right: auto;
margin-left: auto;
overflow: auto;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: #eddeba;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
border-bottom: solid 1px #ccc;
}
p {
font-size: 12px;
}
img {
padding: 2px;
border: 1px solid #ccc;
float: left;
margin: 10px;
}
-->
</style>

Save your file and refresh the page in your browser window.

initial layout in browser window with CSS styling

Can you tell how each line of CSS code affected your page?

Customizing the Presentation

Study each line of code in the CSS and guess or determine what it does. Your instructor will give you the low-down during class. Then customize the CSS with your own font styling, colors, and other stylistic changes.

customized layout in browser window with CSS styling

Hint: I changed the background in the body by saving a background image into my images folder, then changing background-color: #eddeba; to background-image: url(images/background.gif);

Zip up your site folder and turn it in. See How to Zip Files at the bootom of the right-hand column.

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 />

empty element

HTML Block vs. Inline Elements

  • 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" alt="description" /> inline, empty
Emphasis (italicized by default) <em>content</em> inline
Stronger Emphasis (bold by default) <strong>content</strong> inline

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.

wireframe sample for a news site, gridlessPage content areas may include the following or much more:

  • Header/Site ID
  • Search
  • Login
  • Main Navigation
  • Secondary Navigation
  • Main Content
  • Advertising
  • Sidebar
  • Media
  • Footer

Once you've decided upon all the content areas that are appropriate for your site, it's time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page's interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

How to create a wireframe:

  1. Decide on which page elements will be included.
  2. Draw a rectangle on your paper which approximates the proportions of a browser window.
  3. Use a ruler or draw carefully to indicate the placement of the various page elements. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below "the fold."
  4. Label each of the page elements.
  5. Instead of drawing, you may use software instead—-but take care to include the page outline and all of the page elements, and label each element. Don't get too detailed! There should only be rectangles and labels.

wireframe sample for a news site, gridded using Paper BrowserWireframing Resources

Paper Browser

Web Design Sketchbook

10 Completely Free Wireframe/Mockup Applications

35 Excellent Wireframing Resources

Using Wireframes to Streamline Your Development

Preproduction: Site Map

A site map is a diagram showing all of the site's files and folders in a hierarchical structure. Here's how I want to you create yours:

  1. Decide what topics will be on each of your web site pages.
  2. Draw your root folder at the top: draw a wide rectangle and write its name underneath it.
  3. Draw a vertical relationship line down from the root folder and connect it with a long horizontal line.
  4. Draw short vertical lines down from the horizontal line, one for each file or folder within the root folder.
  5. Under these vertical lines, draw a rectangle for each file or folder within the root folder. Be sure to use the correct orientation: use wide rectangles for folders and tall rectangles for files.
  6. Label each folder with the actual folder name you intend to use, and each file with the actual file name you intend to use. Make sure your home page is named index.html, and that you include a stylesheet file and a folder for your images. See the first sample site map below.
  7. For more complex sites with many categories of content, you may need to collect groups of pages within subfolders. Each of these subfolders should also contain an index.html to serve as the default page for that folder. See the second sample site map below.

Remember our file and folder naming conventions:

  • No spaces.
  • No uppercase letters.
  • No special characters other than - or _.
  • No period except where it immediately precedes the file extension (e.g. index.html).
  • Use meaningful file and folder names, as they are "read" by search engines.

site map sample

complexsite map sample
Click on the image above for a larger version.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
2 Your First Web Page first-web-page.zip
Wireframes wireframe.xxx
Site Map sitemap.xxx
Week 2 Quiz Complete on eCompanion
Textbook Chap 2 ch2-summary.doc

Assignment Details

Your First Web Page

Complete the exercise on the left under Your First Web Page.

Wireframes

Create three wireframes for the home page of your final project web site. You may create them by hand or in the software of your choice. If you hand-draw them, please scan them in so you have digital files to upload. Print out a few copies of one of the templates provided at the sites linked to the left under Wireframing Resources.

Use a grid to organize your layout. Explore a variety of layouts for your page content areas. Drawing several wireframes will allow you to rule out less ideal layouts before you begin more complex drawings.

See Preproduction: Wireframes to the left.

Student Work

Site Map

Create a site map for your 5-page, final project web site. You may create it by hand or in the software of your choice. If you hand-draw it, please scan it in so you have digital files to upload.

See Preproduction: Site Map to the left.

Student Work

Homework

Read Creating a Website: The Missing Manual, 3rd Ed. Chapter 2, “Creating Your First Page”.

In your own words in a Word document named ch2-summary.docx, write a 2-paragraph summary of the key points in the chapter.


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.