[关闭]
@Sarah 2015-12-26T00:23:23.000000Z 字数 3115 阅读 1209

Social Networking Profile

HTML

Here's what you're building

You'll start to see a pattern with these HTML projects: first we'll show you what you'll be making, then we'll walk you through actually making it!

In this course, you'll be creating your own social networking profile. Check out our profile for King Kong in index.html and the Result tab to the right.

Instructions
Hit Save & Submit Code when you're ready to start building your own profile!

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>The Kingest of Kongs</title>
  5.     </head>
  6.     <body>
  7.         <img src="https://s3.amazonaws.com/codecademy-blog/assets/da840950.jpg" />
  8.         <p>I'm male, 89 years old, and am a giant, Empire State Building-climbing ape.</p>
  9.         <ul>
  10.             <li><p style="color:red">Interests</p>
  11.                 <ul>
  12.                     <li style="font-family:Futura">Bananas</li>
  13.                     <li style="font-family:Futura">Climbing stuff</li>
  14.                     <li style="font-family:Futura">HTML</li>
  15.                 </ul>
  16.             </li>
  17.             <li><p style="color:red">Jobs</p>
  18.                 <ol>
  19.                     <li style="font-family:Futura">Giant ape</li>
  20.                     <li style="font-family:Futura">Web developer</li>
  21.                 </ol>
  22.             </li>
  23.             <li><p style="color:red">Where I Went to School</p>
  24.                 <ol>
  25.                     <li style="font-family:Futura">Diddy Kong Jr. High School</li>
  26.                     <li style="font-family:Futura">Donkey Kong Sr. High School</li>
  27.                     <li style="font-family:Futura">Harvard University (BA)</li>
  28.                     <li style="font-size:18px; font-family:Futura">Yale University (JD) (Current)</li>
  29.                 </ol>
  30.             </li>
  31.             <li><p style="color:red">Favorite Quotes</p>
  32.                 <ul>
  33.                     <li style="font-family:Futura">"If at first you don't succeed, climb a giant building."</li>
  34.                     <li style="font-family:Futura">"A banana in the hand is worth two on the tree."</li>
  35.                 </ul>
  36.             </li>
  37.         </ul>
  38.     </body>
  39. </html>

You have the power!

Have you ever seen your page on a social networking site load really slowly, then come through with only the HTML skeleton? (If not, it looks like this. Crazy, right?)

Under its fancy skin, a social networking profile is just a list of text, images, and links. And you know all about those!

We've set up your profile page with the basics, but the details are up to you. First off, let's make this page about you!

Instructions
Put your name between the tags.
Put a picture of yourself (or anything you like!) between the tags. If you can't think of a good picture, use this ninja:

Lists within lists

Now that you have your profile sections set up, it's time to add in your favorite things!

You can do this by creating additional lists within your unordered list's

  • tags, like this:

    • Interests
      1. Learning to code
      2. Watching basketball
      3. Playing music

    Within the

  • tag for Interests, we created an ordered list (
      ) with three interests.

      Instructions
      Go nuts with your lists within lists! The only requirement is that you have at least one ordered list(

        ) and one unordered list (
          ).

          Click "Stuck? Get a hint!" for more examples.

          Bold! Italic! Bold!

          Great work! Just one more thing before you can call your profile complete: you've got to add just the right number of emphasized and strong words.

          Instructions
          How many you use is up to you, but you should use and at least once each! Once you do, hit Save & Submit Code to finish the exercise and bask in the glory of your newly created profile.

          1. <!DOCTYPE html>
          2. <html>
          3.     <head>
          4.         <title>Sarah</title>
          5.     </head>
          6.     <body>
          7.         <img src="http://7xinhd.com1.z0.glb.clouddn.com/p2224944109.jpg"/>
          8.         <p>
          9.         name:sarah
          10.         gender:f
          11.         hometown:china
          12.         </p>
          13.             <ul>
          14.                 <li style="color:blue">Interests
          15.                     <ol>
          16.                         <em><li>ee</li></em>
          17.                         <li>ww</li>
          18.                         <li>qq</li>
          19.                     </ol>
          20.                 </li>
          21.                 <li>Jobs</li>
          22.                 <li style="font-family:Futura">Favorite Quotes
          23.                     <ul>
          24.                         <listyle="font-size:20px">ee</li>
          25.                         <strong><li>eye</li></strong>
          26.                         <li>ete</li>
          27.                     <ul>
          28.                 </li>
          29.                 <li>Where I've Lived</li>
          30.             </ul>
          31.         </body>
          32. </html>
    • 添加新批注
    在作者公开此批注前，只有你和作者可见。
    回复批注