Intro to HTML & CSS

 
with Dan
 
Download these:
Sublime Text - sublimetext.com
Google Chrome - google.com/chrome
 

HTML & CSS references







FAQ's

Introductions

What will I take away from today?

HTML & CSS Fundamentals


After both classes, what will I be able to do?

 
 
  • Read and understand HTML & CSS
  • Know what you can do with HTML & CSS
  • Have an understanding of how these technologies work together
  • Have a great frame of reference for building simple websites

What technologies do web developers use to build websites?

The big 3:
HTML, CSS, JavaScript

I just want to blog, can't I just
use WordPress?
 


Sure! But the flexibility that comes with knowing how to code is invaluable.

Tools like WordPress can become constraining.

Terms & Concepts

What's the Internet?

Computers talking to each other.

(more computers)

What's a website?

Basically, a collection of text files in a folder on a computer somewhere.

What happens when I load a website?

  • Server: a computer connected to the internet which provides files when requested (in our case, the files for our website)

 

  • Client: a computer (your computer) connected to the internet, which asks a server for some files 

2 main pieces involved in accessing a website

The flow of data

Scenario: you load facebook.com

Your browser uses the internet to ask Facebook's server for the website

 

Facebook's server sends the files back to your browser

 

Your browser reads the files, and interprets the code inside them to display the website (as Facebook intended for it to look) on your screen. 

What is a browser?

 
An application that reads HTML documents (among others) and presents them as a visible or audible webpage.

 

What types of code make up a website?

  • HTML - a language to tell a web browser how to lay out the structure and content of your website
  • CSS - a language to tell a web browser how to style the content of your website (color, size, shape, etc)
  • JavaScript - a programming language which allows you to add interactive features to your website

Who is involved in the process of creating websites?

  • Designers
  • Project Managers
  • Developers

HTML

What is HTML?

Hypertext Markup Language
 
  • A standardized markup language to structure the contents of web documents
     
  • Describes the document to a web browser
 
 
 

Markup?

A language with specific syntax that instructs a web browser how to display a page.

<example> Some text on my webpage </example>

What does HTML markup look like?

Pieces of HTML markup are called "Tags"

 
<p> ... </p>
 

Tags are invisible to the user

but the browser needs them. 
 <p>Welcome to my site!</p>

Wrap all the content on your website in tags

Two matching tags are called elements.

Tags are just the parts with brackets.

Elements are the tags plus everything inside the tags.

HTML tags form the structure the browser needs to present your content to a viewer of your website.

Syntax is critical

<p Some text> </p>

<p>Some text</div>

<p> Some text

Missing end tag :(

Ensure all elements have an opening and closing tag

<p>Some text</p>

There are many possible tags

All tags are pre-defined

i.e. you'll need to learn what they are.

Some tags have specific uses

  • <a> - only tag that can create a link to another page
  • <img > - only tag that can display images on a page

Many are for general use

  • <span> and <p> are usually used for text
  • <div> is usually when you want to group elements in the same area

Some common HTML tags

Anchor (link)
<a></a>

Paragraph
<p></p>

Division
<div></div>

List
<ul></ul> or <ol></ol>

Heading
<h1></h1> or <h2></h2> 
    

<div>
   <span>Hi there!</span>
   <span>more text</span>
</div>

Tags are often nested

Bare HTML Document

<!DOCTYPE html>

<html>


  <head> </head>

  <body> </body>

</html>

<!doctype html>

Tells the browser that this file has HTML in it.

<html>

Contains all HTML elements

<head></head>

Contains "meta" tags which provide general information about the content of the page 

<body></body>

Contains all potentially visible content on the page.

A simple complete HTML page
 

<!DOCTYPE html> 

<html>
  <head> 
    <title> Dan's Website </title> 
  </head> 

  <body> 
    <h1> Hello world, here's a website </h1> 
    <p> by Dan </p>  
  </body> 

</html>

 

Two major types of elements

 

Block elements

Block elements begin on a new line and flow down the page

Inline elements

Inline elements flow exactly like text does. 

Common Elements

 
Common block elements
  • paragraph (<p>)
  • lists (<ul>)
  • headings (<h2>)
  • divs (<div>)
 
Common inline elements
  • links (<a>)
  • spans (<span>)
  • images(<img />)

HTML

 
Let's start our own simple homepage 
with HTML
 
 
It will have:
 
  • a header
  • a sidebar
  • a main area for content
  • a footer

CSS


Our homepage isn't pretty - 
it doesn't have any CSS yet.

CSS

Cascading Style Sheets


HTML → structure

CSS → style

CSS


CSS is NOT a programming language.

Nor is it a markup language, like HTML.

It's unique.

CSS


Gives the browser instructions on how to display an element

Supplies information on things like:

  • Size
  • Spacing
  • Color
  • Position in the browser window

It would be pretty messy to have all of our CSS mixed into our HTML.
So, we have .css files, just like our .html files

CSS - why?


Separation of concerns

structure | style | behavior 


<h1>Hello!</h1> +

h1 { color: red; }
Hello  

CSS - how?

 
The browser knows CSS and HTML.
 
It connects the two automatically.

=

or
selector { property:value; property:value; }

Defining CSS Rules

 
selector{
  property: value;
  property: value;
}

 

 

 

One more piece of HTML...

Tags by themselves aren't 
very useful.

 
In practice, you'll have many of the same tags in your code.
 
But, there's a way to differentiate them- and make them more useful.

Attributes

<div id="photo-gallery">...
 
  • Attributes let you assign names to the elements on your page.
 
  • Attributes can be applied to all HTML elements

Two main attributes for styling



ID attribute: unique- can only be on one element 
 
<div id=”photo-gallery”></div>

 
 
Class attribute - reusable
 
<button class="inactive-button">Click me!</button>

 

p {
  color: red;
  font-size: 14px;
}


#photo-gallery {
  width: 500px;
  height: 400px;
}

