@Sarah 2015-12-26T20:32:34.000000Z 字数 13732 阅读 918

HTML Basics III

HTML

Introduction

Our HTML journey has been progressing very nicely. We've covered:

how to set up the skeleton of an HTML file
headings, paragraphs, images and links
font colors, sizes, and types
background colors, aligning text, bolding and italic izing font
In this course, we'll cover some important structural aspects of HTML:

s, and s!

Instructions
To get warmed up:

Make the heading have the font family Arial.
Add an image!
Add a second image which is clickable and links to a site. (Check the Hint if you don't remember how to do this.)
?

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <h1 style="font-family:Arial">Tables Are Mega Sweet
        </h1>
        <p>tttt</p>
        <img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" />
        <a href="http://www.baidu.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-04-19%20%E4%B8%8B%E5%8D%889.56.28.png" />
        </a>
    </body>
</html>

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

There are many tags associated with tables, but it all starts with the

Instructions
Add an opening and closing set of

Rows of information

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

We use the

Instructions
We'll get to the details of table cells in a minute. In the meantime, we've added a set of

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

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table>
            <tr></tr>
            <!-- Add two more rows below this! -->
            <tr></tr>
            <tr></tr>
        </table>
    </body>
</html>

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!

Instructions
In the second row, add a table data ( ) cell and type Two between the tags.
In the third row, add another cell with Three between the tags.
Go to the Result view. You can see that we have 1 column with 3 rows, and each row contains exactly one cell.

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>One</td>
            </tr>
            <tr>
                <td>Two</td>   
            </tr>
                <td>Three</td> 
            <tr>
            </tr>
        </table>
    </body>
</html>

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!

Instructions
Add a tag to the second

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>King Kong</td>
                <td>1933</td>     
            </tr>
            <tr>
                <td>Dracula</td>
                <td>1897</td>
            </tr>
            <tr>
                <td>Bride of Frankenstein</td>
                <td>1935</td>
            </tr>
        </table>
    </body>
</html>

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 < thead> and < tbody> tags. These go within the < table> 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

Instructions
Since everything we currently have is just tabular data, put everything we have in our table so far between a set of

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>     
                </tr>
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Table Heads

We have just added a

You add text to a

<thead>
  <tr>
    <th>
      Name
    </th>
    <th>
      Favorite Color
    </th>
  </tr>
</thead>

First we have an opening

Inside the table heading element, add a single row using a

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <thead>
                <tr>
                    <th>
                    Famous Monster
                    </th>
                        <th>
                        Birth Year
                        </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>     
                </tr>
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

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 < th> 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:

< th colspan="3">3 columns across!
Instructions
Go to the Result view. We've added the title row for you, but it only spans 1 column right now.
Make the column span 2 columns with the colspan attribute. Adding the attribute colspan="2" to a tag should do the trick.
Return to the Result view again. Our title spans 2 columns now!


< html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <thead>
            <th colspan="2"></th>
                <tr>
                    <th>Famous Monsters by Birth Year</th>
                </tr>
                <tr>
                    <th>Famous Monster</th>
                    <th>Birth Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>     
                </tr>
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

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:

<th style="font-size:12px; color:red"></th>

Instructions
Make the "Famous Monster" and "Birth Year" labels emphasized (i.e. make them italicized).
Make the "Famous Monsters by Birth Year" title red.

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table style="border-collapse:collapse;">
            <thead>
                <tr>
                    <th colspan="2" style="color:red">Famous Monsters by Birth Year</th>
                </tr>
                <tr style="border-bottom:1px solid black;">
                    <th style="padding:5px;"><em>Famous Monster</em></th>
                    <th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:5px;">King Kong</td>
                    <td style="padding:5px;border-left:1px solid black;">1933</td>     
                </tr>
                <tr>
                    <td style="padding:5px;">Dracula</td>
                    <td style="padding:5px;border-left:1px solid black;">1897</td>
                </tr>
                <tr>
                    <td style="padding:5px;">Bride of Frankenstein</td>
                    <td style="padding:5px;border-left:1px solid black;">1944</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Recap

Woosh! We've learned quite a bit.

What can you do now?

Write an HTML comment
Create a list (ordered and unordered)
Make text stand out using and < strong>
Change the color, size, and alignment of text using the style attribute
Create HTML tables
Instructions
Hit Save & Submit Code to complete this section and learn about two incredibly useful tags: < d iv> and < s pan>!

'Div'ide and conquer

One of the most versatile structure tags available to you is the

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.

Instructions
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.

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <div style="width:50px; height:50px; background-color:red"></div>
        <div style="width:50px; height:50px; background-color:blue"></div>
        <div style="width:50px; height:50px; background-color:green"></div>
    <div style="width:50px; height:50px; background-color:yellow"></div>    
    </body>
</html>

Link it!

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.

Instructions
Go ahead and make your yellow

link to your favorite site! Check the Hint if you need a refresher.

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <div style="width:50px; height:50px; background-color:red"></div>
        <div style="width:50px; height:50px; background-color:blue"></div>
        <div style="width:50px; height:50px; background-color:green"></div>
        <a href="http://www.baidu.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
    </body>
</html>

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!

Instructions
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!

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>This text is black, except for the word <span style="color:red">red!</span></p>
    </body>
</html>

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!

Instructions
Use tags to style the word "Impact" with a font family of Impact. Leave the rest of the text as-is—don't include the exclamation point in the tag!

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <p>My favorite font is <span style="font-family:Impact">Impact</span>!</p>
    </body>
</html>

Recap

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

Divide up your webpage for easy styling with

tags
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!

Instructions
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?

Hit Save & Submit Code to finish this course and move on to the wonderful world of CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Ye Olde Fancye Booke</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <h3>Ye Olde Storye</h3>
        <p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
    </body>
</html>

Some photos on your table

You know all about tables now. But did you know that tables are useful for much more than formatting text?

You can use a table to create a beautifully formatted grid of photos.

You'll notice we've included an extra file in this project: stylesheet.css. You'll be learning about CSS in the next lesson and project, but we thought you might like a sneak peek here. This file will help format your HTML to keep it looking great.

Instructions
Hit Save & Submit Code to start your photo project!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>My Photo Page</title>
    </head>
    <body></body>
</html>

Remember: it's better with a header

You'll want to give your table a header so everyone will know what your photos are of and about.

To make sure your header looks nice, remember to set its colspan attribute to 3 (since you have three columns and you want the header to go across all of them).

Instructions
Create a table header using

?
Hint
The table header (

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>My Photo Page</title>
    </head>
    <body>
        <table>
            <thead></thead>
                <th>table</th>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Nine pictures are worth 9,000 words

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.

Instructions
Insert an between each set of

The sky's the limit

Beautiful! You've now got a great-looking table of clickable images to display on your rapidly growing website.

There's no reason to stop at just nine images, though; you could create an entire album with dozens of images laid out beautifully on a table! Feel free to experiment with linking the small table images to larger versions of the photos, adding additional table cells, and so on.

Instructions
When you're ready, click Save & Submit Code to finish the course!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>My Photo Page</title>
    </head>
    <body>
        <table>
            <thead></thead>
                <th>table</th>
            <tbody>
                <tr>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                </tr>
                <tr>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                    <td></a><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></td>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                </tr>
                <tr>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                    <td><a href="http://codecademy.com"><img src="http://7xinhd.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202015-11-30%20%E4%B8%8B%E5%8D%8810.03.11.png" /></a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

HTML Basics III

Introduction

What are tables?

Rows of information

A single column

Adding a second column

Head of the table

Table Heads

Naming your table

Style that head!

Recap

'Div'ide and conquer

Link it!

Spantastic

Span is the man

Recap

Some photos on your table

Remember: it's better with a header

Nine pictures are worth 9,000 words

The sky's the limit

内容目录