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

What's hot (20)

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
Zohar Arad
 
Html
HtmlHtml
Html
mazario
 
Web Design Fundamentals
Web Design FundamentalsWeb Design Fundamentals
Web Design Fundamentals
Ahmed Faris
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu Putra
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)
DSCIIITLucknow
 
Kristina benjamin fonttag
Kristina benjamin fonttagKristina benjamin fonttag
Kristina benjamin fonttag
kristibenjamin
 
HTML 5, CSS3 and ASP.NET Best Practices by Example
HTML 5, CSS3 and ASP.NET Best Practices by ExampleHTML 5, CSS3 and ASP.NET Best Practices by Example
HTML 5, CSS3 and ASP.NET Best Practices by Example
Darren Sim
 
Web development basics
Web development basicsWeb development basics
Web development basics
Kalluri Vinay Reddy
 
Rakshat bhati
Rakshat bhatiRakshat bhati
Rakshat bhati
Rakshat bhati
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
Renoir Boulanger
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
Woratana Perth Ngarmtrakulchol
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
tutorialsruby
 
GTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersGTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshers
TOPS Technologies
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
AursalanSayed
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
Muhammad Toqeer
 
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
New Tricks
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
LearningNerd
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
Zohar Arad
 
Web Design Fundamentals
Web Design FundamentalsWeb Design Fundamentals
Web Design Fundamentals
Ahmed Faris
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu Putra
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)
DSCIIITLucknow
 
Kristina benjamin fonttag
Kristina benjamin fonttagKristina benjamin fonttag
Kristina benjamin fonttag
kristibenjamin
 
HTML 5, CSS3 and ASP.NET Best Practices by Example
HTML 5, CSS3 and ASP.NET Best Practices by ExampleHTML 5, CSS3 and ASP.NET Best Practices by Example
HTML 5, CSS3 and ASP.NET Best Practices by Example
Darren Sim
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
Renoir Boulanger
 
GTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersGTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshers
TOPS Technologies
 
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
New Tricks
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
LearningNerd
 

Viewers also liked (16)

Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
Simratpreet Singh
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010
Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
Zi Bin Cheah
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Jason Hando
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Mediacurrent
 
Fastest css3 animations
Fastest css3 animations Fastest css3 animations
Fastest css3 animations
Ismail Berkay Beyaz
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
Zac Gordon
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
mbeatrizoliveira
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise Jacobs
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
Achmad Solichin
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010
Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
Zi Bin Cheah
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Jason Hando
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Mediacurrent
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
Zac Gordon
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Ad

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

Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
Altaf Pinjari
 
Up Up and Above HTML 5
Up Up and Above HTML 5Up Up and Above HTML 5
Up Up and Above HTML 5
Sam Dias
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
HTML
HTMLHTML
HTML
poonamBhalla5
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
Artificial Intelligence Institute at UofSC
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdfhtml5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
HusnianIlyas
 
HTML
HTMLHTML
HTML
Toni Kolev
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
Chris Mills
 
Web technology
Web technologyWeb technology
Web technology
PCG Solution
 
Up Up and Above HTML 5
Up Up and Above HTML 5Up Up and Above HTML 5
Up Up and Above HTML 5
Sam Dias
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdfhtml5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
HusnianIlyas
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
Chris Mills
 
Ad

More from Michelle Davies (Hryvnak) (20)

NEPA BlogCon 2013 - Blogging 101 (Knepper)
NEPA BlogCon 2013 - Blogging 101 (Knepper)NEPA BlogCon 2013 - Blogging 101 (Knepper)
NEPA BlogCon 2013 - Blogging 101 (Knepper)
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Blogging 101 (Culp)
NEPA BlogCon 2013 - Blogging 101 (Culp)NEPA BlogCon 2013 - Blogging 101 (Culp)
NEPA BlogCon 2013 - Blogging 101 (Culp)
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Google Analytics 101
NEPA BlogCon 2013 - Google Analytics 101NEPA BlogCon 2013 - Google Analytics 101
NEPA BlogCon 2013 - Google Analytics 101
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & ManagementNEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & Management
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
NEPA BlogCon 2013 - Building a Professional Network in the Digital AgeNEPA BlogCon 2013 - Building a Professional Network in the Digital Age
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - Sharing is Caring
NEPA BlogCon 2012 - Sharing is CaringNEPA BlogCon 2012 - Sharing is Caring
NEPA BlogCon 2012 - Sharing is Caring
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & DevelopmentNEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & Development
Michelle Davies (Hryvnak)
 
