HTML Basics I & II Reference Guide:



HTML Basics III Reference Guide: Mr. Kay, Engineering & Design

1. What are tables:

Tables are very useful. We use them to store tabular data so it is easy to read! When you want to present information neatly in a table with rows and columns—you guessed it—the tag is what you need.

There are many tags associated with tables, but it all starts with the tag, so let's add that first.

1. Add an opening and closing set of tags to the body of this HTML document.

2. Go to the Result view. You'll notice that nothing visible was added. That's because our table's not populated yet! We'll learn how to do that soon.

Code:

Table Time

2. Rows of information:

A table is just a bunch of information arranged in rows and columns.

We use the tag to create a table row. We'll learn how to create columns shortly, and everything will start to come together. (You don't really create columns in s: instead, you tell each row how many cells to have, and that determines your number of columns).

We'll get to the details of table cells in a minute. In the meantime, we've added a set of tags to the table on line 9, creating a table row.

Add two more rows to the table on line 11 and line 12.

Code:

Table Time

3. Adding a single column

Look at the HTML now. Can you tell that there are still three rows? We've added a little more whitespace to make it easier to deal with table columns and table data.

We've added a single ("table data") cell to the first row, essentially creating a single column. If you view the Result tab now, you'll see that we've drawn a border around it. it's not that impressive, but don't worry: we're about to add more table data cells.

We're starting to add a lot of HTML elements now. Make sure to indent your tags as you nest them so you don't get confused!

1. In the second row, add a table data () cell and type Two between the tags.

2. In the third row, add another cell with Three between the tags.

3. Go to the Result view. You can see that we have 1 column with 3 rows, and each row contains exactly one cell.

Code:

Table Time

One

Two

Three

Gives Results:

|One |

|Two |

|Three |

4. Adding a second column

It may not have seemed like much, but you just created a single-column table in the last exercise. Nice work!

Now take a look at what we have on our page. Notice in the first table row we now have two table data cells.

Adding a second table data cell has the effect of adding a second table column, although if you go to the Result view, it may look funny because only the first row has two cells. Let's fix that!

1. Add to the second row a table data cell with the value 1897

2. Add to the third row a table data cell with the value 1935

3. Check out the Result view. We now have a total of 2 columns and 3 rows, and each row has 2 cells.

4. Sweet! We now have a basic table. Go on to the next section to find out how to add a header and a title to our table.

Code:

Table Time

King Kong

1933

Dracula

1897

Bride of Frankenstein

1935

Gives the following results:

|King Kong |1933 |

|Dracula |1897 |

|Bride of Frankenstein |1935 |

5. Head of the Table

Here's the table we made earlier. It's okay, but it just looks like we have a list of famous Hollywood people (monsters?) and their birth years. To make our table look a little more like a table, we'll use the and tags. These go within the tag and stand for table head and table body, respectively.

The HTML tag contains information about a web page (e.g. its title) and the tag contains the contents of the web page. In the same way, the tag can be thought of as containing information about a table and the tag containing the actual tabular data.

Since everything we currently have is just tabular data, put everything we have in our table so far between a set of tags. We'll add the table head next!

Code:

Table Time

King Kong

1933

Dracula

1897

Bride of Frankenstein

1935

6. Invisible Head:

You'll notice now that we added a tag above the . This works much the same way as in that you can add rows to a .

Why learn or if nothing visible changes? Well, it's a good idea to separate a table into head and body because it will help us style the table in CSS, which you'll learn very soon!

1. Add a single row (with the ) within the table heading section.

2. Within this row, add two table header cells with the values Famous Monster and Birth Year. (If table data cells were made with , how do you think you can make table header cells? Check the Hint if you need help.)

Code:

Table Time

Famous Monster

Birth Year

King Kong

1933

Dracula

1897

Bride of Frankenstein

1935

Results:

|Famous Monster |Birth Year |

|King Kong |1933 |

|Dracula |1897 |

|Bride of Frankenstein |1935 |

7. Naming Your Table:

Our table is missing a title. We want to add a title row that goes all the way across the top. To do so, we need to use the colspan attribute for the tag. By default, table cells take up 1 column. If we want a table cell to take up the space of 3 columns instead of 1, we can set the colspan attribute to 3. It looks like this:

3 columns across!

1. Go to the Result view. We've added the title row for you, but it only spans 1 column right now.

2. Make the column span 2 columns with the colspan attribute. Adding the attribute colspan="2" to a tag should do the trick.

3. Return to the Result view again. Our title spans 2 columns now!

Code:

Table Time

Famous Monsters by Birth Year

Famous Monster

Birth Year

King Kong

1933

Dracula

1897

Bride of Frankenstein

