Your SlideShare is downloading. ×
Class 1 handout (2) html exercises
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class 1 handout (2) html exercises

3,522

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,522
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Intro to HTML/CSS Class 1 Handout: HTML Exercises1. <html>Create a new Aptana project from the Basic Web Template called FirstProject. In yourindex.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. 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 canalso 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 astext, hyperlinks, images, tables, lists, etc.Minimum required tagsThese are the minimum required tags for any HTML page: ● html ● head ● title ● body3. <title>The title defines the title displayed in the browser’s toolbar. It also provides a title for the pagewhen it is added to favorites, and is displayed in search engine results. You can only have one 2
  • 3. <title> tag in an HTML document, and it is required. If you skip the <title> tag, your HTML willnot 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 leastimportant.Aptana creates an <h1> tag for you with the Basic Web Template. Change the text inside theopening 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
  • 4. Headings are important because Search Engines use them to index and structure the content ofyour website. It’s important that you use the <h1> through <h6> tags for headings, and not tomake text larger or bolder.5. <p>The <p> tag defines a paragraph. Browsers will automatically add some space before and aftereach <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/etcsite, but want to have more control over it? Interested in learning to program but want to startsmall? This class is for you!</p><p>We will guide you through the basics of HTML and CSS, give you some readily-applicableskills, 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
  • 5. 6. <br>This is the line break tag. It inserts a single line break. This is a self closing tag, which means ithas no end tag because you already have all the information you need inside the first tag. Youmay 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 tagLet’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 ownTumblr/Wordpress/etc site, but want to have more control over it?<br> Interested in learning toprogram but want to start small? This class is for you!</p>Now our paragraph looks like this: 5
  • 6. 7. &nbsp;This is the non-breaking space character entity. Browsers always remove spaces in HTMLpages. If you write 15 spaces in your text, the browser remove 14 of them before displaying thepage. To add spaces to your text that the browser won’t get rid of, use the &nbsp; characterentity. Additionally, a browser will not wrap a line of text at the point where a &nbsp; occupies.To see the non-breaking space in action, we are going to indent the second paragraph of ourpage with four spaces:<p>&nbsp; &nbsp; &nbsp; We will guide you through the basics of HTML and CSS, give yousome 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
  • 7. If we used three regular spaces instead, our page would look like this:The Aptana preview browser ignores the spaces completely.8. Character CodesSome characters that we might want to include in our HTML content are actually reserved forsome other use by HTML itself. For example, you couldn’t use the greater than or less thansymbol in your HTML content because the browser would mistake those symbols for thebeginning or end of a tag. Other reserved characters are quotation marks, apostrophes, andampersands. Character codes are also used for other symbols and characters that aren’t on ayour keyboard. Character Character Code with Entity Character Code with Entity Description Number Name “ &#34; &quot; quotation mark ‘ &#39; &apos; apostrophe & &#38; &amp; ampersand < &#60; &lt; less than > &#62; &gt; greater than © &#169; &copy; copyright à &#224; &agrave; small a, grave accent 7
  • 8. Let’s add a few character codes to our project:<p>&quot;I love learning about HTML and CSS!&quot; <br>-Sally Smith</p><p>Copyright &copy; 2012, Girl Develop It Cincinnati</p>9. <a> and hrefThe <a> tag defines an anchor. It’s used to create a link to another document, by using the hrefattribute. 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 hrefattribute, because that indicates the link’s destination. By default, unvisited links appearunderlined and blue in a browser. Visited links are underlined and purple, and active links arered. 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
  • 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 anotherself-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
  • 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 requiredThe src attribute is pretty important. Without that, we won’t have an image display. The altattribute specifies alternative text for the image in the event that it cannot be displayed for somereason, like a slow internet connection or an error in the src attribute. It is also used by screenreaders for the vision impaired, and by search engLet’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. 11. <ol> and <li>The ordered list tag <ol> is used for numeric or alphabetical lists. We will learn later in thecourse 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 forboth 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. 12. <ul> and <li>The unordered list tag <ul> is used for unordered (bulleted) lists. As with ordered lists, we willlearn 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
  • 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 needto 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
  • 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> 14
  • 15. 15
  • 16. In the Aptana preview pane 16
  • 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 AptanaCopy into Aptana:<iframesrc="https://docs.google.com/spreadsheet/embeddedform?formkey=dHB4QTNxTmNRNHJoSFVaOENnd3VIenc6MQ" width="760" height="837" frameborder="0" marginheight="0"marginwidth="0">Loading...</iframe> 17

×