In this course

Making a web page with HTML and CSS

Writing HTML text tags and CSS selectors

Laying out a web page with multiple sections

Working with images on a web page

Customizing fonts and building HTML forms

1 Button
Save to LEVEL
Drive
HTML

A Quick Story of the Web

In 1980, Tim worked for CERN, where he
proposed a better way for researchers
there to share and read documents.

Tim Berners-Lee

n
u
r
o
h
w
e
l
p
o
e
p
N
e
R
m
a
s
CE
e
e
h
l
t
c
i
,
t
w
r
o
a
n
p
k
n
u
o
r
o
d
Y
a
H
e
g
r
a
L
the
.
r
o
t
a
r
e
l
e
c
c
a

ENQUIRE
So in 1984, he built something called ENQUIRE for CERN, which was
made up of Cards (Documents) and Hyperlinks (which connected the
Documents).
Hyperlink

Card

yp

But Tim realized he could do

better.

Card

er

lin

k
Hyp

erli

nk

Card
Card

The World Wide Web

With Robert Cailliau, Tim Berners-Lee wrote a proposal in 1990 for
the creation of the World Wide Web.
When it started, the WWW was a way for scientists around the world
to create and share their own webpages.

The World Wide Web's

First Logo

The language of a webpage is HTML

HTML allows you to take a plain text document
created in any simple text editor
Learn By Doing!
No setup. No hassle. Just Learning.!
Code School teaches web technologies in the
comfort of your browser with video lessons,
coding challenges, and screencasts.

.. and organize it into lists, link to other

webpages, include images, and more.

But what does HTML mean?

HTML stands for HyperText Markup Language
Hypertext
Overcoming the constraints of written text. Interactive.
Markup Language
A way to literally "Mark Up" a document to specify attributes, like
dierent font sizes, lists, links to other webpages, and images.

HTML is written in text les

Just like most programming languages, we type a bunch of HTML into a
file (aka. document) so we can send it around.

index.html

Name of the file

File extension
(tells the browser the file contains HTML)

To display an HTML le we need a browser

Web Browsers are basically "HTML Readers.
They understand how to read HTML and display it for you.

index.html

Hopefully they all display

