Learn HTML & CSS From Scratch in 30 Days

HTML & Web Fundamentals

HTML & CSS From Scratch
Slides 1.1

© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Topics

• How the Web Works

• The Development Process

• Work Flow Habits

• Getting to Know HTML Elements


How the Web Works

• Request/Response

• Rendering in the browser

• Local / Remote

• Frontend / Backend Development


Request & Response

Source: www.howstuffworks.com

Browser - Server Conversation

Source: net.tutsplus.com

Local vs Remote

Source: unknown. Please contact me if you own the rights to this image.

Front vs Back
Front end Back end
(client-side) (server-side)
•HTML •Ruby
•CSS •PHP
•JavaScript •Python
•Java
•Node


Brainstorming

Source: Jack Dorsey via Flickr.com

Small Site – Flow Diagram


Hand Drawn Mockup

Source: Speckboy.com

Digital Mockup

Source: Speckboy.com

Mobile

Source: Mobilegui.net

Site Organization


HTML Fundamentals

• Syntax

• Document Structure

• Text

• Images

• Links


HTML stands for…

• Hyper

• Text

• Markup

• Language


Syntax

Source: www.w3.org
© 2012 Jonathan Grover. All Rights Reserved. Not for re-sale or reproduction. For educational purposes only!

Syntax

Source: www.w3.org

Document Structure
<html>
<head>

Document metadata

</head>
<body>

Document contents

</body>
</html>

Document Type
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Doctype tells the browser which version of
markup language to interpret the document
as. In this case were specifying HTML5.


Text Headings
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>


Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>


Logical Styles
<em>This text is emphasized</em>

<strong>This text is strong</strong>


Deprecated  Don’t Use!
<b>bold</b>

<i>italic</i>

<u>underline</u>
<s>strike through</s>

<menu>creates a menu</menu>

<center>centers content</center>

<applet>creates an applet</applet>

<font>font style</font>

Unordered List
<ul>
<li>First item</li>
<li>Next item</li>
</ul>


Ordered List
<ol>
<li>First item</li>
<li>Next item</li>
</ol>


Definition List
<dl>

<dt>First term</dt>

<dd>Definition</dd>

<dt>Next term</dt>

<dd>Definition</dd>

</dl>


Images

• File Types

• Resolution & Color Mode

• Compression

• Attributes


Common File Types

• GIF (Graphics Interchange Format)

• JPG (JPEG) (Joint Photographic Experts Group)

• PNG (Portable Network Graphic)

• BMP (Bitmap)

• SVG (Scalable Vector Graphic)


Lossy vs Lossless

• Lossless data compression makes use of data
compression algorithms that allows the exact
original data to be reconstructed from the
compressed data
• Lossy data compression does not allow the exact
original data to be reconstructed from the
compressed data.


GIF (graphic interchange format)

• Lossless compression that simplifies color palette
to reduce file size.
• Best for sharp edged graphics with smaller range
of colors. (ex: text, simple logos, and icons)
• Not good for complex gradients or millions of
colors (ex: photos)


JPG (joint photographic experts group)

• Lossy compression that reduces file size by loss in
image fidelity.
• Best for photographs and paintings of realistic
scenes with smooth variations of tone and many
colors.
• Not as sharp at depicting text, and icons as GIF or
PNG.


PNG-8 (portable network graphic 8 bit)

• Lossless data compression that was meant to
replace GIF.
• PNG-8 works well with text, icons, and logos with
sharp edges and simplified color palettes.
• Creates much larger file sizes on photos than
JPGs.


PNG-24 (portable network graphic 24 bit)

• A higher 24 bit version of PNG.

• Excellent results for images with transparency,
which makes it work well for UI buttons. Good at
both sharp edged simplified palettes and large
color range gradients.
• Will create a larger file size than JPG for photos
however.


BMP (bitmap)

• Left over from the days of older versions os OS2
and Windows, Bitmaps for web use dithering,
pattern or noise inclusion to reduce file size.
• Good for making retro web 1.0 graphics.

• Not ideal for maintaining clarity in web images at
reasonable file sizes.


SVG (scalable vector graphic)

• Lossless format that can optionally be defined as
vector points instead of pixels allowing scaling.
• Good for scalable graphics.

• Has limited support in older versions of Internet
Explorer 8 and below.


