Back to the Basics - 2 - HTML & CSS
1 like517 views
The document covers the basics of HTML and CSS, detailing the structure and syntax of HTML elements and the role of CSS in styling them. It discusses the transition from previous HTML standards to HTML5 and introduces the concept of the Document Object Model (DOM). Additionally, it highlights important CSS concepts, including selectors and definitions, and provides resources for further learning.
![CSS
• Cascading & Hierarchical priority
• Defined by series of selectors
tagname
.classname
#uniqueid
[attr=“value”]
:pseudo-class
::content-definition
(filter)](https://image.slidesharecdn.com/lunchandlearn-2-html-141124113948-conversion-gate02/85/Back-to-the-Basics-2-HTML-CSS-12-320.jpg)
Back to the Basics - 2 - HTML & CSS
- 1. BACK TO THE BASICS: HTML November 2014
- 2. What we are covering today? • Markup Language & DOM, part 1 • HTML • CSS • Rehash • All presentation layer Presentation Header Status –or– Method & URI
- 3. Markup Language • Annotation-based formatting of a document • Annotations exist in a syntactically distinguishable manner, separating them from the text. SGML/HTML/XML : <html>…</html> TEX : $-b pm sqrt{b^2 - 4ac} over 2a$ bye Scribe : @Heading(The Beginning) @Begin(Quotation) Let's start at the very beginning. @End(Quotation)
- 4. DOM, part 1 • Tree structure of Nodes • Hierarchical layout of elements – Boxes inside boxes WINDOW DOCUMENT FORM ANCHOR
- 5. HTML • Hypertext Markup Language • Current Standard: 5 • HTML 4.01 -> XHTML 1.1 ->HTML 5
- 6. HTML • Self Terminating Tags: <link href=“styles.css” rel=“stylesheet”/> • Full Tags: <script src=“functions.js” type=“text/javascript”></script>
- 7. HTML • Anatomy of a Tag • Delimiters (<>) • Element Type (div) • Attributes • Attirbute Key • Attribute Value • Content <div class=“named”>content</div>
- 8. HTML • Basic Document: <!doctype html> <html> <head> <title>Title</title> </head> <body> <h1>Title</h1> <p>This is a document</p> </body> </html>
- 9. HTML • A few basics <html> <head> <body> <script> <link> <meta> <style> <div> <span> <p> <a> <strong> <em> <u> <pre> <ul> <ol> <li> <img> <hr> <h1> <h2> <h3> <h4> <h5> <h6>
- 10. HTML • 5 : Elements to support the state of the web <article> <aside> <bdi> <details> <dialog> <figcaption> <figure> <footer> <header> <main> <mark> <menuitem> <meter> <nav> <progress> <rp> <rt> <ruby> <section> <summary> <time> <wbr> <datalist> <keygen> <output> <canvas> <svg> <audio> <embed> <source> <track> <video>
- 11. CSS - Cascading Style Sheets • Redefining how the markup language will be displayed • Breaking the “Boxes inside boxes” idea & embracing layers
- 12. CSS • Cascading & Hierarchical priority • Defined by series of selectors tagname .classname #uniqueid [attr=“value”] :pseudo-class ::content-definition (filter)
- 13. CSS • Anatomy of a Definition .selector, #another-selector, tag.third-selector#butonlyifhasid { Style-attribute: value; } • Selector • Style Definition • Attribute seperated from value by colon • Ended with semi colon • Attributes with predefined values or structured definitions
- 14. CSS • Related to HTML by the selector <div class=“classname” id=“element217291”>Content</tagname> <span class=“classname”>Content</othertag> <p id=“element20140102”>Content</p> p, div { color: orange; } #element217291 { color: white; } .classname { background-color: black; } div.classname { text-decoration: underline; }
- 15. CSS • CSS 3 is current but not fully supported • Reset CSS – Making Browsers and Elements Behave (a little bit more…) http://www.cssreset.com/ • Browsers are not created equal border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000;
- 16. Rehash • Structure • Definition • Presentation and Interpretation of Content • Becomes more important with Javascript
- 17. Always the Final Thoughts • Stay Informed • Experiment • Don’t be afraid
- 19. Next Session HTML Forms
- 20. Additional Reference • Dive into HTML 5: http://diveintohtml5.info/ • HTML 5 Test: http://html5test.com/ • Markup Validation: http://validator.w3.org/ • CSS Zen Garden: http://www.csszengarden.com/ • Quirks Mode: http://www.quirksmode.org/css/ • CSS Lint: http://csslint.net/
- 21. Credits • Icons: http://iconmonstr.com/ • Wikipedia: • DOM: http://en.wikipedia.org/wiki/Document_Object_Mod el • Markup language: http://en.wikipedia.org/wiki/Markup_language