Introduction to HTML5

Size: px
Start display at page:

Download "Introduction to HTML5"

Transcription

1 Introduction to HTML5

2 History of HTML 1991 HTML first published HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 By combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML XHTML 2.0 HTML5 is much more tolerant and can handle markup from all the prior versions HTML5 Though HTML5 was published officially in 2012, it has been in development since 2004.

3 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.

4 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.

5 New Elements in HTML5 <article> <aside> <audio> <canvas> <datalist> <figure> <figcaption> <footer> <header> <hgroup> <mark> <nav> <progress> <section> <source> <svg> <time> <video> These are just some of the new elements introduced in HTML5. We will be exploring each of these during this course.

6 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.

7 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: <!DOCTYPE html> 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.

8 The <html> Element This is what the <html> element looked like in XHTML: <html xmlns=" xml:lang="en" lang="en"> Again, HTML5 simplifies this line: <html lang="en"> The lang attribute in the <html> 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. Each of the world s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar".

9 The <head> Section Here is a typical XHTML <head> section: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my First XHTML Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> And the HTML5 version: <head> <meta charset="utf-8"> <title>my First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines.

10 Basic HTML5 Web Page Putting the prior sections together, and now adding the <body> section and closing tags, we have our first complete web page in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>my First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>html5 is fun!</p> </body> </html> Let's open this page in a web browser to see how it looks

11 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.

12 HTML 5 Latest revision of HTML Backward compatible New key features: 12 video and audio tags content-specific tags tags for form elements canvas element storage of user data

13 Video and Audio Tags Allow simple code for adding video and audio on Web pages Video and audio are played back by the Web browser's built-in player, not plug-ins 13

14 Content-Specific Tags Examples: <footer>, <header>, <nav>, <article>, <section>, <figure>, <summary>, <aside> Allow mark up content by semantics Provide a standardized system to classify the information on Web pages 14

15 Form Elements Examples: date picker, color picker, numeric stepper, new input types ( , url, and search) To enhance user experience of filling out forms 15

16 Canvas Allows drawing graphics and placing images dynamically inside it using JavaScript Visual content inside it can be scripted to change over time (hence animation) and in response to the user interaction (mouse clicks and key presses) Used for animation and game development 16

17 Storage of User Data Approx. 5 MB depending on browsers Larger data limit than cookies (4 KB limit) Storage and retrieval of data on the user's device; i.e., no need for databases or user accounts set up on the server 17

18 XHTML vs. HTML 5 DOCTYPE declaration Character encoding Cases for tag and attribute names Values of attributes Boolean attribute End tag 18

19 DOCTYPE Declaration XHTML HTML 5 Three doctypes: Strict, Transitional, and Frameset For example: <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" " l1/dtd/xhtml1- transitional.dtd "> Only one simplified doctype declared like this: <!DOCTYPE HTML> 19

20 Character Encoding XHTML HTML 5 <meta http- equiv="content- Type" content="text/html; charset=utf-8" /> Simplified as follows: <meta charset"utf- 8"/> 20

21 Cases for Tag and Attribute Names All lowercase XHTML HTML 5 No restriction 21

22 Value of an Attribute XHTML HTML 5 Enclosed in quotation marks Does not have to be in quotation marks 22

23 Boolean Attribute XHTML HTML 5 The value "true" or "false" has to be written out and enclosed in quotation mark; for example: <div hidden="true" /> No need to write out the value just the presence of the attribute means it is true; for example: <div hidden /> 23

24 End Tag XHTML HTML 5 Required for each start tag Not required; thus, self-closing is not required for those tags without content, such as br and img 24

25 HTML 5 Basic Structure <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>this is a title of the page</title> </head> <body> <p>this is the content of the Web page </body> </html> 25

26 An HTML 5 Document OK to still follow the rules of XHTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>this is a title of the page</title> </head> <body> <p>this is the content of the Web page.<br> <img src="images/demo.png" alt="demo"> </p> </body> </html> Arbitrary: cases for tags, pairing tags, uses of quotation marks. Still a valid HTML 5 document. <!doctype html> <HtML lang=en> <head> <meta charset=utf-8> <TITLe>This is a title of the page</title> <body> <P>This is the content of the Web page.<br> <IMg src=images/demo.png alt=demo> 26 Easy to read Hard to read

27 Markup Validator to validate Web documents 27

New Media Production HTML5

