Download presentation
Presentation is loading. Please wait.
1
Tutorial 1 1.2 Working with Block-Level Elements
2
Working with Block-Level Elements
Block-level elements are elements that contain content that is viewed as a distinct block within the Web page Heading elements are block-level elements that contain the text of main headings on the Web page <hn>content<hn> n is an integer between 1 and 6 <h1> is the largest heading <h6> is the smallest heading New Perspectives on HTML and XHTML, 5e
3
Marking Block-Level Elements
To mark a heading, enter <hn>content</hn> To mark a paragraph, enter <p>content</p> To mark a block quote, enter <blockquote>content</blockquote> To mark a generic block-level element, enter <div>content</div> New Perspectives on HTML and XHTML, 5e
4
Adding <h1> and <h2> Markup Tags
New Perspectives on HTML and XHTML, 5e
5
Practice: Headings In your <body> tag add the following :
<h1>Dave’s Devil Sticks</h1> <h2>Who Am I?</h2> <h2>My Products</h2> </body> New Perspectives on HTML and XHTML, Comprehensive
6
Marking Paragraph Elements
New Perspectives on HTML and XHTML, 5e
7
White Space and HTML HTML file documents are composed of text characters and white space White space - blank space, tabs, and line breaks within the file HTML treats each occurrence of white space as a single blank space Browser reads no difference between spaces, tabs, and breaks (use white space to make your document more readable) <pre> tag forces browser to retain extra blanks, tabs, etc. New Perspectives on HTML and XHTML, 5e
8
Practice: Paragraph (End day 1)
Under h2 Who Am I add: <h2>Who Am I?</h2> <h2>My Products</h2> New Perspectives on HTML and XHTML, Comprehensive
9
Marking a Block Quote The syntax for making an extended quote is
<blockquote>content</blockquote> New Perspectives on HTML and XHTML, 5e
10
Practice: Block Quotes
Under h2 Who Am I add: <h2>Who Am I?</h2> <h2>My Products</h2> New Perspectives on HTML and XHTML, Comprehensive
11
Marking a List HTML supports three kinds of lists: ordered, unordered, and definition Ordered list <ol> – list format for items that must appear in a numerical order Unordered list <ul> – list format for items that do not need to occur in any special order Definition list <dl> – list format that contains a list of terms, each followed by the terms definition Also called a nested list Web browsers typically display the definition description below the definition term and slightly indented New Perspectives on HTML and XHTML, 5e
12
Marking a List New Perspectives on HTML and XHTML, 5e
13
Practice: Unordered list (End day 2)
Under h2 My Products add: <h2>My Products</h2> <ul> <li>Basic Stick</li> <li>Flower Stick</li> <li>Master Stick</li> <li>Glow Stick</li> </ul> </body> New Perspectives on HTML and XHTML, Comprehensive
14
Using Other Block-Level Elements
Address element – indicates contact information that is generally displayed in italicized font, at the bottom of the page New Perspectives on HTML and XHTML, 5e
15
Using Other Block-Level Elements
New Perspectives on HTML and XHTML, 5e
16
Practice: Address element
Under </ul> add: </ul> <address>Dave’s Devil Sticks 541 West Highland Dr. Auburn, ME 04210 (207) </address> </body> New Perspectives on HTML and XHTML, Comprehensive
17
Working with Inline Elements
Inline element - marks a section of text within a block-level element Often used to format characters and words Also referred to as character formatting elements New Perspectives on HTML and XHTML, 5e
18
Working with Inline Elements
New Perspectives on HTML and XHTML, 5e
19
Practice: Marking Inline Elements (End day 3)
Within the dave.htm file: Bold “Dave’s Devil Sticks” in the first paragraph Italicize “Circus England” in the blockquote Bold each item on the product list New Perspectives on HTML and XHTML, Comprehensive
Similar presentations
