Dominate that HTML!

A simple primer, Prepared by Zoe F
Materials from http://www.binaryspark.com/classes/HTML_rocks/matterials.zip

Creating a Test Page

• Create a text file in your editor, and type the words "Elvis Lives!" in it.
• Let's add a tag. Surround the words "Elvis lives!" with a B tag, so that the line now reads " <b>Elvis Lives!</b>
• Save the file as index.txt to the same folder you've unzipped your images folder to
  • Watch out for capitalization! It doesn't make a difference in your html, but it does in your file names!
• Open a tab in your browser.
• In the top navigation select File/Open File
• Find the file index.txt
• Open it!
• Now, return to your editor and Save-As, renamed as index.html
• Open it in your browser window again. This time the browser sees your tags as markup.
  

Setting up the HTML Document

• At the beginning of index.html, add a complete doctype tag
• Under that, open and close an html tag...
• And inside the html tag open and close a head tag and a body tag
• Make sure that your "Elvis Lives" content is safely nested inside your body content tags.
• Save the file, and refresh the page in your browser. If you've done it right, nothing should have changed
• Go to "View/ Page Source" to check that the browser is looking at the new version of your file.
  

Basic Text Formatting

• In our body tag, after <b>Elvis Lives</b> paste this chunk of text:
  
  

  "A website dedicated to Elvis sighting. Have you ever seen The King in your local Wendy's or supermarket parking lot? Have you ever chased him down a street begging for a Hunka Burnin' Love? This is the site for you! Unite, true believers everyone!"
  

• Place <center></center> tags beginning before the <b> in Elvis Lives and ending after "sightings"
• Use <i></i> to italicizes "A Website dedicated to Elvis sightings".
• Use the <del></del> tag to cross off the phrase "true believers"
• Our text is still all clumped together. Use two <br> tags to make a space between the word "...sightings" and "Have you ever...", and use one <br> tag to make a break after "...lives</b>"
• Create a <font></font> tag that wraps the phrase Elvis Lives! inside of the <B> tags. Give the first font tag the attribute color="#996600" so that the entire tag now reads <font color="#996600">.
  
  For a complete list of hexadecimal color codes google "Color codes" use the color picker in photoshop, or use this resource: http://www.december.com/html/spec/colorcodes.html . Why do they have such a complete one? No idea.

<B>
<i>
<del>
<center>

<BR>

<font>

Color Codes

Advanced Text Formatting

• Wrap the sentence starting with "Have you ever seen..." and ending with "...everyone" in a <p></p> tags. Give the <p> tag the attribute align = "justify". This tells the browser this section of content is one single paragraph.
• <H1>, <H2>, <H3> tags, etc, are for headings. < H1> is the largest with <H2> being smaller, <H3> smaller, etc. Wrap the phrase "Elvis Lives" in <h1></h1> tags, and wrap the phrase "A website dedicated to Elvis sighting." in <h4> tags
• Both <H...> tags and <P> tags have built in <br> tags. That means they already have spaces built-in, so we can now remove both of the <br>'s after "to Elvis sightings.</i>" and the <br> tag before "A website dedicated... "
• <H...> tags also have a built-in <b> tag, so we can remove those from Elvis Lives!.
• Add an <HR> tag just before the beginning of the paragraph. Set the "noshade" attribute to "1" to turn it on, then add two more attributes to the <HR> tag. Pick them from the <HR> reference at right. The final tag might look something like this: <hr width="100" size="1" noshade="noshade">

Lists

• Under your <HR> Tag, paste the following text:
  
  

  "Recent spottings: Waffle House in Sidney GA, Route 66, Downtown Soho, The Mirror."

• Place <ul></ul> tags around the list of places but not "Recent spottings", and add an <LI> tag to each list item
• Once you've checked that everything is displaying correctly in your browser you can delete all the unnecessary punctuation.

<OL>
<UL>
<li>

Images

