Introduction to HTML and CSS
•
14 j'aime•4,309 vues
An introduction to HTML and CSS created for non-profit Teens Exploring Technology.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Introduction to HTML and CSS
Similaire à Introduction to HTML and CSS (20)
Plus de Mario Hernandez
Plus de Mario Hernandez (15)
Dernier
Dernier (20)
Introduction to HTML and CSS
- 1. HTML & CSS An Introduction By Mario Hernandez Web Designer & Front-End Developer Web: designsdrive.com Twitter: @DesignsDrive
- 2. Agenda HTML5 ● Document Object Model (DOM) ● Doctype ● Semantic Tags ● Comments ● Best practices
- 3. Agenda CSS3 ● 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. Agenda Putting it all together ● Project Structure ● Website Layouts ● Tools to Improve Workflow
- 5. What is HTML? Wikipedia: is the main markup language for creating web pages and other information that can be displayed in a web browser.
- 6. Setting the standards World Wide Web Consortium (W3C) The Web Hypertext Application Technology Working Group (WHATWG) i
- 7. Document Object Model (DOM) The HTML DOM defines a standard way for accessing and manipulating HTML documents.
- 8. DOCUMENTDOM
- 14. Doctype HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 15. Doctype HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 <!Doctype html>
- 16. HTML5 Semantic Elements Semantic = Meaning Semantic Elements = Elements with meaning
- 17. HTML5 Semantic Elements Semantic = Meaning Semantic Elements = Elements with meaning Examples 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. HTML5 Semantic Elements New HTML5 Semantic Elements Include: <header> <nav> <section> <article> <hgroup> <canvas> <video> <audio> <aside> <figcaption> <figure> <footer>
- 19. HTML5 Semantic Elements Visual Representation of new HTML5 Semantic Elements
- 20. Comments <!-- Single line HTML comment --> <!-- This is a multiple line HTML comment when there is a need to be more detailed -->
- 21. Best Practices ● Comment ● Semantic Tags ● Separate Markup, Styling and Scripting
- 22. HANDS-ON
- 23. What is CSS? Wikipedia: Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML.
- 24. How it works Syntax: A CSS rule has two parts, a selector and one or more declarations.
- 25. How to use ● External Style Sheet ● Internal Style Sheet ● Inline Style
- 26. How to use External Stylesheet <head> <link rel="stylesheet" type="text/css" href="styles. css"> </head> You can use one or multiple stylesheets
- 27. How to use Internal 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. How to use Inline Style <div style="background: black; color: white"> ... </div>
- 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 will overwrite previous rules.
- 30. IDs vs. Classes IDs are prefixed with # Classes are prefixed with a period (.) Example: #myID Example: .myClass
- 31. IDs vs. Classes <div id="myID">This is a container</div> <div class="myClass">This is a container</div> IDs or Classes can use UPPER and lower case. They can also use numeric values as well as non-alpha-numeric values Examples: MYID, myclass, my-id
- 32. Inline & Block Elements Inline elements are those that on their own have no effect in the structure or layout of a page. Example: <span>, <em>, <a>, <strong>
- 33. Inline & Block Elements Inline elements are those that on their own have no effect in the structure or layout of a page. Example: <span>, <em>, <a>, <strong> Block level elements are those that affect the structure and layout of a page. Example: <div>, <p>, h1-h6
- 34. Inline & Block Elements Inline elements are those that on their own have no effect in the structure or layout of a page. Example: <span>, <em>, <a>, <strong> Block level elements are those that affect the structure and layout of a page. Example: <div>, <p>, h1-h6 Block level elements generate a line break and can have dimensions.
- 35. Shorthand p {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. Shorthand body { background-color: #FFFFFF; background-image: bg.jpg; background-position: left top; background-repeat: repeat; } body {background: #FFF url(bg.jpg) 0 0 no- repeat;}