class 1 handout (2) html exercises

1

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.

2

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

3

<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.

4

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:

5

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:

6

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:

7

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 Number

Character Code with Entity Name

Description

“ " " quotation mark

‘ ' ' apostrophe

& & & ampersand

< < < less than

> > > greater than

© © © copyright

à à à small a, grave accent

8

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>

9

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

10

● <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" />

11

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:

12

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>

13

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>

14

<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>

16

In the Aptana preview pane

17

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=dHB4QTNxTmNRNHJoSFVaOENnd3VIenc6MQ" width="760" height="837" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

class 1 handout (2) html exercises

Technology