Introduction to HTML and CSS
14 likes•5,211 views
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
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;}