New Media Production HTML5 New Media Production HTML5 Modernizr, an HTML5 Detection Library Modernizr is an open source, MIT-licensed JavaScript library that detects support

More information

What is XHTML? XHTML is the language used to create and organize a web page:

What is XHTML? XHTML is the language used to create and organize a web page: XHTML Basics What is XHTML? XHTML is the language used to create and organize a web page: XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter

More information

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( ) MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,

More information

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page

More information

HTML Overview. With an emphasis on XHTML

HTML Overview. With an emphasis on XHTML HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure

More information

Markup Language. Made up of elements Elements create a document tree

Markup Language. Made up of elements Elements create a document tree Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how

More information

Vebra Search Integration Guide

Vebra Search Integration Guide Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container

More information

An Introduction To HTML5

An Introduction To HTML5 An Introduction To HTML5 The HTML5 Doctype Element NOTE: This material pre-assumes competence in HTML4 coding. Before entering into the world of code associated with an HTML5 webpage template, here is

More information

Create a cool image gallery using CSS visibility and positioning property

Create a cool image gallery using CSS visibility and positioning property GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide

More information

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions

More information

History of the Internet. The Internet - A Huge Virtual Network. Global Information Infrastructure. Client Server Network Connectivity

History of the Internet. The Internet - A Huge Virtual Network. Global Information Infrastructure. Client Server Network Connectivity History of the Internet It is desired to have a single network Interconnect LANs using WAN Technology Access any computer on a LAN remotely via WAN technology Department of Defense sponsors research ARPA

More information

Scripting for Multimedia LECTURE 1: INTRODUCING HTML5

Scripting for Multimedia LECTURE 1: INTRODUCING HTML5 Scripting for Multimedia LECTURE 1: INTRODUCING HTML5 HTML An acronym for Hypertext Markup Language Basic language of WWW documents HTML documents consist of text, including tags that describe document

More information

Web Design and Development ACS Chapter 3. Document Setup

Web Design and Development ACS Chapter 3. Document Setup Web Design and Development ACS-1809 Chapter 3 Document Setup 1 Create an HTML file At their very core, HTML files are simply text files with two additional feature.htm or.html as file extension name They

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

Chapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.

Chapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT. Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?

More information

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors. HTML HTML/XHTML HyperText Mark-up Language Basic language for WWW documents Format a web page s look, position graphics and multimedia elements Describe document structure and formatting Platform independent:

More information

CMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document

CMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document CMT111-01/M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document 24 January 2011 Goals for Today Be sure we have essential tools text editor

More information

introduction to XHTML

introduction to XHTML introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers

More information

16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과

16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What

More information

Introduction to HTML5

Introduction to HTML5 Introduction to HTML5 Michael(tm) Smith mike@w3.org http://people.w3.org/mike sideshowbarker on Twitter, etc. I work for the W3C in Japan, based at Keio University near Tokyo My official W3C title is:

More information

Everything you need to know to get you started. By Kevin DeRudder

Everything you need to know to get you started. By Kevin DeRudder Everything you need to know to get you started with HTML5 By Kevin DeRudder @kevinderudder working for eguidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be

More information

I Can t Believe It s Not

I Can t Believe It s Not I Can t Believe It s Not Flash! @thomasfuchs Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint Animating CSS properties Timer JavaScript sets CSS Reflow

More information

HTML HTML. Chris Seddon CRS Enterprises Ltd 1

HTML HTML. Chris Seddon CRS Enterprises Ltd 1 Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog http://www.w3.org/ http://www.w3schools.com

More information

Wireframe :: tistory wireframe tistory.

Wireframe :: tistory wireframe tistory. Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17

More information

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov

More information

HTML CS 4640 Programming Languages for Web Applications

HTML CS 4640 Programming Languages for Web Applications HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

CS144 Notes: Web Standards

CS144 Notes: Web Standards CS144 Notes: Web Standards Basic interaction Example: http://www.youtube.com - Q: what is going on behind the scene? * Q: What entities are involved in this interaction? * Q: What is the role of each entity?

More information

XHTML & CSS CASCADING STYLE SHEETS

XHTML & CSS CASCADING STYLE SHEETS CASCADING STYLE SHEETS What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version

More information

A designers guide to creating & editing templates in EzPz

A designers guide to creating & editing templates in EzPz A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page

More information

CPET 499/ITC 250 Web Systems. Topics

CPET 499/ITC 250 Web Systems. Topics CPET 499/ITC 250 Web Systems Lecture on HTML and XHTML, Web Browsers, and Web Servers References: * Fundamentals of Web Development, 2015 ed., by Randy Connolly and Richard Hoar, from Pearson *Chapter

