HTML & CSS for Fun & Profit

HTML & CSS Johnny Rodgers [email protected] January 24th, 2013 Trade
School Vancouver for Fun & Profit

Me @johnnyrodgersis http://johnnyrodgers.is UI Developer at Tiny Speck http://tinyspeck.com Co-founder
of Give http://iamgiving.to

You What’s your name? Why are you interested in HTML
& CSS? What would you like to learn today?

What’s this class about? The web matters Your ideas are
important Learning how to publish your ideas on the web is the best way to share them with the world Making things is good for you Don’t be afraid of technology

HTML Defines the structure of a web page HyperText Markup
Language Invented by Tim Berners-Lee in 1990 Every page on the web is written in HTML

CSS Defines the visual style and layout of a web
page Cascading Style Sheets Invented in 1994-95 CSS is the dressing for HTML’s salad

Let’s build stuﬀ! We are going to build a simple
web page together using HTML & CSS You will learn the basics of both languages You will find out what to learn next

Essential Tools Web Browser Chrome, Firefox, Safari, or Internet Explorer
Text Editor Mac: TextEdit (in Plain Text mode: Format > Make Plain Text) Windows: Notepad

Getting Started We are going to make a bio page
for ourselves Download this Template https://raw.github.com/johnnyrodgers/HTML-CSS-Intro/master/index.html Save it to your desktop in a folder called website File > Save as... > index.html

Getting Started (part 2) Double-click the file you just saved
It should open in a new tab in your web browser Open it again in your Text Editor File > Open

YOU JUST MADE A WEBSITE

HTML: The Basics Every HTML document has this structure <!DOCTYPE
html> <html> <head></head> <body></body> </html>

HTML: The Basics The <head> is where information about the
document goes: title, keywords, linked assets, etc. The <body> is where the content of the page goes: text, images, links, lists, and so on

HTML: Tags HTML is made up of tags that look
like this <tag></tag> The contents of a web page go inside tags <title>Title of Page</title>

Add a title to your page Since this is a
bio page, add your name as the title <title>Your Name Here</title> Save your file (Mac: cmd-S, Win: ctrl-S) Refresh your browser (Mac: cmd-R, Win: ctrl-R)

HTML: Rules Tags must be opened and closed <p>A paragraph
of text.</p> Some tags can be self-closed <p/> an empty paragraph <br/> a line break Bad things happen when you don’t close your tags

HTML: More Rules Tags must be nested properly <head> <title>Your
Name Here</title> </head> Unexpected things happen when you don’t nest your tags

Add a heading Now the browser knows the title of
your page Let’s put it on the page itself too <body> <h1>Your Name Here</h1> </body> Save your file and refresh your browser

HTML: Headings Define content headings in the document by priority
Outline the structure of your document <h1> Most important <h2><h3><h4><h5> <h6> Least important

Tell us about yourself <body> <h1>Your Name Here</h1> <h2>About Me</h2>
<p>I'm pretty much just an average, everyday, ordinary, standard, normal, mainstream, blend-in, middle of the road, common, regular kind of guy.</p> </body> Save your file and refresh your browser

HTML: More Rules HTML is “white space insensitive” <h1>This Heading</h1>
will look the same on the page as <h1>This Heading</h1>

Add a link Links allow us to join web pages
together <p> My favourite website is <a href="http://www.google.com">Google</a>. </p>

HTML: Tag Attributes Tags can have attributes <a href="http://www.google.com">link text</a>
This is an anchor tag <a> with an href attribute href stands for HyperText Reference It defines the URL that this anchor points to

Add an image Go find an image of yourself online
Right-click the image and select Open Image in New Tab Copy the address of the image from the address bar

Add an image Add a new paragraph with your image:
<p> I look like this:<br /> <img src="http://domain.com/your-image.png" alt="Your Name Here" /> </p>

HTML: Image Attributes Images have two (or more) attributes <img
src="/path/to/image.png" alt="Your Name Here" /> This is an image tag <img> with src and alt attributes src stands for source: where the image file is alt defines the text to display in place of the image

