1. HTML Overview

2.  Students will learn: How HTML tagging works How browsers display tagged documents How an HTML document is structured

3.  All web pages are formatted using HTML tags An abbreviation of a formatting instruction or page element Most HTML tags are container tags  2 tags (beginning and end)  Wrapped around a range of text  End tag looks same as start tag, except it has a /.  the content the tag affects A few tags are standalone tags  Drop them into place where you want an element to appear  Standalone elements do not need end tags  other content

4.  4 Step Process 1. Setting up the HTML document. 2. Formatting text. 3. Adding graphical elements 4. Adding a hypertext link.

5.  Giving the document basic structure All web pages require a set of structural tags that help the browser sort out the parts of the document. HTML documents have two parts  Head (also called a header)   Contains descriptive information about the document (title)  Body   Contains the actual content that displays in the browser window You must identify the document as being written n HTML with tags.

6.  Basic HTML skeleton structure

7.  Complete Exercise 6-1 Part 1handout

8.  Giving the page a title Title is the name you give a page and it shows up in the title bar at the top of the browser window. Use container tags and it goes within the head of the document Importance of title  Listed in Favorites or Bookmarks menu  First thing search engines look at when indexing pages

9.  Saving and Viewing the page Save with the ending.htm or.html in order to be recognized by the browser as a web document

10.  Complete Exercise 6-1 Part 2handout

11.  Let’s Try It Complete Exercise 6 parts 3 and 4

12.  Introducing attributes Attributes are instructions added within a tag to modify its behavior or appearance.  Example: Attributes can appear in standalone tags or container tags.  Appear only in the beginning tag of the container tags  Example: affected text

13.  About Attributes Go only in the opening container tag  Closing tag includes just the tag name Most (not all) take values, which follows an equals sign (=) after the attributes name  Value must be a number, word, string of text, URL or measurement Attribute value should always appear within quotation marks. Several attributes can be added within a single tag Some attributes are required  Src within an tag.

14.  Complete Exercise 6 part 5

15.  Linking Links are added with a container tag called an anchor …  Placed around the text that you want to serve as a link Need to specify which page you want to link to  href=  Required attribute  Give the browser the URL of the target page

16.  Complete Exercise 6 part 6

17.  Having Problems “I’ve changed my document, but when I reload the page in my browser, it looks exactly the same.”  It could be you didn’t save your HTML document before reloading or you saved it in a different directory. “All the text on my page is HUGE!!!”  Did you start a heading tag and forget to close it? Make sure each tag you’ve used has its end tag. Also, make sure that each end tag has a slash (/). “Half of my page has disappeared!”  This could happen if you are missing a closing bracket (>) or a quotation mark within a tag. This is a common error when writing HTML code by hand. I put in a graphic using the tag, but all that shows up is a broken-graphic icon.  The broken graphic could mean that the browser is not finding the graphic. Make sure the URL to the graphic is correct. Make sure the graphic is actually in the directory you’ve specified. If there, then make sure it’s in a format the browser can display (GIF, JPEG, or PNG) and it’s named with the proper suffix (.gif,.jpeg, or.png).

18.  Complete Exercise 6 part 7

19. 1. What makes a container tag different from a standalone tag? 2. Write out the code for the basic skeleton of a web document.

20. 3. Mark whether each of these filenames is an acceptable name for a web page by circling “Yes” or “No”. If it is not acceptable, provide the reason why. Sunflower.htmlYesNo________________________________ index.docYesNo________________________________ cooking home page.html YesNo________________________________ Song_Lyrics.htmlYesNo________________________________ games/rubix.htmlYesNo________________________________ %whatever.htmlYesNo________________________________

21. 4. All of the following tags are incorrect. Describe what is wrong with each one, then write them correctly. Congratulations! linked text This is a new paragraph