SlideShare uma empresa Scribd logo
1 de 23
(Fast) Introduction to HTML & CSS Dave Kelly ( @davkell  ) for @091Labs
What are HTML & CSS? HTML structures documents on the web Tells browser what content is (not what it means) CSS = presentation (how things look) JavaScript adds interaction / behaviours Peanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/ Why separate? http://www.ambientage.com/blog/091labs : 1
Standards....  define the mark-up you use  tell the browser what to do with it HTML 4.01 (Don’t use) xHTML1.0 Frameset  (nope) Transitional  (nope) Strict	* HTML5 (New. Not fully supported / implemented. It’s the future.) All those defined standards....do all browsers work the same?
Tools Firefox (wide support for standards) Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev. Web Developer Toolbar (Firefox add-on) Validators HTML: http://validator.w3.org CSS: http://jigsaw.w3.org Development environment Netbeans / Aptana for me.... Your choice (not WYSIWYG!!) (My) Development process Firefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?) Browsershots.org http://www.ambientage.com/blog/091labs : 2
HTML Made up of “tags”  (elements) <h1>I’m an important heading</h1> (Heading level 1)   <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag) Elements can contain plain text, other elements, or both No state / no logic (Mark-up content only, not programming) xHTML Strict elements... must be properly nested must be closed must be lower case attributes must have a value
HTML Tags Tags are usually paired (e.g..., <h1> and </h1>)  Some elements are “self-closing” e.g. <br /> <img … /> Some elements may include attributes, (additional information that is included inside the start tag). Every HTML document contains standard tags.  Each document consists of a head and body  The head contains the title (and more…), and  The body contains the actual text that is made up of paragraphs, lists, images, and other elements
Simple HTML Example http://www.ambientage.com/blog/091labs : 3
Some HTML tag examples ,[object Object]
 <h1></h1>  , <h2> </h2> ……  <h6> </h6>
Paragraph: <p>Some text </p>
Lists
 Ordered List <ol> <li>I’m a list item</li></ol>
 Unordered list <ul>  <li>I’m a list item</li> </ul>
Document Section <div></div>   (Important for page layouts!)
Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />
Links <a href=“http://www.google.com”>Google</a>
Table  <table><tr><td>table cell</td></tr>                          <tr><td>second row cell</td></tr>              </table> http://www.ambientage.com/blog/091labs : 4 & 5
Some HTML attribute examples ,[object Object]
Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
HTML Forms Forms are used to accept information from the Web page user Forms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons. To create a form, the <form></form> element is used. Forms have 2 basic attributes: action & method, e.g.,  <form name=“myForm” action=“processPage.php” method=“post”> action = “where’s the data going?” method = “how’s it getting there? (post vs get)”
HTML Forms
HTML Forms
CSS (Cascading Style Sheets) ,[object Object]

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Css
CssCss
Css
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Html and css
Html and cssHtml and css
Html and css
 
Html
HtmlHtml
Html
 
html-css
html-csshtml-css
html-css
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascript
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Html
HtmlHtml
Html
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 

Destaque (9)

How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Html5 i css3
Html5 i css3Html5 i css3
Html5 i css3
 
HTML with a little CSS
HTML with a little CSS HTML with a little CSS
HTML with a little CSS
 
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
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 

Semelhante a (Fast) Introduction to HTML & CSS

Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Marc Steel
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 

Semelhante a (Fast) Introduction to HTML & CSS (20)

Mdst 3559-02-01-html
Mdst 3559-02-01-htmlMdst 3559-02-01-html
Mdst 3559-02-01-html
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css 2010
Css 2010Css 2010
Css 2010
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Uta005 lecture2
Uta005 lecture2Uta005 lecture2
Uta005 lecture2
 
Session ii(html)
Session ii(html)Session ii(html)
Session ii(html)
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Before start
Before startBefore start
Before start
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Presentation html
Presentation   htmlPresentation   html
Presentation html
 
