Making Your First Web Document
Step 1: Whenever you’re starting a new web project, whether it be your personal website or a project website, you want to organize all your files. Create a folder on your Desktop called my_website. Keep it all lowercase and no spaces.
Step 2: Open up a New Document with the text editor of your choice. If you’re on a Mac, use TextWrangler. If you don’t have it, download it here for free. If you’re on a PC, use, Textpad.
Step 3: Before we write anything, lets save this sucker as index.html. Make sure you save it in the folder that you created called my_website. Because you’re naming this file as index.html it will automatically read as the homepage of your new website.
Step 4: Now, we code. In this class, we’re going to be doing everything from scratch. Writing xhtml code is like making a sandwich. There’s a few elements that are absolutely necessary to include in your document. Look at the structure below (explained in class). You can also download the example below here.
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /><br /><%%KEEPWHITESPACE%%> <head><br /><br /><%%KEEPWHITESPACE%%> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br /><br /><%%KEEPWHITESPACE%%> <title>My First Page</title><br /><br /><%%KEEPWHITESPACE%%> </head><br /><br /><%%KEEPWHITESPACE%%> <body><br /><br /><%%KEEPWHITESPACE%%> <h1>This is a big bold heading</h1><br /><br /><%%KEEPWHITESPACE%%> <ul><br /><br /><%%KEEPWHITESPACE%%> <li>Milk</li><br /><%%KEEPWHITESPACE%%> <li>Bread</li><br /><%%KEEPWHITESPACE%%> <li>Eggs</li><br /><br /><%%KEEPWHITESPACE%%> </ul><br /><%%KEEPWHITESPACE%%> </body><br /><br /></html><br /><br />
Step 5: Save your document.
Read about each breakdown.
Doctype: used to declare the DTD (Document Type Definition) for an XHTML document. For this class, you should use XHTML transitional. This tag is mandatory and must appear at the top (on the first line) of all XHTML code. If the DOCTYPE DTD tag is not present, then it is not XHTML code.Html: encloses all other tags and content on the page, and further serves to instruct the browser that what is being rendered on the rest of the page.Head: contains information that is not displayed in the browser window. For instance, a head tag may include information that search engines may use to find the page.Title: contains the text that appears in the title bar of the browser window. It is always nested within the head tag.Body: contains all of the information to be displayed by the browser. In this class I like to call everything in the body THE JUNK IN THE TRUNK.
Step 6: Open on Safari, Firefox, or Internet Explorer on your computer. Go ahead and drag the file into your browser. If you’re not sure what I mean by drag, you can also go to File > Open > my_website > index.html. What you are doing now is viewing your document after it’s been translated by your browser. It should be a blank white screen.
Step 7: As a CD student, you probably love typography (if you don’t, well…that’s just weird). Just like in print, information architecture and design hierarchy come into play when making your first website. When you look at sites like www.amnestyinternational.com, www.cnn.com, my.barackobama.com, all these guys have headers, titles, subtitles, paragraphs, blockquotes, et cetera. Lets get your started with how to make these elements in your index.html.
There are two types of HTML formatting tags: inline and block level tags. These two types have slightly different behaviors. Look to the right to see some examples.
Step 8: Save your document.
Step 9: If you haven’t exited out of your internet browser, go ahead and just refresh the local page. If you already exited out of your internet browser, repeat step 6. You should now be able to view some text on your screen.
Step 10: Practice. Time to discuss the homework due before class next week.