Some example CSS Rules

 
"Find every paragraph tag on a page, make the 
text within it red,  and the size of it 14 pixels"
 
 
 
 
 
 
Find an element with the id "photo-gallery", make it 
500px wide,  and 400px tall" 
 

 

Back to attributes...

 
We might want to make a button appear active or inactive under certain conditions. How?
 
 

Attributes.

 
<button class="inactive-button">Click me!</button>
 
 
Say hello to class names
 

Selectors


Selectors are the way to target (or select!)
an HTML element in order to apply styles to it.

Tag Selector:
div { }

Class selector:
.example { }

ID Selector:
#example { }

You can group selectors!

 
You can take these two separate rules:
 
h1 { color: red; }
p { color: red; }
 
 
and combine them into one, like this:
 
h1, p { color: red; }
 

CSS

 
 
There are a lot of properties you can use to style HTML elements.
 
Let's apply some to our homepage.

dgribbin@me.com

slides.com/dangribbin

Wrap up

Want to learn more?

 

Tomorrow!

JavaScript


Programming!

Don't worry, we'll take things easy.


JavaScript makes our websites truly interactive.

But we need to learn the absolute basics before we get there.

  • A scripting language
  • Not visible to a website user
  • What makes it possible for a user to interact with the website and vice-versa
  • Used to create web applications you've used (Gmail, Google Maps, Facebook)

JavaScript is...


  • The best way to make your website interactive and rich.
  • All browsers use it.
  • It's fast.


JavaScript - Why?

Variables


A variable (in programming) is:
 A letter or word that can store a value.
(That value could be anything)

We can access, reuse, and manipulate values
that are in a variable.

Variable names must start with a letter or an underscore.



Variables - why?


In programming, you'll want to keep track of
certain values in your code so you can access them later.
declare it (reserve the name) 
var firstName, lastName, age;


assign a value to it 
firstName = "Joe";
lastName = "Bean";
age = 27;

How to create a variable

var firstName ="Joe";
var lastName = "Bean";
var age = 27;

Or, in one step

var firstName = "Joe";

firstName = "Dan";

Changing a variable's value

 
If your variable is already assigned a value,
you can change it.

 

var firstName = "Joe";
var strAge = "27";

var intAge = 27;
var yearOfBirth = 1985;
What's the difference between strAge and intAge? Type.

Types of variables:

Strings and Integers

 
string values (letters or numbers)

 

integers (only numbers)

Numeric Operations


5 + 5 = 10

var result = 5 + 5;
var result = 5 - 5;
var result = 5 / 5;
var result = 5 * 5;


or, using variables...


var firstNum = 5, secondNum = 5;
var result = firstNum + secondNum;
Using '+' on strings = concatenating strings
Using '+' on integers = numeric addition
"27"+"16";
→ "2716"

27 + 16;
→ 43

"hello" + "world";
→ "helloworld"

Functions


A function defines a block of code 

that can be reused.

Functions


  • Let you break your code into chunks
  • Make maintaining your code much easier



Think about the word function...

Something with a function...

 
 
has a  purpose /   does a thing

 

What if we wanted to do the same thing many times in our code?

 

  • Write it again every time we need it
    • What if we wanted to change it?
       
  • Write it once and reuse it
function sayMyName(){
  alert("Dan");
}





sayMyName();

Creating a function

Declare the function

Call it

Another example of a function

 
function addNumbers(){

  var num1 = 1;
  var num2 = 2;
  var num3 = num1 + num2;

  alert(num3);
}

Putting JavaScript on a web page


A different kind of tag 
<script type="text/javascript">

  alert("hello world!");

</script>

Ok, enough for now. 

Some useful info about JavaScript!



Browsers handle JavaScript differently in some cases.

To help with that problem, there exist some "libraries" of code to help you forget about those inconsistencies and just code.

  • jQuery
  • Dojo
  • YUI
  • ExtJS 
$('#photo-gallery').show();

$('#photo-gallery').hide();

jQuery



Makes it easy to just code.

Makes your code work across many browsers.

We'll use this next week!

Next week...

 
More HTML, CSS & JS

Brainery- Intro to Web 1

By Dan Gribbin

Made with Slides.com

Brainery- Intro to Web 1

  • 1,000

More from Dan Gribbin