User:Pluke/HTMLCrib

From Wikibooks, open books for an open world
Jump to navigation Jump to search

HTML Crib sheet[edit | edit source]

How to structure any page[edit | edit source]

<html> 
  <head>
    <title>This is the title of the page tab</title>
  </head>

  <body>

      Put all your page content in here
      <br /> this creates a new line

  </body>
</html>

Try adding some of this to your <body> tag:

  • <h1>This is a Heading</h1> - headings
  • <hr /> - horizontal rules
  • <p>Content goes in here</p> - paragraphs
  • <br /> - line break
  • <div>Content goes in here</div> - div
  1. Can you make a smaller heading?
  2. What is the difference between the br and p tags?

Lists[edit | edit source]

  <ul>
    <li>apples</li>
    <li>oranges</li>
    <li>pears</li>
  </ul>
  1. replace ul with ol, what happens?

Tables[edit | edit source]

Why not add a table:

  <table>
    <tr>
      <td>Hobby</td>
      <td>Skill Level</td>
    </tr>
    <tr>
      <td>Chess</td>
      <td>National</td>
    </tr>
  </ul>
Exercise

Create a profile page for a social network


Making things pretty. Take a look at this CSS, what does it do?

<html>
  <head>
    <title>My Website</title>
    <style TYPE="text/css">
    <!--
    h1 { color : green }
    p { color : red; font-style : italic }
    -->
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    

This is my amazing website, look how great it is!


    

I doubt you could find a better one anywhere on the web.


    

Seriously!


  </body>
</html>