SlideShare a Scribd company logo
HTML5 and CSS3 for
Bloggers
Jason N. Gaylord
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?
HTML is Born
The Internet may have been created by Al Gore…
(not actually true)

But HTML was developed by Sir Tim Berners-Lee
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>.
Common Structure
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 browserspecific implementations.
Local (“offline”) storage
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)
Writing HTML
DEMO. DEMO. DEMO.

Downloads:
 http://jasong.us/vs2013rc
 http://jasong.us/WLWriter
Questions
Find Out More
Twitter: @jgaylord

W3C: w3.org

Website: jasongaylord.com

CSS Info: css3.info

Email: jason@jasongaylord.com

W3 Schools: w3schools.com

Book: jasong.us/amzn-aspnet45

Modern Testing: modern.ie

More Related Content

PDF
Front End Best Practices
PDF
Q and a design2 web
PDF
Introduction to the Web and HTML
PDF
CSS For Backend Developers
PPTX
Web development using HTML and CSS
PPT
Ndim1 2009 Web Design
PDF
Organize Your Website With Advanced CSS Tricks
Front End Best Practices
Q and a design2 web
Introduction to the Web and HTML
CSS For Backend Developers
Web development using HTML and CSS
Ndim1 2009 Web Design
Organize Your Website With Advanced CSS Tricks

What's hot (20)

PPTX
HTML CSS and Web Development
PDF
Progressive enhancement
PPTX
Html
PDF
Web Design Fundamentals
PPTX
Training HTML5 CSS3 Ilkom IPB
PDF
Web Development Workshop (Front End)
PPTX
Kristina benjamin fonttag
PDF
HTML 5, CSS3 and ASP.NET Best Practices by Example
PPTX
Web development basics
PPTX
Rakshat bhati
PDF
How to use CSS3 in WordPress
PPT
How to manage a big scale HTML/CSS project
PDF
Bootstrap 3 Basic - Bangkok WordPress Meetup
PDF
xhtml_basics
PPT
GTU Web Designing Interview Questions And Answers for freshers
PPTX
Introduction to CSS
PPT
1. html introduction
PDF
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
PPTX
Web1O1 - Intro to HTML/CSS
ODP
How to Make HTML and CSS Files
HTML CSS and Web Development
Progressive enhancement
Html
Web Design Fundamentals
Training HTML5 CSS3 Ilkom IPB
Web Development Workshop (Front End)
Kristina benjamin fonttag
HTML 5, CSS3 and ASP.NET Best Practices by Example
Web development basics
Rakshat bhati
How to use CSS3 in WordPress
How to manage a big scale HTML/CSS project
Bootstrap 3 Basic - Bangkok WordPress Meetup
xhtml_basics
GTU Web Designing Interview Questions And Answers for freshers
Introduction to CSS
1. html introduction
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
Web1O1 - Intro to HTML/CSS
How to Make HTML and CSS Files
Ad

Viewers also liked (16)

PPT
Html5/CSS3
PDF
谈一谈HTML5/CSS3 @ WebRebuild 2010
PDF
HTML5/CSS3 @ Baidu
PPTX
HTML5 Tags and Elements Tutorial
KEY
HTML5 and CSS3 for Teachers
PDF
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
PPTX
Fastest css3 animations
PDF
Introduction to CSS3
PPSX
HTML5, CSS3, and JavaScript
PPTX
New HTML5/CSS3 techniques
PDF
HTML5 and CSS3 Refresher
PPTX
Presentation about html5 css3
PDF
Intro to CSS3
PDF
Fundamental CSS3
PPTX
Introduction to HTML5 & CSS3
PDF
Cours d'introduction aux HTML5 & CSS3
Html5/CSS3
谈一谈HTML5/CSS3 @ WebRebuild 2010
HTML5/CSS3 @ Baidu
HTML5 Tags and Elements Tutorial
HTML5 and CSS3 for Teachers
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Fastest css3 animations
Introduction to CSS3
HTML5, CSS3, and JavaScript
New HTML5/CSS3 techniques
HTML5 and CSS3 Refresher
Presentation about html5 css3
Intro to CSS3
Fundamental CSS3
Introduction to HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Ad

Similar to NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers (20)

