The meta Tag and its Attributes

About meta Tags

• F03a - (7:01)
  • meta is from Greek. It means information about the thing that it is associated with; it means a self reference.
  • <meta> tags are found in the head of most html documents.
  • The most common meta tag attributes:
    • Theses are required by the html4 and xhtml doc types:
      • <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    • keyword=
    • description=
      • It will be displayed in some search engine results:
        • Search in google for: w3c to see an example of this.
      • UCLA Extension site:
        • Description appears in Google search results
    • charset=
      • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      • Unicode
        • UTF-8 is a type of Unicode
      • ASCII text
  • Example of multiple meta tags: look at the source code here: Apple home page.
    • Investigate Search Engine Watch's information about using meta tags.
  • Meta data is always considered as name/value pairs.

Meta Tag Assignment

• Important assignment information:
  • The table shown in the video has a different bgcolor specified for file #2 than the bgcolor in the table below. Please use the number in the table below and not the number in the video for the bgcolor. Otherwise the text is unreadable.
    
    
• F03b- (5:51)
  • Your assignment is to use a meta tag to make quick and easy flip book.
  • Note that in current browsers, in order to see the source code one needs to right-click in the browser window and select View Page Source (or similar) from the menu. This is not stated in the video.
    1. Make a new folder named yourlastname_F03
    2. Using the View menu in your browser, select View Source, or Page Source, etc., and copy the code on this page, or any of the pages it automatically changes to. For this assignment, you will be mimicking that code.
       • NOTE that Firefox may not like being "redirected" when these types of files are on the web. The cycling ought to work with Chrome, Safari, and IE.
       • With Firefox you may need to click a button at the top of its browser window for each page.
       • This is one of the reasons that this method of cycling from one page to another can't be relied on.
       • However, your work ought to cycle properly on your own computer with any of the browsers.
    3. Use the code that you copied as the basis for a new html page. Just paste the code you copied into an empty text file (use Notepad, TextEdit, etc.).
    4. Delete the style tags and the comments that nest them.
    5. Make an images sub-folder.
    6. Download the five sky images in this zip file.
    7. Put them into the images sub folder
    8. Look at the code in the meta tag.
       1. See how it contains a value of 2. That is the duration of time between pages.
       2. The url= points to the next file to be shown.
    9. Create four more html files in the folder, all copies of the file you just made.
       1. Name them as per the table below.
       2. Insert the path to the image file specified.
       3. Do you remember how to do that? The path in the file you just made will be similar to what you need. It starts with <img src="images/
          ... followed by the image file name specified for that page.
    10. In the meta tag:
        1. Change the duration of time from 2 to 3 seconds per page.
        2. Change each of the url file names to link to the next file and the last file should link to the first so that there is a continuous loop.
    11. In all the img tags, include the specified alt, width, and height attributes.
    12. Provide html titles for each of the pages by describing the image on each page; make each description different.
    13. In the body tags of each of the pages, set the bgcolor attribute to the specified numbers below.

html file name	html titles	image file name	alt	width	height	body bgcolor
1skyYourLastName.html	Describe the sky in the photo for each page	1skyP4L.jpg	sky1	347	280	#3B71C7
2skyYourLastName.html		2skyP4L.jpg	sky2	350	280	#363636
3skyYourLastName.html		3skyP4L.jpg	sky3	481	280	#BE938C
4skyYourLastName.html		4skyP4L.jpg	sky4	373	280	#274B6F
5skyYourLastName.html		5skyP4L.jpg	sky5	448	280	#547B8C

© 2014 Dan Hitchcock Vaughan and licensors