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

ARPANET September 1971 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

Apple.com 1996

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

Apple.com 2017

A Couple Other Things

Brief History of the Web

Evolution of the Web

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

HTML
HyperText Markup Language



Structure
CSS
Cascading Style Sheet



Styling
JS
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

git structure diagram

Basically version control is the bomb!

File Structure

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.