More information

HTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.

HTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc. HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing

More information

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as

More information

HTML5 are we there yet? Design for web content

HTML5 are we there yet? Design for web content HTML5 are we there yet? Design for web content Overview Historical context DOCTYPEs and such Can/should I use HTML5 now? The problem with browsers... Syntax Semantics The new (structural) elements HTML5

More information

TRAINING GUIDE. Rebranding Lucity Web

TRAINING GUIDE. Rebranding Lucity Web TRAINING GUIDE Rebranding Lucity Web Rebranding Lucity Web Applications In this booklet, we ll show how to make the Lucity web applications your own by matching your agency s style. Table of Contents Web

More information

Title: Dec 11 3:40 PM (1 of 11)

Title: Dec 11 3:40 PM (1 of 11) ... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each

More information

Bookmarks to the headings on this page:

Bookmarks to the headings on this page: Squiz Matrix User Manual Library The Squiz Matrix User Manual Library is a prime resource for all up-to-date manuals about Squiz's flagship CMS Easy Edit Suite Current for Version 4.8.1 Installation Guide

More information

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.: Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End tag

More information

HTML: The Basics & Block Elements

HTML: The Basics & Block Elements HTML: The Basics & Block Elements CISC 282 September 13, 2017 What is HTML? Hypertext Markup Language Markup language "Set of words or symbols" Assigns properties to text Not actually part of the text

More information

HTML. HTML is now very well standardized, but sites are still not getting it right. HTML tags adaptation

HTML. HTML is now very well standardized, but sites are still not getting it right. HTML tags adaptation 1 HTML HTML is now very well standardized, but sites are still not getting it right HTML tags adaptation HTML 2 HTML = HyperText Markup Language is used for the structural part of web pages Our strategy

More information

Techno Expert Solutions An institute for specialized studies!

Techno Expert Solutions An institute for specialized studies! HTML5 and CSS3 Course Content to WEB W3C and W3C Members Why WHATWG? What is Web? HTML Basics Parts in HTML Document Editors Basic Elements Attributes Headings Basics Paragraphs Formatting Links Head CSS

More information

Why HTML5? Why not XHTML2? Learning from history how to drive the future of the Web

Why HTML5? Why not XHTML2? Learning from history how to drive the future of the Web Why HTML5? Why not XHTML2? Learning from history how to drive the future of the Web Michael(tm) Smith mike@w3.org http://people.w3.org/mike sideshowbarker on Twitter, GitHub, &c W3C Interaction domain

More information

Understanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.

Understanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript. Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References

More information

HTML+ CSS PRINCIPLES. Getting started with web design the right way

HTML+ CSS PRINCIPLES. Getting started with web design the right way HTML+ CSS PRINCIPLES Getting started with web design the right way HTML : a brief history ❶ 1960s : ARPANET is developed... It is the first packet-switching network using TCP/IP protocol and is a precursor

More information

Title: Sep 12 10:58 AM (1 of 38)

Title: Sep 12 10:58 AM (1 of 38) Title: Sep 12 10:58 AM (1 of 38) Title: Sep 12 11:04 AM (2 of 38) Title: Sep 12 5:37 PM (3 of 38) Click here and then you can put in the resources. Title: Sep 12 5:38 PM (4 of 38) Title: Sep 12 5:42 PM

More information

Module 2 (III): XHTML

Module 2 (III): XHTML INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (III): XHTML Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.edu.sa

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

CSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0

CSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0 CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson

More information

Inline Elements Karl Kasischke WCC INP 150 Winter

Inline Elements Karl Kasischke WCC INP 150 Winter Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts

More information

Micronet International College

Micronet International College Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 1 (20%) Name: /50 Class: QUESTION 1 a) I) What are W3C standards? 1 Specifications or descriptions

More information

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document

More information

PIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14

PIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14 PIC 40A Lecture 4b: New elements in HTML5 04/09/14 Copyright 2011 Jukka Virtanen UCLA 1 Sectioning elements HTML 5 introduces a lot of sectioning elements. Meant to give more meaning to your pages. People

More information

HTML5 MOCK TEST HTML5 MOCK TEST I

HTML5 MOCK TEST HTML5 MOCK TEST I http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your

More information

HTML. HTML Evolution

HTML. HTML Evolution Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup

More information

Web development using PHP & MySQL with HTML5, CSS, JavaScript

