GDI Seattle Intermediate HTML and CSS Class 1

INTERMEDIATE HTML AND CSS
CLASS 1Intermediate HTML/CSS ~ Girl Develop It ~

WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and hands-on instruction.
Some "rules"
We are here for you!
Every question is important
Help each other
Have fun

WELCOME!
Tell us about yourself.
Who are you?
What do you hope to get out of the class?
What is your favorite dinosaur?

REVIEW: TERMS
Web design
The process of planning, structuring and creating a
website
Web development
The process of programming dynamic web
applications
Front end
The outwardly visible elements of a website or
application
Back end
The inner workings and functionality of a website or
application.

REVIEW: TOOLS
Browser
Chrome
Firefox
Development Toolkit
Chrome - Inspector
Firefox - Firebug
Text Editor
TextWrangler - Mac
Notepad ++ - Windows
Sublime Text - Mac or Windows

REVIEW: ANATOMY OF A WEBSITE
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world,
using HTML and CSS to present that content & make it
look good.

REVIEW: ANATOMY OF A WEBSITE
Concrete example
A paragraph is your content
Putting your content into an HTML tag to make it look like a
paragraph is Structure
Make the font of your paragraph blue and 18px is presentation
A paragraph is your content
<p>A paragraph is your content</p>

REVIEW: ANATOMY OF AN HTML ELEMENT
Element
An individual component of HTML
Paragraph, Table, List
Tag
Markers that signal the beginning and end of an
element
Opening tag and Closing Tag
<tagname>Stuff in the middle</tagname>
<p>This is a sample paragraph.</p>

Container Element
An element that can contain other elements or
content
A paragraph (<p>) contains text
Stand Alone Element
An element that cannot contain anything else
<br/>
<img/>

Attribute
Each element can have a variety of attributes
Language, style, identity, source
Value
Value is the value assigned to a given attribute.
<p lang="fr">C'est la vie</p>
<img src="my.picture.jpg"/>

CSS: REVIEW
CSS = Cascading Style Sheets
CSS is a "style sheet language" that lets you style the
elements on your page.
CSS is works in conjunction with HTML, but is not
HTML itself.

REVIEW: THE CSS RULE
A block of CSS is a rule block.
The rule starts with a selector.
It has sets of properties and values.
A property-value pair is a declaration.
selector {
property: value;
}

REVIEW: CSS SYNTAX
Declarations: Property and value of style you plan use
on HTML element.
Declarations end with a semicolon
Declarations can be grouped and are surrounded by
curly brackets.
selector {
property: value;
property: value;
property: value;
}

REVIEW: SELECTOR: ELEMENT
Selects all paragraph elements.
Selects all image elements.
p {
property: value;
}
img {
property: value;
}

REVIEW: SELECTOR: ID
Selects all elements with an id of "footer".
The associated HTML.
#footer {
property: value;
}
<p id="footer">Copyright 2011</p>

SELECTOR: CLASS
Selects all elements with a class of "warning".
.warning {
color: red;
}
<p class="warning">Run away!</p>

REVIEW: SELECTOR: POSITION
Selects all em elements that are within a paragraph
p em {
color: yellow;
}
<p>This is <em>important.</em></p>

STANDARD PRACTICES
Awesome, right?
But how do people use this REALLY?
Reset CSS files
Standard widths and sizes
Wrappers

RESET CSS
Even though HTML is the structure and CSS is the
design, some HTML elements have default styles
Examples include:
Bulleted lists like this one have standard bullets
Paragraphs have default padding
Links are blue and underlined

RESET CSS
Most elements:
Lists:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style: none;

STANDARD WIDTHS AND SIZES
Some sizes that are good to know about
A standard font size is usually 12px
Screens vary greatly in width! Standardize your
design a couple ways
Set the body width to a specific width
Set the content area width to 100%, with max-
width of around 1200px/1400px and a min-width of
around 960px.

WRAPPERS
Wrappers are a good way to center content if the
screen width is wider than your content.
.wrapper{
width: 100%;
max-width:1400px;
margin: 0 auto;
}

LET'S DEVELOP IT
Getting our feet wet
Download practice files
Look through the page
Add a link to the reset.css file in the head of the
document
Notice the changes to the layout

LINKING ON PAGES
<a href = "#section">Go to Section!</a>
<a name= "section"></a>
Example on Wikipedia

PSEUDO SELECTORS
In addition to applying css to elements, classes and ids,
you can apply css on certain events. Most notably,
hover
I will only turn blue on hover
.turn-blue:hover{
background-color: lightblue;
color: grey
}
<div class = "turn-blue">I will only turn blue on hover</div>

@FONTFACE
The world of HTML has progressed beyond Times New
Roman and Arial
Yay!
How do we use new and cool fonts?

@FONTFACE
Use font from outside sources (like Google Web Fonts)
In our example, we use Audiowide, Quicksand and Lato
http://www.google.com/webfonts
<link href="http://fonts.googleapis.com/css?family=Audiowide|Quicksand:300,400,700|Lato:100,300,400,700,900,100
italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css">
What does that do?

