SlideShare une entreprise Scribd logo
1  sur  10
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

Contenu connexe

Tendances

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancementZohar Arad
 
Web Design Fundamentals
Web Design FundamentalsWeb Design Fundamentals
Web Design FundamentalsAhmed Faris
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBWahyu 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 fonttagkristibenjamin
 
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 ExampleDarren Sim
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPressSuzette 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 projectRenoir 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 freshersTOPS 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/CSSNYCSS 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 FilesLearningNerd
 

Tendances (20)

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
 
Html
HtmlHtml
Html
 
Web Design Fundamentals
Web Design FundamentalsWeb Design Fundamentals
Web Design Fundamentals
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)
 
Kristina benjamin fonttag
Kristina benjamin fonttagKristina benjamin fonttag
Kristina benjamin fonttag
 
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
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Rakshat bhati
Rakshat bhatiRakshat 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
 
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
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
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
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
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 ...
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
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
 

En vedette

谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialProdigyView
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersJason 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 DrupalMediacurrent
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptZac Gordon
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherIvano Malavolta
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 

En vedette (16)

Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
 
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
 
Fastest css3 animations
Fastest css3 animations Fastest css3 animations
Fastest css3 animations
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 

Similaire à NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers

Similaire à NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers (20)

Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
DSC, html and CSS basics.pptx
DSC, html and CSS basics.pptxDSC, html and CSS basics.pptx
DSC, html and CSS basics.pptx
 
Website development-osgl
Website development-osglWebsite development-osgl
Website development-osgl
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Lecture-7.pptx
Lecture-7.pptxLecture-7.pptx
Lecture-7.pptx
 
HTML5 & CSS3 -- UPA Iowa
HTML5 & CSS3 -- UPA IowaHTML5 & CSS3 -- UPA Iowa
HTML5 & CSS3 -- UPA Iowa
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangalore
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Uta005 lecture2
Uta005 lecture2Uta005 lecture2
Uta005 lecture2
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
 
Introduction css
Introduction cssIntroduction css
Introduction css
 

Plus de 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 & ManagementMichelle 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 & SecurityMichelle 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 AgeMichelle Davies (Hryvnak)
 
NEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & DevelopmentNEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & DevelopmentMichelle 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 BusinessMichelle 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 PeopleMichelle Davies (Hryvnak)
 

Plus de 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)
 
NEPA BlogCon 2013 - Blogging 101 (Culp)
NEPA BlogCon 2013 - Blogging 101 (Culp)NEPA BlogCon 2013 - Blogging 101 (Culp)
NEPA BlogCon 2013 - Blogging 101 (Culp)
 
NEPA BlogCon 2013 - Google Analytics 101
NEPA BlogCon 2013 - Google Analytics 101NEPA BlogCon 2013 - Google Analytics 101
NEPA BlogCon 2013 - Google Analytics 101
 
NEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & ManagementNEPA BlogCon 2013 - Content Creation & Management
NEPA BlogCon 2013 - Content Creation & Management
 
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, ...
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
 
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
 
NEPA BlogCon 2012 - Sharing is Caring
NEPA BlogCon 2012 - Sharing is CaringNEPA BlogCon 2012 - Sharing is Caring
NEPA BlogCon 2012 - Sharing is Caring
 
NEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & DevelopmentNEPA BlogCon 2013 - Blog Growth & Development
NEPA BlogCon 2013 - Blog Growth & Development
 
BitCoin, P2P, Distributed Computing
BitCoin, P2P, Distributed ComputingBitCoin, P2P, Distributed Computing
BitCoin, P2P, Distributed Computing
 
A Brief History of NEPA Blogs
A Brief History of NEPA BlogsA Brief History of NEPA Blogs
A Brief History of NEPA Blogs
 
Catalog WTFs
Catalog WTFsCatalog WTFs
Catalog WTFs
 
NEPA BlogCon 2012 - HTML 101
NEPA BlogCon 2012 - HTML 101NEPA BlogCon 2012 - HTML 101
NEPA BlogCon 2012 - HTML 101
 
NEPA BlogCon 2012 - All Things Google
NEPA BlogCon 2012 - All Things GoogleNEPA BlogCon 2012 - All Things Google
NEPA BlogCon 2012 - All Things Google
 
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
 
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
 
NEPA BlogCon
NEPA BlogConNEPA BlogCon
NEPA BlogCon
 
The (mis)adventures of Flat Stanley
The (mis)adventures of Flat StanleyThe (mis)adventures of Flat Stanley
The (mis)adventures of Flat Stanley
 
Internet Safety Tips for Children
Internet Safety Tips for ChildrenInternet Safety Tips for Children
Internet Safety Tips for Children
 
Welcome to epix
Welcome to epixWelcome to epix
Welcome to epix
 

Dernier

4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEDust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEaurabinda banchhor
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Seán Kennedy
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxiammrhaywood
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxRosabel UA
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 

Dernier (20)

4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEDust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSE
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptx
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 

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