1935

Results:

|Famous Monsters by Birth Year |

|Famous Monster |Birth Year |

|King Kong |1933 |

|Dracula |1897 |

|Bride of Frankenstein |1935 |

8. Style that Head

Your table is starting to look great, but it's still a little bland. We've gone ahead and added some styling to the table to make it a bit easier to read. It's your job to add the finishing touches!

Feel free to play around with any of the style attributes we added; you'll learn much more about these things later during the CSS courses. If you want to add more than one style, you just separate your styles with a semicolon, like so:

1. Make the "Famous Monster" and "Birth Year" labels emphasized (i.e. make them italicized).

2. Make the "Famous Monsters by Birth Year" title red.

Code:

Table Time

Famous Monsters by Birth Year

Famous Monster

Birth Year

King Kong

1933

Dracula

1897

Bride of Frankenstein

1944

Results:

|Famous Monsters by Birth Year |

|Famous Monster |Birth Year |

|King Kong |1933 |

|Dracula |1897 |

|Bride of Frankenstein |1944 |

9. Divide and Conquer

One of the most versatile structure tags available to you is the tag. Short for "division," allows you to divide your page into containers (that is, different pieces). This will come in handy when you begin learning CSS in the next unit: you'll be able to style different parts of your website individually!

Check out the Result tab. You should see three blocks: one red, one blue, and one green. Each one is its own container. Now you try! On line 10, create your own and give it the background-color yellow. Use the width and height syntax we've used for the other s as a guide.

Code:

Result

Results: (Won’t show)

10. Unordered Lists:

Nice work! As you can probably guess, the smart use of s will eventually allow you to create visual HTML objects like sidebars, menus, and more. Just like with images, you can make s clickable by wrapping them in tags. Go ahead and make your yellow link to your favorite site! Check the Hint if you need a refresher.

Remember, the tags go around the thing you want to make a link, like so:

Code:

Result

11. Spantastic

While allows you to divide your webpage up into pieces you can style individually, allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in tags and make them red using CSS!

For now, we'll continue to use the style attribute to change colors. Wrap the word "red" in the editor in tags and give the tag style="color:red". Notice how only the word between the tags changes color!

Code:

This text is black, except for the word red!

Results:

This text is black, except for the word red!

12. Span is the man:

Great! You're really getting the hang of this. These tags can be a little tricky, though, so let's go through one more example. Color is just one attribute you can selectively change with tags; you can also change font size, font family, and any other style attribute you can think of!

Use tags to change the word "Futura" to the font Futura. Leave the rest of the text as-is—don't include the exclamation point in the tag!

Code:

Result

My favorite font is Futura!

Results:

My favorite font is Futura!

13. Recap: Great work! In addition to what you've already learned, you now know how to:

1. Divide up your webpage for easy styling with tags

2. Select pieces of text and change their properties using tags

In the next course, we'll see how we can take much of the styling we've been doing—such as controlling font family, font color, and text alignment—and put it in its own separate file. By doing that, we can use tags like and to impart style to our pages without writing style="color:red" every single time!We've given you a taste of how can be powered by CSS in the editor. Check it out on the Result tab. Cool, huh?

Code:

Ye Olde Fancye Booke

Ye Olde Storye

A long time ago there was an intrepid young student who wanted to learn CSS...

stylesheet.css

p {

font-family:Garamond;

font-size:16px;

}

h3 {

font-family:cursive;

color:#36648b;

text-align:center;

}

span {

color:#cc0000;

font-size:24px;

}

Results:

Ye Olde Storye

A long time ago there was an intrepid young student who wanted to learn CSS...

14. Tables are not just for data:

Great! Now we'll need three cells per row (to get nine cells altogether). Add three table cells per row to get a total of nine cells.

Code:

My Photo Page

Good work! Next up: find nine pictures. You can use any image links you like! If you can't think of any, try searching "stock photo" using your favorite search engine. Remember, tags are one of the few tags in HTML that are self-closing. This means that instead of

you should type

This is because nothing goes between the opening tag and the closing one, so you can safely open and close it with a single tag. Insert an between each set of tags. Make sure to set each src attribute to the image URL you want the picture to be of!

Code:

My Photo Page

Mr. Kay's Pics

Results in the following: (Can’t show in word)

15. Link them up:

Perfect! Now you just need to wrap each tag in tags. Remember to give each tag a href attribute and set it equal to the web address you want your link to go to! (Check the Hint if you're stuck.)Put tags around each tag. There's no need to make your src attributes and href attributes point to the same web address—in fact, we encourage you to make them different!

Do you remember how tags work?

Code:

My Photo Page

Mr. Kay's Pics

Results: Can’t show in word.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download