SlideShare a Scribd company logo
1 of 18
HTML 101	 M+M Developer Week August 23, 2011 Media + Marketing
Table of Contents ,[object Object]
 Conventions / Coding Standards / Definitions
 Hands On
 Create an HTML document
 Style a document with CSS
 The Promise of HTML5,[object Object]
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
“…separating structure from presentation.” ,[object Object]
 CSS defines presentationhttp://www.webstandards.org/about/mission/
Conventions / Coding Standards ,[object Object]
 Tags are in lower-case
 Tags are properly nested
 Attributes in quotes<h1 class=“heading”> </h1> <ul id=“main-list”> 	<li> </li> 	<li> </li> </ul>
Definitions ,[object Object]
 id : Unique indentifier for an HTML element
 class : Non-unique attribute used to target CSS<h1 class=“heading”> </h1> <ul id=“main-list”> 	<li> </li> 	<li> </li> </ul>

More Related Content

What's hot

Krazykoder struts2 ui_tags
Krazykoder struts2 ui_tagsKrazykoder struts2 ui_tags
Krazykoder struts2 ui_tags
Krazy Koder
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elements
apnwebdev
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 

What's hot (19)

Html
HtmlHtml
Html
 
Html2 Intro
Html2 IntroHtml2 Intro
Html2 Intro
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Krazykoder struts2 ui_tags
Krazykoder struts2 ui_tagsKrazykoder struts2 ui_tags
Krazykoder struts2 ui_tags
 
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
Design Dream
Design DreamDesign Dream
Design Dream
 
The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
 
Html intro
Html introHtml intro
Html intro
 
HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elements
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
 
Class11
Class11Class11
Class11
 
Module 2
Module 2Module 2
Module 2
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 

Similar to HTML 101

Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
HTML & Textile Training
HTML & Textile TrainingHTML & Textile Training
HTML & Textile Training
ehealth
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Jerome Locson
 
Html Lesson01
Html Lesson01Html Lesson01
Html Lesson01
jhessabar
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 

Similar to HTML 101 (20)

HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Diva
DivaDiva
Diva
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
Html intro
Html introHtml intro
Html intro
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
HTML and CSS workshop
HTML and CSS workshopHTML and CSS workshop
HTML and CSS workshop
 
HTML & Textile Training
HTML & Textile TrainingHTML & Textile Training
HTML & Textile Training
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Html
HtmlHtml
Html
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
Html Lesson01
Html Lesson01Html Lesson01
Html Lesson01
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html tags
Html tagsHtml tags
Html tags
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

HTML 101

  • 1. HTML 101 M+M Developer Week August 23, 2011 Media + Marketing
  • 2.
  • 3. Conventions / Coding Standards / Definitions
  • 5. Create an HTML document
  • 6. Style a document with CSS
  • 7.
  • 9.
  • 10. CSS defines presentationhttp://www.webstandards.org/about/mission/
  • 11.
  • 12.
  • 13. Tags are in lower-case
  • 14. Tags are properly nested
  • 15. Attributes in quotes<h1 class=“heading”> </h1> <ul id=“main-list”> <li> </li> <li> </li> </ul>
  • 16.
  • 17. id : Unique indentifier for an HTML element
  • 18. class : Non-unique attribute used to target CSS<h1 class=“heading”> </h1> <ul id=“main-list”> <li> </li> <li> </li> </ul>
  • 19. Choose a Doctype The doctype declaration is required to begin an HTML document and tells the browser in what version of HTML the page is written. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>
  • 20. <head> Element <head> </head> is the container for the page’s definition elements. <head> <title>HTML 101</title> <meta name=“description” value=“My first HTML page.” /> <meta name=“keywords” value=“html, html5, developer week” /> </head>
  • 21. <body> Element <body> </body> is the container for the page’s content. <body> <h1>HTML 101</h1> <p>This is my first web page.</p> </body> html101a.html
  • 22. Common Elements Containers, Headers, Paragraph, Lists, Images <div> </div> : container <a> </a> : anchor/link <h1> </h1>, <h2> </h2>… <h6> </h6> : headings <p> </p> : paragraph <img /> : image <ul> </ul> : unordered list <ol> </ol> : ordered list <li> </li> : list item html101b.html
  • 23. Hands-On Open notepad.exe or your text editor of choice. Create a file “html101.html” and save it to your C:// drive, or location of your choice. Display http://www.activenetwork.com/Assets/ActiveNetwork.com/media/active-com.jpg and the text, “Hello, world.”, on a page. Link the image and text to Active.com.
  • 24. Style Cascading Style Sheets (CSS) define the page’s look and feel. <style type="text/css"> body {text-align:center; font-family:Verdana;} .bounding-box {width:990px; text-align:left; margin:0 auto;} h1, h2, h3 {font-family:Arial;} a.lede {text-align:center; display:block;} a.lede img {padding:2px; border:2px solid #ccc;} #example {float:left; width:48%;} #color {float:right; width:48%;} #colors {color:yellow;} ol li {padding:0 0 5px;} .red {color:red;} .blue {color:blue;} .yellow {background-color:#666;} .float {float:left; width:48%;} .right {float:right;} </style> html101c.html
  • 26. Hands-On Change the font family, size, and weight of your text. Center the globe image Change the page’s background color and text color.
  • 27.
  • 28. Offline caching, local storage & databaseshtml101-form.html