HTML5&CSS3. Webpage Editors Notepad++ TextWrangler (Mac Users) Dreamweaver Editplus ...
24
HTML5&CSS3
-
Upload
adam-shields -
Category
Documents
-
view
238 -
download
3
Transcript of HTML5&CSS3. Webpage Editors Notepad++ TextWrangler (Mac Users) Dreamweaver Editplus ...
HTML5&CSS3
Webpage Editors
• Notepad++• TextWrangler (Mac Users)• Dreamweaver• Editplus• http://notepad-plus.sourceforge.net/uk/
site.htm• http://www.barebones.com/products/
textwrangler/
Document Type Definition
• DTD tag points to URI and Formal Public Identifier (FPI) for the actual definition file.
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• HTML5 simplifies the DTD tag:<!DOCTYPE html>
HTML5 Shim
• IE9 fully supports HTML5, not less than IE9• Solutions: make IE read the comments and
define new elements• <!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
HTML5 Tag List
• https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_list
• http://www.w3schools.com/html/html5_new_elements.asp
Essential Tags
• <!DOCTYPE html>• <html lang=“en”>• <head><title></title>• <meta charset=“UTF-8”/>• </head>• <body>• </body>• </html>
Special Characters
• Character Code • # # • $ $ • © © or © • ® ® • < < • > > • & & • " " • (space)
Canvas vs. SVG
• SVG uses XML DOM• Supports event handlers
Color Spaces in CSS
• Name: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
• #rrggbb • rgb(rrr,ggg,bbb) • rgba(rrr,ggg,bbb,a) a=0 transparent• transparent lack of background color (default)• transparent same as parent element
CSS selectors
• Tag selector• Class selector• ID selector• h1, #id, .class{property: values}
• [quoted if values have spaces]
HTML5 semantic tags
• <div class="section" id="forest-elephants" >• <section>
• <article>, <section>, <nav>, <hgroup>and <aside>
HTML 5 figures
• <figure>• <img></img>• <figcaption>• </figcaption>• </figure>
Box model
• 2-D box model• http://www.w3.org/TR/CSS2/box.html• 3-D CSS box model• http://www.hicksdesign.co.uk/boxmodel/
HTML 5 Drop and Drag
HTML 5 geolocation
• navigator.geolocation• getCurrentPosition(doing_func_if_succ)• function doing_func_if_succ()• Errors:• error.PERMISSION_DENIED• error.POSITION_UNAVAILABLE• error.TIMEOUT• error.UNKNOWN_ERROR
HTML 5 videos and audios
• <video>• <audio>• <source>
HTML 5 new input types• <input type=“new_type" name=“new_name"></input>• color• date• datetime• datetime-local• email• month• number• range• search• tel• time• url• week
HTML5 new form element
• <datalist>• <keygen>• <output>
HTML5 local storage
• Storage• localStorage - stores data with no expiration
date• sessionStorage - stores data for one session• localStorage.key=“value”
HTML5 cache
• <!DOCTYPE HTML><html manifest=“filename.appcache">...</html>
HTML 5 Server Sent Event
• Automatic update from server• Good for temporary file detection• var source=new EventSource(“somefile.php");
source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; };
Call php in HTML or javascript
• <div><?php echo $something;?></div>• <SCRIPT language="javascript"> function
javaFunction(){var url="<?php echo $someurl;?> window.open(url, "_self"); } </SCRIPT>
HTML call javascript• <!DOCTYPE html>
<html><head><script>function myFunction(){alert("Hello World!");}</script></head>
<body><button onclick="myFunction()">Try it</button></body></html>
• document.getElementById("demo").innerHTML=myFunction();
HTML call php• <html>
<body>
<form action="welcome.php" method="post">Name: <input type="text" name="fname" />Age: <input type="text" name="age" /><input type="submit" /></form>
</body></html>
• <html><body>
Welcome <?php echo $_POST["fname"]; ?>!<br />You are <?php echo $_POST["age"]; ?> years old.
</body></html>
