[关闭]
@Sarah 2015-12-25T23:03:39.000000Z 字数 13233 阅读 1525

HTML II (codecademy)

HTML

以下部分先是review

What you'll be making

Before we ask you to write a bunch of code, we think it's helpful for you to see exactly what you'll be making in this project.

Check out the index.html file and the Result tab for an example—we've made our very own webpage.

Instructions
Hit Save & Submit Code to start building your own!

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Result</title>
  5.     </head>
  6.     <body><h1>YEAH SANDWICHES</h1>
  7.     <img src="http://bit.ly/RhrMEn" />
  8.         <p>I like eggs.</p>
  9.         <p>And ham!</p>
  10.         <p>But mostly sandwiches.</p>
  11.     </body>
  12. </html>

Every house needs a frame

An HTML page is sort of like a house: it needs a certain number of essential structures in order to work.

Just like a house, an HTML page needs a frame. In this case, your frame is made of , , , and tags.

Instructions
Your webpage is blank as the day it was born! Let's add five things:

The tag
Your < html> tags
Your < head> tags
< title> tags (with any title you like!) between your head tags
Your tags

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>   </title>
  5. </head>
  6. <body>
  7. </body>
  9. </html>

It's better with a header

Your webpage could use an < h1> header between the body tags to let everyone know that the page is about you.

Instructions
Create an < h1> tag inside your body tags. Between your opening < h1> and closing < /h1> tags, type your name for all to see!

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>   </title>
  5. </head>
  6. <body>
  7. <h1>Sarah will finish this</h1>
  8. </body>
  10. </html>

Great! There's only one problem: your webpage is like a house with no doors. There's no way to get in or out! We'll fix that by adding a couple of links.

Once you successfully add your links and hit Run, you've finished! Revel in the glory of your newly created webpage.

If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make your webpages look sharp!

Instructions
Add at least two links to your webpage. You can turn an image or a bit of text into a link; you can even turn part of the text inside your

tags into a link!

Check out the Hint if you've forgotten how the tag works.

?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>   </title>
  5. </head>
  6. <body>
  7. <h1>Sarah will finish this</h1>
  8. <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" />
  9. <p> well hahahahhahahaha this is the first paragraph
  10. </p>
  11. <a href="http://www.baidu.com"><p>   把这段话变成链接了
  12. </p>
  13.     </a>
  15.     <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-11-30%20%E4%B8%8B%E5%8D%8810.03.30.png" />
  16.     </a>
  18. <p> well qqqqqqqqqqq
  20. </html>

HTML BASIC II

Introduction

Let's continue learning more HTML. You've already covered a lot: how to set up and tags, how to make headings and paragraphs, and how to add images and links.

In this course, we'll take it to the next level:

a. Making ordered and unordered lists
b. Changing font size, color and type
c. Changing the background color
d. Aligning the text

Instructions
Let's get warmed up by adding a in the .
In the body, create a paragraph (using

). Write anything you like!

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <title>aaaaa</title>    
  5.     </head>
  6.     <body>
  7.     <p>
  8.     paragraph1
  9.     </p>
  10.     </body>
  11. </html>

Indentation is your friend

Now is a good time to quickly mention indentation—that is, the amount each line is spaced in from the margin. You'll notice that when we place tags inside of other tags, we indent them more. This really helps make your code more readable!

Check out our indentation in the editor to the right. Try to follow this indentation style when you're writing HTML so you don't get confused.

Instructions
Hit Save & Submit Code to continue.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.     </head>
  6.     <body>
  7.     </body>
  8. </html>

Ordered lists

Good! Now let's learn how to make ordered lists. An ordered list is simply a list that is numbered, like the one below.

On line 8, we begin the ordered list with the opening tag

    .
    On lines 9 – 11, we wrap (i.e. surround) each individual item with
  1. and
    2. tags.
    Because each listed item is only on one line, we put the entire element on one line.
    On line 13, we finish the ordered list with the closing tag

Instructions
On line 14, create an

