Standard HTML Skeleton

<!DOCTYPE HTML>
<html>
  <head></head> <!-- meta information goes here -->
  <body></body> <!-- actual content goes here -->
</html>

Tag Examples

<p>This is a paragraph</p>
<h1>This is a heading</h1>
<a href="http://www.google.com">This is a link to Google.</a>

Links

<a href="http://www.google.com">This is a link to Google.</a>

Images

<img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" alt="Cute dog" />

What is alt?

Input

Input tags are those that accept user input. There are many types of possible user input. Here are some common input types. Please review documentation to review other types.

Text

<label>First name: <input type="text" name="fname" /></label><br>
<label for="lname">Last name:</label> <input type="text" id="lname" name="last-name"><br>

Please note the two different ways to create a proper label. What does label do?

Password

<label>Password: <input type="password" name="user-password" /></label>

Checkbox

<label><input type="checkbox" name="vehicle1" value="bike"> I have a bike</label><br>
<label><input type="checkbox" name="vehicle2" value="car"> I have a car</label><br>
<label><input type="checkbox" name="vehicle3" value="boat" checked> I have a boat</label><br>

Radio Button

<label><input type="radio" name="gender" value="male"> Male</label><br>
<label><input type="radio" name="gender" value="female"> Female</label><br>
<label><input type="radio" name="gender" value="other"> Other</label>

File

<label>Select a file: <input type="file" name="img"></label>

Date

<label>Birthday: <input type="date" name="bday"></label>

Try this tag in Google Chrome. Now Mozilla Firefox or Safari. What happens?

Nested Tags

<div>
  <p>This is another paragraph</p>
</div>

Lists

Ordered List

<ol>
  <li>Toast bread</li>
  <li>Put ham on bread</li>
  <li>Put cheese on bread</li>
  <li>Put both slices of bread together</li>
</ol>

Unordered List

<ul>
  <li>Bread</li>
  <li>Ham</li>
  <li>Cheese</li>
</ul>

Classwork

Using Thimble, write a shopping list.
Link elements of your shopping list to webpages. Challenge: how can we get the page to pop-up in a new tab?
Add a picture under each item of the list.
Add an input field to the bottom of the page.
Add a submit button (it won't work...yet) to the bottom of the page.
Make sure your code is well-organized (check that indendation!).
Copy and paste your HTML to a file named index.html on your local machine.
Open that file using your browser.

HTML