Post on 19-Jul-2015
transcript
Week 02a new layer
From Last Week
What does HTML stand for?
What does CSS stand for?
What is the difference between them?
From Last Week
What does FTP stand for?
What does HTTP stand for?
What is the difference between FTP and HTTP?
FTP and File Structure
Relationships
Relationships
X
Relationships
Filing the Files
Root Directory
TOP LEVEL FOLDER FOR FILES
From the Root
/EMERSON/FIELDS/ASSIGNMENTS/WEEK01/
rules on files and dir
all lower case
no spaces
can use ‘-’ or ‘_’ to separate words if need be
rules in effect
/something/over there/never buy remotes/
/something/over-there/never-buy-remotes/
X
Using an FTP Program
default file names
the first file browsers look for is ‘index’
for us we are authoring in html
so index.html will be our default file name
Home Page = index.html
default page for each directory = index.html
seeing it work
go to snarkygargoyle.com/inClass/
(don’t need the file name since we want index.html to show)
keep directories logical
/inClass/week02/testing/filepath/logic
Doing it ourselves
open up filezilla/cuteFTP/firefox
Break
15 minutes
Style Sheets
Ability to stylize any element of HTML (style sheet)
COLORBORDER
FONTPADDING
MARGINS
POSITION
FONT-VARIANTWIDTH
HEIGHT
Z-INDEX
Cascading
refers to the order in which the browser reads the CSS rules
CSS
3 Primary kinds of CSS
External (separate document)
Internal (styles in the <head>)
Inline (within each element)
CSS
Browsers obey CSS in the order they read it
External CSS
Internal CSS
Inline CSS
<p style="color:blue; font-size:12px; font-family:verdana, <p style="color:blue; font-size:12px; font-family:verdana, arial,'times new roman';">paragraph that is blue, 12px and arial,'times new roman';">paragraph that is blue, 12px and verdana</p>verdana</p>
So Cascading means
External style sheet says all P tags are blue
Internal style sheet says all P tags are green
Inline style tag says the p tag is red
the p tag is red
IF:
THEN:
Inline CSS
To assign styles to an element inline, we use an attribute called style
Attribute
<p <p stylestyle="color:blue;">paragraph that is blue</p>="color:blue;">paragraph that is blue</p>
Property
<p <p stylestyle="="colorcolor:blue;">paragraph that is blue</p>:blue;">paragraph that is blue</p>
Value
<p <p stylestyle="color:="color:blueblue;">paragraph that is blue</p>;">paragraph that is blue</p>
Selector
<<pp stylestyle="color:blue;">paragraph that is blue</p>="color:blue;">paragraph that is blue</p>
Declaration
<<pp stylestyle="="color:bluecolor:blue;">paragraph that is blue</p>;">paragraph that is blue</p>
CSS to learn
http://www.bostonshaker.com/students/css-examples.html
2 new tags
<strong>stuff</strong>
<em>more stuff</em>
MAKES THINGS BOLD, IMPORTANT
MAKES THINGS ITALICS (EMPHASIZE)
Lets Practice
To the Text Editor Robin!
The Box Model
The ability to control block level elements with a series of layout controls
PADDING BORDER MARGIN
Box ModelPADDING BORDER MARGIN
Box Model
<p style=”border: 1px black solid; padding:2px; margin:15px;”>
some stuff in here
</p>
PADDING
BORDER
MARGIN
Box Model
But Jason, boxes have 4 sides, what about different values?
padding: 5px;padding: 5px 10px;
padding: 3px 5px 10px 2px;
ALL SIDES ARE EQUALTOP/BOTTOM FIRST THEN LEFT/RIGHTTOP RIGHT BOTTOM LEFT
SAME LOGIC WITH ‘MARGIN’
Box Model
Borders are a little different
border: 1px;border: 1px red;
border: 1px red solid;
YOU SET WIDTH, BROWSER ASSUMESWIDTH, COLOR, BROWSER ASSUMESYOU GAVE THE BROWSER ALL VARIABLES
LONG HAND IS USING ‘BORDER-COLOR’ | ‘BORDER-WIDTH’ | ‘BORDER-STYLE’
Inheritanceelements inside of other elements will inherit its values unless you tell it otherwise
<p style=”color:red”>
<strong>some stuff in here</strong>
</p>
<p style=”color:red”>
<strong style=”color:blue;”>some stuff in here</strong>
</p>
Lets rock...
Anchors
making links uses a tag called the anchor
<a></a>
Anchors
the anchor tag also uses an attribute
hrefHYPERTEXT REFERENCE
Anchors
the attribute ‘href’ needs a definition, no?
href=”http://www.google.com”WHEN YOU USE AN ‘HTTP’ REFERENCE YOU ARE CREATING AN ABSOLUTE LINK.
THERE IS ANOTHER TYPE OF LINK CALLED ‘RELATIVE’ - COMING SOON
Anchors
put it all together
<a href=”http://www.google.com”>google</a>