sized heading called 'List of things I find just OK'.
Starting on line 15, create an ordered list using the
    tag.
    Your ordered list should have three items, each wrapped (i.e. surrounded) by
  1. tags.

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <title>Lists</title>
    5.     </head>
    6.     <body>
    7.         <h1>List of my favorite things</h1>
    8.         <ol>
    9.             <li>Raindrops on roses</li>
    10.             <li>Whiskers on kittens</li>
    11.             <li>Bright copper kettles</li>
    12.             <li>Warm woolen mittens</li>
    13.         </ol>
    14.     <h2>List of things I find just OK</h2>
    15.         <ol>
    16.             <li>hhhh</li>
    17.             <li>hhhffh</li>
    18.             <li>hhwwwhh</li>
    19.         </ol>
    21.     </body>
    22. </html>

    One more ordered list

    We really think that ordered lists are excellent. Who doesn't love a bit of order? So let's do a bit more practice. If you forget what an ordered list looks like, feel free to look back at the previous section!

    Instructions
    In the body tag, create an

    tag with the text 'Most annoying TV celebrities'.
    Make an ordered list with the
      tag of the top 3 TV celebrities you find not to your taste. Remember, these go between the list item tag

    1. Remember to close your ordered list with the
    tag
    Under the list you made, make an

    tag with the text "Top three things I can do for Mother's Day."
    Then make another ordered list of those things too!
    ?

    1. html
    2. <!DOCTYPE html>
    3. <html>
    4.     <head>
    5.         <title></title>
    6.     </head>
    7.     <body>
    8.         <h3>Most annoying TV celebrities</h3>
    9.             <ol>
    10.                 <li> </li>fff
    11.                 <li> </li>dddd
    12.                 <li> </li>wwww
    13.             </ol>
    15.         <h2>Top three things I can do for Mother's Day</h2>
    16.             <ol>
    17.                 <li> </li>eee
    18.                 <li> </li>rrr
    19.                 <li> </li>fff
    20.             </ol>
    22.     </body>
    23. </html>

    Unordered lists

    We just learned how to make ordered lists, but what if the order doesn't matter, what if we just want bullet points?

    1. html
    2. <h2>Taco Ingredients</h2>
    3. <ul>
    4.     <li>Cheese</li>
    5.     <li>Sour Cream</li>
    6. </ul>

    Does this look familiar?
    First, we open our list with an unordered list

      tag
      For each item we wish to add to the list, we use a list item tag < li> with text in between
      We then tell the browser we are done with our list by calling our closing < /ul> tag
      Instructions
      In your < body> tag, create an < h1> tag and put the text 'Some random thoughts' inside it.
      Under your < h1 > tag, create a paragraph using the < p> tag which describes the list you will make.
      Finally, create an unordered list with the < ul> tag which contains a list of four random thoughts, each of which should be placed inside of an < li> tag
      ?

      Lists inside a list

      So you've made ordered lists and unordered lists. Top work!

      What if you have an ordered list, but each item in the ordered list also has an unordered list nested in it? Nested simply means 'inside' the list. The editor has a small example of this. Hit save & submit to see what the result looks like!

      Remember: you've been nesting tags already. When you nest tags, the last tag you open is the first one you close. Here's an example:

      • Tacos!

      Instructions
      On line 21, create an unordered list.
      Your unordered list should have two items: "Favorite Boys' Names" and "Favorite Girls' Names."
      Under each item of the unordered list, create an ordered list. Use the ordered list to specify your three favorite boys' names and three favorite girls' names. Use the sample nested lists above as examples of how to do this.

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <title>Nested lists</title>
      5.     </head>
      6.     <body>
      7.         <ol>
      8.             <li>Dad's interests
      9.                 <ul>
      10.                     <li>football</li>
      11.                     <li>knitting</li>
      12.                 </ul>
      13.             </li>
      14.             <li>Mom's interests
      15.                 <ul>
      16.                     <li>hating football</li>
      17.                     <li>skydiving</li>
      18.                 </ul>
      19.             </li>
      20.         </ol>
      21.             <ul>
      22.                 <li>Favorite Boys' Names</li>
      23.                     <ol>
      24.                         <li>www</li>
      25.                         <li>eee</li>
      26.                         <li>rrr</li>
      27.                     </ol>
      28.                 <li>Favorite Girls' Names</li>
      29.                     <ol>
      30.                         <li>ttt</li>
      31.                         <li>ggg</li>
      32.                         <li>www</li>
      33.                     </ol>
      34.             </ul>
      35.     </body>
      36. </html>

      Making comments

      We have covered a lot about lists. Let's change gears and do some styling. If you recall, HTML is the skeleton of the webpage, and CSS lets you give the skeleton some skin and makeup.

      But it is possible to do some inline CSS. This simply means we can do some styling in our HTML file without worrying about a separate CSS file! We'll learn this first because it will make learning CSS a lot easier later.

      Before we dive into fonts, it's important to learn about making comments. You can include little notes in your HTML code that the browser won't display. But it will be in the code to help you remember why you did certain things.

      Instructions
      Comments start with like this:

      Make the text on line 1 into a comment. Leave the text on line 3 alone!

      1. <!--Make me into a comment.-->
      3. <p>But leave me visible to the user!</p>
      5. <!-- comment -->

      Font size

      Recall that

      and

      are opening and closing tags.

      We can give tags more instructions by including attributes in the opening tag. An attribute is simply a characteristic or some description for the content in the element. You saw this with src in and href in .

      Let's change the size of the text. How? We use the style attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px (short for "pixels"). For example:

      Instructions On line 7, make the text size 10px. On line 8, make the text size 20px. On line 9, make the text size 40px. If you're having trouble with font sizes, reset your browser's zoom by pressing Cmd-0 or Ctrl-0. 

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <title>First font size change</title>
      5.     </head>
      6.     <body>
      7.         <p style="font-size: 10px">Some text for you to make tiny! </p>
      8.         <p style="font-size: 20px"> Some text for you to make normal size!</p>
      9.         <p style="font-size: 40px"> Some text for you to make super big!</p>
      10.     </body>
      11. </html>

      Font color

      What is awesome about the style attribute is that we use it a lot! And we can use it with many different tags, not just

      . Let's now change the colors of our text in a heading.

      To change the color of text, simply add the style attribute in the opening tag, then make the style equal to "color:blue" (or whatever color you like). For example:

      What if you want to change the color and the size of the text? Simple! Just add a semi-colon between each bit. For example:

      A full list of available colors can be found here. Note: do not type something like: If you incorrectly nest your HTML tags like that, your code will not pass. Instructions Change the heading color to green and its size to 16px. Change the color of the first paragraph to violet. Change the color of the second paragraph to red and its font size to 10px. ? 
      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <title>Changing the colors!</title>
      5.     </head>
      6.     <body>
      7.         <h1 style="color:green; font-size:16px">Big Heading</h1>
      8.             <p style="color:violet">A giant bear and a little duck were friends.</p>
      9.             <p style="color:red; font-size:10px">But the bear got hungry and ate the duck.</p>
      10.     </body>
      11. </html>
      14. <h2 style="color: green; font-size:12px">

      Font family

      We've covered font colors and font sizes. But we want more power! We want to decide what font type to use. We can do this using font-family, like this:

      Title

      First we wrote

      Big title


      Then inside the opening

      tag, we added a style attribute, and set it equal to "font-family: Arial".
      This styles the

      tag with Arial font.

      We can do the same for other tags. So we could have a li:

    • Hello!
      • Here's a list of available fonts.

      Instructions
      Change the font size of the first listed item (

    • ) to 16px and the font to Arial.
      Change the font size of the second listed item to 12px and the font to Verdana.
      Change the font size of the third listed item to 10px and the font to Impact.
      Make sure to capitalize the first letter of Arial, Verdana, and Impact as shown!

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <title>Loving the font changes</title>
      5.     </head>
      6.     <body>
      7.         <h1 style="font-family: Arial">Big title</h1>
      8.          <ol>
      9.             <li style="font-family:Arial; font-size:16px">This item is big Arial.</li>
      10.             <li style="font-family:Verdana; font-size:12px">This item is medium Verdana.</li>
      11.             <li style="font-family:Impact; font-size:10px">This item is small Impact.</li>
      12.          </ol>
      13.     </body>
      14. </html>
      16. <h1 style="font-family: Arial">Title</h1>

      Recap

      Awesome job! You've now got control of your webpage, including the color, size and type of your font. To recap, we use the style attribute in the opening tag, like so:

      a. font-size: 14px
      b. color: orange
      c. font-family: Bodoni

      1. <p style = "font-size:14px; color: orange; font-family: Bodoni">

      It's important to know that you can use the style attribute for paragraphs, headings, and even links!

      Instructions
      For the paragraph on line 7, make the font have:

      a. A size of 20px
      b. A color of blue
      c. A font-family of Arial

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <title>Putting it all together</title>
      5.     </head>
      6.     <body>
      7.         <p style = "font-size:20px;color:blue;font-family:Arial">A truly spectacular paragraph!</p>
      8.     </body>
      9. </html>

      Background color

      The previous section covered a number of nice tricks to control how the text looks. Now we want to learn about how to change the color of the webpage's background.

      We can use the style attribute again, and set it equal to "background-color: red" (or whatever color you want).

      For example, here's how to change the background color of a

      tag to red:

      1. <p style="background-color: red;">Hello!</p>

      Instructions
      Change the background color of the tag to brown. To do so, add the style attribute to the opening tag, similar to the example above.
      Change the background color of the

        tag to yellow.

        1. <!DOCTYPE html>
        2. <html>
        3.     <head>
        4.         <title>Sexy background color!</title>
        5.     </head>
        6.     <body style="background-color:brown">
        7.         <h3>Favorite Football Teams</h3>
        8.             <ol style="background-color:yellow">
        9.                 <li>The Hawthorn Football Club</li> 
        10.                 <li>San Franscisco 49ers</li>
        11.                 <li>Barcelona FC</li>
        12.             </ol>           
        13.     </body>
        14. </html>

        Aligning the text

        Often it is nice to be able to move the text around. To do so, we again use the style attribute. And then we use "text-align:left" (or right, or center) to determine the location of the text.


        Instructions
        Make the

        heading aligned center.
        Make the first item in the list align left.
        Make the second item align center.
        Make the third item align right.

        1. <!DOCTYPE html>
        2. <html>
        3.     <head>
        4.         <title>Sexy background color!</title>
        5.     </head>
        6.     <body>
        7.         <h3 style="text-align:center">Favorite Football Teams</h3>
        8.             <ol>
        9.                 <li style="text-align:left">The Hawthorn Football Club</li> 
        10.                 <li style="text-align:center">San Franscisco 49ers</li>
        11.                 <li style="text-align:right">Barcelona FC</li>
        12.             </ol>           
        13.     </body>
        14. </html>

        Strong words!

        We can change the appearance of words. What if we want to make them bold?

        Surprise! We don't have to use the style attribute. Here are the steps:

        Identify the word or words you want to bold.
        Surround those words with opening tag and closing tag .
        Celebrate how awesome you are at HTML!
        Instructions
        Bold the word 'sing' on line 7.
        Bold the word 'too' on line 8.
        ?

        1. <!DOCTYPE html>
        2. <html>
        3.     <head>
        4.         <title>Viva La Revolution!</title>
        5.     </head>
        6.     <body>
        7.         <p>Do you hear the people <strong>sing</strong>?</p>
        8.         <p>No I don't. I'm <strong>too</strong> busy eating cake.</p>
        9.     </body>
        10. </html>

        Emphasize words!

        Aside from bolding words, we often want to italicize words for emphasis. (Hint, hint.)

        Like bolding, we do not need to use the style attribute. Instead:

        Identify the word or words you want to italicize.
        Surround the word or words with the opening tag and closing tag .
        Be humble and grateful for your newfound powers.
        Instructions
        On line 7, italicize the word 'that'.
        On line 8, italicize the word 'so'.
        Make sure you don't include the "!" between the tags on line 7!

        1. <!DOCTYPE html>
        2. <html>
        3.     <head>
        4.         <title>Some nice practice</title>
        5.     </head>
        6.     <body>
        7.         <p>Hey, don't say <em>that</em>!</p>
        8.         <p>I am <em>so</em> tired.</p>
        9.     </body>
        10. </html>

        Summary

        This has been an incredibly busy lesson, and you've covered a lot. Congratulations! We have learned how to:

        Make ordered and unordered lists
        Change the color, size and type of font
        Add comments to our HTML file
        Change the page's background color
        Align text
        Bold and italicize text

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注