A beginner's guide to HTML & CSS

HTML & CSS A beginner’s guide to

@bryanwilliams Senior Designer ESPN

Part 1: • Project files and folders • HTML Tags
and the semantic web • Javascript • CSS

Project Files and Folders

“A place for everything and everything in its place”

- projectFolder - images - javascripts index.html style.css

HTML Tags and the semantic web

Resources • http://www.w3schools.com/ • http://html5doctor.com/ • http://stackoverflow.com/ HTML - HyperText
Markup Language W3C - World Wide Web Consortium

Anatomy of an HTML Tag

<p>This is a paragraph.< /p >

Opening Tag <p>This is a paragraph.< /p >

Content <p>This is a paragraph.< /p >

Closing Tag <p>This is a paragraph.< /p >

attribute <p class=”awesome”>This is a paragraph.< /p >

attribute value <p class=”awesome”>This is a paragraph.< /p >

<h1>...<h6> <p> <a> <strong> <em> <span> <img> <video> <audio> Common
HTML Tags <html> <head> <body> <div> <section> <header> <footer> <nav> <article> <aside> <ul> <ol> <li> <form> <input> <button> <table> <th> <tr> <td>

Block Their most significant characteristic is that they typically are
formatted with a line break before and after the element (thereby creating a stand- alone block of content). That is, they take up the width of their containers. Example: div, h1, p • https://developer.mozilla.org/en- US/docs/HTML/Block-level_elements Inline Inline elements can appear within block-level or other inline elements. They take up the width of their contents. Example: span, strong, img • https://developer.mozilla.org/en- US/docs/HTML/Inline_elements

Nesting <article> <h1>This is a title</h1> <p>Paragraph <strong>text</strong> . .
. </p> </article>

Doctype, head & body <!DOCTYPE html> <html> <head> <title>My new
website</title> </head> <body> <article> <h1>This is a title</h1> <p>Paragraph <strong>text</strong> . . . </p> </article> </body> </html>

Commenting code <p>This is a paragraph.< /p >  <p>This is a paragraph.< /p >

The Semantic Web "The Semantic Web is an extension of
the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation." Scientific America, "The Semantic Web" Berners-Lee et al. May 2001,

Javascript Adding function to form

JS Libraries & scripts <script src=”javascripts/jquery-1.9.1.min.js” type=”text/javascript”></script> <script src='javascripts/main.js' type='text/javascript'></script>
Inline scripts <script>document.getElementById("myDIV").innerHTML="How are you?";</script> Plugins (Analytic Codes) <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', yourwebsite.com'); ga('send', 'pageview'); </script>

CSS Cascading Style Sheets

Link to Stylesheet <!DOCTYPE html> <html> <head> <title>My new website</title>
<link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <article> <h1>This is a title</h1> <p>Paragraph <strong>text</strong> . . . </p> </article> </body> </html>

cssreset.com Protip: reset browser default styles.

<p id=”par34” class=”awesome”>This is a paragraph.< /p >

<p id=”par34” class=”awesome”>This is a paragraph.< /p > id’s are
unique, 1 per page id = #

<p id=”par34” class=”awesome”>This is a paragraph.< /p > class are
general, multiple per page class = .

Anatomy of a Style Rule

.awesome{ margin: 25px; }

Selector .awesome{ margin: 25px; }

.awesome{ property margin: 25px; }

.awesome{ margin: 25px; value }

The Cascade First -> Last Generic -> Specific

<p id=”par34” class=”awesome”>This is a paragraph.< /p > p{ background-color:
black; } .awesome{ margin: 25px; } #par34{ color: white; } p#par34.awesome{ border: 5px solid #ff0000; color: #f00; }

Take a <BR>

Part 2 • CSS Box Model • CSS Layout •
Debugging and Tools

Content Box (browser default) .box{ background-color: red; border: 10px solid
blue; box-sizing: content-box; height: 50px; margin: 30px; padding: 15px; width: 50px; } 50 15 10 30 160px 30 10 15

Border Box .box{ background-color: red; border: 10px solid blue; box-sizing:
border-box; height: 50px; margin: 30px; padding: 15px; width: 50px; } 0 15 10 30 110px 30 10 15

CSS Layout

Float With CSS float, an element can be pushed to
the left or right, allowing other elements to wrap around it. Just to make sure to Clear it. .box{ height: 100px; float: left; margin: 0 10px 10px 0; width: 100px; } .nextSection{ clear: left; }

CSS Positioning Static, relative, absolute, fixed

.box{ background-color: orange; top: 100px; left: 20px; height: 50px; margin-bottom:
20px; } Static A static positioned element is always positioned according to the normal flow of the page.

Relative A relative positioned element is positioned relative to its
normal position. .box{ background-color: orange; top: 100px; left: 20px; height: 50px; margin-bottom: 20px; }

Absolute An absolute position element is positioned relative to the
first parent element that has a position other than static. .box{ background-color: orange; top: 100px; left: 20px; height: 50px; margin-bottom: 20px; width: 100%; }

Fixed An element with fixed position is positioned relative to
the browser window. It will not move even if the window is scrolled. .box{ background-color: orange; top: 100px; left: 20px; height: 50px; margin-bottom: 20px; width: 100%; }

padding right top visibility width z-index letter-spacing line-height text-align text-decoration
Common CSS Properties background border bottom clear display float height left overflow padding text-shadow font border-collapse border-spacing list-style animation transform transition box-sizing cursor

Value syntax .box{ background: transparent url(“../images/image.jpg”) no-repeat 10px 10px; box-shadow:
7px 7px 5px 0px rgba(50, 50, 50, 0.5); color: #000; height: 50px; margin: 10px 20px 5px 15px; padding: 10px; width: 100%; z-index: 5; }

• http://css-tricks.com/ • http://www.smashingmagazine.com/ • https://developer.mozilla.org/en-US/docs/Web • http://webdesign.tutsplus.com/categories/htmlcss • http://www.w3schools.com/cssref/
• http://stackoverflow.com/ Resources

Debugging & Tools Guessing and checking gets old. Fast

• Web inspectors • Firebug • Colorzilla • MeasureIt •
Virtual Machines • Emulators/Simulators

You WILL break • Back up code • Track changes
(github) • Ask questions • Testing environments stuff

awesome! Go do something

A beginner's guide to HTML & CSS

A beginner's guide to HTML & CSS

More Decks by CollinsAx

Other Decks in Programming

Featured

Transcript