front-end-foundations

7/23/2019 Front-end-Foundations

http://slidepdf.com/reader/full/front-end-foundations 1/203



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



Save to Drive ButtonLEVEL 1

HTML



A Quick Story of the Web

Tim Berners-Lee

In 1980, Tim worked for CERN, where he

proposed a better way for researchers

there to share and read documents.

C E R N

Y o u k n o w, t h e s a

m e p e o p l e

w h o r u n

t h e L a r g e

H a d r o n p a r t i c l e

a c c e l e r a t o

r.



ENQUIRE

Hyperlink

So in 1984, he built something called ENQUIRE for CERN, wh

made up of Cards (Documents) and Hyperlinks (which connec

Documents).

Card

But Tim realized he

better.Car d

H y p

e r l i n k

Car d

H y p e r l i n k

Car d



The World Wide Web

With Robert Cailliau, Tim Berners-Lee wrote a proposal in 199

the creation of the World Wide Web.

When it started, the WWW was a way for scientists around the

to create and share their own webpages.

The World Wide Web

First Logo



The language of a webpage is HTML

HTML allows you to take a plain text document

created in any simple text editor…

.. and organize it into lists, link to other

webpages, include images, and more.

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.



But what does HTML mean?

HTML stands for H yper Text Markup Language

Hypertext

Overcoming the constraints of written text. Interactive.

Markup Language

A way to literally "Mark Up" a document to specify attribdi! erent font sizes, lists, links to other webpages, and im



HTML is written in text !les Just like most programming languages, we type a bunch of HT

file (aka. document) so we can send it around.

index.html

Name of the file File extension

