Class 1 handout (2) html exercises

Intro to HTML/CSS
Class 1 Handout: HTML Exercises

1. <html>

Create a new Aptana project from the Basic Web Template called FirstProject. In your
index.html file, find the opening and closing <html> tags.

The <html> tag tells the browser that this is an HTML document. It is also the “root element”,
and is the container for all other HTML elements except the <!DOCTYPE> tag.

1

2. <head> and <body>

Find the <head> and <body> opening and closing tags nested inside the <html> tags.

<head> is a container tag for all of the head elements. It must include a title element, but can
also include other information like scripts, styles, and meta information.

The <body> opening and closing tags contain all of the contents of your HTML page, such as
text, hyperlinks, images, tables, lists, etc.

Minimum required tags

These are the minimum required tags for any HTML page:

● html
● head
● title
● body

3. <title>

The title defines the title displayed in the browser’s toolbar. It also provides a title for the page
when it is added to favorites, and is displayed in search engine results. You can only have one

2

<title> tag in an HTML document, and it is required. If you skip the <title> tag, your HTML will
not be valid.

Find the <title> tag in our project and change the title to:

<title>My First Project</title>

4. <h1> through <h6>

H1 through H6 are the heading tags. H1 is the “most important” heading and H6 is the least
important.

Aptana creates an <h1> tag for you with the Basic Web Template. Change the text inside the
opening and closing <h1> tags and add an <h2> tag below it.

<h1>Learning New Skills</h1>
<h2>With GDI Cincinnati!</h2>

Save the changes you just made to index.html and click on the Preview button in Aptana.

3

Headings are important because Search Engines use them to index and structure the content of
your website. It’s important that you use the <h1> through <h6> tags for headings, and not to
make text larger or bolder.

5. <p>

The <p> tag defines a paragraph. Browsers will automatically add some space before and after
each <p> element. We will learn in Class 2 how to use CSS to modify that space.

Under our <h1> and <h2> tags, add a couple <p> tags with some text.

<p>Want to learn how to build your own website? Already have your own Tumblr/Wordpress/etc
site, but want to have more control over it? Interested in learning to program but want to start
small? This class is for you!</p>

<p>We will guide you through the basics of HTML and CSS, give you some readily-applicable
skills, and answer any questions you may have along the way.</p>

Save your changes to the index.html file, and look at the preview page again:

4

6. <br>

This is the line break tag. It inserts a single line break. This is a self closing tag, which means it
has no end tag because you already have all the information you need inside the first tag. You
may see the <br> tag a couple ways:

● <br>
○ Used in HTML with no end tag
● <br />
○ Used in XHTML, it must be properly closed with the forward slash. This is still a
self closing tag, there is no additional end tag

Let’s add some line breaks in the text we used for our paragraphs:

<p>Want to learn how to build your own website?<br> Already have your own
Tumblr/Wordpress/etc site, but want to have more control over it?<br> Interested in learning to
program but want to start small? This class is for you!</p>

Now our paragraph looks like this:

5

7.  

This is the non-breaking space character entity. Browsers always remove spaces in HTML
pages. If you write 15 spaces in your text, the browser remove 14 of them before displaying the
page. To add spaces to your text that the browser won’t get rid of, use the   character
entity. Additionally, a browser will not wrap a line of text at the point where a   occupies.

To see the non-breaking space in action, we are going to indent the second paragraph of our
page with four spaces:

<p>      We will guide you through the basics of HTML and CSS, give you
some readily-applicable skills, and answer any questions you may have along the way.</p>

Now you can see the indent in the preview page:

6

If we used three regular spaces instead, our page would look like this:

The Aptana preview browser ignores the spaces completely.

8. Character Codes

Some characters that we might want to include in our HTML content are actually reserved for
some other use by HTML itself. For example, you couldn’t use the greater than or less than
symbol in your HTML content because the browser would mistake those symbols for the
beginning or end of a tag. Other reserved characters are quotation marks, apostrophes, and
ampersands. Character codes are also used for other symbols and characters that aren’t on a
your keyboard.

Character Character Code with Entity Character Code with Entity Description
Number Name

“ " " quotation mark

‘ ' ' apostrophe

& & & ampersand

< < < less than

> > > greater than

© © © copyright

à à à small a, grave
accent

7

Let’s add a few character codes to our project:

<p>"I love learning about HTML and CSS!" <br>-Sally Smith</p>
<p>Copyright © 2012, Girl Develop It Cincinnati</p>

9. <a> and href

The <a> tag defines an anchor. It’s used to create a link to another document, by using the href
attribute. It is also used create a bookmark inside a document by using the name attribute.