Choosing Resolution

There are only 72 pixels per inch on most screens.

•Web = 72 dpi (ppi)

•Print Newspaper = 100 dpi (ppi)

•Print Magazine = 300 dpi (ppi)

For Apple retina display see solutions like: http://retinajs.com/


Choosing Color Modes

Our screens display colors in RGB.

•Web = RGB (Red, Green, Blue)

•Print = CMYK (Cyan, Magenta, Yellow, Black)


Image

<img src="myimage.jpg" alt="Alternate Text"
title="Display Title" width="800"
height="600">


Links

• Attributes (href, target)

• Relative vs Absolute

• Types (url, named anchor, mailto)


Links
<a href="http://www.example.com/">This is a Link</a>

<a href="http://www.example.com/">

<img src="URL" alt="Alternate Text">

</a>

<a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:
<p id="tips">Useful Tips Section</p>
<a href="#tips">Jump to the Useful Tips Section</a>


Relative & Absolute Paths
<a href="http://www.example.com/">This is an
absolute url Link</a>

VS

<a href="about.html">This is a relative url Link</a>

Relative urls, link to content inside the same site and provides a file
path relative to the relationship between the two files. Whether
internal to the site or on an external domain, absolute urls provide the
full http url in the file path.


W3C Validation
http://validator.w3.org/

Source: www.w3.org

Tables, Forms, & Iframes

Slides 1.2


Topics

• Tables

• Forms

• Iframes


Tables

<table>

<tr>

<th> Cell Header </th>

<td> Cell Content </td>

</tr>

</table>


Forms

<form action="login.php" method="post">
<input type="text" name="username"
placeholder="username">
<input type="password" name="password"
placeholder="password">
<input type="submit" value="login">
</form>


Inputs

<input type="text" name="username" placeholder="username" required>

<input type="password" name="password" placeholder="password">

<input type="tel" name="phone" placeholder="phone">

<input type="hidden" name="id" value="UID-91283456">

<input type="submit" value="submit">

username password phone


Radio Inputs

<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female">
Female


Checkbox Inputs

<input type="checkbox" name="vehicle" value="bike">
I have a bike
<input type="checkbox" name="vehicle" value="car">
I have a car


Selection Menu

<select name="size">
<option value="small" selected> small </option>
<option value="medium"> medium </option>
<option value="large"> large </option>
</select>


Text Area

<textarea name="message"></textarea>


Iframes

Relative url:
<iframe src="example.html" width="600"
height="400"></iframe>

Absolute url:
<iframe src="http://mysite.com/example.html"
width="600" height="400"></iframe>


HTML5 Media, Semantic
Elements, & Meta Data

Slides 2.1


Topics

• Audio & Video

• Semantic Elements

• Meta Data


Embedding Audio

<audio src="audio.???">


</audio>

Embedding Audio

<audio>

<source src="audio.mp3" type="audio/mp3">

<source src="audio.ogg" type="audio/ogg">

<!-– fall back content here -->

</audio>


Embedding Video

<video src=”movie.???”>


</video>

Embedding Video
<video>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogv" type="video/ogg">

<source src="movie.webm" type="video/webm">

<!-– fall back content here -->

</video>


Video Element Support

Source: www.caniuse.com

Video Codec Support

Source: http://www.wikipedia.org/

Custom JS Video Players

Reviews & Feature Chart: http://praegnanz.de/html5video/


HTML 5 Semantic Elements
• Header • Hgroup

• Footer • Figure

• Nav • Figcaption

• Aside

• Section

• Article


Div Layout


HTML5 Semantic Layout


HTML5 Shim

HTML5 Shim (or Shiv) is a Javascript
file that provides support for IE 8 and
below to handle HTML5 elements.

http://html5shim.googlecode.com/svn/trunk/html5.js

<script
src="http://html5shim.googlecode.com/svn/trunk/html5
.js"></script>


CSS Fix for FF, Safari, & Chrome

Usually located in a pre-built CSS file
such as a reset (see slides 4.2) or
normalize (see slides 4.2). Older
browsers display unknown elements as
inline. The following code sets these
elements to display block.
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, summary
{ display: block; }


Meta Data

• Keywords

• Descriptions


Meta Keywords