(tells the browser the file contains HT



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

Hopefully they all displa

the same thing (that's th

index.html



A guide to the slidesIn this course, we’re going to show you HTML, CSS

and what those look like in the browser.

What it looks like displayed in the br

HTML HTML code

CSS CSS code

Look for these symbols to help you figure out what you’re look



Building Recipe World



First things !rst: get some content!!Before you start making a web page, you’ve got to figure out w

content it is going to show.

We’ll start with a single recipe with these sections.

Page Title: Recipe World

Recipe Name: Magic Cake

Section Name: Ingredients

Section Name: Directions



Writing HTML

Recipe World

Most of the time, you’ll put your content in between HTML ta

have corresponding opening and closing versions.

<h1> </h1>

opening tag closinthe closing version has a

slash

before

the

tag

name

HTML



Use heading tags to de!ne your content hieraHigher heading numbers mean the content that appears

between the headings is less important than lower numbers.

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

HTML

<h2>Magic Cake</h2>

<h3>Ingredients</h3>

<h3>Directions</h3>

Recipe World<h1> </h1>



Use paragraph tags for non-heading text<p> is called the paragraph tag.

Add paragraph content (where

necessary) in between heading tags.

HTML

<p>Magic Cake is one of the tastiest...</p>

<h2>Magic Cake</h2>

Recipe World<h1> </h1>

<h3>Ingredients</h3>...



Use an unordered list to display a list of thing

This lingreddoesnin a s

unordered list

list items

<ul> stands for unordered list.

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


<ul>

</ul>

<li>2 eggs</li>

<li>1 pound of sugar</li>

<li>3 sticks of butter</li>



Nesting tagsHTML tags don’t have to always just contain text, they can con

HTML tags.

when you indent, it's easy to see that 3 <li> tags are nested inside of a <ul> tag

parent

children

HTML A tag that tags is call

The tags c

parent tag

children.


<ul>

</ul>

<h3>Directions</h3>

...

<p>Magic Cake is one of...

<li>2 eggs</li>





Not indenting child tags makes HTML hard to

TH

rr

HTML<h1>Recipe World</h1>

<h2>Magic Cake</h2> <p>Magic Cake is one of...

<h3>Directions</h3>...

<ul>

</ul>

<li>2 eggs</li><li>1 pound of

sugar</li><li>3 sticks of butter</li>




Use an ordered list to show list items in a certaIf the content in your list does refer to steps to be followed, us

ordered list.

these

steps

need

followed in orderthe cake will be rordered list

list

items

<h3>Ingredients</h3><ul>...

</ol>

<li>Mix eggs, sugar, and butter i

a large bowl.</li>

<li>Spread into a non-stick dish<<li>Bake at 350 degrees for 1 hou

<li>Let sit at room temperature f

minutes</li>

<li>Eat and enjoy!</li>

<ol>

<h3>Directions</h3>



Wrapping everything in the body Any content that appears on a web page should be in between

tag.the parent of all visible content

<body> doesn’t display anything, but

helps keep the page content organized.

HTML

<ol>

<h3>Directions</h3>

</ol>...

<body>

</body>

<h1>Recipe World</h1>

<h2>Magic Cake</h2>

<p>Magic Cake is one of...</p>


<ul>...</ul>



Adding a head tagNon-visible stu! goes in the <head> tag.

we'll discuss what goes in the <head>

later

when

we

need

it

You’ll event

head tag to useful scrip

and JavaScr

HTML

<body>

</body>

<head>

</head>


...



Make everything a child of a single parent tag All of your HTML goes inside of the <html> tag.

Notice that we're indenting again so it's easy to see the parent/child relationship

HTML

<body>

</body>

<head></head>


...

<html>

</html>



Setting the DOCTYPE to htmlThe DOCTYPE sets the HTML version.

The browser can make better decisions about how to display

your page when it knows which version of HTML you’re using

HTML

<body>

</body>

<head>

</head>


...

<html>

</html>

<!DOCTYPE html>



The recipe page so far



ddi li k i i



Adding links to our recipe site

Wh h h URL i h B



What happens when you type a URL in the Br

Browser

1 Enter a URL into the browser’s address bar.

The URL con

protocol, se

that is being

server path to a fileprotocol

No page is loaded yet

Wh h h URL i h B



Browser ex

mag

2 A request is sent to the server, and the server

looks for the file that’s being requested.

No page is loaded yet


r e qu e s t

Wh t h h t URL i th B

http://example.com/

http://example.com/



Browser ex

mag

3The server returns the file to the browser and the

browser displays it.


r e qu e s t

r e s p o n s e

Wh t h h li k li k i th B

http://example.com/

http://example.com/



What happens when you click a link in the Bro

Browser

ex

mag

Clicking a link is like typing a URL in the address bar, only the

already pre-entered in HTML as part of link.

1 Click the link on the page, and a requestfor the file in that link is sent to the server.

current page containing the link

l

r e q u e s t

Wh t h h li k li k i th B

http://example.com/

http://example.com/



Browser

ex

mag

2 The server returns the file to the browser

and the browser replaces the current

page with the new file.

new page loaded

l

What happens when you click a link in the Bro

r e s p o n s e

How to make a link

http://example.com/

http://example.com/



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.

link texta is sho

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

How to make a link



How to make a linkThe href attribute sets what page should open when the link i

the value of the attribute

should

always

be

in

quotes

HTML attributeHTML attributes let you add ad

features or information to a tag

just the tag name and text conte

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

How to make a link



How to make a linkThe target attribute sets where the page you set in the href sh

when the link is clicked.

HTML attribute

_blank means open

page in a new tab/wi

_self means replace

currently open page

tab/window.if you don't add the target

attribute, the default is self

<a >legal page</href="http:// "... target="_blank"

Demo of a link opening in a new tab



Demo of a link opening in a new tab

Absolute vs Relative paths



Absolute vs. Relative paths Absolute paths ask for a file from a specific server

Relative paths ask for a file with no server specified.

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

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

absolute always includes the protocol and server

relative never includes the protocol and server

Since

name

the brassum

the sa

your p

HTML

Links using relative paths



Links using relative paths

Browser

If no protocol/server is included, the browser assumes the pro

server are the same as the page you’re requesting from.

current page containing the link

legal. h t m l

assumed server

is example.com

relative

link

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

HTML

Figuring out the site navigation

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://example.com/

http://example.com/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/

http://legal.html/



Figuring out the site navigation

Recipe World server !les

home.html

recipes.html

magic-cake.html

legal.html

All of our HTML files are

our main site folder on th

These are the three main

pages that should go in

our site navigation.

suggest.html

Adding site navigation with relative links



Adding site navigation with relative links

add

this

block

of

HTML

to

all

pages HTML

Relative links should almost always be used when

linking to pages that are located on the same site.

<body>


<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 navigati



The Magic Cake recipe page with site navigati

Creating a link to another web site



Creating a link to another web siteFirst, find and copy the URL to the other site

Creating a link to another web 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.

<a >href="http://www.amazon.com/Domino-..."

link <h3>Ingredients</h3>

<ul>

<li>2 eggs</li>

<li>1 pound of

</li>

<li>3 sticks of butter</li> </ul>

absolute path




CSS

The early days of style on the web



The early days of style on the webWhen the Web was brand new, there was no separation betwe

and the presentation of that HTML.

<H3 COLOR=RED><CENTER>Ingredients</CENTER></H3>

caps-lock got stuck a l

HTML shouldn’t determine how something looks,

it should just determine how content is structured.

HTML

Separating content from presentation



Separating content from presentationThankfully, the authors of the web realized that, and created a

make rules for how tags should look and put them in a separat

from the HTML.

<h3>Ingredients</h3>HTML

CSS Make the h3 tag green

Make the h3 a bigger font

Make the h3 have a border at the bottom

Cascading Style Sheets



Cascad g Sty e S eetsCSS is code that changes the appearance of HTML.

HTMHTML without CSS

Writing your !rst selector



g yTags are selected by creating something called a selector .


the simplest selector is the type selector , and

is just the tag name without <> brackets.

this is one of many properties

that can be applied to selectors

each property can usually be set

to one of a few different values

HTML

CSS

p {

text-decoration: underline;}

The syntax of a selector



ySelectors have a very specific syntax that needs to be followed

CSS won’t work.

selector {

property: value;

}

an open-curly-bracket goes

after

the

selector

name

CSS

a closed-curly-bracket goes

after the property list A colon goes after the

property name and

before the value

A semi

after t

of a pr

Using multiple properties in one selector



g p p p A single selector can change multiple properties.


p {

text-decoration: underline;

color: red;

}

multiple properties applied to a

single selector

HTML

CSS

Selecting multiple tags with one selector



g p gSelectors will select all matching tags on the page and apply prop


<ul>

<li>2 eggs</li>



</ul>

li {

font-size: 24px;

}

big

fo

HTML

CSS

Selecting only tags that are children of another t



g y g A descendent selector can be used to select tags only if they

children of another tag.

<h3>Ingredients</h3> <ul>

<li>2 eggs</li>



</ul>

ul li {

font-size: 24px;

}

select

only

li

tags

that

are

children

of

ul

tags

TIP: read the selecto

right-to-left. The lef

is the parent, with ch

following to the righ

onit

HTML

CSS

Selecting tags based on actions and conditions



A pseudo-selector is a modifier that can be added to a select

select a tag only when a certain condition has occurred.

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

color: darkred;

}

removes the underline from all links on a page

CSS

adds an underline and changes the color of all

links on a page ONLY when the mouse is over

the link

Using pseudo-selectors to narrow selection crite



The :first-child pseudo-selector can be applied to narrow the

child tags selected

<h3>Directions</h3>

<ol>

<li>Mix eggs, sugar...</li>

<li>Spread into a...</li>

<li>Bake at 350...</li>

</ol>

ol li:first-child {

color: red;

}

select

only

the

first

li

tag

HTML

CSS

Where do we put all this stu" ?



One place you can put CSS is in a style tag that’s a child of th

HTML

Your CSS selectors

be written in betwee

the style opening anclosing tags.

The type attribute let

browser

know

that

CSS

<html>

<head>

</head>

<body>

...

</body>

</html>

<style type="text/css">

a {

color: red;

}

</style>



Hexadecimal colors



A popular way to choose colors in CSS is to use hexadecimal n

p {

color: red;

color: #FF0000;

color: black;

color: #000000;

color: yellow;

color: #FFFF00;

}

red

black

yellow

Here’s three keyword colors

and their hexadecimal

equivalents.

CSS

Hexadecimal colors



Each hex color is actually three di! erent parts.

#FFFF00first two numbers set the

amount of red

next

two

set

green

last two set

Hexadecimal colors - Minimum and Maximum



Color values for red, green, and blue run from 0 - 255 decima

or 00 - FF hexadecimal.

#FFFF00This color is maximum red, maximum green, and no blue.

That’s equivalent to the color Yellow

Breaking down decimal numbers



(7 x 10)

76multiply the left by 10 multiply the right by 1

(6 x 1)

Add them together, and you get 76 decimal

Decimal numbers run from 0-9.

(decimal)

Breaking down hexadecimal numbersSi ’ d di d i l b i i



(7 x 16)

76multiply the left by 16 multiply the right by 1

(6 x 1)

Add them together, and you get 118 decimal

Since we’re so used to reading decimal numbers, sometimes it

sense to convert hexadecimal to decimal.

(hexadecimal)

Breaking down hexadecimal numbersSi ’ d t di d i l b ti it



(F x 16)

FFmultiply the left by 16 multiply the right by 1

(F x 1)

Since we’re so used to reading decimal numbers, sometimes it

sense to convert hexadecimal to decimal.

(hexadecimal)

How do we multiply by a letter?!$#?

Understanding letter-based hexadecimal numH d i l b f 0 15 b t l tt f b



(15 x 16)multiply the left by 16 multiply the right by

(15 x 1)

Add them together, and you get 240 + 15, or 255 decim

Hexadecimal numbers run from 0-15, but use letters for numb

A = 10

B = 11

C = 12

D = 13

E =

F =

FF

Calculating the color from hexadecimal numb



#7403ABRed: (7 x 16) + (4 x 1) = 116

Green: (0 x 16) + (3 x 1) = 3

Blue: (10 x 16) + (11 x 1) = 171

This color is some red, almost no green, and more blue than re

That’s a color that looks Purple

Calculating the color from hexadecimal numb



#FF00B3Red: (15 x 16) + (15 x 1) = 255

Green: (0 x 16) + (0 x 1) = 0

Blue: (11 x 16) + (3 x 1) = 179

This color is lots of red, no green, and a little less blue than re

That’s a color that looks Hot Pink

Colors on the webB i h d i l b l 256 i



By using hexadecimal numbers to set colors, we get 256 possi

combinations for each of the three color channels.

or…

256 x 256 x 256 = 16,777,2



Our page after changing some styles with CSS



Questions

How does our page know

how much vertical and

horizontal space to put

between tags?

How can we control that

spacing?

Why this much space?

Answer

The box model

The BoxEvery tag shown in the body is contained in



Every tag shown in the body is contained in

an invisible rectangle that we’ll call the box .

These two parag

shown as two bo

on top of each ot

HTML

<p>Magic Cake is one of...</p><p>We also need to stress...</p>

The boxes on our pageHere are the boxes for the current version of the magic-cake h



Here are the boxes for the current version of the magic cake.h

HTML

<p>Magic Cake is one of...

<p>We also need to stress...

<body>


<ul>...</ul>

<h2>Magic Cake</h2>


<ul>...</ul>

<h3>Directions</h3>

<ol>...</ol>

</body>

Block-level tagsThe content of block-level tags take up the entire width of the



The tags that

content are a

the container

here

is

<body>

h1 h2

p ul

the boxentire w

contain

new boxes are pusthe line below

The content of block level tags take up the entire width of the

Inline-level tagsIf a tag is not block-level it’s inline-level



If a tag is not block level, it s inline level.

Some common inline-level tags

a img

labelinput

<p>...can view our <a href="legal.html">legal page

for more information</p>

inline-level tags don't try to take up more width than the need

Turning block-level into inline-levelSometimes, you’ll want block-level tags to be inline-level.



Sometimes, you ll want block level tags to be inline level.

Example: list items displaying horizontally instead of verticall

block-level list items inline-level list ite

ul li {

display: inline

}

the default display is block-levelCSS

Block-level vertical spacing



What we know

Back to our problem

How does the browser

know how much space

goes between the boxes?

! Each tag’s content fits in an invisible box

! Each block-level tag’s box takes up an entire line (horizontal s

The Box ModelThe box model is a way to describe the borders



1. Content area

The content area contains your actual content (text,

images, etc.)

Magic CakeThe content area will only take up as m

vertical space as it needs to display th

content inside.

y

and spacing in between the boxes of each tag.

! There are 4 parts of the box model:

The Box Model! There are 4 parts of the box model:



2. Padding

Padding is added to the top, right, bottom, or left of the c

PADDING

Magic Cake

p

The Box Model

! There are 4 parts of the box model:



BORDER

3. Border

Borders are added around the top, right, bottom, or left o

PADDING

Magic Cake

The Box Model! There are 4 parts of the box model:



MARGIN

BORDER

4. Margin

Margins are added to the top, right, bottom, or left of the

PADDING

Magic Cake

How to calculate the size of the boxThe full size of a box after these four properties have been set



MARGIN

BORDER

calculated like this:

PADDING

Magic Cake

+ content area width

= the full box width

use

top,

bottom,

and

height to calculate full box hei ht

+ margin-left

+ border-left

+ padding-left + padding-right

+ border-right

+ margin-right

Applying the box model properties Apply padding to one side at a time… If we want to put so



PADDING

Magic Ca

h2 {

padding-top: 6px;

padding-right: 3px;

padding-bottom : 0;

padding-left: 0;

}

h2 {

padding: 6px 3px 0 0;

}

…or all at once in a clockwise order

top right bottom left

and to the right of s

option is to adjust th

CSS

CSS

Applying the box model properties You can apply borders all at once and not specify a side.



BORDER

PADDING

Magic Cak

h2 {

border-width: 6px;

border-style: solid;

border-color: black;

}

h2 {

border: 6px solid black;

}

Creating borders has a shortcut version, too.

CSS

CSS

Applying the box model properties You can also just pick one side and just add a border there.



BORDER

PADDING

Magic Cake

h2 {

border-bottom : 6px solid black;

} width st le color

CSS

Applying the box model properties Add margins the same way you add padding…



BORDER

PADDING

Magic Cak

h2 {

margin-top: 6px;

margin-right: 0;

margin-bottom : 6px;

margin-left: 0;

}

h2 {

margin: 6px 0 6px 0;

}

…or use the same shortcut syntax as padding.

top right bottom left

MARGIN

CSS

CSS

When should you use padding?Padding is used to control the size of a box without



adjusting the size of the content inside the box.

h2 {

padding: 10px 0

}

h2 {

padding: 0 0 0 0;

}

CSS

When should you use margin?Margin is used to control the space between boxes.



h2 {

margin: 4px 0 4p

}

h2 {


}

CSS

Summary of our new box model knowledge

What we now know:



What we now know :

Why is there spacing here?

We didn’t set any margins or

padding?!@!#?#

! Each tag’s content fits in an invisible box

! Each block-level tag’s box takes up an entire line

! Margin can be used to adjust spacing between containers

! Padding can be used to adjust spacing within a container

Browsers actually have a default stylesheet for when no custom

Default browser styles



Default box styles left on Default box styles turne

Resetting default browser styles Add this to the very top of your CSS file to reset default styles

'



Default box styles turned

html, body, h1, h2,

h3, p, ol, ul, li, a {

padding: 0;

border: 0;

margin: 0;

}

include each tag that's in your HTML for that page

Now, all of the default box

properties are reset, and we

need to set the box model

properties ourselves.

CSS

A Box Model process - Start with the bodyThe order that you apply the box model properties is personal

preference but here’s one approach



preference, but here s one approach:

Start from the highest parent element

This is often <body>

body {

padding: 20px 20px 20px 20px;

}

this padding is ever side of th

This padding has the e! ect of pushing

all of the children away from the edges

of the <body>.

CSS

A Box Model process - Next, look at headingsNext, focus on the heading tags

h1



<h1>

h1 {


}

margins

Use margin to put vertical

space between tags.

Before

After

no

marginsCSS

Next, focus on the heading tags

<h2>

A Box Model process - Next, look at headings



h2 {


}

Before

After

no

margins

margins

<h2>

CSS

Before

Next, focus on the heading tags

<h3>

A Box Model process - Next, look at headings



Before

After

no margins

margins

<h3>

CSSh3 {


}

After your margins are in place, think about where borders mi

necessary

A Box Model process - borders



necessary.

this

bottom

border

visually separates the sections

CSSh3 {


}

border-bottom : 1px solid #CCCCCC;

Use padding to put more space between the content and bord

A Box Model process - padding



now

we've

got

a

little

more space between

the content and border

Before

After

CSSh3 {


}

border-bottom : 1px solid #CCCCCC;

padding-bottom : 3px;

Padding is also used to adjust list and list item indentation.




Before After

Padding is also used to adjust list and list item indentation.




After

left pad

ul { padding: 0 0 0 5

}

ol {

padding: 0 0 0 5

}

Result after adjusting box model propertiesHere’s where our page stands right now:



Fixing page style problems

PROBLEM



PROBLEM

The <ul> padding is being

applied to the navigationand ingredients.

We need a way to add

padding to one <ul>

but not the other.

Using classes to di! erentiate between tags Add a class attribute to an HTML tag so that you can access it

in CSS…



.nav {

padding-left: 0;

}

… then access this class in CSS by putting

a period in front of the class name.

padding-left is gone from the

nav

<ul>

padding-left remains on the ingredients <ul>

HTML

CSS

<ul class="nav"><li>...</li></ul>

Using classes in descendent selectorsClasses can be used interchangeably with tags, so the way des

selectors work doesn’t change.



.nav a {

color: #0000af;


}

This selector says find all a t

that are children of any tag

class of “nav”, and set the c

blue and turn o! the underlin

HTML

CSS

<ul class="nav">

<li> </li>

</ul>

<a href="home.html">Home</a> <li><a href="recipes.html">Recipes</a></li>

<li><a href="suggest.html">Suggest</a></li>

Using classes to di! erentiate between tagsProblem: We don’t want the ingredients list to display inline



CSSul li {

display: inline;

}

our current rule for list items

should

be

the

default

block-level,

not

inline

Using classes to di! erentiate between tagsClasses can be used interchangeably with tags, so the

way descendant selectors work doesn’t change.



still displayed

inline

displaying

as

a

block-level tag again (the default)

CSSul li {

display: inline;

}

.nav li {

display: inline;

}

Writing class and type selectors in the right orWhen you’re just using type selectors, the order doesn’t really

When you start combining them with class selectors - the orde



e you sta t co b g t e t c ass se ecto s t e o de

This ul padding overrides the .nav padding

because it comes after the .nav in the stylesheet.

padding-left: 0;

Padding for .nav befor

CSS

padding-left: 50

Padding for .nav after

.nav {

padding-left: 0;

}

ul {

padding: 0 0 0 50px;

}

padding-left!!!

Writing class and type selectors in the right orGenerally speaking, first declare the broadest rules with ty

selectors, and then get more specific with class selectors



flip them so the ul comes first, and then the .nav

This way, the broader rules cascade down and become defau

and more specific rules can change the defaults.

CSS

padding-l

Padding for .

before .nav r

padding-l

Padding after

ul { padding: 0 0 0 50px;

}

.nav {

padding-left: 0;

}

more specific

broader

Creating a page that lists all recipesOur recipes.html page will have a list of links to individual rec

recipes.html



<html>

<head>

</head>

<body>


<ul class="nav">

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

</body>

</html>

<h2>Recipes</h2>

right

now,

this

page

juthe main site navigatioh2 describing the page c

Creating the list of recipesThe list of recipes can be an unordered list where each list item

a few other block-level tags and a link to the individual recipe



copy

this

general

structure

for

each

recipe

<h2>Recipes</h2>

<h3><a href="magic-cake.html">Magic Cake</a

<p>This is a dangerously delicious cake.</p

</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

recipes.html

<ul>

<li>

The recipes page has a problem

Problem:



None of our styles are in recipes.html

because we put our CSS in the<head> of magic-cake.html.

Solution:

We need to put our CSS in a

separate file and link that file

to each of our HTML pages.

all ofrules

Move the CSS into a single "leHere we’ve created a single file called main.css so we have on

put all of our CSS.



HTMLmagic-cake.html

<html> <head>

<style type="text/css">

a {

color: red;

}

all other styles

</style>

</head>

...

</html>

main.css

Move all of the selectors

rules into the CSS file, bu

not the HTML <style> ta

Visualizing our site "lesRecipe World server !les

i ill h ld ll f



home.html

recipes.html

magic-cake.html

legal.html

support.html

main.css will hold all of our

be linked in the <head> of main.css

Cmain.css

a {

color: red;

}.

all other styles

Where do you write CSS?While CSS can be written inside of a <style> tag in an HTML

of the time it’s written in a separate file and connected to the

ith li k t



with a link tag.

HTML The link tag should be a child of the head tag

The link tag is an empty tag,

meaning it is written with only an

opening tag and has no closing tag.

<lin

<html>

<head>

<link>

</head>

<body>

...

</body>

</html>

recipes.html

Where do you write CSS?Since the tag is empty, the way you use it is by setting di! eren

recipes.html



The type attribute set to text/css lets the browser

know we’re going to be loading a CSS file.

this is called a MIME type

<html>

<head>

<link >

</head>

<body>

...

</body>

</html>

type="text/css"


recipes.html



The rel attribute is short for relationship.

Setting rel to stylesheet tells the HTML that it

should use the linked file to determine page styles.

<html>

<head>

<link >

</head>

<body>

...

</body>

</html>

type="text/css" rel="stylesheet"


recipes.html



The href attribute works just like it does with the <a> tag.

this is a relative path, so weknow here that main.css shobe in the same folder as our

HTML

files

<html>

<head>

<link

</head>

<body>

...

</body>

</html>

type="text/css" rel="stylesheet" href="m

Before-and-after linking the CSS "leNow recipes.html is using the general styles we’ve already cre

Before linking main.css After linking main.css



Dealing with similar styles on multiple pagesOften using the exact same styles on all pages doesn’t look rig

HTMLrecipes.html



<h2>Recipes</h2>

<ul> <li>

<h3><a href="magic-cake...

<p>This is a dangerously...

</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

The ul, ul li, h3, and p styles are cascading

down from our broader selectors.

HTML

A proposal for changing the recipes page style

no list-style-type no bo



border around the <li>

y yp

for the <ul> no bo

left padding between the li border and content area

our greused fo

Dealing with similar styles on multiple pagesFirst, we’ll give the recipes.html <ul> a unique class.

recipes.html



<h2>Recipes</h2>

<li>

<h3><a href="magic-cake.html">Magic Cake</

<p>This is a dangerously delicious cake.</

</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

<ul class="recipes">

Dealing with similar styles on multiple pagesThen, write some more specific CSS for .recipes and any child

existing ul styles



ul {

padding: 0 0 0 50px;

}

.recipes {

list-style-type: none;

padding: 0;

}

remember, .recipes is a specific <ul>

CSS

CSS

resets all sides to 0

st g sty s


existing ul li styles



ul li {

}

.recipes li {

border: 1px solid #b56663;

padding-left: 15px;

}

the .recipes <li>'s will inherit the margins and add a new border and padding-left

CSS

CSS

isti g ul li styl s


CSSexisting h3 styles



h3 {


border-bottom : 1px solid #cccccc;

padding-bottom : 3px;

}

.recipes h3 {

border-bottom : 0;

}

the .recipes h3 will inherit all of the h3

properties,

but

remove

the

bottom

borderCSS


We don’t currently have a general



.recipes a {

color: #7facaa;


}

We don t currently have a general

CSS rule for a, so we can just add

our specific version.

CSS



Organizing the page layoutIn our current layout, we’ve got a

clear separation between the

header and main content.



The div tagdiv is short for division, and it’s a block-level tag that’s a gene

way to group related content into sections on a page.

HTML



header

main content

HTML

> <h1>Recipe World</h1>

<ul class="nav">...

</div>

<div>

<body>

<div

</body>

<h2>Magic Cake</h2>

...

</div>

Use classes to describe what divs contain A common way to di! erentiate between <div> tags is to add a

HTMLlet's build this style



HTML


<ul class="nav">...

</div>

<div >

class="header"

class="main-content"

<body>

<div

</body>

<h2>Magic Cake</h2>

...

</div>

Classes will let us style each <div> di! erently

Use classes to describe what divs contain A common way to di! erentiate between <div> tags is to add a

let the divs handle now and not the bo

HTML



HTML


<ul class="nav">...

</div>

<div

class="header"

class="main-content"

body {

padding: 0 0 0 0;

}

.header {

padding: 10px 10px

.main-content {

padding: 20px 20px

border: 1px solid

margin: 30px 0 0 0

}

<body>

<div

</body>

<h2>Magic Cake</h2>

...

</div>

}

Giving the header a separate styleLet’s make our header styles look di! erent so we can easily se

header is di! erent from the main-content.



CSS.header {

padding: 10px 10px 10px 10px;

.header a {

color: #ffffff;

}h1 {

color: #ffffff;

}

}

background-color: #b56663;

Adjusting the size of divsThe width and height of any tag’s content area can be changed

So far, we’ve just wanted our tags to take up 100% of the avai

width but let’s make our main-content div a fixed size



width, but let s make our main content div a fixed size.

CSS.main-content {

width: 500px;

padding: 20px;

border: 1px solid #dddddd;

margin: 30px 0 0 0;

}

Centering contentThere’s two main ways to center things, but the CSS you write

on what you’re centering.

If: you want to center an entire block



If: you want to center an entire block-

level tag

Then: set the left and right margins to auto

And: it is fixed-width

CSS.main-content {

width: 500px;

padding: 20px;

border: 1px solid #dddddd;

margin: 30px 0 ;

}

auto auto

Centering with margin autoCSS

auto here means take a

space as you can. margin: 30px 0 ;auto auto



right left



If: you want to center children



If: you want to center children

inside a block-level tag

Then: set the text-align of the

children to center

h1 {

color: #ffffff;

margin: 0 0 15px 0;

text-align: center;

}

centered!CSS



CSS



centered!

.nav {

padding-left: 0;


text-align: center;

}

h2 {


text-align: center;

}

A note about "xed widthsIf you’ve been reading about or making websites, you might be

wondering why we’re using fixed widths instead of relative wi



Fixed widths are great for learning how page layout works, an

this course, you can continue on to our Journey Into Mobile

where you’ll learn how to convert your fixed widths to relative




IMAGES

The three types of webpage imagesMost images on webpages fall into one of these three categori

! Content Images

! Layout Images



! Layout Images

! User Interface Images

Content imagesContent images are any images that are just as necessary to th

all of the text.



Layout imagesThese are in the background, and are not necessary to

understand the content of the page.



actual important

User Interface images

h d d

These assist with the interface of the webpage, but are not req

understand the content of the page.



These downward arrows

direct

how

to

work

with the interface.

Creating content imagesContent images are created in HTML with the <img> tag.

<img> is an empty tag.<img>



<img></img>

remember, that means it just

has an opening tag (no closing)

Creating content imagesContent images are created in HTML with the <img> tag.

Instead of open/close tamagic-cake.html

HTML<i >src "cake png"



add an src attribute to

set which image is usedrelative path


magic-cake.html

cake.png

main site folder

<img >src="cake.png"

Putting images in their own folderIt makes sense to organize your images so they aren’t in the m

folder.magic-cake.html

HTML

<img >src=" cake png"images/




magic-cake.html

images

main site folder

cake.png

now all of your images can go in

the

images

folder

<img >src= cake.pngimages/

How images are loaded

Browser requests magic-cake.html

mag

main si

Recipe World



q g

The magic-cake HTML is loaded in the browser

Browser finds this html

Browser

requests

images/cake.png

cake.png contents are returned and displayed

mag

ima

c

<img >src=" cake.png"images/

Adding alt attributes to content imagesThe alt attribute should contain text that describes the image

or the purpose of the image.

magic-cake.html



cake.png

Not everyone who views your page

will be able to view the images.

W h y ? ? Accessibility

Screen readers rely on alt tags to

describe images to visitors that

might not be able to view images.

<img src=" cake.png"images/ alt="Magic Cake Photo

Laying out content images<img> is an inline-level tag, but they are often put inside bloc

This is similar to <a> tags, which almost

always appear as children of block-level tags.



<li> is a block-level tag

<h3>Your Photos</h3>

<ul class="photos">

<li><li>

<li>

<li>

<img src="images/cake1.png" alt="Cake Photo 1

<img src="images/cake2.png" alt="Cake Photo 2

<img src="images/cake3.png" alt="Cake Photo 3</ul>

magic-cake.html

Laying out content images

We want these

photos to display

Problem



side-by-side, like this

Laying out content images

<h3>Your Photos</h3>

<ul class="photos">

<li><img

HTMLmagic-cake.html



<li><img...

</ul>

CSS

remove bullets and padding

make the images show

horizontally with a little space in between

.photos {

list-style-type: none;

padding: 0;

}.photos li {

display: inline;

padding-left: 11px;

}

Using an image as a site/logo mark

<div class="header">

<h1>R i W ld</h1>

We can replace the <h1> with an <img> tag.

HTMLmagic-cake.html




<ul class="nav">...


<ul class="nav">...

<img src="images/logo.png" alt="Recipe World Logo

Centering an image inside a block-level tag<img> is an inline-level tag so it can’t be centered with text-a

Instead, set just that image to display: block and center it wi

the margin: auto approach.



.header img { display: block;

margin: 0 auto 0 auto;

}

CSS


<ul class="nav">...

<img src="images/logo.png" alt="Recipe World Logo

magic-cake.html



Creating layout imagesLayout images are created in CSS with the background prope



Understanding the background propertyThere’s several di! erent properties that relate to background

background-color works just like the color property.

CSS



You should always set abackground color in case the

background image fails to load.

TIP

CSS

body {background-color: #5f5f5f;

}

Understanding the background propertybackground-image can point to a relative or absolute path.

body {

background-color: #5f5f5f;

b k d i l(i / bbl )



the path has to be inside this url() codenotice that qdon't need toaround the p

}

background-image: url(images/gobbler.png);

Check out subtlep

for this and other

Understanding the background propertybackground-position can be used to position the image in a

body {


background image: url(images/gobbler png);

http://subtlepatterns.com/

http://subtlepatterns.com/



the first word can

be top, center , or

bottom

the second word

can be left, center ,

or right

}


top left;background-position:

Understanding the background propertybackground-position can be used to position the image in a

body {





center right}


;background-position:

this shows the image vertically centered and pushed to the right

Understanding the background propertybackground-repeat can be used to repeat tiled images.

CSbody {





}


;background-position: top leftbackground-repeat: repeat;

Understanding the background propertybackground-repeat can be used to repeat tiled images.

body {


background-image: url(images/gobbler png);



Other values

repeat-x

repeat-y

no-repeat

tile the image horizontally

tile the image vertically

don’t tile or repeat anything

}


;background-position: top leftbackground-repeat: ;repeat-y

Understanding the background property All four of those can be shortened into a single background p

CSSbody {


background-image: url(images/gobbler png);



color image position

}


;background-position: top leftbackground-repeat: ;repeat

body {

background: #5f5f5f url(images/gobbler.png) top lef}

Creating di!

erent tiled backgroundsWe can set di! erent backgrounds for di! erent containers.

Here, we’re using one repeated background for the body, anot

main-content, and another for the divs on the recipes page.



body {

background: #000000 url(images/stardust.png) top le

}

.main-content {

background: #ffffff url(images/crossword.png) top l

}.recipes li {

background: #ffffff url(images/li-bg.png) top left

}

Result of using three di!

erent layered backgro

body background



y g

.recipes

li

background

Writing on top of background imagesSome sites like to write text over images.

This list on gamespot.co

http://gamespot.com/

http://gamespot.com/



text for the game name release date appearing o

background image from

game.

h4 p

Writing on top of background imagesSome sites like to write text over images.

One way to do this is to create an empty

div container that completely contains a

background image, and put text tags



inside of it.

HTML<div class="main-content">

<h2>Home</h2>

<div class="featured-image"></div>

</div>

home.html

First, add the background image to the contaiHTML

<div class="main-content">

<h2>Home</h2>

<div class="featured-image">

home.html



.featured-image {

width: 630px;

height: 246px;

background: #ffffff url(images/featured-cake.pn

top left no-repeat;

}

these should be equal to the width/height of the image

</div></div>

Then, add a tag that shows text as a child of that c

HTML<div class="featured-image">

</div>

<h3>Featured: Magic Cake</h3>

home.html



.featured-image h3 {

margin: 0;

background-color: #333333;

color: #ffffff;

padding: 5px 0 5px 15px;

text-transform : uppercase;

}

CSS



Displaying an image to the side of block-levelWe know that tags are either block or inline.

inline-level block-level



This is an image to left of multiple block-level tags.

block-level

How can we make this?

Floating images You might try setting two divs to inline.

left div set to inline ri ht div set to inline



Floating images <ul class="recipes">

<li>

<div>

<img src=...>

</div>

Setti

divs s

with

HTML

magic-cake.html



<div>

<h3><a href=...>Magic Cake</a></h3>

<p>...</p>

</div>

</li>

</ul>

.recipes div {

display: inline;

}

seemwork

CSS

Floating imagesTurns out, we can’t just flip things to inline and then put

block-level tags inside of them.

left div set

T

s



to

inline

right div set

to inline

Floating images

<ul class="recipes">

<li>

<img src=...>

HTML

Put the img, h3, and p all in one li and float the img left.

magic-cake.html



g

<h3><a href=...>Magic Cake</a></h3>

<p>...</p>

</li>

</ul>

This makes the image of the left space that th

boxes would normally

block-level tags.

CSS.recipes img {

float: left;

}

Floating imagesSuccess! We’ve also added some right padding so the image d

touch right up against the text.

Float is a tric

that is covere

CSS.recipes img {

float: left;



greater detai

Cross Countr

float: left;

}

padding-right: 10px;



Save to Drive ButtonLEVEL 5FONTS AND FORMS

Fonts on the WebFonts and font styles can be controlled with CSS.

bold, large



regular,

mediumregular

uppercase

Our current page’s fontsSince we haven’t set a font, the browser is just picking a defau



Changing the font with CSSThe font-family property is used to set the ideal font and a fe

fallback options.

body {CSS



The ideal font

The browser

try to load th

ideal font fir

font-family: Helvetica,}

Arial, sans-serif;

Changing the font with CSSThe fallback fonts are used if the ideal font isn’t available.

use quotes if fonts are multi-wobody {

font-family: Helvetica, Arial, "Times New Roman",



Fallback fo

Not all fonts are installed in all browsers!!!

}

Our page after changing the fontHere’s magic-cake.html after changing the main font to Helve



Browser defaults - the font edition Just like with the box model properties, the browser has

default font styles - and you should reset these too!!



These weights

and sizes are

the browser

defaults.

Resetting default browser font stylesNow the font weights and sizes won’t follow an arbitrary defau

html, body, h1, h2,

h3, p, ol, ul, li, a {

padding: 0;

CSS



border: 0; margin: 0;

}

font-size: 100%;

font: inherit;

Changing font sizesThe size can be set with the font-size property.

h2 {

color: #7facaa;

margin: 0 0 20px 0;

li

CSS



Pixels aren’t the only size options

percentages

ems

text-align: center; font-size: 26px;

}

Changing font thicknessThe thickness can be set with the font-weight property.

h2 {

color: #7facaa;

margin: 0 0 20px 0;

li

CSS



Weight values

normal

bold

100, 200… 900

lighter

bolder

text-align: center; font-size: 26px;

}

font-weight: bold;

Changing other font properties

.footer p {

color: #aaaaaa;

text-align: center;

f t i ht b ld

Here’s a few other font properties:BEFORE

AFTER

CSS



font-weight: bold;font-size: 12px;

font-style: italic;

text-transform : uppercase;

}

<div class="footer">

<p>© 2014 - Recipe World</p>

</div>

AFTER

snazzy way to show a copyright symbol

HTML

Adjusting the line heightline-height is like margin for each line in a box.

You can adjust the vertical

spacing between di! erent

t t t b h i th



text tags by changing themargin.

margin

Margin can’t adjust the

spacing between lines in a

single box.

Adjusting the line height

.main-content p {

line-height: 16px;

}

line-height is like margin for each line in a box.

CSS



.main-content p {

line-height: 26px;

}

CSS



Web FormsForms are a way for a web page to get input from a user.

label

Forms usual

things like l

several di!

e



form input

submit

several di eareas, and a

Recipe World’s form

Making forms actually

process user input requires

server-side code.

label

textarea

Disclaimer



form

input

submit

textarea

We can still design how

the form will look in the

browser now.

The HTML for a simple formThis HTML will produce the form shown below (but some extr

attributes would needed to send the form data to the server).

<form>

<label>Recipe Name</label>

<input type="text">

suggest.htmlHTML



<input type= text >

<input type="submit" value="Click to Submit">

</form>

label input submit

Common form input typesThe type attribute sets the kind of input field that will display.

<input type="text">

<input type="checkbox">

<input type="radio">



<input type= radio >

<input type="file">

<input type="password">

<input type="submit">

The for and id attributesThe value of the for attribute in the label should be the same a

value of the id attribute in an input field to associate the label

this associates the labe

Each for/id pair has to be unique on the page.

for="recipe name">Recipe Name</label><label

<form>



for= recipe-name >Recipe Name</label>

<input type="text" >

<input type="submit" value="Click to Submit">

</form>

id="recipe-name"

<label

Using a textarea instead of an inputinput tags should be used for short or single-line user input.

The textarea tag is used for multi-line user input.

textareas also don't need to define a type<form>

<label for="ingredients">Ingredients</label>

<textarea id="ingredients"></textarea>

HTML



Unlike inputs, textareas need an opening and closing tag.

</form>

<textarea id= ingredients ></textarea> <input type="submit" value="Click to Submit">

Styling formslabels and inputs are inline-level tags, but it usually makes se

display one on top of the other like block-level instead of side-b

Before

CSS



label, input {

display: block;

}.

After

CSS

Styling formsOnce you’ve got both tags displaying as block-level, you can st

just like you would any other block-level tag.

label, input {

display: block;

}

CSS



}.

label {


}

input {

width: 500px;


}.

Styling the submit button separatelySince the submit button is technically an input tag, our input s

properties are a! ecting the way it is displayed.

Attribute selectors are a way to style

a tag based on one of its attributes.

Before

input { CSS



attrib. name attrib. value After

input {

width: 500px;


}.

input[type=submit] {

width: 120px;

font-size: 30px;

}

CSS

Styling inputsThe container around an input is actually just a border, so you

it with the border property.

input[type=text] {

border: 2px solid #7facaa;

}

CSS



}

Styling inputsTo adjust the height of the input, style the text inside.

input[type=text] {


font-size: 24px;

CSS



}font size: 24px;

Styling inputs And, since the green line is a border, use padding to put some

between the border and the text.

input[type=text] {


font-size: 24px;

CSS



}

p ;padding: 7px;

Styling textareas You can set a width and height for textareas, but otherwise th

behave similar to regular inputs.

textarea {

width: 500px;

height: 400px;i

CSS



g p ; padding: 7px;



font-size: 24px;

}

Creating a separate style for a checkbox inputIt looks awkward if the newsletter label and input are on sep

since the checkbox is so small, so we can use attribute selecto

make just this input and label display inline.

<form>

<label for="newsletter">Get Newsletter?</label>i " h kb " id " l "

HTML



input[type=checkbox], label[for=newsletter] {

display: inline;

}

</form>

<input type="checkbox" id="newsletter">

...

CSS

The !nal form