@FONTFACE
Download fonts locally
In our example, we downloaded 'Entypo'
To use it, add the following to css:
@font-face {
font-family: 'EntypoRegular';
src: url('font/Entypo-webfont.eot');
src: url('font/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('font/Entypo-webfont.woff') format('woff'),
url('font/Entypo-webfont.ttf') format('truetype'),
url('font/Entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@FONTFACE
Using the fonts
body{
font-family: 'Lato', Arial, sans-serif;
}

LET'S DEVELOP IT
Use your new-found knowledge!
Update the links in the header and footer to jump to
the corresponding section
Update the links in the site to change color on hover.
Try to update the background color too!
Update the font of the site. The completed example
uses:
Lato for the body
Audiowide for h1
Quicksand for h2
EntypoRegular for the bullets and jump up/down
links

HTML 5: WHAT IS IT?
Formally, HTML5 is the for the
next version of HTML.
Informally, people use "HTML5" to refer to a whole set
of new web standards and abilities:
HTML5
CSS3
JavaScript
W3C’s specification

HTML5 SPECIFICATIONS
2004 - started work
2008 - first public working draft
2011 - last call
2012 - working draft
2014 - planned for stable recommendation

WHAT ABOUT THE
BROWSERS?
Chrome
Firefox
Internet Explorer
Safari
Opera

HTML5 & CSS3 READINESS
HTML5 & CSS3 Readiness

Too much to cover in our time together
But here are some highlights:

MARKS SOME OLD THINGS
OBSOLETE
EXAMPLES
Deprecated items (e.g. frame, frameset, noframes)
Presentational elements and attributes replaced by
CSS (e.g. font, big, center)
reference

REDEFINES A FEW THINGS
Gives some old elements semantic meaning and
separates them from presentation (e.g. b, i, strong, em)

ADDS A BUNCH OF NEW
FEATURES
semantics offline & storage device access connectivity
multimedia 3D & graphics performance presentation

HTML5 DOCTYPE
Minimum information required to ensure that a browser
renders using standards mode
<!DOCTYPE html>

OLD DOCTYPES
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

SEMANTIC HTML
“The use of HTML markup to reinforce
the semantics, or meaning, of the
information in webpages rather than
merely to define its presentation
(look).”
-Wikipedia

SEMANTICS
Give meaning to structure

NOT SEMANTIC
<div id="header"></div>
<div class="nav"></div>
<div id="footer"></div>

SEMANTIC
<header></header>
<nav></nav>
<footer></footer>

<SECTION>
Group together thematically related content
Similar to prior use of the div, but div has no semantic
meaning

<HEADER>
Container for a group of introductory or navigational
aids
Document can have multiple header elements
E.g. One for the page, one for each section

<FOOTER>
Contains information about its containing element
E.g. who wrote it, copyright, links to related content,
etc.
Document can have multiple footer elements
E.g. One for the page, one for each section

<ASIDE>
Tangentially related content
E.g. sidebar, pull quotes

<NAV>
Contains major navigational information
Usually a list of links
Often lives in the header
E.g. site navigation

<ARTICLE>
Self-contained related content
E.g. blog posts, news stories, comments, reviews,
forum posts

element index
sectioning flowchart

NOT SEMANTIC
<body>
<div id="header">
<h1>Hi, I'm a header!</h1>
<div id="nav">
<ul>
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="article">foo</div>
<div class="article">bar</div>
</div>
<div id="footer">Hi, I'm a footer!</div>
</body>

A LOT OF DIVS
also known as div-itis
<body>
<div id="header">
<div id="nav">
<ul>
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="article">foo</div>
<div class="article">bar</div>
</div>
<div id="footer">Hi, I'm a footer!</div>
</body>

SEMANTIC
<body>
<header>
<nav>
<ul>
<li><a href="http://www.foo.com">foo</a></li>
<li><a href="http://www.bar.com">bar</a></li>
</ul>
</nav>
</header>
<section>
<article>foo</article>
<article>bar</article>
</section>
<footer>Hi, I'm a footer!</footer>
</body>

SEMANTIC MARKUP
ENHANCES
Accessibility
Searchability
Internationalization
Interoperability
It also helps treat the plague of div-itis!

HTML5SHIV
HTML5 IE enabling script
HTML5Shiv

“polyfill (n): a JavaScript shim that
replicates the standard API for older
browsers”

LET'S DEVELOP IT
Modify the site to use semantic HTML
Change one small thing at a time
Remember to modify the CSS to match the HTML
You have 10-15 minutes to get started
You won't be able to change everything - if we have
time, you can continue at the end of the workshop

GDI Seattle Intermediate HTML and CSS Class 1

GDI Seattle Intermediate HTML and CSS Class 1

More Related Content

What's hot

Similar to GDI Seattle Intermediate HTML and CSS Class 1

More from Heather Rock

Recently uploaded

GDI Seattle Intermediate HTML and CSS Class 1