BitCoin, P2P, Distributed Computing
BitCoin, P2P, Distributed ComputingBitCoin, P2P, Distributed Computing
BitCoin, P2P, Distributed Computing
Michelle Davies (Hryvnak)
 
A Brief History of NEPA Blogs
A Brief History of NEPA BlogsA Brief History of NEPA Blogs
A Brief History of NEPA Blogs
Michelle Davies (Hryvnak)
 
Catalog WTFs
Catalog WTFsCatalog WTFs
Catalog WTFs
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - HTML 101
NEPA BlogCon 2012 - HTML 101NEPA BlogCon 2012 - HTML 101
NEPA BlogCon 2012 - HTML 101
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - All Things Google
NEPA BlogCon 2012 - All Things GoogleNEPA BlogCon 2012 - All Things Google
NEPA BlogCon 2012 - All Things Google
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - Social Media for Business
NEPA BlogCon 2012 - Social Media for BusinessNEPA BlogCon 2012 - Social Media for Business
NEPA BlogCon 2012 - Social Media for Business
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - Blogging for Smart People
NEPA BlogCon 2012 - Blogging for Smart PeopleNEPA BlogCon 2012 - Blogging for Smart People
NEPA BlogCon 2012 - Blogging for Smart People
Michelle Davies (Hryvnak)
 
NEPA BlogCon
NEPA BlogConNEPA BlogCon
NEPA BlogCon
Michelle Davies (Hryvnak)
 
The (mis)adventures of Flat Stanley
The (mis)adventures of Flat StanleyThe (mis)adventures of Flat Stanley
The (mis)adventures of Flat Stanley
Michelle Davies (Hryvnak)
 
Internet Safety Tips for Children
Internet Safety Tips for ChildrenInternet Safety Tips for Children
Internet Safety Tips for Children
Michelle Davies (Hryvnak)
 
Welcome to epix
Welcome to epixWelcome to epix
Welcome to epix
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & ManagementNEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & Management
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
NEPA BlogCon 2013 - Non-Profits vs. For-Profits in the Game of Social Media, ...
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
NEPA BlogCon 2013 - Building a Professional Network in the Digital AgeNEPA BlogCon 2013 - Building a Professional Network in the Digital Age
NEPA BlogCon 2013 - Building a Professional Network in the Digital Age
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & DevelopmentNEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & Development
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - Social Media for Business
NEPA BlogCon 2012 - Social Media for BusinessNEPA BlogCon 2012 - Social Media for Business
NEPA BlogCon 2012 - Social Media for Business
Michelle Davies (Hryvnak)
 
NEPA BlogCon 2012 - Blogging for Smart People
NEPA BlogCon 2012 - Blogging for Smart PeopleNEPA BlogCon 2012 - Blogging for Smart People
NEPA BlogCon 2012 - Blogging for Smart People
Michelle Davies (Hryvnak)
 

Recently uploaded (20)

Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
Writing Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research CommunityWriting Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research Community
Rishi Bankim Chandra Evening College, Naihati, North 24 Parganas, West Bengal, India
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSELET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
OlgaLeonorTorresSnch
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT PatnaSwachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Quiz Club, Indian Institute of Technology, Patna
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
Critical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi MosesCritical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi Moses
Excellence Foundation for South Sudan
 
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ..."Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
Arshad Shaikh
 
K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910
PankajRodey1
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSELET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
LET´S PRACTICE GRAMMAR USING SIMPLE PAST TENSE
OlgaLeonorTorresSnch
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ..."Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
Arshad Shaikh
 
K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910
PankajRodey1
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 

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: [email protected] W3 Schools: w3schools.com Book: jasong.us/amzn-aspnet45 Modern Testing: modern.ie