0
HTML & CSSAn IntroductionBy Mario HernandezWeb Designer & Front-End DeveloperWeb: designsdrive.comTwitter: @DesignsDrive
AgendaHTML5● Document Object Model (DOM)● Doctype● Semantic Tags● Comments● Best practices
AgendaCSS3● What it is, how it works & how to use● IDs vs. Classes● Inline and Block Elements● Shorthand● FLOATS● Comments...
AgendaPutting it all together● Project Structure● Website Layouts● Tools to Improve Workflow
What is HTML?Wikipedia:is the main markup language for creating web pages and otherinformation that can be displayed in a ...
Setting the standardsWorld Wide Web Consortium (W3C)The Web Hypertext Application Technology Working Group(WHATWG) i
Document Object Model (DOM)The HTML DOM defines a standard way foraccessing and manipulating HTML documents.
DOCUMENTDOM
DOCUMENTROOT ELEMENTHTMLDOM
DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>DOM
DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>DOM
DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE>DOM
DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE> ELEMENT<p>ELEMENT<a>ELEMENT<H1>DOM
DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">H...
HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaning
HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaningExamples of non-semantic elements: <div>...
HTML5 Semantic ElementsNew HTML5 Semantic Elements Include:<header><nav><section><article><hgroup><canvas><video><audio><a...
HTML5 Semantic ElementsVisual Representation of new HTML5 Semantic Elements
Comments<!-- Single line HTML comment --><!-- This is a multiple line HTML commentwhen there is a need to be more detailed...
Best Practices● Comment● Semantic Tags● Separate Markup, Styling and Scripting
HANDS-ON
What is CSS?Wikipedia:Cascading Style Sheets (CSS) is a style sheet language used fordescribing the look and formatting of...
How it worksSyntax:A CSS rule has two parts, a selector and one or moredeclarations.
How to use● External Style Sheet● Internal Style Sheet● Inline Style
How to useExternal Stylesheet<head><link rel="stylesheet" type="text/css" href="styles.css"></head>You can use one or mult...
How to useInternal Stylesheet<head><style type="text/css">body {color: black; font-family: Helvetica, Verdana,san-serif;}p...
How to useInline Style<div style="background: black; color: white">...</div>
Cascading● Browser default● External style sheet● Internal style sheet (in the head section)● Inline style (inside an HTML...
IDs vs. ClassesIDs are prefixed with #Classes are prefixed with a period (.)Example: #myIDExample: .myClass
IDs vs. Classes<div id="myID">This is a container</div><div class="myClass">This is acontainer</div>IDs or Classes can use...
Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Exam...
Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Exam...
Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Exam...
Shorthandp {margin: 4px 4px 4px 4px;}p {margin:4px;}.box {border-top: 1px solid #000000;border-right: 1px solid #000000;bo...
Shorthandbody {background-color: #FFFFFF;background-image: bg.jpg;background-position: left top;background-repeat: repeat;...
FloatsHands-on demo
ResourcesTWITTER.comhttp://www.w3schools.com/http://paulaborowska.com/a-brief-introduction-to-html5-2/CSS-Tricks.comhttp:/...
QuestionsMario Hernandezhttp://designsdrive.comTwitter@DesignsDriveEmaildesignsdrive@gmail.com
Upcoming SlideShare
Loading in...5
×

Introduction to HTML and CSS

1,559

Published on

An introduction to HTML and CSS created for non-profit Teens Exploring Technology.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,559
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
67
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to HTML and CSS"

  1. 1. HTML & CSSAn IntroductionBy Mario HernandezWeb Designer & Front-End DeveloperWeb: designsdrive.comTwitter: @DesignsDrive
  2. 2. AgendaHTML5● Document Object Model (DOM)● Doctype● Semantic Tags● Comments● Best practices
  3. 3. AgendaCSS3● What it is, how it works & how to use● IDs vs. Classes● Inline and Block Elements● Shorthand● FLOATS● Comments● Intro to CSS3 Properties (if time permits)
  4. 4. AgendaPutting it all together● Project Structure● Website Layouts● Tools to Improve Workflow
  5. 5. What is HTML?Wikipedia:is the main markup language for creating web pages and otherinformation that can be displayed in a web browser.
  6. 6. Setting the standardsWorld Wide Web Consortium (W3C)The Web Hypertext Application Technology Working Group(WHATWG) i
  7. 7. Document Object Model (DOM)The HTML DOM defines a standard way foraccessing and manipulating HTML documents.
  8. 8. DOCUMENTDOM
  9. 9. DOCUMENTROOT ELEMENTHTMLDOM
  10. 10. DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>DOM
  11. 11. DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>DOM
  12. 12. DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE>DOM
  13. 13. DOCUMENTROOT ELEMENTHTMLELEMENT<HEAD>ELEMENT<BODY>ELEMENT<TITLE> ELEMENT<p>ELEMENT<a>ELEMENT<H1>DOM
  14. 14. DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  15. 15. DoctypeHTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5<!Doctype html>
  16. 16. HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaning
  17. 17. HTML5 Semantic ElementsSemantic = MeaningSemantic Elements = Elements with meaningExamples of non-semantic elements: <div> and <span> -Tells nothing about its content.Examples of semantic elements: <form>, <table>,and <img> - Clearly defines its content.
  18. 18. HTML5 Semantic ElementsNew HTML5 Semantic Elements Include:<header><nav><section><article><hgroup><canvas><video><audio><aside><figcaption><figure><footer>
  19. 19. HTML5 Semantic ElementsVisual Representation of new HTML5 Semantic Elements
  20. 20. Comments<!-- Single line HTML comment --><!-- This is a multiple line HTML commentwhen there is a need to be more detailed -->
  21. 21. Best Practices● Comment● Semantic Tags● Separate Markup, Styling and Scripting
  22. 22. HANDS-ON
  23. 23. What is CSS?Wikipedia:Cascading Style Sheets (CSS) is a style sheet language used fordescribing the look and formatting of a document written in a markuplanguage. Its most common application is to style web pages writtenin HTML and XHTML.
  24. 24. How it worksSyntax:A CSS rule has two parts, a selector and one or moredeclarations.
  25. 25. How to use● External Style Sheet● Internal Style Sheet● Inline Style
  26. 26. How to useExternal Stylesheet<head><link rel="stylesheet" type="text/css" href="styles.css"></head>You can use one or multiple stylesheets
  27. 27. How to useInternal Stylesheet<head><style type="text/css">body {color: black; font-family: Helvetica, Verdana,san-serif;}p {line-height: 1.5;font-size:14px;}</style></head>
  28. 28. How to useInline Style<div style="background: black; color: white">...</div>
  29. 29. Cascading● Browser default● External style sheet● Internal style sheet (in the head section)● Inline style (inside an HTML element)Rules are applied from top to bottom. Last rule willoverwrite previous rules.
  30. 30. IDs vs. ClassesIDs are prefixed with #Classes are prefixed with a period (.)Example: #myIDExample: .myClass
  31. 31. IDs vs. Classes<div id="myID">This is a container</div><div class="myClass">This is acontainer</div>IDs or Classes can use UPPER and lower case. They canalso use numeric values as well as non-alpha-numericvaluesExamples: MYID, myclass, my-id
  32. 32. Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>
  33. 33. Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>Block level elements are those that affect the structure andlayout of a page.Example: <div>, <p>, h1-h6
  34. 34. Inline & Block ElementsInline elements are those that on their own have no effect inthe structure or layout of a page.Example: <span>, <em>, <a>, <strong>Block level elements are those that affect the structure andlayout of a page.Example: <div>, <p>, h1-h6Block level elements generate a line break and can havedimensions.
  35. 35. Shorthandp {margin: 4px 4px 4px 4px;}p {margin:4px;}.box {border-top: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;border-left: 1px solid #000000;}.box {border: 1px solid #000;}
  36. 36. Shorthandbody {background-color: #FFFFFF;background-image: bg.jpg;background-position: left top;background-repeat: repeat;}body {background: #FFF url(bg.jpg) 0 0 no-repeat;}
  37. 37. FloatsHands-on demo
  38. 38. ResourcesTWITTER.comhttp://www.w3schools.com/http://paulaborowska.com/a-brief-introduction-to-html5-2/CSS-Tricks.comhttp://html5please.com/http://css3please.com/http://www.abookapart.com/products/html5-for-web-designershttp://www.abookapart.com/products/css3-for-web-designershttp://readwrite.com/2013/05/31/programming-core-skill-21st-century
  39. 39. QuestionsMario Hernandezhttp://designsdrive.comTwitter@DesignsDriveEmaildesignsdrive@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×