1. Intro to HTML & CSS
David Fisher
July 2012
Sunday, July 8, 12
2. Requirements
• Text Editor - Notepad, Textmate, vi, emacs, Komodo
Edit
• Web Browser - Chrome, Firefox, Safari, Opera, Internet
Explorer
Sunday, July 8, 12
3. What will you learn?
• Intro to HTML
• Intro to CSS
• Brief to Github and Site Hosting
• Definitions of Javascript, PHP and Wordpress
Sunday, July 8, 12
4. What you will NOT learn
• Every HTML tag
• Every CSS rule
• In depth CSS positioning
• Browser-specific hacks
• Anything with a database
• Javascript
• More studying & practice will be needed
Sunday, July 8, 12
5. What is HTML?
• Hyper Text Markup Language
• Provides structure and meaning to the data in a
document
• Links documents together
• Rendered by a web browser for use by humans
Sunday, July 8, 12
6. About HTML
• Set of elements consisting of tags enclosed in angle
brackets like <html>
• Tags themselves are not visible when rendered in a
browser
• Tags are most commonly in pairs around data, like
<b>This text is bold</b>
• Some tags, called empty elements are unpaired, such as
<img>, which is used for displaying images.
Sunday, July 8, 12
7. What is CSS?
• Cascading Style Sheets
• Manipulate the appearance (size, position, color, etc) of
elements in the HTML
• Has a different syntax than HTML
Sunday, July 8, 12
8. HTML & CSS
• HTML connects documents, and gives the data greater
meaning
• CSS changes how the document looks to the end user
Sunday, July 8, 12
10. First Website Code, 1991
For historical reference only
Don’t write code like this
Sunday, July 8, 12
11. Let’s get started!
• Create a file called hello-world.html
• Open this empty file in your text editor
• Open this empty file in your web browser
Sunday, July 8, 12
12. Hello, World!
Text in Editor Web Browser
HTML in editor is rendered in browser.
Refresh browser to see changes.
Sunday, July 8, 12
13. Deconstructing Hello, World!
• Document type needed for
proper rendering
• Wrap all code in one set of
<html> tags
• <head> contains a <title>,
shown at top of browser
• <body> output is rendered
in your browser
Sunday, July 8, 12
14. HTML document structure
• Doctype declaration at the top of each page
• One set of <html> tags surrounding everything
• One <head> at the top, which contains a <title>
Other things will go in <head> as well later
• One <body>, which contains everything you want in
the document body
Sunday, July 8, 12
15. Semantic > Presentation
• HTML is there to describe the data in the document,
not the visual style.
• What does your data mean? Is the number 10 an age,
inventory count, price, navigation element, etc?
• Not only sighted humans read your document; Search
engines, screen readers, other programs & more!
• More info: http://en.wikipedia.org/wiki/Semantic_HTML
Sunday, July 8, 12
16. Basic Text Formatting
Remember, think about meaning over presentation!
Sunday, July 8, 12
17. Headings
Headings provide names to sections of your page.
They are H1 through H6, decreasing in importance
Sunday, July 8, 12
18. i, b, em, strong
Historically, some of these i, b have been used for
presentation. Do not do this. It is incorrect, and very
2003...
Instead now they should have semantic meaning in
the document instead of presentation.
Any of the tags described can be wrapped around
text in the body such as: <i>Babel Fish</i>
Sunday, July 8, 12
19. <i> - Alternate Voice
Used on transliterated foreign words, idiomatic phrases,
alternate mood, technical terms, and typographically italicized
text.
Prior to Episode I, <i>midi-chlorians</i> were never discussed.
If for foreign words, use the lang attribute
The <i lang=”ja-latn”>unagi</i> last night was wonderful!
Only use if there is no better option semantically.
Sunday, July 8, 12
20. <b>
• Draw attention to the word without conveying extra
importance.
• Not always styled as bold.
• Think chapter intros where the text is different
• Only use where no other more suitable elements
<b>Twas the night</b> before Christmas, when through
the house, not a creature was stirring, not even a
mouse.
Sunday, July 8, 12
21. <em>
• Used to linguistically stress the emphasis of the content
I don’t think you should eat that.
I don’t think you should eat that.
I don’t think you should eat that.
I don’t think you should eat that.
I don’t think you should eat that.
I don’t think you should eat that.
I don’t think you should eat that.
Sunday, July 8, 12
22. <strong>
• Represents strong importance of the text
• Can be styled bold, italic, underlined, etc.
• Remember, consider the meaning, not just presentation!
Do not open that door!
Sunday, July 8, 12
24. <p> - Paragraphs
• Paragraphs, just as in standard writing, split up the
document
• Have semantic meaning, just as in writing.Your first
paragraph might be your intro, and the last paragraph
your summary.
• By default, causes a line break, but can be overridden in
CSS
Sunday, July 8, 12
25. <br> - Line Break
• Splits up text on the page like a paragraph, but has no
semantic meaning.
• Does not wrap around other text. Just use <br> where
you want your break. Do not use <br />
Sunday, July 8, 12
26. Other cool tags to lookup
abbr - abbreviations
code - computer code
cite - citation
dfn - defining instance
kbd - keyboard input (hit F5 to refresh)
q - quote
u - annotations
wbr - suggested line break for long words
var - variable
All help give the document rich meaning!
Sunday, July 8, 12
27. Links
• The glue of the web. Tie documents together
• Use the <a> element
• Most common usage is with the href attribute to a URL
• Goes around the text you want to turn into a link
• Can link to full URLs, or relative URLs on the same site
• Have lots of other cool, and meaningful attributes
Sunday, July 8, 12
29. Images
• Use the <img> tag, and can be linked to with <a href>
wrapping it.
• Use the src attribute to point to the image URL
• Should always have the alt attribute describing the
image
Sunday, July 8, 12
30. Lists
• Lists data
• 3 main types: unordered list, ordered list & definition list
• Define the type of list, then a series of list items <li>
• Sometimes used for navigation
Sunday, July 8, 12
33. Tables
• Hold sets of data (students in class, rainfall per month)
• They should never be used to format a webpage
• Can get messy to code large ones by hand
Sunday, July 8, 12
34. Table Elements
<table> - Wraps the entire table
<caption> - Title of the table
<thead> - Table head. Contains titles of columns in <th> tags
<th> - Defines individual column headings
<tbody> - Contains the primary table data
<tr> - Single table row, contains many <td> items
<td> - Table Data.
Yes, that was a lot at once...
But it makes more sense in an example
Sunday, July 8, 12
36. section & article
• The article element represents a self-contained
composition in a document, page, application, or site
and that is, in principle, independently distributable or
reusable, e.g. in syndication.
• The section element represents a generic section of a
document or application.
• The section element is not a generic container element.
When an element is needed only for styling purposes
authors are encouraged to use the div element instead.
Sunday, July 8, 12
37. Why articles & sections?
• Give greater meaning to the structure of the document
• Visually the same could be accomplished with headers
and paragraphs, but it would have less semantic meaning
Sunday, July 8, 12
39. Div & Span
• Div and Span are used for parts of the page without
semantic meaning, and for styling only
• While they are used frequently, they are overused
• Ask yourself if there is another element that fits better
• Often use the class or id attribute so they can be
selected for styling with CSS
• Div creates a new line & area for itself
Span is ‘inline’ for styling without breaking the line
Sunday, July 8, 12
40. Div & Span Example
Huh? None of the divs do anything?
All your style questions will soon be answered...
Sunday, July 8, 12
41. Validation
• Use a HTML5 validator to double check your work:
http://validator.w3.org/
• You can also test any page, like Gizmodo.com
• Many popular pages have errors! They might work ok
now anyway, but on other browsers... what happens?
• Aim for zero errors. If you must have errors, learn why
you have them.
Sunday, July 8, 12
42. Making the Web Beautiful!
• So far the pages we’ve done are outright ugly
• After the break, we’ll use CSS to style our HTML
document
• Questions?
Sunday, July 8, 12
44. CSS
• Cascading Style Sheets
• Separate files that you reference in your HTML head
which give style & presentation to the page
• Different syntax than HTML, but very easy to learn
• Has no semantic meaning. Just visual.
Sunday, July 8, 12
45. Inline Styling- The Old Way
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Do not do this!
Sunday, July 8, 12
48. Targeting - element, id, class
• You can target by element, id or class attributes
• Each id should have only one instance per page
• Classes can be used multiple times per page
• Any element can have one id, and multiple classes
• In CSS, classes use a . (period) and ids use a #
• Prior example just used classes
Sunday, July 8, 12
51. CSS Inheritance
• Some of this can get complex, but in general...
• More specific rules override more general ones
• If something isn’t overridden, then it cascades down
Sunday, July 8, 12
52. CSS Reset
• Browser defaults aren’t consistent.
• Use a CSS Reset first before anything else
• Can include as a separate CSS file, or at the top of your
CSS file
• http://www.cssreset.com
Sunday, July 8, 12
53. Positioning
• Positioning can get complicated
• Generally use relative positioning
• Read up on margins, align, and width
Sunday, July 8, 12
54. Browser Testing
• Not all browsers output the same results
• Internet Explorer is notorious for non-standard output
• Use a browser testing service like:
http://browsershots.org/
Sunday, July 8, 12
55. Version Control with Git
• Git is version control software, like cvs, subversion.
• Helps backup, store, and share files for development
• A bit tricky at first, especially for Windows users
• Amazing getting started at:
http://try.github.com/
Sunday, July 8, 12
56. Github
• Most ubiquitous community git hosting
• Free accounts available. Paid ones start at $7/month.
Allow private repositories
• One of the best places to find and contribute to FOSS
projects
• Amazing place to view other’s code and learn from it.
Sunday, July 8, 12
57. Site Hosting
Dedicated Managed
Shared VPS / Cloud
Server/Rack Cloud
$$$
Price $ $$ $$
Ease of Use ☆☆☆ ☆☆ ☆ ☆☆☆
Multiple people per Also shared, but you’re You’re in total control, Cloud hosting, with
Description server. Like an fully in control of your but also on your own someone else worrying
apartment space. Condo. for help. about the tech parts
Pay for what you need-
The exact hardware Super easy to use, even
Strengths Cheap & Easy nothing more. Great
you need. for high demand sites
scaling.
Uptime & performance Not all services as
More difficult. Managing Expensive upfront.
Weaknesses issues
a Linux server Harder to scale quickly.
flexible as pure cloud
Poor software support hosting.
Slicehost, Amazon Web
Example Dreamhost, Bluehost
Services
Rackspace, Equinix Heroku, Engine Yard
Sunday, July 8, 12
58. Deployment
• FTP- Most common with shared hosting. Use FTP
software to drag/drop files
• SSH/SCP- Harder to setup, but more secure. Used
more with VPS/Cloud hosting
• Git - Deploy using your version control software
Used with Heroku
git push origin master
Sunday, July 8, 12
59. Misc
• Javascript - A programming language, often used for
making things ‘move’ on the web. Facebook for example
uses a ton of it!
• PHP - Another programming language. Often used more
‘server-side’, whereas HTML is ‘client-side’. Can access
databases, etc.
• Wordpress- Content Management System, traditionally
used for blogs. Written in PHP.
Sunday, July 8, 12
60. Credits
• Gargoyle photo used via Creative Commons license.
Originally found at:
http://www.fotopedia.com/items/flickr-4011885173
• Some text reused from the HTML5 Working Draft spec
from the W3C:
http://www.w3.org/TR/html5/
Sunday, July 8, 12