Introduction to HTML and CSS
Denunciar
danpaquetteSeguir
28 de Oct de 2017•0 gostou•287 visualizações
1 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Introduction to HTML and CSS
28 de Oct de 2017•0 gostou•287 visualizações
1 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Educação
Introductory workshop for HTML and CSS for Toledo Hacks.
danpaquetteSeguir
Introduction to HTML and CSS
- Introduction to HTML & CSSDan Paquette
- www.danpaquette.net
- All programs start as empty text files* *Hint: a website is a program.
- So let’s create a text file. • Create a folder on your desktop. • Open Notepad. • Save it as index.html in your folder. • Open it in your browser. • Pat yourself on the back. • Having trouble? On a Mac? Go to: https://codepen.io/pen/
- Let’s Learn HTML HTML means Hypertext Markup Language
- Learning the Syntax
- Learning the Syntax
- Learning the Syntax
- <!DOCTYPE html> <html> <head> </head> <body> </body> </html> index.html Document structure and the Doctype.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> </body> </html> My Website The title tag.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>My Website</h1> <p>Welcome to my website!</p> </body> </html> My Website The title tag.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>My Website</h1> <h2>My Website</h2> <h3>My Website</h3> <h4>My Website</h4> <h5>My Website</h5> <h6>My Website</h6> </body> </html> My Website Heading tags.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <p> Welcome to my <em>totally</em> <strong>awesome</strong> website! </p> </body> </html> My Website Inline tags and semantics.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <ul> <li>List Item</li> <li>List Item</li> </ul> <ol> <li>List Item</li> <li>List Item</li> </ol> </body> </html> My Website The ordered list and unordered list tags.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <a href="https://www.google.com"> This is a link to Google! </a> </body> </html> My Website The anchor tag.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <div> <p> This is a paragraph inside of a div </p> </div> </body> </html> My Website The divider tag.
- <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <img src="https://i.imgur.com/INMtSvO.jpg" alt="Image description." /> </body> </html> <!-- I broke the <img /> tag up because it was too long. You should do it all on one line. Also, this is an HTML comment. It’s useful when you need to tell other people working on your site how your code works so they don’t get confused. --> My Website The image tag.
- List of All HTML Tags <a> <abbr> <address> <area> <article> <aside> <audio> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <hr> <html> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <rtc> <ruby> <samp> <script> <section> <select> <slot> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <ul> <var> <video> <wbr>
- HTML Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme
- Let’s Learn CSS CSS means Cascading Style Sheets
- Let’s create another text file. • New, blank Notepad file. • Save it as styles.css in the same folder as your index.html. • Pat yourself on the back. • Having trouble? On a Mac? Go to: https://codepen.io/pen/
- Learning the Syntax
- <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" href="styles.css" /> </head> <body> </body> </html> <!-- Again, I broke the tag up because it was too long. You should do it all on one line. If you’re on CodePen, you don’t have to do this step, but you should learn it. --> My Website Linking the stylesheet.
- <p> This is my paragraph! </p> <!-- I left out all the other stuff for brevity, but you still need it in your files! --> My Website HTML p { background: green; } CSS Let’s make it green!
- <p> This is my paragraph! </p> My Website HTML p { background: green; color: white; } CSS Let’s make it readable.
- <p> This is my paragraph! Let’s make it longer! </p> My Website HTML p { background: green; color: white; width: 150px; height: 150px; border-radius: 5px; } CSS Styles for everything under the sun.
- <p> This is my paragraph! Let’s make it longer! </p> <p class="special-paragraph"> This is my paragraph! Let’s make it longer! </p> My Website HTML p { background: green; color: white; width: 150px; height: 150px; border-radius: 5px; } .special-paragraph { background: red; } /* The period means we’re selecting a class name rather than a tag. */ CSS Class is in session.
- <div class="container"> <p> This is my paragraph! Let’s make it longer! </p> <p class="special-paragraph"> This is my paragraph! Let’s make it longer! </p> </div> My Website HTML p { background: green; color: white; width: 150px; height: 150px; border-radius: 5px; } .special-paragraph { background: red; } .container { display: flex; /* Advanced! */ } CSS Let’s make them side-by-side.
- <p> This is my paragraph! Let’s make it longer! </p> Now I’m down here! My Website HTML p { background: green; color: white; width: 150px; height: 150px; border-radius: 5px; margin-bottom: 100px; } CSS Styles for everything under the sun.
- <p> This is my paragraph! Let’s make it longer! </p> My Website HTML p { background: green; color: white; width: 150px; height: 150px; border-radius: 5px; padding: 10px; } /* We added padding. Why did our box get bigger? */ CSS Padding. Cool, but what happened?
- Learning the Box Model
- <p class="special-paragraph"> This is my paragraph! </p> My Website HTML p { width: 100px; height: 100px; padding: 10px; } .special-paragraph { background: green; } .special-paragraph { background: orange; } CSS Learning the cascade.
- <div class="special-div"> <p class="special-paragraph"> This is my paragraph! </p> </div> My Website HTML p { width: 100px; height: 100px; padding: 10px; } .special-div > .special-paragraph { background: green; } CSS The child selector.
- <div class="special-div"> <p class="special-paragraph"> This is my paragraph! </p> </div> My Website HTML p { width: 100px; height: 100px; padding: 10px; } .special-div > .special-paragraph { background: green; } .special-paragraph { background: orange; } CSS Specificity.
- <div class="special-div"> <p> This is my paragraph! </p> </div> My Website HTML .special-div { font-family: arial; background: green; color: white; font-weight: bold; } /* Certain properties, like font styles, colors, and weights, inherit down to child DOM nodes. */ CSS Inheritance.
- <div class="special-div"> <p> This is my paragraph! </p> </div> My Website HTML .special-div { padding: 10px; background: green; border: 3px solid red; } .special-div > p { border: inherit; } /* But you can make anything inherit if you try hard enough. */ CSS Inheritance, continued.
- <div class="special-div"> <p> This is my <strong>paragraph</strong>! </p> <ul> <li> <strong>List Item</strong> </li> </ul> </div> My Website HTML .special-div strong { color: red; } CSS The descendant selector.
- <p class="special-paragraph"> This is my paragraph! </p> <p class="other-special-paragraph"> This is my paragraph! </p> My Website HTML .special-paragraph, .other-special-paragraph { color: red; } CSS Multiple selectors, one rule.
- There’s a lot we didn’t cover. But you’ve got the basics, and the rest is just knowing where to look.
- Mozilla Developer Network References https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme https://developer.mozilla.org/en-US/docs/Web/CSS/Referenc
- Validators HTML: https://validator.w3.org/ CSS: https://jigsaw.w3.org/css-validator/
- Code Editors https://code.visualstudio.com/https://atom.io/
- Tutorials and Learning Aids https://css-tricks.com/ https://www.codecademy.com/ https://caniuse.com/ https://stackoverflow.com/
- The Best Learning Tool
- The Best Browser
- Developer Tools Chrome: View > Developer > Developer Tools Firefox: Tools > Developer > Toggle Tools Edge: F12 Safari: Develop > Show Web Inspector
- Thanks for listening!And feel free to ask questions!