SlideShare a Scribd company logo
1 of 21
BACK TO THE BASICS: 
HTML 
November 2014
What we are covering today? 
• Markup Language & DOM, part 1 
• HTML 
• CSS 
• Rehash 
• All presentation layer 
Presentation 
Header 
Status –or– 
Method & URI
Markup Language 
• Annotation-based formatting of a document 
• Annotations exist in a syntactically distinguishable 
manner, separating them from the text. 
SGML/HTML/XML : <html>…</html> 
TEX : $-b pm sqrt{b^2 - 4ac} over 2a$ 
bye 
Scribe : @Heading(The Beginning) 
@Begin(Quotation) 
Let's start at the very beginning. 
@End(Quotation)
DOM, part 1 
• Tree structure of Nodes 
• Hierarchical layout of elements – Boxes inside boxes 
WINDOW 
DOCUMENT 
FORM ANCHOR
HTML 
• Hypertext Markup Language 
• Current Standard: 5 
• HTML 4.01 -> XHTML 1.1 ->HTML 5
HTML 
• Self Terminating Tags: 
<link href=“styles.css” rel=“stylesheet”/> 
• Full Tags: 
<script src=“functions.js” type=“text/javascript”></script>
HTML 
• Anatomy of a Tag 
• Delimiters (<>) 
• Element Type (div) 
• Attributes 
• Attirbute Key 
• Attribute Value 
• Content 
<div class=“named”>content</div>
HTML 
• Basic Document: 
<!doctype html> 
<html> 
<head> 
<title>Title</title> 
</head> 
<body> 
<h1>Title</h1> 
<p>This is a document</p> 
</body> 
</html>
HTML 
• A few basics 
<html> 
<head> 
<body> 
<script> 
<link> 
<meta> 
<style> 
<div> 
<span> 
<p> 
<a> 
<strong> 
<em> 
<u> 
<pre> 
<ul> 
<ol> 
<li> 
<img> 
<hr> 
<h1> 
<h2> 
<h3> 
<h4> 
<h5> 
<h6>
HTML 
• 5 : Elements to support the state of the web 
<article> 
<aside> 
<bdi> 
<details> 
<dialog> 
<figcaption> 
<figure> 
<footer> 
<header> 
<main> 
<mark> 
<menuitem> 
<meter> 
<nav> 
<progress> 
<rp> 
<rt> 
<ruby> 
<section> 
<summary> 
<time> 
<wbr> 
<datalist> 
<keygen> 
<output> 
<canvas> 
<svg> 
<audio> 
<embed> 
<source> 
<track> 
<video>
CSS - Cascading Style Sheets 
• Redefining how the markup language will be displayed 
• Breaking the “Boxes inside boxes” idea & embracing 
layers
CSS 
• Cascading & Hierarchical priority 
• Defined by series of selectors 
tagname 
.classname 
#uniqueid 
[attr=“value”] 
:pseudo-class 
::content-definition 
(filter)
CSS 
• Anatomy of a Definition 
.selector, #another-selector, tag.third-selector#butonlyifhasid { 
Style-attribute: value; 
} 
• Selector 
• Style Definition 
• Attribute seperated from value by colon 
• Ended with semi colon 
• Attributes with predefined values or structured 
definitions
CSS 
• Related to HTML by the selector 
<div class=“classname” id=“element217291”>Content</tagname> 
<span class=“classname”>Content</othertag> 
<p id=“element20140102”>Content</p> 
p, div { color: orange; } 
#element217291 { color: white; } 
.classname { background-color: black; } 
div.classname { text-decoration: underline; }
CSS 
• CSS 3 is current but not fully supported 
• Reset CSS – Making Browsers and Elements Behave 
(a little bit more…) 
http://www.cssreset.com/ 
• Browsers are not created equal 
border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
border: 0px solid #000000;
Rehash 
• Structure 
• Definition 
• Presentation and Interpretation of Content 
• Becomes more important with Javascript
Always the Final Thoughts 
• Stay Informed 
• Experiment 
• Don’t be afraid
Questions? 
tsxcom+slidehare@gmail.com
Next Session 
HTML Forms
Additional Reference 
• Dive into HTML 5: http://diveintohtml5.info/ 
• HTML 5 Test: http://html5test.com/ 
• Markup Validation: http://validator.w3.org/ 
• CSS Zen Garden: http://www.csszengarden.com/ 
• Quirks Mode: http://www.quirksmode.org/css/ 
• CSS Lint: http://csslint.net/
Credits 
• Icons: http://iconmonstr.com/ 
• Wikipedia: 
• DOM: 
http://en.wikipedia.org/wiki/Document_Object_Mod 
el 
• Markup language: 
http://en.wikipedia.org/wiki/Markup_language