A bit more content Add a divider before the next
section <hr /> This is a Horizontal Rule And another heading <h2>My Hobbies</h2>

HTML: Lists There are two types of HTML lists <ul></ul>
Unordered List <ol></ol> Ordered List Both contain List Items <li></li>

Add a list of hobbies <ul> <li>Drinking espresso</li> <li>Listening to
fantastic music</li> <li>Playing ultimate frisbee</li> </ul>

HTML: Comments You can add comments to your HTML These
won’t be shown to the viewer on the page

Let’s wrap up <hr /> <h2>My Contact Information</h2> <p> <a
href="http://www.your-website.com">Website</a><br /> <a href="https://twitter.com/twitter-handle">Twitter</a><br /> <a href="mailto:[email protected]">Email Me</a><br /> </p>

YOU JUST MADE A PRETTY GOOD WEBSITE

CSS: The Basics CSS lets you define the look and
layout of a page Colours Typography Layout of sections Alignment Eﬀects

How to include CSS Can be included in your HTML
from a separate file <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

How to include CSS Or it can be added directly
to the <head> <head> <style type=”text/css”> /* Your CSS here */ </style> </head>

Change the background Let’s set the background colour of our
page body { background-color: blue; }

CSS: Rules Every CSS declaration has these elements selector {
attribute: value; } Multiple attributes can be assigned to one selector

CSS: More Rules Selectors refer to elements in your HTML
document body { } refers to <body> p { } refers to all <p> tags Attributes refer to the styles you would like to apply body { background-color: blue; }

CSS: Comments CSS comments look like this /* set the
background color for the page */ body { /* comments can go inside or outside selectors */ background-color: blue; }

Let’s style the text a bit body { background-color: beige;
font-family: sans-serif; font-size: 20px; color: #444; text-shadow: 0 1px white; /* x, y, color */ }

CSS: Colo(u)rs American spelling: color not colour Can be specified
in three ways by name red green darkorchid http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ by hex value #FF0000 #008000 #9932CC by rgb() rgb(255,0,0) rgb(0,255,0) rgb(170,0,255)

Layout Let’s layout the content a bit body { width:
80%; /* Only fill up 80% of the page */ margin: 0 auto; /* Center the content */ }

Style the headings Let’s make the headings pop h1, h2
{ font-family: "Georgia"; font-weight: 300; color: seagreen; }

Link style And update the links to look nicer a
{ color: dodgerblue; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; }

CSS: Pseudo-selectors Pseudo-selectors identify the state of an element /*
this style will only be applied when the user hovers on the <a> tag */ a:hover { text-decoration: underline; }

Style the dividers hr { border: none; border-top: 1px solid
teal; border-bottom: 1px solid white; }

Make the image fancy img { float: le!; margin: 0
32px 16px 0; border-radius: 6px; border: 20px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.7); }

HTML & CSS! Together at last! You can add attributes
to your HTML tags to refine your selectors <p id=”bio”></p> <li class=”important”></li>

CSS: ID’s and Classes IDs are unique Classes are reusable
p#bio { font-size: 26px; } li.important { font-weight: bold; }

YOU ARE A WEBMASTER

Kind of This web page isn’t on the...web To publish
it, you’ll need hosting To run your own website, you’ll need a domain

What’s next?

Working with computers is hard because they do what you
say and not what you mean.

Tips Try not to get frustrated Think through the problem
logically Ask for help: you’re not the only one

Resources Google will point you to http://www.w3schools.com, but it’s not
the best. Treehouse Video Tutorials (free + paid) http://teamtreehouse.com/library/websites/html http://teamtreehouse.com/library/websites/css-foundations-second-edition

Go make stuﬀ!

Thank you Questions and feedback welcome. Slides https://speakerdeck.com/johnnyrodgers/html-and-css-for-fun-and-profit Code https://github.com/johnnyrodgers/HTML-CSS-Intro

HTML & CSS for Fun & Profit

HTML & CSS for Fun & Profit

Other Decks in Programming

Featured

Transcript