Top Banner
HTML5 and CSS3 for Bloggers Jason N. Gaylord
10

NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers

May 11, 2015

Download

Education

Michelle Davies

HTML5/CSS3

Presented By: Jason Gaylord
Track: Technology
Session Format: Single Presenter Session
Description: HTML5 and CSS3 are extremely important with today’s web applications including blog engines. For over a decade, browser manufacturers had supported HTML standards but also emphasized vendor-specific markup. Across the industry there is a huge push towards web standards and feature detection. This includes HTML, CSS, JavaScript, and 3rd party plugins. Most modern web browsers support HTML video playback, photo capture, and semantic markup. In this session, you’ll learn why it’s important to ensure your blog engine supports the latest web standards. You’ll also learn what the semantic web means to search engines and why it will become increasingly popular with the most common blog engines. Finally, we’ll step through a few really cool examples of using the latest markup specs with the latest browsers.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: NEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers

HTML5 and CSS3 for BloggersJason N. Gaylord

Page 2: NEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers

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

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

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

Common Structure

Page 6: NEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers

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

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

Writing HTMLDEMO. DEMO. DEMO.

Downloads: http://jasong.us/vs2013rc http://jasong.us/WLWriter

Page 9: NEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers

Questions

Page 10: NEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers

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