html5. introducing html web pages are written in html html = hypertext markup language...
TRANSCRIPT
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 two-sided 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>, <video>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details>,<su
mmary>, <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/47e916de488e745f95aee0bc32d5fd31/runfield_1327576901_demo_package/index.html
HTML5 會不會取代 Flash?
• http://andrew-hoyer.com/andrewhoyer/experiments/cloth/
• http://www.mrdoob.com/projects/chromeexperiments/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”>
Creating Web Pages with HTML, 3ePrepared by: C. Hueckstaedt, Tutorial
139
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, 3ePrepared by: C. Hueckstaedt, Tutorial
140
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, 3ePrepared by: C. Hueckstaedt, Tutorial
141
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, 3ePrepared by: C. Hueckstaedt, Tutorial
142
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, 3ePrepared by: C. Hueckstaedt, Tutorial
143
Entering an Unordered List
<ul> unordered list tag
<li> list item tag
Creating Web Pages with HTML, 3ePrepared by: C. Hueckstaedt, Tutorial
144
The Unordered List in the Browser
unordered list
An unordered list is a bulleted list.
Creating Web Pages with HTML, 3ePrepared by: C. Hueckstaedt, Tutorial
145
Inserting a Graphic
Image filedube.jpg
use the <p> tag so you can center the image
46
<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
47
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>
48
Tables: <TABLE > </TABLE> <HTML><HEAD><TITLE> Tables </TITLE></HEAD><H3>Tables </H3><BODY>
A basic table that has three columns and two rows.
<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>
<HTML><HEAD><TITLE> Tables </TITLE></HEAD><H3>Tables </H3><BODY>
A basic table that has three columns and two rows.
<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)
• TD: Table Data• TR: Table Row• TH: Table Header (Header Cell)
<table> tag is used traditionally for page layout control
49
Form Elements• The Form tag: – <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
50
INPUT Tag• Example: – 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
51
Sample Form HTML Page
JavaScript Basics
What is JavaScript• Scripting language (object-oriented)
– Lightweight programming language developed by Netscape– Interpreted, not compiled
• Designed to be embedded in browsers– 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){ …}……
64
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'; }
65
Example – Show/Hide with jQuery
$(document).ready(function(){$("a").click(function(){
$("#more").toggle("slow"); return false; }); });
Selecting ElementsCreating 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
新的標籤