Presentation is loading. Please wait.

Presentation is loading. Please wait.

Session 1.2 Tutorial 1: Getting Started with HTML5.

Similar presentations


Presentation on theme: "Session 1.2 Tutorial 1: Getting Started with HTML5."— Presentation transcript:

1 Session 1.2 Tutorial 1: Getting Started with HTML5

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: content h1 is largest heading in size -> h6 is smallest heading in size

5 Heading Elements Example: Our Mission and Objectives Our Mission Our Objectives Grouping headings using hgroup element: CBIS 3219: Web Development HTML 5

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: content Example: This 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).

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: content Example: Steve Jobs’ inspirational quote: Innovation distinguishes between a leader and a follower.

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: content Example: Caroline Collier Georgia College Campus Box 012 Milledgeville, GA 31061

12 Practice – Address Elements Within the page footer, insert the company’s 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: First list item Second list item Third list item … Where typename is disc, square, or circle.

15 Unordered lists Example: HTML CSS Javascript

16 Ordered Lists Present items in a sequential order. Syntax: First list item Second list item Third list item … Where typename is 1, A, a, I, or i.

17 Ordered Lists Example: January February March April

18 Description Lists Contain a list of terms, each followed by a description. Syntax: term1 description1 term2 description2 …

19 Description Lists Example: Madeleines Very small sponge cakes with a distinctive shell-like shape, originally from Commercy in the northeastern region of France. Pains au Chocolat A French pastry consisting of a dough, similar to puff pastry, with one or two pieces of chocolate in the centre.

20 Practice -Lists 1. Directly below the Specifications heading, insert an unordered list containing two items: Main Stick and Handle Sticks (one pair). 2. 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 3. 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: Where filepath is the filename and location of the style sheet file.

22 Applying an External Style Sheet YouTube – Broadcast Yourself

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 => Use a Javascript file to fix the problem Syntax: Example:

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,,,,, and,,


Download ppt "Session 1.2 Tutorial 1: Getting Started with HTML5."

Similar presentations


Ads by Google