• Add an image to the page right before our paragraph of the text (the area starting with "<P>Have you ever seen ...". use the <img> tag, and add an src attribute to tell the browser where to look. Right now, if you've saved index.html to your base folder, the image is located at images/USAmap.jpg.
• Give it a width attribute of width="750"
• Add another attribute to the <img> tag to make sure there is no border to the image.
• Add another attribute to provide some alt text that a text reader could read.

Table Layout

Table 1:

• Create a table with one row and one column in that row. Have it nest all of the content currently within the body tag. The final html should look like "<table><tr><TD>All the content</td></tr></table>"
• Set the Cellspacing and Cellpadding attributes of the table tag to 1 and 10 respectively. Set the Table's align attribute to center. This is an alternative way to center an element that makes nesting easier.
• Set the table width to 950px. Set the border attribute equal to 1. Just to make sure it looks right, and then once you've checked it in your browser, set it to 0. Table border does not show the same in all browsers and should always be set to 0.
• Make the bgcolor attribute of table a nice light purple color
• Make the bgcolor attribute of the cell (the <TD> tag) white. This will give us the effect of a border without using the table's border attribute.

Table 2:

• Inside the table you've just created, just after your title "Elvis Lives" and its title tags, make a brand new nested table with two rows and two columns. Move the map image in the top left cell. Make the second column fill both rows. The final html should look like:
  <table><TR><TD>map</td><td rowspan = 2>second column</td></tr><tr><td>bottom cell</td></tr></table>
• Set the Table "width" attribute equal to 100%, and set cellspacing and border to 0. Set cellpadding equal to 5.
• For the cell with the map, set the width attribute equal to 750, the same width of the image within it.
• In the second column to the right of the map, make give this cell (the <td> tag) a bgcolor attribute of beige, and use the valign attribute to align its content to the top.
• In this same cell, type the phrase "Elvis News". Underneath that, use an unordered list to create three recent Elvis-related headlines. Bold the phrase "Elvis News"
• For the final cell at the bottom of the table, make the bgcolor #3366FF. In this cell, cut and paste the html that read "<i>
  <h4>A website dedicated to Elvis sightings.</h4></i>" from the top of the page. Be careful of your nesting
• Something isn't quite right here. We are using cellpadding to keep our text from running to the very edges of the table, but that means there is a white space around the map. Fill it in by making the bgcolor on that cell #def1fa, the color of the map.

Table 3:

• Beneath the <hr> tag, create a table with three cells, and only one row.
• Make it's width attribute equal to 100%, its cellspacing equal to 5, its cellpadding and border equal to 0
• Make the width of the far left and far right cells each equal to 50%. This will have the effect of "squeezing" the center cell as small as possible. Make the valign attributes of both cells equal to "top".
• In the left most cell place the html pertaining to our paragraph, including our p tags.
• In the right most cell, place our list including the heading "Recent spottings"
• In the center, use the img tag to place an image. The image is called "spacer.gif". It is only one pixel by one pixel, transparent, and can be found in the images folder.
• Make the bgcolor attribute of the center cell black (#000000).

Note: Every cell in a table must have something in it. If a cell is truly empty, fill it with a nonbreaking space: "&nbsp;"

<table>
<tr>
<td>

colspan
rowspan

Body and Head

• Use the <body> "background" attribute to set an image as the page background. The name of the image is dotback.gif, and it can be found in the images folder. Or, you can google "repeating image" and use one of your own.
• It's always good to make a default color for the body tag just in case the image is missing. Use the "bgcolor" attribute to make "#fff95b" the a default body color n case the image can't be found.
• Add a <Title></Title> tag to your <head> area and make the content between the open and closed Title tags the name of your page: "<title>Elvis Lives!</title>". Check to make sure the top of your browser now reflects your pages new title.
• Add a <Meta> tag to the <Head> area, and give it two attributes: name and content. Name should be equal to the title of your webpage. Content should be a fast, one-sentence description of your website that will show up in search engines results when they find you.

Comments and Links

• This page is getting confusing. Let's add a comment right inside the first <TD> tags to warn users that the actual content content is about to start.
• Let's add another comment at the end of the text, just before the last </td> tag to warn users they are the end of the editable content.
• Save the page, and then let's do a save-as on the entire page too. Call the new page "secondary.html"
• On the Secondary page, go into the content inside your main content cell, and delete everything. This should be easy because you just made comments on where to start and stop deleting.
• Replace that content with the words: "Report an Elvis Sighting!". Save it, and check it in your browser.
• Open your index.html file again. After the </center> tag currently acting on your "Elvis Lives!" and "A Website dedicated to Elvis sightings" let's make some navigation. Type "Home | Report a Sigthing | Contact us" and add two <br> tags to give us some room.
• Using the <a> tag, link "Home" to your index.html page (where you currently are) using the href attribute. Set the target attribute to "_self" so that the new page will completely replace your old one
• Link the words"report a sighting" to your secondary.html page, and set the target attribute also to _self.
• Link the words "Contact Us" to a different kind of url. If we put the words mailto:recipient@example.com for our href attribute, and use our email for recipient@example.com, clicking this link will open our email browser.
• Link each news items in the list next to the map to a Google News article. Set their Target attribute to "_blank"
• Link the Map image to Google Maps. Set the link's Target attribute to "_blank"