Introduction to HTML5. History of HTML HTML first published 1991 2012 2002 - 2009 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML5 1995 1997.

Slides:



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

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.
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
XHTML Basics.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
 A markup language  Structures content on the internet  Commonly used by web browsers.
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.
Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Tutorial 1 Developing a Basic Web Page
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
Creating Web Pages with HTML
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Principles of Web Design 6 th Edition Chapter 1 – HTML5.
1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
HTML Structure & syntax
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Introduction to HTML5. History of HTML HTML first published – Tim Berners-Lee HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0.
Web page - A Web page is a simple text file that contains a set of HTML tags (code) that describe (to the browser) what should go on a web page. It may.
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.
Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Birkbeck University of London Business Workshop Web Accessibility for small businesses How to convert table layout page to css.
Introduction to HTML Year 8. What is HTML O Hyper Text Mark-up Language O The language that all the elements of a web page are written in. O It describes.
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.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.
Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.
PART 1: Introduction to HTML & CSS. Lecture 1: HTML 5 Basic Structure.
HTML+ CSS PRINCIPLES Getting started with web design the right way.
Creating Your 1 st Web Page. Tags Refers to anything between on a webpage Most appear in pairs surrounding content Some appear as empty tags (no closing.
XHTML Basics. What is XHTML? XHTML is newer than, but built upon, the original HTML (Hyper Text Markup Language) platform. XHTML has stricter rules and.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
HTML Structure & syntax
Basic HTML Introduction to HTML.
Chapter 17 The Need for HTML 5.
HTML5 Basics.
Introduction to HTML5.
Web Standards Web Design – Sec 2-3
Introduction to HTML5.
XHTML Basics.
HTML 5 Tutorial Chapter 1 Introduction.
Web Standards Web Design – Sec 2-3
Introduction to HTML5.
XHTML Basics.
XHTML Basics.
Structuring Content in a Web Document
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Introduction to HTML5.
XHTML Basics.
Introduction to HTML5.
The Most Basic HTML Page
XHTML Basics.
Introduction to HTML5.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

Introduction to HTML5

History of HTML HTML first published HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML HTML5 is much more tolerant and can handle markup from all the prior versions. Though HTML5 was published officially in 2012, it has been in development since After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 had even stricter standards than 1.0, rejecting web pages that did not comply. It fell out of favor gradually and was abandoned completely in 2009.

What is HTML5? HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers. It incorporates all features from earlier versions of HTML, including the stricter XHTML. It adds a diverse set of new tools for the web developer to use. It is still a work in progress. No browsers have full HTML5 support. It will be many years – perhaps not until 2018 or later - before being fully defined and supported.

Goals of HTML5 Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites. Reduce the need for external plugins and scripts to show website content. Improve the semantic definition (i.e. meaning and purpose) of page elements. Make the rendering of web content universal and independent of the device being used. Handle web documents errors in a better and more consistent fashion.

New Elements in HTML5 These are just some of the new elements introduced in HTML5. We will be exploring each of these during this course.

Other New Features in HTML5 Built-in audio and video support (without plugins) Enhanced form controls and attributes The Canvas (a way to draw directly on a web page) Drag and Drop functionality Support for CSS3 (the newer and more powerful version of CSS) More advanced features for web developers, such as data storage and offline applications.

First Look at HTML5 Remember the DOCTYPE declaration from XHTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " In HTML5, there is just one possible DOCTYPE declaration and it is simpler: Just 15 characters! The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration.

The Element This is what the element looked like in XHTML: Again, HTML5 simplifies this line: Each of the worlds major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar". The lang attribute in the element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers.

The Section Here is a typical XHTML section: My First XHTML Page And the HTML5 version: Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines. My First HTML5 Page

Basic HTML5 Web Page Putting the prior sections together, and now adding the section and closing tags, we have our first complete web page in HTML5: My First HTML5 Page HTML5 is fun! Let's open this page in a web browser to see how it looks…

Viewing the HTML5 Web Page Even though we used HTML5, the page looks exactly the same in a web browser as it would in XHTML. Without looking at the source code, web visitors will not know which version of HTML the page was created with.