Student Showcase

Let’s take a look at your museum homepage mockup from last week.

Coding HTML and CSS 1

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 your external drive, create a new folder.
  2. Name the folder something relevant to your topic (keep the name short but descriptive, and don’t use spaces or special characters). This is know as your root folder.
  3. Open this root 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. Open Adobe Edge Code (or Notepad on the PC if you don’t have Adobe CC installed).
  2. File > New.
  3. Save the file as index.html into your root folder.

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:
inline css<style type="text/css">
<!--
#content {
background-color: #fff;
padding: 20px;
max-width: 800px;
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 changingbackground-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 bottom of the right-hand column.