A comma separated list of terms that helps to
improve search engine optimization.

<meta name="keywords"
content="wikipedia,encyclopedia">


Meta Description

Paragraph description of your site page. Google
displays first 69 characters of the description in the
search results under the site title and url.

<meta name="description" content="…">

Source: google.com

Styling the Front-end,
Hello CSS

Slides 2.2


Topics

• CSS Overview

• Syntax

• Selectors

• Authority

• Color Values

• Font Declarations


CSS stands for…

• Cascading

• Style

• Sheet


CSS Overview

• Created as a better solution to style HTML
elements
• Has unique syntax separate from HTML

• There are 3 distinct formats for using CSS


CSS Syntax


CSS Formats

• Inline

• Internal

• External


Inline CSS

Looks like:

<p style="font-style:italic;">Lorem
Ipsum</p>

Used in HTML Newsletters. Its disadvantage is that
changing a style across many elements involves
going back into the HTML and changing line by line.


Internal (Embedded) CSS

Looks like:

<style>

p { color:red; }

</style>

Used inside HTML pages. Its disadvantage is that its
styles only effect those on the page it is embedded into.


External CSS

Looks like:
<link rel="stylesheet" href="style.css" />

--------------------inside style.css----------------------

p {

color:black;

}
----------------------------------------------------------

Used by linking an external CSS file to all the html
pages we wish to style. Advantage is that you can
change styles site-wide from a single location.


Selectors (part 1)

• Type
p {…}
• Id
#box {…}
• Class
.thick {…}
• Compound
h1, h2, #box {…}


Type Selectors

p {
color:black;
}

Selects all elements with the matching selector name.

<p>Lorem Ipsum</p>

ID Selectors

#box {
background:blue;
}

Selects all elements with an id attribute value
matching the selector name.
<div id="box">I’m a box.</div>


Class Selectors

.thick {
font-weight:bold;
}

Selects all elements with a class attribute value
matching the selector name.

<span class="thick">I’m thick.</span>


Compound Selectors

h1, h2, #box {
font-family:Arial,Helvetica, Sans-
serif;
}

Selects all matched elements in the compound set.
<h1>Header</h1>

<h2>Subhead</h2>
<div id="box">I’m a box</div>


Selectors (part 2)

• Descendent
#nav li {…}
• Child
#list > li {…}
• Sibling
h3 + p {…}
• Preceded
.styleafter ~ h2 {…}


Descendent Selector
#nav li {

color:black;

}

Selects elements that are descendants of the matching selector name.

<ul id="nav">

<li>child</li>

</ul>


Child Selector
#list > li {
color:black;
}
Select only the elements that are direct children of the
matching selector name (not grandchildren)<ul id="list">
<li>child</li>
<ul><li>grandchild</li></ul>
</ul>


Sibling Selector
h3 + p {
color:black;
}
Selects only sibling elements that appear directly after the
matching selector name.
<h3>An h3 Element</h3>
<p>I'm a p directly after an h3 element.</p>
<p>Not selected</p>


Preceded Selector

.styleafter ~ h2 {
color:black;
}
Styles all matched elements preceding after the selector
name.

<p class="styleafter">Class of
styleafter.</p>
<h2>I'm an h2 positioned after</h2>


Selectors (part 3)

• Universal
* {…}
• Attribute
img[alt="Cat"] {…}
• Psuedo
li:first-child {…}
a:link {…}


Universal Selector

* {
color:black;
}
This will style anything that has not been
previously styled by anything else.

…

Attribute Selector

img[alt="Cat"] {
border: 1px solid black;
}
Selects elements who have an attribute with
matching value condition.

<img src="myimage.jpg" alt="Cat">


Psuedo Class Selector

a:link {
text-decoration:none;
}
Selects elements based on a particular event
state or relationship among other elements.

<a href="#">link</a>


Authority / Inheritance rules
If you use conflicting styles on the same element, ID over
rules Class which over rules Type which over rules *
(universal). Generally the more specific a selector the more
authority it has. If a more specific selector is not defined for
an element it will inherit styles from a previously defined
general selector statement.

If multiple Classes are applied to the same element the
Class listed furthest to the right over rules its neighbors to
the left.

Uses “last man” rule. When conflicts with equal authority
arise, CSS will listen to the last style it was told to apply.

