Tutorial 1: Getting Started with HTML5 - PowerPoint PPT Presentation

1 / 26
About This Presentation
Title:

Tutorial 1: Getting Started with HTML5

Description:

Tutorial 1: Getting Started with HTML5 Session 1.2 Practices #10 and #16 * Practice #13 * Content = quote Practice #14 * Practice #21 * lists.html Practice #17 ... – PowerPoint PPT presentation

Number of Views:432
Avg rating:3.0/5.0
Slides: 27
Provided by: caro111
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com