More Related Content

What's hot (20)

Advanced dreamweaver
Advanced dreamweaverAdvanced dreamweaver
Advanced dreamweaver
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
 
Basic css
Basic cssBasic css
Basic css
 
Lecture2
Lecture2Lecture2
Lecture2
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS
CSSCSS
CSS
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 

Viewers also liked

Back to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentBack to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentClint LaForest
 
Javascript and Jquery: The connection between
Javascript and Jquery: The connection betweenJavascript and Jquery: The connection between
Javascript and Jquery: The connection betweenClint LaForest
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptMarlon Jamera
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional StatementsMarlon Jamera
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTMLMarlon Jamera
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTMLMarlon Jamera
 

Viewers also liked (6)

Back to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentBack to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web Development
 
Javascript and Jquery: The connection between
Javascript and Jquery: The connection betweenJavascript and Jquery: The connection between
Javascript and Jquery: The connection between
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional Statements
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTML
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 

Similar to Back to the Basics - 2 - HTML & CSS

Html and css easy steps
Html and css easy stepsHtml and css easy steps
Html and css easy stepsBiswa Ranjan
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2Sónia
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourCss week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourOsama Ghandour Geris
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptxMattMarino13
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011Vlad Savitsky
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourCss week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
Getting Started With CSS
Getting Started With CSSGetting Started With CSS
Getting Started With CSSTrisha Crowley
 
2 introduction css
2 introduction css2 introduction css
2 introduction cssJalpesh Vasa
 
howcssworks-100207024009-phpapp01.pptx
howcssworks-100207024009-phpapp01.pptxhowcssworks-100207024009-phpapp01.pptx
howcssworks-100207024009-phpapp01.pptxRavneetSingh343801
 
Le wagon workshop - 2h landing page - Andre Ferrer
Le wagon   workshop - 2h landing page - Andre FerrerLe wagon   workshop - 2h landing page - Andre Ferrer
Le wagon workshop - 2h landing page - Andre FerrerAndré Ferrer
 

Similar to Back to the Basics - 2 - HTML & CSS (20)

Html and css easy steps
Html and css easy stepsHtml and css easy steps
Html and css easy steps
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
 
Web
WebWeb
Web
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
 
Html Css
Html CssHtml Css
Html Css
 
Css
CssCss
Css
 
Html css
Html cssHtml css
Html css
 
03html Css
03html Css03html Css
03html Css
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourCss week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandour
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011
Danilenko Alexander. Drupal 7 theming on Omega. DrupalCamp Kyiv 2011
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourCss week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
 
Getting Started With CSS
Getting Started With CSSGetting Started With CSS
Getting Started With CSS
 
Css
CssCss
Css
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
 
howcssworks-100207024009-phpapp01.pptx
howcssworks-100207024009-phpapp01.pptxhowcssworks-100207024009-phpapp01.pptx
howcssworks-100207024009-phpapp01.pptx
 
Le wagon workshop - 2h landing page - Andre Ferrer
Le wagon   workshop - 2h landing page - Andre FerrerLe wagon   workshop - 2h landing page - Andre Ferrer
Le wagon workshop - 2h landing page - Andre Ferrer
 
ppt.ppt
ppt.pptppt.ppt
ppt.ppt
 

Recently uploaded

Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 

Recently uploaded (20)

Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 

