HTML5 new elements. The tag specifies independent, self- contained content. An article should make sense on its own and it should be possible to distribute.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 2 HTML Basics Key Concepts
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
New Semantic Elements (Part 2)
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Google Chrome & Search C Chapter 18. Objectives 1.Use Google Chrome to navigate the Word Wide Web. 2.Manage bookmarks for web pages. 3.Perform basic keyword.
New Semantic Elements (Part 1). Semantics Explained The textbook definition of "semantics" is the study of the relationship between words and their meanings.
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.
Semantically meaningful elements Elements that are self-descriptive; they describe the purpose of the content they contain Examples: – element defines.
HTML5 Fundamentals By RaedRASHEED 2015.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Chapter 14 Introduction to HTML
Jiří Balej, Martin Podborský, Petra Čačková.  Tools, which enables to produce content without source code knowledge  Text document ◦ MS Word/OO Writer.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
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.
CHAPTER 2 HTML & HTML5 II อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
HTML and CSS- Layout. HTML Layout Frame Table – Block HTML5 layout elements.
 The World Wide Fund for Nature (WWF) is an international non-governmental organization working on issues regarding the conservation, research and restoration.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Web Foundations MONDAY, SEPTEMBER 30, 2013 LECTURE 3: COMMON HTML TAGS, NEW HTML5 SECTIONS, USING FTP.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
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.
Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics.
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.
WRT235: Writing in Electronic Environments Session 2 Basic XHTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Session: 8. © Aptech Ltd. 2Creating Navigational Aids and Division-Based Layout / Session 8  Explain HTML5 semantic tags  Explain HTML5 semantic tag.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
2.4. Choose and configure HTML5 tags to organize content and forms Choose and configure HTML5 tags for input and validation. Building the User Interface.
HTML5 Structure. Slide 2 Introduction Introduce the purpose of the new HTML5 semantic tags Introduce the HTML5 outlining mode Using semantic metadata.
XHTML Introductory1 Frames Chapter 5. XHTML Introductory2 Objectives In this chapter, you will: Work with the Frameset Document Type Definition (DTD)
1 Company Confidential Skin a Complete DotNetNuke Website Using HTML5 and CSS3 in One Hour Amelia Marschall Partner & Creative Director.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML5 Semantic
Getting Started with HTML
Web Basics: HTML/CSS/JavaScript What are they?
Internet Exploration: HTML Basics
Web Development & Design Foundations with HTML5 7th Edition
Web Page Elements Writing For the Web
Concepts for fluid layout
Web Development & Design Foundations with HTML5 8th Edition
Internet Exploration: HTML Basics
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Laying out a website using CSS and HTML
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with H T M L 5
Introduction to HTML.
New Semantic Elements (Part 2)
Common Page Design Elements
HTML 5 SEMANTIC ELEMENTS.
Concepts for fluid layout
Web Programming and Design
Various mobile devices
HTML5 Tags By Dr Derek Peacock
Presentation transcript:

HTML5 new elements

The tag specifies independent, self- contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Potential sources for the element: Forum post Blog post News story Comment

Google Chrome Google Chrome is a free, open-source web browser developed by Google, released in 2008.

The tag defines a footer for a document or section. A element should contain information about its containing element. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You can have several elements in one document.

example Tip: Contact information inside a element should go inside an tag. Posted by: Hege Refsnes Contact information:

The tag specifies a header for a document or section. The element should be used as a container for introductory content or set of navigational links. You can have several elements in one document.

Note: A tag cannot be placed within a, or another element.

Internet Explorer 9 Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:

The tag defines a set of navigation links. NOT all links of a document should be inside a element. The element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

HTML | CSS | JavaScript | jQuery

The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. The HTML tag is used to represent a section within an article. Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.

WWF The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in WWF's Panda symbol The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

Welcome What We Do We protect sharks... News Items Man eats shark... Contact Us At the beach...