Web development using PHP & MySQL with HTML5, CSS, JavaScript Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create

More information

HTML Introduction to the Code

HTML Introduction to the Code HTML Introduction to the Code How the Web Works WWW part of the Internet (others: Email, FTP, Telnet) HTML/XHTML Docs Loaded to a Server Viewed in a Browser (Client) Clients / Server Client: Request &

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

Tutorial 1 Getting Started with HTML5. HTML, CSS, and Dynamic HTML 5 TH EDITION

Tutorial 1 Getting Started with HTML5. HTML, CSS, and Dynamic HTML 5 TH EDITION Tutorial 1 Getting Started with HTML5 HTML, CSS, and Dynamic HTML 5 TH EDITION Objectives Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax

More information

Index LICENSED PRODUCT NOT FOR RESALE

Index LICENSED PRODUCT NOT FOR RESALE Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using

More information

Building Your Blog Audience. Elise Bauer & Vanessa Fox BlogHer Conference Chicago July 27, 2007

Building Your Blog Audience. Elise Bauer & Vanessa Fox BlogHer Conference Chicago July 27, 2007 Building Your Blog Audience Elise Bauer & Vanessa Fox BlogHer Conference Chicago July 27, 2007 1 Content Community Technology 2 Content Be. Useful Entertaining Timely 3 Community The difference between

More information

CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY) CHAPTER 1: GETTING STARTED WITH HTML EXPLORING THE HISTORY OF THE WORLD WIDE WEB Network: a structure that allows devices known as nodes or hosts to be linked together to share information and services.

More information

Markup Languages SGML, HTML, XML, XHTML. CS 431 February 13, 2006 Carl Lagoze Cornell University

Markup Languages SGML, HTML, XML, XHTML. CS 431 February 13, 2006 Carl Lagoze Cornell University Markup Languages SGML, HTML, XML, XHTML CS 431 February 13, 2006 Carl Lagoze Cornell University Problem Richness of text Elements: letters, numbers, symbols, case Structure: words, sentences, paragraphs,

More information

How the Internet Works

How the Internet Works How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).

More information

How browsers talk to servers. What does this do?

How browsers talk to servers. What does this do? HTTP HEADERS How browsers talk to servers This is more of an outline than a tutorial. I wanted to give our web team a quick overview of what headers are and what they mean for client-server communication.

More information

CompuScholar, Inc. Alignment to Utah's Web Development I Standards

CompuScholar, Inc. Alignment to Utah's Web Development I Standards Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of

More information

MPT Web Design. Week 1: Introduction to HTML and Web Design

MPT Web Design. Week 1: Introduction to HTML and Web Design MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a

More information

Header. Report Section. Footer

Header. Report Section. Footer Scan&Solve Cheat Sheet for Modifying Report Format Scan&Solve uses template files to construct the web-ready reports when the [Report ] button is clicked in the View tab. These template files, located

More information

Web Publishing Basics I

Web Publishing Basics I Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic

More information

django-sekizai Documentation

django-sekizai Documentation django-sekizai Documentation Release 0.6.1 Jonas Obrist September 23, 2016 Contents 1 About 3 2 Dependencies 5 3 Usage 7 3.1 Configuration............................................... 7 3.2 Template

More information

Introduction to ARIA and HTML5. Jared Smith & Jonathan Whiting webaim.org

Introduction to ARIA and HTML5. Jared Smith & Jonathan Whiting webaim.org Introduction to ARIA and HTML5 Jared Smith & Jonathan Whiting webaim.org ARIA ARIA Accessible Rich Internet Applications Specification developed by the PFWG of the W3C s WAI. Huh? W3C Candidate Recommendation

More information

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1 STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment, in the development of up-to-date concepts and skills that are used in the

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

HTML Overview formerly a Quick Review

HTML Overview formerly a Quick Review HTML Overview formerly a Quick Review Outline HTML into Emergence of DHTML HTML History Evolution of Web 1.0 to Web 2.0 DHTML = HTML + JavaScript + CSS Key Set of HTML Tags Basic: a, html, head, body,

More information

HTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries

HTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries HTML5 and Mobile: New Markup & Styles for the Mobile Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview Demos View some code bits New Features and Functions

More information

Static Webpage Development

Static Webpage Development Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction

More information

INTRODUCTION TO HTML5! HTML5 Page Structure!

INTRODUCTION TO HTML5! HTML5 Page Structure! INTRODUCTION TO HTML5! HTML5 Page Structure! 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 a lot since

