HTML 5 Introducing HTML Web pages are written
HTML 5
Introducing HTML • Web pages are written in HTML • HTML = Hyper. Text 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 Text. Edit (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 attribute 1=”value 1” attribute 2=”value 2”. . . >content</element> where attribute 1, attribute 2, etc. are the names of attributes associated with the element, and value 1, value 2, 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 HTML 5 1. 1 What Is HTML 5? • • • 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 "HTML 5" 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, …)
• 比較厲害的例子 – http: //zh. wikipedia. org/wiki/File: Mahuri. svg
1. History, Vision & Future of HTML 5 1. 2 History of HTML 5? • December 1997: HTML 4. 0 is published by the W 3 C • February - March 1998: XML 1. 0 is published • December 1999 - January 2000: ECMAScript 3 rd 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 W 3 C working draft of HTML 5 is published!!
1. History, Vision & Future of HTML 5 1. 3 Future of HTML 5 • 84% of Developers Plan to Adopt Key HTML 5 Features • The key to understanding HTML 5 is that it is not one, but a group of technologies. Within HTML 5, developers have a tremendous amount of choice regarding what they use and what they don’t use • The power of HTML 5 being ready for prime-time can be seen in Microsoft’s choice to utilize it in Windows 8 Still on the fence with adopting HTML 5 in your next project?
2. Getting started with HTML 5 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 +, IE 9, chrome, safari • Prior knowledge of HTML 4
3. Structure of Web page 3. 1. New and Updated HTML 5 Elements HTML 5 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 HTML 5 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)
• https: //developer. cdn. mozilla. net/media/uploads/demos/p/a/paulrouget/47 e 916 de 488 e 745 f 95 aee 0 bc 32 d 5 fd 31/runfield_1327576901_demo_package/index. html
• http: //www. playtankworld. com/
HTML 5 會不會取代 Flash?
• http: //peterned. home. xs 4 all. nl/3 d/
• http: //andrewhoyer. com/andrewhoyer/experiments/cloth/
• http: //www. mrdoob. com/projects/chromeex periments/ball-pool/
HTML Basics
<!DOCTYPE html> <body> <h 1>My First Heading</h 1> <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 (W 3 C). Creating Web Pages with HTML, 3 e Prepared by: C. Hueckstaedt, Tutorial 1 39
Creating Heading Tags • HTML supports six levels of headings, numbered <h 1> through <h 6>, with <h 1> being the largest and most prominent. • Headings are always displayed in a bold font. Creating Web Pages with HTML, 3 e 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, 3 e 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, 3 e Prepared by: C. Hueckstaedt, Tutorial 1 42
Entering an Unordered List <ul> unordered list tag <li> list item tag Creating Web Pages with HTML, 3 e 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, 3 e 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, 3 e 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> <H 3>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> </H 3> </BODY> 47
Tables: <TABLE > </TABLE> <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <H 3>Tables </H 3> <BODY> A basic table that has three columns and two rows. <table> tag is used traditionally for page layout control <TABLE BORDER> <TD>A</TD> <TD>B</TD> <TD>C</TD> </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="Last. Name" 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
Java. Script Basics
What is Java. Script • 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 IE 3) – • http: //www. faqts. com/knowledge_base/view. phtml/aid/1380 It’s free, no license required
What is Java. Script • Syntax is similar to Java, but it’s not • Usually Java. Script 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 Java. Script it’s optional
What is Java. Script • Hello. World example program… – <html> • • – • <head><title>Java. Script Hello. World!</title></head> <body> <script language="Java. Script"> document. write('Javascript says "Hello World!"') </script> </body> </html> Let’s open it in the browser
What is Java. Script • • • <html> <head> <script language=“Java. Script”> document. write (“<b> This is first </b>); </script> </head> <body> Now where does this print on the web page? ? <script language=“Java. Script”> 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 candy. Bar. Price = 2. 50; – var tax. Rate =. 075; – var candy. Bars. Purchased;
Java. Script Functions – Syntax • JS function syntax function my. Function. Name (list of parameters) { …. JS code here… }
Java. Script Functions – Syntax • JS function syntax function my. Function. Name (list of parameters) { …. JS code here… }
HTML 5 Basics
- Slides: 61