Skip to content

Latest commit

 

History

History
124 lines (113 loc) · 3.21 KB

README.md

File metadata and controls

124 lines (113 loc) · 3.21 KB

Introduction to HTML

Cheat Sheet for the introduction to html class
Slides

Look at the source of a web page

  1. Navigate to the Anchorage Programming Workshop webiste.
  2. Right-click the page and select View Page Source.

Create the skeleton of your page

  1. Open a text editor like Notepad or TextEdit.
  2. Choose 'Save As' and name your file 'index.html'
  • Add the doctype <!doctype html>
  • Add the html tags <html></html>
  • Nest the head tag inside the html tag <head></head>
  • Nest the title in the head tag and add some text in between the opening and closing of the tag. Kind of like this<title>Text</title>
  • Nest the body tag inside the html tag <body></body>
  • Write something inside the body

Should look something like this:

<!DOCTYPE html> 
<html> 
  <head>
    <title>Hello World</title>
  </head>
  <body>
    Nice to meet ya!
  </body>
</html>

Add Elements: paragraphs, headings, formatted text

All these elements should be nested inside the body tag.

  • Create a paragraph tag. <p>Text</p> Add text in between the opening and closing tag.
  • Create several levels of headings, just add a number to h. Experiment! <h1>Text</h1>
  • Bold some text. <strong>Text</strong>
  • Italicize some text. <em>Text</em>

Here's an example:

<!DOCTYPE html> 
<html> 
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Nice <strong>to</strong> meet <em>ya</em>!</p>
    <h1>Heading One</h1>
    <h2>Heading Two</h2>
    <h6>Heading Crazy</h6>
  </body>
</html>

Add Elements: Link, Image, LineBreak

  • Add a link: <a href='url'>Text</a>
  • Add an image: <img src='url' /> Use google image search to link to something good.
  • Add a line break: <br />

Here's an example:

<!DOCTYPE html> 
<html> 
  <head>
    <title>Hello World</title>
  </head>
  <body>    
    <a href='http://commuterchallenge.bicycleanchorage.org'>Commute!</a>
    One <br/>Two<br/>
    <img src="http://www.readcwbooks.com/books.jpg" />
  </body>
</html>

This is where the first class left off.

Add Elements: Ordered Lists, Unordered Lists, Tables

  • Add an ordered list: <ol><li>item</item></ol>
  • Add an unordered list: <ul><li>item</li></ul>
  • Add a table: <table><tr><td>Column</td></tr><tr><td>Value</td></tr></table>

Here's an example:

<!DOCTYPE html> 
<html> 
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h3>Ordered List</h3>
    <ol>
      <li>Wake up.</li>
      <li>Get dressed.</li>
      <li>Bike!</li>
    </ol>
    <h3>Unordered List</h3>
    <ul>
      <li>Planes</li>
      <li>Trains</li>
      <li>Automobiles</li>
    </ul>
    <h3>Table</h3>
    <table>
      <tr>
        <th>Name</th>
        <th>Average Miles</th>
      </tr>
      <tr>
        <td>Becky</td>
        <td>500</td>
      </tr>
      <tr>
        <td>Coral</td>
        <td>5000</td>
      </tr>
    </table>
  </body>
</html>

Next steps

Sign up for Code academy and take the web Fundamentals class!
Code Academy