CSS Color Values

• Names

• Hexadecimal

• Rgb

• Rgba


Standard Color Names

There are 147 color names 16 of which are standard:

aqua, black, blue, fuchsia, (gray, grey), green, lime,
maroon, navy, olive, purple, red, silver, teal, white,
and yellow.


Hexadecimal

There are exactly 16,777,216 (see 16 million
colors). These colors when used in different
combinations can produce any color that is
needed. For example, in the color red, the
color code is #FF0000, which is '255' red, '0'
green, and '0' blue.

Hex system values use combinations of the
characters 0-9 as well as A-F.


RGB & RGBA

RGB (Red Green Blue) and RGBA (Red
Green Blue Alpha) offer millions of colors by
mixing varying amounts of red green and
blue light; using a sclae of (0-255).
rgb(100,86,92);
A (Alpha) allows an additional accepted value
from 0-1 (o%-100% opacity)
rgba(100,86,92,0.5);

More Text Declarations

letter-spacing: normal | 1em | 12px | 12pt;

line-height: normal | 1em | 12px | 12pt;

word-spacing: normal | 1em | 12px | 12pt;

word-wrap: normal | break-word;

white-space: normal | no-wrap;


Building Page Layouts

Slides 3.1


Topics

• Display

• Box Model

• Scaling

• Box Aesthetics

• Float Positioning


Element Display


Box Model

• Padding (spacing inside an element)

• Margin (spacing outside an element)

• Border (colors, styles)


Box Model

Source: mattryall.net

2 Box Models

Source: wikipedia.org

Box Model Hack Solutions

• CSS 1 & 2 hacks

• Box in a box method

• CSS 3 box-sizing property


CSS Hacks (Don’t Do this!)

div {
width: 100px;
}
div {
width: 140px;
width: 100px;
}


Box in a Box Method (100% support)

div { width: 100px; padding:0; margin:0; }

.i { padding: 1em; }

<div>

<div class="i"> Text </div>

</div>

Box-sizing Property (94.3% support)

div {

box-sizing: border-box;

}

/* IE model = border-box

W3C model = content-box */


CSS 3 Box-sizing Support

Source: www.caniuse.com

Scaling Elements

• Static (px)

• Fluid (%)

• Thresholds (min, max)

• Auto


Content Overflow

overflow: visible | hidden | scroll | auto;


Box Aesthetics

• Background (color, images)

• Borders

• Border Radius (round corners)

• Box Shadow

• Opacity

• Gradients


Border Styles


Border Radius

border-radius: 20px;

-webkit-border-radius: 20px;

Source: master-script.com

Border Radius

Source: master-script.com

Border Radius Support

Source: caniuse.com

Box Shadow

Source: aregnoz.blogspot.com

Opacity


Opacity
filter: alpha(opacity=50); /* IE*/

-moz-opacity: 0.5; /* Older than Firefox 0.9
*/

-khtml-opacity: 0.5; /* Safari 1.x (pre
WebKit!) */

opacity: 0.5; /* Modern! */


Opacity Support

Source: caniuse.com

Gradient

background-color: #F47A20;

background-image: -moz-linear-gradient( #FAA51A, #F47A20);

background-image: -webkit-gradient( linear, 0 0, 0 100%,

color-stop( 0, #FAA51A),

color-stop( 1, #F47A20)

);


Gradient Support

Source: caniuse.com

Floating


Floating

#sidebar {

float: left;

}

#main {

float: right;

}


Clearing


Clearing

footer{

clear: both;

}


Collapsed Parents


Clearfix Solution
.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

height: 0;

line-height: 0;

}


Apply Class of Clearfix
<div class="container clearfix">

I'm a static parent.

<div class="box left">

I'm a box floating left.

</div>

I need a clear fix class if you do not
want me to collapse when I have floating children
inside me!

</div>


Advanced Positioning
Techniques

Slides 3.2


Topics

• Advanced Positioning

• Z-Index (Layering)

• Image Sprites & Rollovers


Relative Positioning

.box {

position:relative;

top: 25px;

left: 200px;

}


Relative Positioning


Absolute Positioning

.box {

position:absolute;

top: 0;

right: 0;

}


Absolute Positioning


Fixed Positioning