Empowerment Technologies Lecture 10 (Philippines SHS)
Empowerment Technologies Lecture 10 (Philippines SHS)Empowerment Technologies Lecture 10 (Philippines SHS)
Empowerment Technologies Lecture 10 (Philippines SHS)
 

Último

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Último (20)

WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 

(Fast) Introduction to HTML & CSS

  • 1. (Fast) Introduction to HTML & CSS Dave Kelly ( @davkell ) for @091Labs
  • 2. What are HTML & CSS? HTML structures documents on the web Tells browser what content is (not what it means) CSS = presentation (how things look) JavaScript adds interaction / behaviours Peanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/ Why separate? http://www.ambientage.com/blog/091labs : 1
  • 3. Standards.... define the mark-up you use tell the browser what to do with it HTML 4.01 (Don’t use) xHTML1.0 Frameset (nope) Transitional (nope) Strict * HTML5 (New. Not fully supported / implemented. It’s the future.) All those defined standards....do all browsers work the same?
  • 4. Tools Firefox (wide support for standards) Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev. Web Developer Toolbar (Firefox add-on) Validators HTML: http://validator.w3.org CSS: http://jigsaw.w3.org Development environment Netbeans / Aptana for me.... Your choice (not WYSIWYG!!) (My) Development process Firefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?) Browsershots.org http://www.ambientage.com/blog/091labs : 2
  • 5. HTML Made up of “tags”  (elements) <h1>I’m an important heading</h1> (Heading level 1)   <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag) Elements can contain plain text, other elements, or both No state / no logic (Mark-up content only, not programming) xHTML Strict elements... must be properly nested must be closed must be lower case attributes must have a value
  • 6. HTML Tags Tags are usually paired (e.g..., <h1> and </h1>) Some elements are “self-closing” e.g. <br /> <img … /> Some elements may include attributes, (additional information that is included inside the start tag). Every HTML document contains standard tags. Each document consists of a head and body The head contains the title (and more…), and The body contains the actual text that is made up of paragraphs, lists, images, and other elements
  • 7. Simple HTML Example http://www.ambientage.com/blog/091labs : 3
  • 8.
  • 9. <h1></h1> , <h2> </h2> …… <h6> </h6>
  • 11. Lists
  • 12. Ordered List <ol> <li>I’m a list item</li></ol>
  • 13. Unordered list <ul> <li>I’m a list item</li> </ul>
  • 14. Document Section <div></div> (Important for page layouts!)
  • 15. Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />
  • 17. Table <table><tr><td>table cell</td></tr> <tr><td>second row cell</td></tr> </table> http://www.ambientage.com/blog/091labs : 4 & 5
  • 18.
  • 19. Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
  • 20. HTML Forms Forms are used to accept information from the Web page user Forms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons. To create a form, the <form></form> element is used. Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php” method=“post”> action = “where’s the data going?” method = “how’s it getting there? (post vs get)”
  • 23.
  • 24. It allows document authors to specify the look of a web page (e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)
  • 25.
  • 26.
  • 27. The Selector ~ tells the rule what elements it should apply to
  • 28. The Rule ~ does the formatting of the element
  • 29. Made up of a property:value pair
  • 30. The formatting of rules: Selector { property1: value1; property2: value2; propertyN: valueN; } http://www.ambientage.com/blog/091labs : 6
  • 31.
  • 32. p { color: #000000; }
  • 33. Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.
  • 34. Possible to do this for multiple elements
  • 35.
  • 36. If the page you’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background
  • 37. Classes are defined using a dot (.) and a given name, e.g.
  • 39. To use the class in the document:
  • 40.
  • 41. If you need an element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)
  • 42. Identifiers are defined using a hash (#) and a given name, e.g.
  • 43. #siteTitle{ font-family: ‘Times New Roman’, serif}
  • 44. To use the class in the document:
  • 45.
  • 46. Internal Style Rules …only apply to the current page… still slightly nightmarish to maintain
  • 47.
  • 48. customise & alter the look of multiple web pages
  • 49. ensure continuity of design throughout the website
  • 50. To link an external style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.http://www.ambientage.com/blog/091labs : 7
  • 51.