More information

Fundamentals of Website Development

Fundamentals of Website Development Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1 The birth of HTML HTML Blows and standardization -3- -4-2 HTML 4.0

More information

Chapter 10: Understanding the Standards

Chapter 10: Understanding the Standards Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. Chapter 10: Understanding the Standards CSc2320 In this chapter

More information

Creating A Web Page. Computer Concepts I and II. Sue Norris

Creating A Web Page. Computer Concepts I and II. Sue Norris Creating A Web Page Computer Concepts I and II Sue Norris Agenda What is HTML HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser

More information

XML Applications. Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena

XML Applications. Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena XML Applications Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena Outline XHTML XML Schema XSL & XSLT Other XML Applications 2 XHTML HTML vs. XML HTML Presentation

More information

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?

More information

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address All assignments should be sent to p.grocer@rcn.com Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML

More information

Web Design and Application Development

Web Design and Application Development Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 01 A. Al-Tamimi 1 Lecture Overview

More information

MP3 (W7,8,&9): HTML Validation (Debugging) Instruction

MP3 (W7,8,&9): HTML Validation (Debugging) Instruction MP3 (W7,8,&9): HTML Validation (Debugging) Instruction Objectives Required Readings Supplemental Reading Assignment In this project, you will learn about: - Explore accessibility issues and consider implications

More information

Udacity Frontend Nanodegree Style Guide

Udacity Frontend Nanodegree Style Guide HTML CSS JavaScript Git Udacity Frontend Nanodegree Style Guide Introduction This style guide acts as the of cial guide to follow in your projects. Udacity evaluators will use this guide to grade your

More information

HyperText Markup Language (HTML)

HyperText Markup Language (HTML) HyperText Markup Language (HTML) Mendel Rosenblum 1 Web Application Architecture Web Browser Web Server / Application server Storage System HTTP Internet LAN 2 Browser environment is different Traditional

More information

MI1004 Script programming and internet applications

MI1004 Script programming and internet applications MI1004 Script programming and internet applications Course content and details Learn > Course information > Course plan Learning goals, grades and content on a brief level Learn > Course material Study

More information

Exporting a Confluence space as a Website

Exporting a Confluence space as a Website Exporting a Confluence space as a Website This how-to explains how to export a Confluence space using the AutoExport Plugin. How it works. What it does. The AutoExport Plugin for Confluence is a plugin

More information

Advanced HTML Scripting WebGUI Users Conference

Advanced HTML Scripting WebGUI Users Conference Advanced HTML Scripting 2004 WebGUI Users Conference XHTML where did that x come from? XHTML =? Extensible Hypertext Markup Language Combination of HTML and XML More strict than HTML Things to Remember

More information

HTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week

HTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML

More information

HTML5 - INTERVIEW QUESTIONS

HTML5 - INTERVIEW QUESTIONS HTML5 - INTERVIEW QUESTIONS http://www.tutorialspoint.com/html5/html5_interview_questions.htm Copyright tutorialspoint.com Dear readers, these HTML5 Interview Questions have been designed specially to

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan

More information

CMT111-01/-M1: HTML & Dreamweaver. Creating an HTML Document (Continued)

CMT111-01/-M1: HTML & Dreamweaver. Creating an HTML Document (Continued) CMT111-01/-M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document (Continued) 31 January to 3 February 2011 Where You Should Be Everyone

More information

HTML5. for Masterminds. (1st Edition) J.D Gauchat

HTML5. for Masterminds. (1st Edition) J.D Gauchat HTML5 for Masterminds (1st Edition) J.D Gauchat Copyright 2011 Juan Diego Gauchat All Rights Reserved Edited by: Laura Edlund www.lauraedlund.ca No part of this work may be reproduced or transmitted in

More information

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand

More information

INTRODUCTION TO WEB USING HTML What is HTML?

INTRODUCTION TO WEB USING HTML What is HTML? Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language

More information

First, create a web page with a submit button on it (remember from creating forms in html?):

First, create a web page with a submit button on it (remember from creating forms in html?): Changing Style So far we have only done a little with changing the style of a web page. JavaScript lets us do that as well. We can call a function that allows us to change the style of one or many elements

More information

QUICK REFERENCE GUIDE

QUICK REFERENCE GUIDE QUICK REFERENCE GUIDE New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts @ purgeru.deviantart.com WHAT IS HTML5? HTML5 is being developed as

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information