.box {

position:fixed;

top: 0;

right: 150px;

}


Fixed Positioning


Z-Index (layers)

.bluebox {

position:relative;

top: 125px;

left: 125px;

z-index:3;

}


Z-Index (layers)


Image Sprites
NO YES


Image Sprites
Sprites can include 2 states for a single icon or they can
contain multiple states for many different menu items.

One advantage is quicker loading time. Load navigation
images all at once. No waiting during the mouseover event.


Single icon, 2 states


CSS Sprite Rollover


Responsive Layout Techniques

Slides 4.1


Topics

• Modern Responsive Layout Techniques

• CSS3 Media Queries

• Meta Device Width

• JavaScript Fixes


Responsive Layouts

Today websites are being viewed on an increasingly
large number of different devices; each with their own
screen sizes and proportions.

Different Strategies have emerged for dealing with
layout changes and sizing differences.


Responsive Layouts

Source: business2community.com

Solutions

Device detection by checking the requesting devices
header info is a common way to see what the specs for
a given device are and then serve up the appropriate
files back to the device…

One solution is to build separate sites for mobile and
desktop (like twitter.com vs mobile.twitter.com),
another solution is to create a single site like
(sweethatclub.org) and alter the styling and layout via
CSS media queries.


Layout Changes

In order to get content to display on smaller devices,
changes are made to the pages…

Common changes in layout include hiding content or
moving content around to match the given devices
available screen area; like switching the #wrapper or
#container elements to a fluid width (i.e width: 90%)
and setting floating columns to float:none; and width:
100%; to change to a single column structure.


Fluid Images and Media

Images, tables, form inputs, video, and audio also are
usually set to fluid widths (i.e. width: 100%;) so as to
allow this content to scale down smaller as the device
screen decreases.


Text & Link Changes

It is also common to change text and link sizes as the
screen area decreases (i.e. font-size: 0.5em;).


CSS3 Media Queries

@media only screen and (max-width: 768px) {

header nav a {

font-size: 0.8em;

}

}

/* Evaluate a devices dimensions and set or
change styles when the size matches */


Meta Device Width

<meta name="viewport" content="width=device-
width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0”>

<!– Prevents devices from zooming out or in
and instead rely on the media query styling to
change the layout accordingly -->


JS Fixes

iOS Orientation Zoom Fix is a
JavaScript file that corrects a zoom
bug on Apple Devices like the iPhone.

https://raw.github.com/Wilto/iOS-Orientationchange-
Fix/master/ios-orientationchange-fix.js

<script src="https://raw.github.com/Wilto/iOS-
Orientationchange-Fix/master/ios-orientationchange-
fix.js"></script>


JS Fixes

Media Queries Fix gives support for
media queries to work in older versions
of IE.

http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js

<script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-
mediaqueries.js"></script>


Resets, Grid Systems,
Templates, & Site Publishing

Slides 4.2


Topics

• IE Conditionals

• Resets

• Normalize

• Grid Systems

• Templates & Frameworks

• Site Publishing


IE Conditionals

CSS Reset


Popular CSS Resets

• Meyers

• Toucan

• YUI

• Poor-man’s


Poor Man’s Reset

*, html, body { padding: 0;
margin: 0; }
html { font-size: 1em; }
body { font-size: 100%; }
a img, a:link img, a:visited img
{ border: 0; }


CSS Normalize

Normalize is similar to a reset except
that it goes back in and adds some
style to get you started. For example,
text sizing and fonts are already set.

http://necolas.github.com/normalize.css/

<script
src="http://necolas.github.com/normalize.css/"></scr
ipt>


Popular CSS Grid Systems

• 960

• Blueprint

• SenCSS

• The Semantic Grid System

• Twitter Bootstrap (grid included)


CSS Grid Systems


HTML5 Frameworks

html5boilerplate.com

html5boilerplate.com/mobile


Twitter Bootstrap

twitter.github.com/bootstrap


FTP (File Transfer Protocol)
Things you will need to connect:
•Ftp Address
•User login
•Password

Should be provided by your host

company or server admin.


Learn HTML & CSS From Scratch in 30 Days

More Related Content

Viewers also liked

Similar to Learn HTML & CSS From Scratch in 30 Days

Recently uploaded

Learn HTML & CSS From Scratch in 30 Days