Section 1.2 HTML5 Fundamentals
Learning Objectives
After you have completed this section, you should be able to
- list important characteristics of HTML5 compared to earlier versions of HTML
- define some important components of HTML5
- list most of the common tags in HTML5
- write web pages using a text editor you have chosen and installed on your computer.
- use tables in an HTML5 document.
- use forms for certain purposes.
- create and use image maps for web-page navigation.
- make web pages accessible to search engines using meta data
- write simple web pages in HTML5
Activities
- Carefully read the learning objectives.
- Watch presentation for the section;
- Read Chapter 2, Introduction to HTML5: Part 1, of the e-text.
- Search the Internet for HTML5, and choose three articles or tutorials to read. Post the links to the COMP 466 General Discussion Forum with your comments.
- Find answers to the study questions below.
- Do exercises 2.3, 2.4, 2.5, 2.6, 2.8, 2.13, and 2.14 at the end of Chapter 2 of the e-text.
Study Questions
- How is HTML5 different from programming languages such as C++, C, C#, Visual Basic and Java?
- How is HTML5 different from XHTML and from earlier versions of HTML such as HTML 4.0 ?
- What is the structure of a web document in HTML5?
- What elements and/or declarations are required in an HTML5 document?
- What are comments in a HTML5 document? How do you write comments in your HTML5 document?
- Are HTML5 elements and attributes case sensitive?
- What are start tags and end tags?
- How do you open an HTML5 document in your browser?
- How do you validate an HTML5 document?
- What heading elements does HTML5 provide?
- What does the term deprecated mean in reference to HTML markup?
- How do you use <html>, <head>, <body>, and <title> elements in HTML5 documents?
- Where should the title element appear in an HTML5 document?
- Which tag should you use to start a new paragraph in your HTML5 document?
- How do you verify/validate your HTML5 documents?
- What are header elements?
- How do you choose different headers in an HTML5 document?
- What is an anchor, and how do you define it?
- Which tag should you use to create a hyperlink in an HTML5 document?
- What is a hyperlink? How do you specify the location of a hyperlink?
- What does a strong tag do?
- Which element should you use to insert an image in an HTML5 document?
- How do you specify the location and the file name of the image to be inserted?
- How do you specify the size and the position of the image within an <img> element?
- What does the alt attribute do in the <img> element? Why is it important to include this attribute?
- How do you use images as link anchors?
- What are special characters in an HTML5 document?
- How do you use special characters such as the ampersand in an HTML5 document?
- How do make an unordered list in an HTML5 document?
- How do you make an ordered list in an HTML5 document?
- How do you choose different bullets or numbering styles for your list?
- What are nested lists?
- How do you add line breaks to an HTML5 document?
- When is it appropriate to use a table in an HTML document?
- How do you begin to create a table in an HTML5 document?
- What attributes of the table element can be used to set the height, width, border, and colours of a table?
- How do you add a caption and a summary to a table?
- How do you format the table header area?
- How do you start and close a table body?
- What is table footer? How do you add a table footer to a table?
- How do you specify the width of a table column?
- How do specify the height of a particular table row?
- How do you position a table and text in a table cell?
- How do you add a row to a table?
- What are HTML5 forms? What are the forms used to do?
- How do you insert forms in an HTML5 document?
- How do you specify method and action in a form? What are method and action anyway? What do the name and value attributes do in a form input?
- What are inputs and labels in a form?
- What input types can be used in a form?
- What are the differences between the post and get methods of a form?
- What can the textarea element be used for in a form?
- What is the password input used for?
- What are the checkbox and radio inputs? What are the differences between them?
- What does the select element do? How do you use the select element and set the default-selected item?
- How do you create a named anchor in a document?
- How do you specify a named anchor in an anchor element?
- What are image maps? How do you create an image map?
- How do you define an area for an image map?
- What are void elements in HTML5?
- What is internal linking? How do you make/use internal links?
- How do you use the <meta> element in an HTML5 document?
Review
Do the self-review exercises at the end of Chapter 2 of the e-text.
Summary
Read the chapter summary at the end of Chapter 2 of the e-text.