the same thing (that's the idea).

A guide to the slides

In this course, were going to show you HTML, CSS
and what those look like in the browser.
Look for these symbols to help you figure out what youre looking at:

HTML
CSS

HTML code
CSS code
What it looks like displayed in the browser

Building Recipe World

First things rst: get some content!!

Before you start making a web page, youve got to figure out what
content it is going to show.
Well start with a single recipe with these sections.

Page Title:

Recipe World

Recipe Name:

Magic Cake

Section Name:

Ingredients

Section Name:

Directions

Writing HTML
Most of the time, youll put your content in between HTML tags, which
have corresponding opening and closing versions.

HTML
<h1> Recipe World </h1>

opening

  tag

the

  closing

  version

  has

  a

 
slash

  before

  the

  tag

  name

closing

  tag

Use heading tags to dene your content hierarchy

Higher heading numbers mean the content that appears
between the headings is less important than lower numbers.

HTML
<h1>Recipe World</h1>
<h2>Magic Cake</h2>
<h3>Ingredients</h3>
<h3>Directions</h3>

More

  important
Less

  important

Generally speaking:
The page title/company name goes in the <h1>
The page main subject goes in the <h2>
<h3> through <h6> are used to organize other divisions of page content

Use paragraph tags for non-heading text

<p> is called the paragraph tag.

HTML
<h1>Recipe World</h1>
<h2>Magic Cake</h2>
<p>Magic Cake is one of the tastiest...</p>

<h3>Ingredients</h3>
...
Add paragraph content (where
necessary) in between heading tags.

This

  paragraph

 
describes

  Magic

 
Cake

Use an unordered list to display a list of things

<ul> stands for unordered list.
Each list item needs to also be put inside of an <li> tag.

HTML

unordered

  list
list

  items

<h3>Ingredients</h3>
<ul>
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
</ul>

This

  list

  of

 
ingredients

 
doesn't

  need

  to

  be

 
in

  a

  specific

  order

Nesting tags
HTML tags dont have to always just contain text, they can contain other
HTML tags.

parent
children

HTML
<p>Magic Cake is one of...
<h3>Ingredients</h3>
<ul>
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
</ul>
<h3>Directions</h3>!
...

when

  you

  indent,

  it's

  easy

  to

  see

  that

  3

 
<li>

  tags

  are

  nested

  inside

  of

  a

  <ul>

  tag

A tag that contains other

tags is called the parent.
The tags contained in a
parent tag are called
children.

Not indenting child tags makes HTML hard to read

<h1>Recipe World</h1>!
<h2>Magic Cake</h2>!
<p>Magic Cake is one of...
<h3>Ingredients</h3>
<ul><li>2 eggs</li><li>1 pound of
sugar</li><li>3 sticks of butter</li>
</ul>
<h3>Directions</h3>
...

HTML

This

  is

  valid

 
HTML,

  but

  it's

 
really

  hard

  to

 
read

Use an ordered list to show list items in a certain order

If the content in your list does refer to steps to be followed, use an
ordered list.

ordered

  list
list

  items

HTML
<h3>Ingredients</h3>
these

  steps

  need

  to

  be

 
<ul>...
followed

  in

  order

  or

 
<h3>Directions</h3>
the

 
c
ake

 
w
ill

 
b
e

 
r
uined
<ol>
<li>Mix eggs, sugar, and butter in !
a large bowl.</li>!
<li>Spread into a non-stick dish</li>!
<li>Bake at 350 degrees for 1 hour</li>!
<li>Let sit at room temperature for 20 !
minutes</li>!
<li>Eat and enjoy!</li>
</ol>

Wrapping everything in the body

Any content that appears on a web page should be in between a <body>
tag.

the

  parent

  of

  all

  visible

  content

HTML

<body>
<h1>Recipe World</h1>
<h2>Magic Cake</h2>!
<p>Magic Cake is one of...</p>!
<h3>Ingredients</h3>!
<ul>...</ul>
<h3>Directions</h3>
<ol>...</ol>
</body>
<body> doesnt display anything, but
helps keep the page content organized.

Adding a head tag

Non-visible stu goes in the <head> tag.

HTML
<head>
we'll

  discuss

  what

  goes

  in

  the

 
</head>
<head>

  later

  when

  we

  need

  it
<body>
<h1>Recipe World</h1>
...
</body>

Youll eventually use the

head tag to load other
useful scripts, like CSS
and JavaScript.

Make everything a child of a single parent tag

All of your HTML goes inside of the <html> tag.

<html>
<head>
</head>
<body>
<h1>Recipe World</h1>
...
</body>
</html>

Notice

  that

  we're

  indenting

  again

  so

  it's

 
easy

  to

  see

  the

  parent/child

  relationship

HTML

Setting the DOCTYPE to html

The DOCTYPE sets the HTML version.

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Recipe World</h1>
...
</body>
</html>
The browser can make better decisions about how to display
your page when it knows which version of HTML youre using.

The recipe page so far

Adding links to our recipe site

What happens when you type a URL in the Browser

1

Enter a URL into the browsers address bar.

Browser
The URL contains a
protocol, server and a file
that is being requested.

protocol

server

No page is loaded yet

path

  to

  a

  file

What happens when you type a URL in the Browser

2

A request is sent to the server, and the server

looks for the file thats being requested.

Browser

request

Server
example.com

File
magic-cake.html

No page is loaded yet

What happens when you type a URL in the Browser

3

The server returns the file to the browser and the

browser displays it.

Browser

request

Server
example.com

e
s
n
o
resp
File
magic-cake.html

What happens when you click a link in the Browser

Clicking a link is like typing a URL in the address bar, only the URL is
already pre-entered in HTML as part of link.

Server
example.com

Click the link on the page, and a request

for the file in that link is sent to the server.

Browser

current

  page

  containing

  the

  link
File
magic-cake.html

t
s
e
u
req
File
legal.html

What happens when you click a link in the Browser

2

The server returns the file to the browser

Server
example.com

and the browser replaces the current

page with the new file.

Browser

new

  page

  loaded
File
magic-cake.html

response
File
legal.html

How to make a link

Anything that appears between the opening and closing a tags
is the part that will be a clickable link on the web page.

HTML
<p>...can view our <a>legal page</a> for more...</p>

link

  text

a is short for anchor.

How to make a link

The href attribute sets what page should open when the link is clicked.

the

  value

  of

  the

  attribute

 
should

  always

  be

  in

  quotes
HTML
<a href="http://example.com/legal.html">legal page</a>

HTML attribute

HTML attributes let you add additional

features or information to a tag beyond
just the tag name and text content.

How to make a link

The target attribute sets where the page you set in the href should open
when the link is clicked.

HTML
<a href="http://..." target="_blank" >legal page</a>
_blank means open this
page in a new tab/window.

HTML attribute
if

  you

  don't

  add

  the

  target

 
attribute,

  the

  default

  is

  _self

_self means replace the

currently open page in this
tab/window.

Demo of a link opening in a new tab

Absolute vs. Relative paths

Absolute paths ask for a file from a specific server

HTML
<a href="http://example.com/legal.html">legal page</a>

absolute

  always

  includes

  the

  protocol

  and

  server
Since no server
Relative paths ask for a file with no server specified.

HTML
<a href="legal.html">legal page</a>

name is included,
the browser
assumes you mean
the same server that
your page is on.

relative

  never

  includes

  the

  protocol

  and

  server

Links using relative paths

If no protocol/server is included, the browser assumes the protocol and
server are the same as the page youre requesting from.

<a href="legal.html">legal page</a>

Browser

HTML

Server
example.com

current

  page

  containing

  the

  link

relative

  link

File
magic-cake.html

l
m
t
h
.
l
lega

assumed

  server

 
is

  example.com

File
legal.html

Figuring out the site navigation

Recipe World server les

All of our HTML files are currently in

our main site folder on the server.

home.html
recipes.html
magic-cake.html
legal.html
suggest.html

These are the three main

pages that should go in
our site navigation.

Adding site navigation with relative links

Relative links should almost always be used when
linking to pages that are located on the same site.

add

  this

  block

  of

  HTML

  to

  all

  pages

HTML

<body>!
<h1>Recipe World</h1>
<ul>!
<li><a href="home.html">Home</a></li>!
<li><a href="recipes.html">Recipes</a></li>!
<li><a href="suggest.html">Suggest</a></li>!
</ul>
<h2>Magic Cake</h2>!
...!
</body>

The Magic Cake recipe page with site navigation

Creating a link to another web site

First, find and copy the URL to the other site

Creating a link to another web site

Absolute links need to always be used when linking
to pages that are located on another site/server.

HTML

<h3>Ingredients</h3>!
<ul>
link

  text
absolute

  path
<li>2 eggs</li>!
<li>1 pound of
<a href="http://www.amazon.com/Domino-..." >sugar</a>
</li>!
<li>3 sticks of butter</li>
</ul>