Presentation on theme: "Session 1.2 Tutorial 1: Getting Started with HTML5."— Presentation transcript:
Session 1.2 Tutorial 1: Getting Started with HTML5
Working with Grouping Elements
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
Heading Elements Example: Our Mission and Objectives Our Mission Our Objectives Grouping headings using hgroup element: CBIS 3219: Web Development HTML 5
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.
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).
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:
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.
Practice – Blockquote Elements Add a block quote containing the four paragraphs from the stick.txt file after the existing paragraph element.
Address Elements Italicize an address. Syntax: content Example: Caroline Collier Georgia College Campus Box 012 Milledgeville, GA 31061
Practice – Address Elements Within the page footer, insert the company’s address: The J-Prop Shop 541 West Highland Drive Auburn, ME (207)
Marking List Three kinds of lists: Unordered lists Ordered lists Description lists
Unordered Lists Bulleted list Syntax: First list item Second list item Third list item … Where typename is disc, square, or circle.
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.
Ordered Lists Example: January February March April
Description Lists Contain a list of terms, each followed by a description. Syntax: term1 description1 term2 description2 …
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.
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
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.
Applying an External Style Sheet YouTube – Broadcast Yourself
Practice – Link to External CSS Link basic.html to the basicstyles.css style sheet file.