Tutorial 1: Getting Started with HTML5

1
Tutorial 1 Getting Started with HTML5

• Session 1.3

2
Objectives

• Mark text-level elements including strong and
  emphasized text
• Insert inline images and line breaks
• Specify character set
• Insert special characters

3
Marking Text-Level Elements
4
Bold and Italic Elements

• Bold Syntax
• ltbgttextlt/bgt
• ltstronggttextlt/stronggt
• Italic Syntax
• ltigttextlt/igt
• ltemgttextlt/emgt
• Example
• ltpgtltstronggtSpecial Dealslt/stronggt Atlanta
  London round trip for ltemgt299.00lt/emgt until the
  end of the month.lt/pgt

5
Practice Bold and Italic Elements

• Mark the first few words of each of the four
  paragraphs as strong text, as shown in Figure
  1-48. The following words should be bold
• Patented Dura-Coat
• Enhanced stick flexibility
• Full customization
• A personal touch

6
Break Elements

• Soft return vs. hard return
• ltpgt vs. ltbr /gt
• Syntax
• ltbr /gt
• Example
• ltpgtltbgtLeon Porterlt/bgtltbr /gt
• DOB 03/15/1942ltbr /gt
• Occupation Electricianltpgt

7
Practice Break Elements

1. Add a break element between the Main Stick list
   and the Handle Stick list in the second article.

8
Horizontal Rule Elements

• Horizontal dividers
• Syntax
• lthr /gt
• Attributes width and colors
• Example See HR.html

9
Practice Horizontal Rule Elements

1. Add a horizontal rule at the end of the first
   article.

10
Inserting an Inline Image

• img elements
• Types of image files you can insert in a Web
  page
• PNG, JPG, GIF
• Syntax
• ltimg src filepath /gt
• Additional attributes border, width, height, alt
• The importance of alt
• Example
• ltimg src waterfall.jpg border1 width150
  height200 altAngel Falls in Venezuela /gt

11
Practice Inserting an Inline image

1. Within the h1 heading of the page header, delete
   the text Insert basiclogo.png and replace it by
   the inline image file basiclogo.png. Specify the
   following alternate text for the image The
   J-Prop Shop.
2. Within the section element, insert an aside
   element. The aside element should contain an
   inline image pointing to the basicstick.png file
   and having the text string Our popular basic
   stick as alternate text.

12
Working with Character Sets and Special Characters

• Character sets come in a wide variety of sizes,
  based on the number of symbols required for
  communication in the chosen Language
• ASCII (American Standard Code for Information
  Interchange), Latin-1, ISO 8859-1, Unicode, UTF-8
• Specifying Character Set for HTML 4.01 and XHTML
• ltmeta http-equivContent-Type
  contenttext/html charsetcharacter_setgt
• Specifying Character Set for HTML5
• ltmeta charsetcharacter_set /gt

13
Practice Character Sets

• 1. Add code to specify that the page uses the
  UTF-8 character.

14
Character Entity References and Special Characters

• http//www.utexas.edu/learn/html/spchar.html
• Example
• ltpgtcopy 2012 Microsoftlt/pgt
• or
• ltpgt169 2012 Microsoftlt/pgt

15
Practice Special Characters

1. Locate the two occurrences of Dura-Coat in the
   document. Directly after the word Dura-Coat,
   insert the registered trademark symbol . The
   character entity name of the symbol is reg.
2. Separate the different sections of the address
   using a solid diamond (character code 9830).

16
Summary of tags

• lth1gt, lth2gt, lth3gt, lth4gt, lth5gt, and lth6gt
• ltpgt
• ltaddressgt
• ltblockquotegt
• ltdlgt, ltdtgt, ltddgt
• ltulgt, ltolgt, ltligt
• ltlink/gt
• ltscriptgt
• ltbgt, ltstronggt, ltigt, ltemgt
• ltbr /gt
• ltimg/gt
• ltfiguregt, ltfigcaptiongt
• ltmeta charsetgt