HTML5, CSS, Twitter Bootstrap

HTML5, CSS, Twitter Bootstrap

HTML5 • Will be the new standard • New features • <canvas> • Drag and Drop • <video> and <audio> • Support for local storage • <article>, <footer>, <header>, <nav>, <section> • New input types • Removed tags • <applet> • <center> • <frame>, <frameset>

<canvas> • Canvas is a container for drawing graphics • <canvas id=“drawing” height=“100” width=“300”></canvas> • All the drawing is done with scripts usually JavaScript <script> var c=document.getElementById(“drawing”); varctx=c.getContext(“2d”); ctx.fillStyle=“#FF0000”; ctx.fillRect(0,0,150,75); </script>

Inline Scalable Vector Graphics <svgxmlns=“http://www.w3.org/2000/svg” version=“1.1”> <polygon points=“100,10 40,180 190,60 10,60 160,180” style=“fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”> </svg> • Contains XML to describe the graphics • SVG graphics are a part of the document, Canvas’ are not

Drag and Drop • Drag and Drop is part of the HTML5 standard • Requires JavaScript <img id=“drag1” src=“logo.png” draggable=“true” ondragstart=“drag(event)”> <div id=“target” ondrop=“drop(event)” ondragover=“allowdrop(event)”></div> drag(event) is JavaScript function that set the contents of the dragging object drop(event) is JavaScript function that handles the drop, sets the child element

Video and Audio • Embed video into your page with <video> element • Most browsers support it, but support different formats (MP4, WebM, Ogg) • Embed audio into your page with <audio> element • Most browsers support it, but again the formats differ (MP3, Wave, Ogg) • Use multiple <source> elements • Browser will use first it recognizes

Local Storage • Secure quick replacement for cookies • Data is stored locally in the Browser • Key, value pairs only accessible by page that stored the data • Used by JavaScript • Two types • localStorage – no expiration date • sessionStorage – deleted when when browser window is closed

Semantic Elements • <div> and <span> are not semantic elements • Used widely in most web pages • New semantic elements • <header> • <nav> • <section> • <article> • <aside> • <figure> • <footer> • Have to style them to get them to layout correctly

Input Types • Added several new input types • color • date • datetime • email • month • number • range • search • url

Cascading Style Sheets • Styles define how to display HTML elements • Were added to HTML 4.0 to solve a fundamental problem with HTML • HTML wasn’t designed to have format tags • HTML describes the structure and content of the document • HTML 3.2 added some format tags like <font> • Styles separate the display from the structure

CSS Structure • CSS files are a collection of CSS Rules • CSS Rules have two parts • Selector • element table • #id #cam • .class .fancy • * selects all • One or more Declarations • property:value; • CSS Comments • /* this is a comment */

CSS Selectors

Inserting CSS • External Style Sheet <head> <link rel=“stylesheet” type=“text/css” href=“mystyles.css”> </head> Internal Style Sheet <head> <style> hr {color:red;} p {margin-left:15px;} </stlye> </head> Inline Styles <p style=“color:green;margin-left:10px;”>

Multiple Style Sheets • Multiple styles cascade into one style • Ordering* • Inline • In <head> element • In external CSS file * If the <link> to external CSS file is after the internal style then it will override the internal style

Twitter Bootstrap • Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development • http://getbootstrap.com/

HTML5, CSS, Twitter Bootstrap