1 / 15

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>.

dagan
Télécharger la présentation

HTML5, CSS, Twitter Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5, CSS, Twitter Bootstrap

  2. 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>

  3. <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>

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

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

  10. 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

  11. 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 */

  12. CSS Selectors

  13. 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;”>

  14. 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

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

More Related