Tutorial 1: Getting Started with HTML5

1
Tutorial 1 Getting Started with HTML5

• Session 1.2

2
Objectives

• Mark page headings, paragraphs, block quotes, and
  addresses.
• Created unordered and ordered lists.
• Apply an external style sheet to a Web page.
• Run a JavaScript program.

3
Working with Grouping Elements
4
Heading Elements

• Contain the text of main headings on a Web page.
• Syntax
• lth1gtcontentlt/h1gt
• lth2gtcontentlt/h2gt
• lth3gtcontentlt/h3gt
• lth4gtcontentlt/h4gt
• lth5gtcontentlt/h5gt
• lth6gtcontentlt/h6gt
• h1 is largest heading in size -gt h6 is smallest
  heading in size

5
Heading Elements

• Example
• lth1gtOur Mission and Objectiveslt/h1gt
• lth3gtOur Missionlt/h3gt
• lth3gtOur Objectiveslt/h3gt
• Grouping headings using hgroup element
• lthgroupgt
• lth1gtCBIS 3219 Web Developmentlt/h1gt lth2gtHTML
  5lt/h2gt
• lt/hgroupgt

6
Practice Heading Elements

1. In basic.html, within the page header, insert an
   h1 heading with the following content Insert
   basiclogo.png. Below the h1 heading, insert an h2
   heading containing the text Specials This Month.
   Group the h1 and h2 headings using the hgroup
   element.
2. Add two articles within the section element.
   Within the first article, insert an h2 heading
   with the title The Basic Stick. Within the second
   article, insert an h2 heading with the title
   Specifications.

7
Paragraph Elements

• Create paragraphs
• Syntax
• ltpgtcontentlt/pgt
• Example
• ltpgtThis course provides for the building of
  browser-oriented applications for intranet and
  extranet uses. Students will build complex
  applications using web technologies. The course
  will include In-depth coverage of markup
  languages such as the Hypertext Markup Language
  (HTML), Dynamic Hypertext Markup Language
  (DHTML), and the Extensible Hypertext Markup
  Language (XHTML).lt/pgt

8
Practice Paragraph Elements

• Within the first article, after the The Basic
  Stick heading, add a paragraph containing the
  following text
• The Basic Stick is the perfect stick for
  beginners. The stick rotates slowly to provide
  extra time for performing stick tricks, but is
  flashy enough to impress your friends. Enjoy the
  following

9
Blockquote Elements

• Enter quotes
• The content of the blockquote elements is
  indented in the browser.
• Syntax
• ltblockquotegtcontentlt/blockquotegt
• Example
• lth3gtSteve Jobs inspirational quotelt/h3gt
• ltblockquotegtInnovation distinguishes between a
  leader and a follower.lt/blockquotegt

10
Practice Blockquote Elements

• Add a block quote containing the four paragraphs
  from the stick.txt file after the existing
  paragraph element.

11
Address Elements

• Italicize an address.
• Syntax
• ltaddressgtcontentlt/addressgt
• Example
• ltaddressgt
• Caroline Collier
• Georgia College
• Campus Box 012
• Milledgeville, GA 31061
• lt/addressgt

12
Practice Address Elements

• Within the page footer, insert the companys
  address
• The J-Prop Shop
• 541 West Highland Drive
• Auburn, ME 04210
• (207) 555 - 9001

13
Marking List

• Three kinds of lists
• Unordered lists
• Ordered lists
• Description lists

14
Unordered Lists

• Bulleted list
• Syntax
• ltul type typenamegt
• ltligtFirst list itemlt/ligt
• ltligtSecond list itemlt/ligt
• ltligtThird list itemlt/ligt
• lt/ulgt
• Where typename is disc, square, or circle.

15
Unordered lists

• Example
• ltul type discgt
• ltligtHTMLlt/ligt
• ltligtCSSlt/ligt
• ltligtJavascriptlt/ligt
• lt/ulgt

16
Ordered Lists

• Present items in a sequential order.
• Syntax
• ltol type typenamegt
• ltligtFirst list itemlt/ligt
• ltligtSecond list itemlt/ligt
• ltligtThird list itemlt/ligt
• lt/olgt
• Where typename is 1, A, a, I, or i.

17
Ordered Lists

• Example
• ltol type 1gt
• ltligtJanuarylt/ligt
• ltligtFebruarylt/ligt
• ltligtMarchlt/ligt
• ltligtAprillt/ligt
• lt/olgt

18
Description Lists

• Contain a list of terms, each followed by a
  description.
• Syntax
• ltdlgt
• ltdtgtterm1lt/dtgt
• ltddgtdescription1lt/ddgt
• ltdtgtterm2lt/dtgt
• ltddgtdescription2lt/ddgt
• lt/dlgt

19
Description Lists

• Example
• ltdlgt
• ltdtgtMadeleineslt/dtgt
• ltddgtVery small sponge cakes with a
  distinctive shell-like shape, originally from
  Commercy in the northeastern region of
  France.lt/ddgt
• ltdtgtPains au Chocolatlt/dtgt
• ltddgtA French pastry consisting of a dough,
  similar to puff pastry, with one or two pieces of
  chocolate in the centre.lt/ddgt
• lt/dlgt

20
Practice -Lists

• Directly below the Specifications heading, insert
  an unordered list containing two items Main
  Stick and Handle Sticks (one pair).
• Within the Main Stick list item, insert a nested
  unordered list containing the following items
• Weight 7 oz.
• Length 24 inches
• Tape Dura-Coat finish with laser-style color
  choices
• Within the Handle Sticks (one pair) list item,
  insert a nested unordered list containing the
  following items
• Weight 2 oz.
• Length 18 inches
• Tape Soft ivory tape with rubber core

21
Applying an External Style Sheet

• What is a style sheet or CSS?
• Inline style sheet vs. external style sheet
• The link to the external style sheet should be
  placed wiithin the head of the document.
• Syntax
• ltlink hreffilepath relstylesheet
  typetext/css /gt
• Where filepath is the filename and location of
  the style sheet file.

22
Applying an External Style Sheet

• ltheadgt
• lttitlegtYouTube Broadcast Yourselflt/titlegt
• ltlink href youtubestylesheet.css
  relstylesheet type text/cssgt
• lt/headgt

23
Practice Link to External CSS

• Link basic.html to the basicstyles.css style
  sheet file.

24
Running a JavaScript file

• Javascript Programming language which helps make
  the Web pages interactive and dynamic (and
  sometimes fix problems).
• Internal Javascript code vs. external Javascript
  file.
• Example of use HTML5 is not supported by IE 8
  and earlier gt Use a Javascript file to fix the
  problem
• Syntax
• ltscript srcfilepathgtlt/scriptgt
• Example
• ltscript srcmodernizr-1.5.jsgtlt/scriptgt

25
Practice Running JavaScript file

• Link basic.html to the modernizr-1-5.js script
  file to enable HTML 5 support for older browsers.

26
Summary of tags

• lth1gt, lth2gt, lth3gt, lth4gt, lth5gt, and lth6gt
• ltpgt
• ltaddressgt
• ltblockquotegt
• ltdlgt, ltdtgt, ltddgt
• ltulgt, ltolgt, ltligt
• ltlink/gt
• ltscriptgt