NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers
-
Upload
michelle-davies -
Category
Education
-
view
163 -
download
2
description
Transcript of NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers
![Page 1: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/1.jpg)
HTML5 and CSS3 for BloggersJason N. Gaylord
![Page 2: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/2.jpg)
Why should you care about this stuff? Have you ever authored a blog post that you wanted more control over?
Do you use a blog engine (or CMS), such as WordPress, Orchard, Drupal or others and would like to customize the theme?
![Page 3: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/3.jpg)
HTML is Born The Internet may have been created by Al Gore… (not actually true)
But HTML was developed by Sir Tim Berners-Lee
19901995
20002005
2010
HTML
HTML 2 CSS
JavaScript
HTML 4
CSS 2 XHTML
Table-le
ss D
esign
AJAX
HTML 5
CSS 3
![Page 4: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/4.jpg)
Structured Markup HTML is a set of instructions that help a browser render content in a desired way.
Generally speaking, those instructions begin with a less than sign < and end with a greater than sign >. In between the signs, you’ll find an instruction keyword called an HTML tag.
All instructions can be written in full form such as <foo></ foo>. Notice that the ending tag contains a forward slash. This helps to indicate that it is a closing tag.
Some tags can have nested tags and/or content such as <foo>bar</ foo>.
![Page 5: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/5.jpg)
Common Structure
![Page 6: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/6.jpg)
What’s New in HTML 5? New Semantic Elements (article, aside, audio, canvas, figure, footer, header, nav, video, section, etc.)
New Attributes (i.e.: Textbox types for calendar, date, email, tel, time, url, etc.)
New APIs (audio, video, graphics, history, location, Web Sockets, etc.) which should reduce the need for plug-ins (i.e.: Flash, Silverlight, etc.) and browser-specific implementations.
Local (“offline”) storage
![Page 7: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/7.jpg)
CSS and What’s New in CSS3? Cascading Style Sheets (CSS) allow control over the style of the content.
Style can be inline or in an external file that is referenced.
The style follows cascading rules with the most general rules located at the top of the file (regardless of whether it is inline or external).
So what’s new? A lot. New selectors, improved border and background capabilities, font capabilities, multi-column capabilities, 2D/3D transforms, page media, etc.
Keep away from browser prefixes (i.e.: -moz, -webkit, -ms)
![Page 8: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/8.jpg)
Writing HTMLDEMO. DEMO. DEMO.
Downloads: http://jasong.us/vs2013rc http://jasong.us/WLWriter
![Page 9: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/9.jpg)
Questions
![Page 10: NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers](https://reader036.fdocuments.in/reader036/viewer/2022070315/5550a2ccb4c90590208b4da8/html5/thumbnails/10.jpg)
Find Out More Twitter: @jgaylord
Website: jasongaylord.com
Email: [email protected]
Book: jasong.us/amzn-aspnet45
W3C: w3.org
CSS Info: css3.info
W3 Schools: w3schools.com
Modern Testing: modern.ie