Using HTML5 & CSS3 Today. Where we're at Comfortable with HTML4 or XHTML and CSS2 Hearing talk of HTML5 and CSS3 Rapidly advancing browsers...but we've.

Slides:

Advertisements

Similar presentations

CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML.

Advertisements

The Test Will last 60 minutes Will be submitted via the electronic coursework submission system (not part of the test itself Is worth 20% of total module.

Modernize Your Old Browser to Support HTML 5 Svetlin Nakov Telerik Software Academy academy.telerik.com Senior Technical Trainer

What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs”

Hypermedia systems Jakub Husár & Tomáš Jurík. Content XHTML 2.0 Definition Short history Differences between 1.0 and 2.0 Usage suitability Improvements.

XHTML Basics. What is XHTML? XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit.

1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)

HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.

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.

Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

Tutorial 9 Working with XHTML

XHTML 16-Apr-17.

Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 4: Tables and Frames.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.

17-Jun-15 XHTML 2 What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML.

Tutorial 1 Developing a Basic Web Page

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,

XML October 24, Unit 6. What is XML? Stands for eXtensible Markup Language It is a markup language, like HTML But, –XML is designed to markup data –HTML.

Introducing XHTML: Module B: HTML to XHTML. Goals Understand how XHTML evolved as a language for Web delivery Understand the importance of DTDs Understand.

Developing a Basic Web Page Posting Files on UMBC

Semantic Markup and Search Engine Optimization Joseph R. Lewis Sandia National Laboratories.

CNIT 133 Interactive Web Pags – JavaScript and AJAX Review HTML5.

HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –

Marquees and Standards Module 2: HTML Basics LESSON 9.

What is HTML5? HTML5 is the new LEGO for both designers and programmers.

Structure Content Presentation Semantics.

PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.

WRA /16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.

Headings, Paragraphs, Formatting, Links, Head, CSS, Images

PRO HTML5 PROGRAMMING POWERFUL APIS FOR RICHER INTERNET APPLICATION DEVELOPMENT.

HTML BASICS Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.

CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.

XHTML Instructor: Charles Moen CSCI/CINF XHTML  A stricter version of HTML  Extensible HTML  The XHTML specification is maintained by the World.

Reading & Exam Zeid: Chapter 9: XHTML Essential p Read before EXAM 1 Exam is Monday Oct. 25 th Review on Friday Oct. 22 nd.

Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.

1 HTML XHTML. 2 Understand the Doctype tag Know the html tags which are now classed as depreciated Understand how Dreamweaver adds styles Add styles to.

>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.

1 Background and Text Links CGS3066 Rory J. De Simone.

HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.

Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.

Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.

Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.

audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.

Review for exam 1 Midterm Closed Book. Review for Exam 1 Blackboard topic Review for exam 1 Sample Question Multiple Choice True / False Matching type.

PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.

HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.

Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.

Tutorial 1 Developing a Basic Web Page. Objectives Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements.

HTML 5 The Future of Web Development. What is HTML5? “HTML5 is a specification of how the web’s core language, HTML, should be formatted and utilized.

Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.

Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 4: Favicons Tables and.

HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”

INT222 – Internet Fundamentals

HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.

HTML basics and Web standards concepts. ‣ What are web standards? ‣ Why do we use them? ‣ What is HTML and how does it work? ‣ Anatomy of a web page ‣

Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.

Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.

1 Company Confidential Skin a Complete DotNetNuke Website Using HTML5 and CSS3 in One Hour Amelia Marschall Partner & Creative Director.

Why is HTML5 a buzz word? Is HTML5 really a technology worth talking?

The HTML5 logo was introduced by W3C in 2010

Web Basics: HTML/CSS/JavaScript What are they?

Browser Support for HTML5

Murach's JavaScript and jQuery (3rd Ed.)

Presentation transcript:

Using HTML5 & CSS3 Today

Where we're at Comfortable with HTML4 or XHTML and CSS2 Hearing talk of HTML5 and CSS3 Rapidly advancing browsers...but we've still got IE6

HTML5 and CSS3 are ready Dispelling some myths How to begin using them today

What HTML5 is HTML5 is the next iteration of web page markup HTML4 -> XHTML 1 -> XHTML 2 -> HTML5 Introduces new tags and attributes o,,,... o Designed for web apps Already understood by all browsers o Even IE6!

Myth: It's not done yet "The HTML5 spec won't be done until 2012 or 2022" Reality: o Browser support is what matters o 2022: "Proposed Recommendation"  Meaningless in a practical sense o 2012: "Candidate Recommendation"  Spec is finished and ready for widespread adoption o But it's only ...browser support is what matters. o CSS 2.1 is just now a final spec (2011)  "Candidate Recommendation" in 2005

Myth: Browsers don't support it Reality: o Browsers don't support HTML4 or XHTML either -- they support a collection of tags and attributes o Browsers understand any o Browsers will ignore HTML tag attributes and CSS properties that they don't understand o For JavaScript, use object detection or try / catch o Unrecognized types are rendered as o "The HTML5 specification is really just documenting what browsers already do." - HTML5 for Web Designers

Myth: My favorite tag will be obsolete Reality: o "Obsolete" != "deprecated" o Obsolescence is defined by browser support, and always has been o Alternatives are already in place for obsolete tags

Obsolete tag alternatives o,, o, re-design with s o tags:,, attributes: bgcolor, cellspacing, cellpadding, valign o Use CSS

Myth: It can't all be ready, can it? Reality: No, you're right, it's not all ready. Some elements are in a state of transition and need fallbacks (, ) Some APIs are simply not close to being ready (WebSockets, form validation) However... o Cross-platform alternatives and sample fallbacks exist today  offline storage o Some can be designed around  A browser doesn't support geolocation? Ask the user for their ZIP code.

How do I start using it? New elements: o Modern browsers: header { display: block; } o IE: shivs Keep your old syntax or adopt a new one o CSS3: just use it o IE 6-8: css3pie.com

Resources HTML5 tag list: CSS3 property list: modernizr.com/docs/ Feature detection: Modernizr (includes shivs) Shivs: code.google.com/p/html5shiv html5boilerplate.com -- detailed page structure Gradient generator: colorzilla.com/gradient-editor/ Try it yourself: o playground.html5rocks.com o css3please.com Keep tabs on browser support: caniuse.com These links and more: patik.com/html5/