Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle
">
Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle
">
SlidePlayer
Upload
  • My presentations
  • Profile
  • Feedback
  • Log out

Log in

Auth with social network:

Forgot your password?

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Buttons:

Presentation is loading. Please wait.

Presentation is loading. Please wait.

NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <div id="header"> <div id="nav"> Explain: Going to see markup typically used to create this kind.

Published bySherman Hutchinson Modified over 7 years ago

Similar presentations


Presentation on theme: "NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <div id="header"> <div id="nav"> Explain: Going to see markup typically used to create this kind."— Presentation transcript:

1

2

3 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <div id="header"> <div id="nav"> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <div id= "sidebar"> <div class="article"> <div class="article"> <div id="footer">

4 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <header> <div id="nav"> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <div id= "sidebar"> <div class="article"> <div class="article"> <div id="footer">

5 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <header> <nav> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <div id= "sidebar"> <div class="article"> <div class="article"> <div id="footer">

6 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <header> <nav> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <div id= "sidebar"> <article> <article> <div id="footer">

7 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <header> <nav> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <aside> <article> <article> <div id="footer">

8 NEW HTML5 LAYOUT ELEMENTS
<body> <div id="page"> <header> <nav> Explain: Going to see markup typically used to create this kind of layout Click: sections of page appear, until you see two articles in the middle <div id="content"> <aside> <article> <article> <footer>

9 HEADER <header>
<header> <h1>Yoko's Kitchen</h1> <nav> <ul> <li><a href="">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav> </header> Explain: Can be used for main header of page or for an individual article or section on that page

10 FOOTER <footer>
<footer> © 2011 Yoko's Kitchen</footer> Explain: again can be used for entire page or the footer of an article or section

11 NAVIGATION <nav> <nav>
<ul> <li><a href="">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav> Likely that it will only be used for the primary navigation

12 ARTICLES <article> <article> <figure>
<img src="bok-choi.jpg" alt="BokChoi" /> <figcaption>Bok Choi</figcaption> </figure> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> <p>A five week introduction to traditional Japanese…</p> </article> Explain: container for section of page that could standalone or be syndicated

13 ASIDE <aside> <aside> <section class="popular-recipes"> <h2>Popular Recipes</h2> <a href="">Yakitori (...)</a> <a href="">Tsukune (...)</a> <a href="">Okonomiyaki (...)</a> <a href="">Mizutaki (...)</a> </section> </aside> Explain: Inside an <article> element = information related to an article (not essential to) Outside an <article> element = information related to entire page

14 SECTIONS <section>
<section class="popular-recipes"> <h2>Popular Recipes</h2> <a href="">Yakitori (...)</a> <a href="">Tsukune (...)</a> <a href="">Okonomiyaki (...)</a> <a href="">Mizutaki (...)</a> </section> Explain: groups related content together and typically each section would have its own heading May contain several <article> elements (Generally not good for wrapping an entire page)

15 HEADING GROUPS <hgroup>
<hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </hgroup> Explain: groups together multiple <h1> - <h6> headings to create single heading

16 <figure> <figcaption>
FIGURES <figure> <figcaption> <figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption> </figure> Explain: not just used for images, can also be used for videos, graphs, diagrams, code samples, and text that supports the main example

17 LINKING AROUND BLOCK-LEVEL ELEMENTS
<a href="introduction.html"> <article> <figure> <img src="bokchoi.jpg" alt="BokChoi" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </hgroup> </article> </a> Explain: formally now allowed in HTML5 (was not previously)

18 HELPING OLDER BROWSERS UNDERSTAND
header, section, footer, aside, nav, article, figure, figcaption { display: block;} Explain: need to tell older browsers which elements are block-level elements

19 HELPING OLDER BROWSERS HTML SHIV <!--[if lt IE 9]> <script
src=" /svn/trunk/html5.js"> </script> <![endif]--> Explain: IE9 was first version of IE to allow CSS to be associated with HTML5 layout elements To get that to work in older browsers you need to use HTML5 shiv or shim script (Requires JS to be enable)

20

21 SUMMARY The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure. Clicks: Load individual bullets

22 SUMMARY The new elements provide clearer code (compared with using multiple <div> elements). Clicks: Load individual bullets

23 SUMMARY Older browsers that do not understand HTML5 elements need to be told which elements are block- level elements. Clicks: Load individual bullets

24 SUMMARY To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google. Clicks: Load individual bullets

25

26


Download ppt "NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <div id="header"> <div id="nav"> Explain: Going to see markup typically used to create this kind."

Similar presentations


Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.

Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.

Tutorial 4: Creating page layout with css

Tutorial 4: Creating page layout with css

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed.

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.

Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”

Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.

IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.

Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.

Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.

Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/2014 1.

Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/

Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.

Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.

Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.

Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.

INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS. TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural.

WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS. TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural.

Similar presentations


About project
SlidePlayer
Terms of Service
Do Not Sell
My Personal
Information
Feedback
Privacy Policy
Feedback

© 2025 SlidePlayer.com Inc.
All rights reserved.

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.     
Ads by Google