Back to the Basics - 2 - HTML & CSS

  • 1. BACK TO THE BASICS: HTML November 2014
  • 2. What we are covering today? • Markup Language & DOM, part 1 • HTML • CSS • Rehash • All presentation layer Presentation Header Status –or– Method & URI
  • 3. Markup Language • Annotation-based formatting of a document • Annotations exist in a syntactically distinguishable manner, separating them from the text. SGML/HTML/XML : <html>…</html> TEX : $-b pm sqrt{b^2 - 4ac} over 2a$ bye Scribe : @Heading(The Beginning) @Begin(Quotation) Let's start at the very beginning. @End(Quotation)
  • 4. DOM, part 1 • Tree structure of Nodes • Hierarchical layout of elements – Boxes inside boxes WINDOW DOCUMENT FORM ANCHOR
  • 5. HTML • Hypertext Markup Language • Current Standard: 5 • HTML 4.01 -> XHTML 1.1 ->HTML 5
  • 6. HTML • Self Terminating Tags: <link href=“styles.css” rel=“stylesheet”/> • Full Tags: <script src=“functions.js” type=“text/javascript”></script>
  • 7. HTML • Anatomy of a Tag • Delimiters (<>) • Element Type (div) • Attributes • Attirbute Key • Attribute Value • Content <div class=“named”>content</div>
  • 8. HTML • Basic Document: <!doctype html> <html> <head> <title>Title</title> </head> <body> <h1>Title</h1> <p>This is a document</p> </body> </html>
  • 9. HTML • A few basics <html> <head> <body> <script> <link> <meta> <style> <div> <span> <p> <a> <strong> <em> <u> <pre> <ul> <ol> <li> <img> <hr> <h1> <h2> <h3> <h4> <h5> <h6>
  • 10. HTML • 5 : Elements to support the state of the web <article> <aside> <bdi> <details> <dialog> <figcaption> <figure> <footer> <header> <main> <mark> <menuitem> <meter> <nav> <progress> <rp> <rt> <ruby> <section> <summary> <time> <wbr> <datalist> <keygen> <output> <canvas> <svg> <audio> <embed> <source> <track> <video>
  • 11. CSS - Cascading Style Sheets • Redefining how the markup language will be displayed • Breaking the “Boxes inside boxes” idea & embracing layers
  • 12. CSS • Cascading & Hierarchical priority • Defined by series of selectors tagname .classname #uniqueid [attr=“value”] :pseudo-class ::content-definition (filter)
  • 13. CSS • Anatomy of a Definition .selector, #another-selector, tag.third-selector#butonlyifhasid { Style-attribute: value; } • Selector • Style Definition • Attribute seperated from value by colon • Ended with semi colon • Attributes with predefined values or structured definitions
  • 14. CSS • Related to HTML by the selector <div class=“classname” id=“element217291”>Content</tagname> <span class=“classname”>Content</othertag> <p id=“element20140102”>Content</p> p, div { color: orange; } #element217291 { color: white; } .classname { background-color: black; } div.classname { text-decoration: underline; }
  • 15. CSS • CSS 3 is current but not fully supported • Reset CSS – Making Browsers and Elements Behave (a little bit more…) http://www.cssreset.com/ • Browsers are not created equal border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000;
  • 16. Rehash • Structure • Definition • Presentation and Interpretation of Content • Becomes more important with Javascript
  • 17. Always the Final Thoughts • Stay Informed • Experiment • Don’t be afraid
  • 20. Additional Reference • Dive into HTML 5: http://diveintohtml5.info/ • HTML 5 Test: http://html5test.com/ • Markup Validation: http://validator.w3.org/ • CSS Zen Garden: http://www.csszengarden.com/ • Quirks Mode: http://www.quirksmode.org/css/ • CSS Lint: http://csslint.net/
  • 21. Credits • Icons: http://iconmonstr.com/ • Wikipedia: • DOM: http://en.wikipedia.org/wiki/Document_Object_Mod el • Markup language: http://en.wikipedia.org/wiki/Markup_language