The <a> tag is usually called a hyperlink, or just a link. The most important attribute is the href
attribute, because that indicates the link’s destination. By default, unvisited links appear
underlined and blue in a browser. Visited links are underlined and purple, and active links are
red. We will learn in later classes how to use CSS style these links.

Let’s add a couple links to our Aptana project:

<p><a href=”http://www.google.com”>This is a link to Google.</a><br>
<a href=”http://twitter.com”>This is a link to Twitter.</a></p>

8

This is what our links look like in the Aptana preview pane:

10. <img>

Another important tag that uses attributes is the image tag. Like the line break, this is another
self-closing tag. You will see this tag a couple ways:

● <img src="http://i.istockimg.com/file_thumbview_approve/17315556/2/stock-photo-
17315556-tabby-small-kitten-on-white-background.jpg" alt="Kitten" >
● Used in HTML, no forward slash required

9

● <img src="http://i.istockimg.com/file_thumbview_approve/17315556/2/stock-photo-
17315556-tabby-small-kitten-on-white-background.jpg" alt="Kitten" />
○ Used in XHTML, forward slash is required

The src attribute is pretty important. Without that, we won’t have an image display. The alt
attribute specifies alternative text for the image in the event that it cannot be displayed for some
reason, like a slow internet connection or an error in the src attribute. It is also used by screen
readers for the vision impaired, and by search eng

Let’s add an adorable kitten to our page:

<img src="http://i.istockimg.com/file_thumbview_approve/17315556/2/stock-photo-17315556-
tabby-small-kitten-on-white-background.jpg" alt="Kitten" />

10

11. <ol> and <li>

The ordered list tag <ol> is used for numeric or alphabetical lists. We will learn later in the
course how to use CSS to define the type of list.

The list item tag <li> is nested inside an <ol> to add items to our list. The <li> tag is used for
both ordered lists and unordered lists.

Let’s add an ordered list to our page:

<h3>Things to Do</h3>
<ol>
<li>Do my laundry</li>
<li>Pay my bills</li>
<li>Go to the bank</li>
</ol>

In our Aptana preview pane, our list should look like this:

11

12. <ul> and <li>

The unordered list tag <ul> is used for unordered (bulleted) lists. As with ordered lists, we will
learn now to style unordered lists later with CSS.

The <li> tag is also used to denote list items in unordered lists. Let’s add one to our page.

<h3>More Things to Do</h3>
<ul>
<li>Do my laundry</li>
<li>Pay my bills</li>
<li>Go to the bank</li>
</ul>

12

We should now see a bulleted list below our ordered list in the Aptana preview pane:

13. <table>

Because HTML tables are nested elements inside a <table> tag, there are a few tags we need
to know:

● <table>
○ A table consists of a <table> element with one or more <tr>, <th>, and <th> tags
nested inside of it.
● <tr>
○ This defines a table row. A <tr> contains one or more <th> or <td> elements
● <th>
○ This defines a table header cell. Table header elements are bold and centered by
default.
● <td>
○ This defines a table data cell. The <td> element contains data and are regular
and left-aligned by default.

Let’s add a table to our page:

<table>
<tr>
<th>Month</th>
<th>Days</th>
</tr>

13

<tr>
<td>January</td>
<td>31</td>
</tr>
<tr>
<td>February</td>
<td>28</td>
</tr>
<tr>
<td>March</td>
<td>31</td>
</tr>
<tr>
<td>April</td>
<td>30</td>
</tr>
<tr>
<td>May</td>
<td>31</td>
</tr>
<tr>
<td>June</td>
<td>30</td>
</tr>
<tr>
<td>July</td>
<td>31</td>
</tr>
<tr>
<td>August</td>
<td>31</td>
</tr>
<tr>
<td>September</td>
<td>30</td>
</tr>
<tr>
<td>October</td>
<td>31</td>
</tr>
<tr>
<td>November</td>
<td>30</td>
</tr>
<tr>
<td>December</td>
<td>31</td>
</tr>
</table>

14

In the Aptana preview pane

16

14. <form>

For this exercise, we are going to use Google Forms to add a form to our page.

1. Go to Google Forms: Create -> Forms
2. Enter Question Title, Help Text, Select Type, Done
3. More Actions -> Embed -> copy and paste code into Aptana

Copy into Aptana:

<iframe
src="https://docs.google.com/spreadsheet/embeddedform?formkey=dHB4QTNxTmNRNHJoSF
VaOENnd3VIenc6MQ" width="760" height="837" frameborder="0" marginheight="0"
marginwidth="0">Loading...</iframe>

17

Class 1 handout (2) html exercises

More Related Content

What's hot

Similar to Class 1 handout (2) html exercises

More from Erin M. Kidwell

Recently uploaded

Class 1 handout (2) html exercises