Introduction to HTML and CSS

HTML & CSS
An Introduction
By Mario Hernandez
Web Designer & Front-End Developer
Web: designsdrive.com
Twitter: @DesignsDrive

Agenda
HTML5
● Document Object Model (DOM)
● Doctype
● Semantic Tags
● Comments
● Best practices

Agenda
CSS3
● What it is, how it works & how to use
● IDs vs. Classes
● Inline and Block Elements
● Shorthand
● FLOATS
● Comments
● Intro to CSS3 Properties (if time permits)

Agenda
Putting it all together
● Project Structure
● Website Layouts
● Tools to Improve Workflow

What is HTML?
Wikipedia:
is the main markup language for creating web pages and other
information that can be displayed in a web browser.

Setting the standards
World Wide Web Consortium (W3C)
The Web Hypertext Application Technology Working Group
(WHATWG) i

Document Object Model (DOM)
The HTML DOM defines a standard way for
accessing and manipulating HTML documents.

DOCUMENT
ROOT ELEMENT
HTML
DOM

DOCUMENT
ROOT ELEMENT
HTML
ELEMENT
<HEAD>
DOM

DOCUMENT
ROOT ELEMENT
HTML
ELEMENT
<HEAD>
ELEMENT
<BODY>
DOM

DOCUMENT
ROOT ELEMENT
HTML
ELEMENT
<HEAD>
ELEMENT
<BODY>
ELEMENT
<TITLE>
DOM

DOCUMENT
ROOT ELEMENT
HTML
ELEMENT
<HEAD>
ELEMENT
<BODY>
ELEMENT
<TITLE> ELEMENT
<p>
ELEMENT
<a>
ELEMENT
<H1>
DOM

Doctype
HTML4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype
HTML4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!Doctype html>

HTML5 Semantic Elements
Semantic = Meaning
Semantic Elements = Elements with meaning

Semantic = Meaning
Semantic Elements = Elements with meaning
Examples of non-semantic elements: <div> and <span> -
Tells nothing about its content.
Examples of semantic elements: <form>, <table>,
and <img> - Clearly defines its content.

New HTML5 Semantic Elements Include:
<header>
<nav>
<section>
<article>
<hgroup>
<canvas>
<video>
<audio>
<aside>
<figcaption>
<figure>
<footer>

Visual Representation of new HTML5 Semantic Elements

Comments

Best Practices
● Comment
● Semantic Tags
● Separate Markup, Styling and Scripting

What is CSS?
Wikipedia:
Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup
language. Its most common application is to style web pages written
in HTML and XHTML.

How it works
Syntax:
A CSS rule has two parts, a selector and one or more
declarations.

How to use
● External Style Sheet
● Internal Style Sheet
● Inline Style

How to use
External Stylesheet
<head>
<link rel="stylesheet" type="text/css" href="styles.
css">
</head>
You can use one or multiple stylesheets

How to use
Internal Stylesheet
<head>
<style type="text/css">
body {color: black; font-family: Helvetica, Verdana,
san-serif;}
p {line-height: 1.5;font-size:14px;}
</style>
</head>

How to use
Inline Style
<div style="background: black; color: white">
...
</div>

Cascading
● Browser default
● External style sheet
● Internal style sheet (in the head section)
● Inline style (inside an HTML element)
Rules are applied from top to bottom. Last rule will
overwrite previous rules.

IDs vs. Classes
IDs are prefixed with #
Classes are prefixed with a period (.)
Example: #myID
Example: .myClass

IDs vs. Classes
<div id="myID">This is a container</div>
<div class="myClass">This is a
container</div>
IDs or Classes can use UPPER and lower case. They can
also use numeric values as well as non-alpha-numeric
values
Examples: MYID, myclass, my-id

Inline & Block Elements
Inline elements are those that on their own have no effect in
the structure or layout of a page.
Example: <span>, <em>, <a>, <strong>

Block level elements are those that affect the structure and
layout of a page.
Example: <div>, <p>, h1-h6

Block level elements are those that affect the structure and
layout of a page.
Example: <div>, <p>, h1-h6
Block level elements generate a line break and can have
dimensions.

Shorthand
p {margin: 4px 4px 4px 4px;}
p {margin:4px;}
.box {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.box {border: 1px solid #000;}

Shorthand
body {
background-color: #FFFFFF;
background-image: bg.jpg;
background-position: left top;
background-repeat: repeat;
}
body {background: #FFF url(bg.jpg) 0 0 no-
repeat;}

Resources
TWITTER.com
http://www.w3schools.com/
http://paulaborowska.com/a-brief-introduction-to-html5-2/
CSS-Tricks.com
http://html5please.com/
http://css3please.com/
http://www.abookapart.com/products/html5-for-web-designers
http://www.abookapart.com/products/css3-for-web-designers
http://readwrite.com/2013/05/31/programming-core-skill-21st-century

Questions
Mario Hernandez
http://designsdrive.com
Twitter
@DesignsDrive
Email
designsdrive@gmail.com

Introduction to HTML and CSS

Introduction to HTML and CSS

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Introduction to HTML and CSS

Similar a Introduction to HTML and CSS(20)

Más de Mario Hernandez

Más de Mario Hernandez(15)

Último

Último(20)

Introduction to HTML and CSS