PPTX
Html,CSS & UI/UX design
PPT
Html5 css3
ODP
Up Up and Above HTML 5
PDF
Html5 deciphered - designing concepts part 1
DOCX
PDF
HTML5 Introduction – Features and Resources for HTML5
PPTX
Html5 and-css3-overview
PDF
Web Concepts - an introduction - introduction
PPTX
Web Information Systems Html and css
PPTX
Chapter 2 introduction to html5
ODP
Light introduction to HTML
PPT
SDP_-_Module_4.ppt
PPTX
Workshop 2 Slides.pptx
PDF
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
PPTX
PDF
A practical guide to building websites with HTML5 & CSS3
PPT
HTML 5 Complete Reference
PDF
Intro to HTML 5 / CSS 3
KEY
HTML5: A brave new world of markup
PPTX
Web technology
Html,CSS & UI/UX design
Html5 css3
Up Up and Above HTML 5
Html5 deciphered - designing concepts part 1
HTML5 Introduction – Features and Resources for HTML5
Html5 and-css3-overview
Web Concepts - an introduction - introduction
Web Information Systems Html and css
Chapter 2 introduction to html5
Light introduction to HTML
SDP_-_Module_4.ppt
Workshop 2 Slides.pptx
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
A practical guide to building websites with HTML5 & CSS3
HTML 5 Complete Reference
Intro to HTML 5 / CSS 3
HTML5: A brave new world of markup
Web technology

More from Michelle Davies (Hryvnak) (20)

PPT
NEPA BlogCon 2013 - Blogging 101 (Knepper)
PPT
NEPA BlogCon 2013 - Blogging 101 (Culp)
PPT
NEPA BlogCon 2013 - Google Analytics 101
PPTX
NEPA BlogCon 2013 - Content Creation & Management
PPTX
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
PPTX
NEPA BlogCon 2013 - WordPress Customization & Security
PPTX
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
PPT
NEPA BlogCon 2012 - Sharing is Caring
PPTX
NEPA BlogCon 2013 - Blog Growth & Development
PPTX
BitCoin, P2P, Distributed Computing
PPT
A Brief History of NEPA Blogs
PPT
PPT
NEPA BlogCon 2012 - HTML 101
PDF
NEPA BlogCon 2012 - All Things Google
PPTX
NEPA BlogCon 2012 - Social Media for Business
PPTX
NEPA BlogCon 2012 - Blogging for Smart People
PPT
PPTX
The (mis)adventures of Flat Stanley
PPT
Internet Safety Tips for Children
PPT
Welcome to epix
NEPA BlogCon 2013 - Blogging 101 (Knepper)
NEPA BlogCon 2013 - Blogging 101 (Culp)
NEPA BlogCon 2013 - Google Analytics 101
NEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
NEPA BlogCon 2012 - Sharing is Caring
NEPA BlogCon 2013 - Blog Growth & Development
BitCoin, P2P, Distributed Computing
A Brief History of NEPA Blogs
NEPA BlogCon 2012 - HTML 101
NEPA BlogCon 2012 - All Things Google
NEPA BlogCon 2012 - Social Media for Business
NEPA BlogCon 2012 - Blogging for Smart People
The (mis)adventures of Flat Stanley
Internet Safety Tips for Children
Welcome to epix

Recently uploaded (20)

PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
master seminar digital applications in india
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
TR - Agricultural Crops Production NC III.pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PDF
O7-L3 Supply Chain Operations - ICLT Program
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PPTX
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PPTX
Lesson notes of climatology university.
PDF
Classroom Observation Tools for Teachers
PDF
Insiders guide to clinical Medicine.pdf
PDF
Anesthesia in Laparoscopic Surgery in India
PDF
Complications of Minimal Access Surgery at WLH
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
2.FourierTransform-ShortQuestionswithAnswers.pdf
Module 4: Burden of Disease Tutorial Slides S2 2025
master seminar digital applications in india
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
TR - Agricultural Crops Production NC III.pdf
Microbial diseases, their pathogenesis and prophylaxis
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
O7-L3 Supply Chain Operations - ICLT Program
Final Presentation General Medicine 03-08-2024.pptx
102 student loan defaulters named and shamed – Is someone you know on the list?
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Lesson notes of climatology university.
Classroom Observation Tools for Teachers
Insiders guide to clinical Medicine.pdf
Anesthesia in Laparoscopic Surgery in India
Complications of Minimal Access Surgery at WLH
Supply Chain Operations Speaking Notes -ICLT Program
Abdominal Access Techniques with Prof. Dr. R K Mishra

NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers

  • 1. HTML5 and CSS3 for Bloggers Jason N. Gaylord
  • 2. 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?
  • 3. HTML is Born The Internet may have been created by Al Gore… (not actually true) But HTML was developed by Sir Tim Berners-Lee
  • 4. 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>.
  • 6. 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 browserspecific implementations. Local (“offline”) storage
  • 7. 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)
  • 8. Writing HTML DEMO. DEMO. DEMO. Downloads:  http://jasong.us/vs2013rc  http://jasong.us/WLWriter
  • 10. Find Out More Twitter: @jgaylord W3C: w3.org Website: jasongaylord.com CSS Info: css3.info Email: jason@jasongaylord.com W3 Schools: w3schools.com Book: jasong.us/amzn-aspnet45 Modern Testing: modern.ie