Transcript HTML5
HTML5
Introducing HTML
• Web pages are written in HTML
• HTML = HyperText Markup Language
• Characteristics:
– Describes the content and structure of a
document
– Uses tags
• HTML Ancestor
– SGML = Standard Generalized
Markup Language
XHTML and the Development of
HTML 5
Tools for Creating HTML Documents
• Basic text editor such as Windows Notepad (PC) or TextEdit
(Mac).
• Other software programs that enable you to create
documents in different formats, such as Microsoft Word or
Adobe Acrobat, include tools to convert their documents into
HTML for quick and easy publishing on the Web
• Web publishing software manages all of the code and
extended features of your site
Entering Elements and Attributes
• An HTML document is composed of elements
that represent distinct items in the Web page,
such as a paragraph, the page heading, or
even the entire body of the page itself
– Elements are marked by one or more tags
• A two-sided tag is a tag that contains some
document content. General syntax for a twosided tag:
<element>content</element>
5
Marking Elements with Tags
• A two-sided tag’s opening tag (<p>) and
closing tag (</p>) should completely enclose
its content
• Elements can contain other elements
– Tags cannot overlap
<p>CBIS 3219: Web Development</p>
6
Adding an Attribute to an Element
• To add an element attribute, use the format
<element attribute1=”value1”
attribute2=”value2”
...>content</element>
where attribute1, attribute2, etc. are the names of
attributes associated with the element, and
value1, value2, etc. are the values of those
attributes.
<p align =“left”>CBIS 3219: Web Development</p>
7
Exploring the Structure
of an HTML File
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
8
1. History, Vision & Future of HTML5
• 原始的HTML，只是“超文字文件”
• 現在的HTML，有大量的多媒體，但是，是透過 plugin 達
成
• 把外掛變成“內掛”，理論上來說，可以
增加穩定度
• 而且，網頁可以更詳細的控制多媒體的播
放
1. History, Vision & Future of HTML5
1.1 What Is HTML5?
•
•
•
Successor of HTML 4.01 and XHTML 1.1
It comes with new tags, features and APIs
Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the
medias:
– New structural elements (<header>, <footer>, <nav> and more)
– Forms 2.0 and client-side validation
– Native browser support for audio and video (<video>, <audio>)
– Canvas API and SVG
– Web storage
– Offline applications
– Geolocation
– Drag & Drop
– Web Workers
– New communications API (Server Sent Events, Web Sockets, …)
Canvas API and SVG
• SVG 是老東西了
– Scalable Vector Graphics
– 可縮放向量圖
– 以 XML 的形式撰寫，但是可以在瀏覽器呈現圖
形
• 比較厲害的例子
– http://zh.wikipedia.org/wiki/File:Mahuri.svg
• 但是，過去的 SVG 是失敗的，因為他還是
要 plugin，那就用 flash 就好了
Web Storage
• 以前，瀏覽器是不能碰觸檔案系統的，除
了暫存檔案啦，cookie 啦之類的
• Cookie的運作原理？
• Web Storage 比 cookie 更安全，也更快
Offline Applications
• 針對 “行動運算”來的
• 離線可以運作的網頁
• 同步機制的問題
1. History, Vision & Future of HTML5
1.2 History of HTML5?
•
December 1997: HTML 4.0 is published by the W3C
•
February - March 1998: XML 1.0 is published
•
December 1999 - January 2000: ECMAScript 3rd Edition, XHTML 1.0 (Basically
HTML tags
reformulated in XML) and, HTML 4.01 recommendations are published
•
May 2001: XHTML 1.1 recommendation is published
•
August 2002: XHTML 2.0 first working draft is released.
•
December 2002: XHTML 2.0 second working draft published.
•
January 2008: First W3C working draft of HTML5 is published!!
1. History, Vision & Future of HTML5
1.3 Future of HTML5
•
84% of Developers Plan to Adopt Key HTML5 Features
•
The key to understanding HTML5 is that it is not one, but a group of technologies.
Within HTML5, developers have a tremendous amount of choice regarding what they
use and what they don’t use
•
The power of HTML5 being ready for prime-time can be seen in Microsoft’s choice to
utilize it in Windows 8
Still on the fence with adopting HTML5 in your next
project?
2. Getting started with HTML5
Wondering what it takes to get it started?
•
Any Text editor such as Notepad++, Editplus, Textmate, Dream weaver
•
Modern browsers such as Firefox 3.5 +, IE9, chrome, safari
•
Prior knowledge of HTML 4
3. Structure of Web page
3.1. New and Updated HTML5 Elements
HTML5 introduces 28 new elements:
<section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figure>, <figcaption>, <vi
deo>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <rt>, <rp>,
<wbr>, <canvas>, <command>, <details>,<summary>, <datalist>, <keygen> and <output>
An HTML page first starts with the DOCTYPE declaration
HTML5 also update some of the previous existing elements to better reflect how they are used on
the Web or to make them more useful such as:
•
•
•
•
The <a> element can now also contain flow content instead of just phrasing content
The <hr> element is now representing a paragraph-level thematic break
The <cite> element only represent the title of a work
The <strong> element is now representing importance rather than strong emphasis
Rich Internet Applications (RIA)
•
•
•
•
Space between the internet and the desktop
Apps that look good and behave well
Adobe Air/Flash, Java, Silverlight, Gears
Availability
– Anywhere a web browser is available
– As a desktop widget or application
– Part of a mobile application store
RIA Examples
5 HTML Enhancements
•
•
•
•
•
HTML
Forms
CSS
Offline applications
Local storage
HTML Extended
• Document Flow: div, section, article, nav, aside,
header, footer
• Audio, Video and Embed
• Canvas: paths, gradients, image manipulation,
events
• Microdata for semantics and enhanced search
engine results (Google Rich Snippets)
到底什麼是 HTML 5?
•
https://developer.cdn.mozilla.net/media/uploads/demos/p/a/paulrouget/47e916
de488e745f95aee0bc32d5fd31/runfield_1327576901_demo_package/index.html
• http://www.playtankworld.com/
HTML5 會不會取代 Flash?
• http://peterned.home.xs4all.nl/3d/
• http://andrewhoyer.com/andrewhoyer/experiments/cloth/
• http://www.mrdoob.com/projects/chromeexp
eriments/ball-pool/
HTML Basics
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• 兩大主要元素：
– 標籤
– 屬性
標籤
• <table> </table>
• <br/>
屬性
• <table style=“xxx”>
• <div id=“xxx”>
• <span width=“xxx”>
Versions of HTML
This figure presents a history of the various versions of HTML that have been
released by the World Wide Web Consortium (W3C).
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
39
Creating Heading Tags
• HTML supports six levels of headings,
numbered <h1> through <h6>, with <h1>
being the largest and most prominent.
• Headings are always displayed in a bold font.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
40
Six Heading Levels
This figure
illustrates the
general
appearance of the
six heading styles.
Your browser
might use slightly
different fonts and
sizes.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
41
Creating Lists
• HTML supports three kinds of lists:
– an ordered list, which is used to display
information in a numeric order
– an unordered list, which list items are not listed in
a particular order i.e. bullets
– a definition list, which is a list of terms, each
followed by a definition line that is typically
indented slightly to the right
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
42
Entering an Unordered List
<ul> unordered
list tag
<li> list
item tag
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
43
The Unordered List in the Browser
An unordered
list is a bulleted
list.
unordered
list
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
44
Inserting a Graphic
Image file
dube.jpg
use the <p>
tag so you
can center
the image
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial
1
45
<P> Paragraph
•
•
•
•
•
•
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Multiple <P>'s do not create blank lines
Use <BR> for blank line
Fully-specified text uses <P> and </P>
But </P> is optional
46
Hyperlinks
<BODY>
<H3>Welcome to <A HREF="http://www.cs.virginia.edu">
<STRONG>Computer Science</STRONG></A>
at the <A HREF="www.virginia.edu">University of Virginia.</A>
</H3>
</BODY>
47
Tables: <TABLE > </TABLE>
<HTML>
<HEAD>
<TITLE> Tables </TITLE>
</HEAD>
<H3>Tables </H3>
<BODY>
A basic table that has three columns and two rows.
<table> tag is used
traditionally for page
layout control
<TABLE BORDER>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR>
<TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR>
</TABLE>
</BODY>
</HTML>
• TD: Table Data
• TR: Table Row
• TH: Table Header (Header Cell)
48
• The Form tag:
Form Elements
– <FORM ACTION="URL">… form elements … </FORM>
• Form tag attributes:
– ACTION
– METHOD:
• GET: default, fill-out form contents are appended to the URL.
• POST: Fill-out form contents are sent to the server in a data
body.
• Form elements tags:
– INPUT tag: specify a simple input element inside a form.
– SELECT tag: List box or dropdown list box
– TEXTAREA tag: Multiple line text box input
49
• Example:
INPUT Tag
– Last Name: <INPUT TYPE="text" NAME="LastName" SIZE=20>
• TYPE
–
–
–
–
–
–
–
TEXT: Single line text box
PASSWORD: Password entry
CHECKBOX: Check box
RADIO: Radio button
HIDDEN: Hidden field sends a variable and a value
SUBMIT: Submit button
RESET: Reset button
• NAME: required for all form elements other than SUBMIT and RESET
buttons
• VALUE: default value for textbox; label for submit and reset buttons
• CHECKED: Apply to Check box and Radio button
• SIZE: Size of the Text box.
• MAXLENGTH: Maximum number of characters acceptable in a
textbox
50
Sample Form HTML Page
51
JavaScript Basics
What is JavaScript
•
Scripting language (object-oriented)
–
–
•
Designed to be embedded in browsers
–
–
–
–
–
–
•
•
Lightweight programming language developed by Netscape
Interpreted, not compiled
Ideal for adding interactivity to HTML pages
Detect browser versions
Work with info from user via HTML forms
Create cookies
Validate form data
Read and write HTML elements
Supported by all major browsers
–
Internet Explorer has JScript (started in IE3)
–
http://www.faqts.com/knowledge_base/view.phtml/aid/1380
It’s free, no license required
What is JavaScript
• Syntax is similar to Java, but it’s not
• Usually JavaScript code is embedded within HTML code using
the script tag:
• Can have more than one pair of script tags in a page
• Semicolons: C++ and JAVA require them but in JavaScript it’s
optional
What is JavaScript
•
HelloWorld example program…
–
<html>
•
•
•
•
•
•
•
•
–
•
<head><title>JavaScript HelloWorld!</title></head>
<body>
<script language="JavaScript">
document.write('Javascript says "Hello World!"')
</script>
</body>
</html>
Let’s open it in the browser
What is JavaScript
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<script language=“JavaScript”>
document.write (“<b> This is first </b>);
</script>
</head>
<body>
Now where does this print on the web page???? <br />
<script language=“JavaScript”>
document.write ( “This might be last?”)
</script>
•
•
</body>
</html>
•
Lets See what the answer is!
Variables
• Must declare variables before they’re used in the program
– Declare at the top of the program & terminate each
statement with ‘;’
– Intialize variables when appropriate
– Local variables (declared within a function) destroyed after
function exit.
• Can only be accessed within the function
• Example – Note Assignments
– var candyBarPrice = 2.50;
– var taxRate = .075;
– var candyBarsPurchased;
JavaScript Functions – Syntax
• JS function syntax
function myFunctionName (list of parameters) {
….JS code here…
}
JavaScript Functions – Syntax
• JS function syntax
function myFunctionName (list of parameters) {
….JS code here…
}
<html>
<head>
<script type="text/javascript">
function showInput(){
var text=document.getElementById("userName");
alert(text.value);
}
function loaded(){
var bt=document.getElementById("btInput");
bt.onclick=showInput;
}
</script>
</head>
<body onload="loaded();">
請輸入你的名字：<input type="text" id="userName"></input><input
type="button" id="btInput" value="Click"></input>
</body>
</html>
jQuery Basics
What is jQuery?
• jQuery is a JavaScript library providing lots of
convenient functions.
• Why?
• Although JavaScript is a standard,
compatibility among browsers is a issue since
different browsers implement JavaScript in
different ways.
If(IE6){
…
}else if(IE7){
…
}else if(chrome){
…
}
……
Example – Show/Hide the old way
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle
visibility of #foo</a>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
64
Example – Show/Hide with jQuery
$(document).ready(function(){
$("a").click(function(){
$("#more").toggle("slow");
return false;
});
});
65
Selecting Elements
Creating a “wrapped set”
•
•
$(selector)
selector:
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
$(‘#id’)
id of element
$(‘p’)
tag name
$(‘.class’)
CSS class
$(‘p.class’) <p> elements having the CSS class
$(‘p:first’) $(‘p:last’) $(‘p:odd’) $(‘p:even’)
$(‘p:eq(2)’)
gets the 2nd <p> element (1 based)
$(‘p’)[1]
gets the 2nd <p> element (0 based)
$(‘p:nth-child(3))
gets the 3rd <p> element of the parent. n=even, odd too.
$(‘p:nth-child(5n+1)’) gets the 1st element after every 5th one
$(‘p a’)
<a> elements, descended from a <p>
$(‘p>a’)
<a> elements, direct child of a <p>
$(‘p+a’)
<a> elements, directly following a <p>
$(‘p, a’)
<p> and <a> elements
$(‘li:has(ul)’) <li> elements that have at least one <ul> descendent
$(‘:not(p)’)
all elements but <p> elements
$(‘p:hidden’) only <p> elements that are hidden
$(‘p:empty’) <p> elements that have no child elements
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#btInput").click(function(){
alert($("#userName").val());
});
});
</script>
</head>
<body>
請輸入你的名字：<input type="text" id="userName"></input><input
type="button" id="btInput" value="Click"></input>
</body>
</html>
HTML 5 Basics
新的標籤