Intro to HTML & CSS
Background / Fun Facts
The world is run on the web
2.5 Exabytes of data are created each day, much of it is rich multimedia
- Knowing how to create data is one thing
- Knowing how to effectively share it in a manner that others can understand sets you apart
Source: California State University
Web 1.0
- Focused on efficient delivery of static content (sharing information rather than rich multimedia)
- User experience was not a focus (web use required more technical skills)
- Pages were written in basic HTML with little to no styling
- Companies were the sole content creators
Source: Telegraph
Web 2.0
- More Interactive: Highlight, hover, other visual effects
- Focus on User Experience: Animations and transitions
- Multimedia Focus: Facebook, Twitter YouTube
- Far greater number of content creators: anyone with a computer
A Couple Other Things
Hacking Webpages
Use the web inspector in your browsers (Chrome, Safari) to manipulate the HTML and CSS of current web pages to see live the effect of the changes that you make (right click → inspect element)
try hacking these sites:
Page Makeup
HyperText Markup Language

Structure
Cascading Style Sheet

Styling
JavaScript

Interaction
HTML
HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage. HTML elements are represented by tags.
Written using tags enclosed in angle brackets
<html>
called opening tag
</html>
called closing tag
<!-- comment -->
1
2
3
4
5
6
7
8
9
10
11
<!doctype html> <!-- instruction to the browser about what version of HTML the page is written in.-->
<html>
<head> <!-- title,scripts, styles, meta information, and more. -->
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<!-- Content of the Body -->
</body>
</html>
CSS
Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
Defined using Classes .name
and IDs #name
Classes: more general, used for a group of elements
IDs: more specific, used for single elements
/*comment*/
//comment
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body, h1, h2, h3, h4, h5, h6{
font-family: 'Lato', sans-serif;
color: black;
}
.post-content h4{
font-size: 22px;
}
.page-content{
margin-left: 10px;
margin-right: 10px;
}
Content v Styling
Content and style can and should be handled seperately.
Content lives in .html
files and styling in .css
If you think about it in relation to a newspaper html
is the raw article text and the css
transforms it into what you get at a newsstand
Server v Client
Servers give out information (.com’s)
Clients read in the information (web browser)
These can be compartmentalized, services can be both servers and clients
- log into facebook, [facebook = server]
- facebook asks spotify for info [facebook = client]
Debugging
A lot of bugs come from missing notation, HTML is a very relaxed language, it is not great at telling you where errors are or if there are bugs, it just assumes what should have been.
The web inspector can help understand the hierarchy that makes up HTML files helping you debug.
Structure & Organization
Version Control
Basically version control is the bomb!
File Structure
The critical thing with file structure is to stay organzied and be consistent
Optimize your Code
- Clean and clarify code
- Delete unwanted resources and code
- Have as few files as possible
- Comment to clarify your code
- Browsers load files linearly
- Be consistent
Image Preparation
- 150 dpi is plenty for the web
- Make images the size you want to display them
- PNGs are good for images
- SVGs for things like logos
- GIFs for animations
- All of the file types above supports transparency!
- Optimize your images: imageoptim (mac) xnview (win)
- Recommend using
word-space.png
for file names
Also check out HTTParty for a little extra, much of this content was pulled from there.