HTML 101

HTML 101
M+M Developer Week
August 23, 2011
Media + Marketing

Table of Contents
History
Conventions / Coding Standards / Definitions
Hands On
Create an HTML document
Style a document with CSS
The Promise of HTML5

History

http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html

“…separating structure from presentation.”
HTML defines content
CSS defines presentation
http://www.webstandards.org/about/mission/

Conventions / Coding Standards
Tags are containers and require an open and close
Tags are in lower-case
Tags are properly nested
Attributes in quotes
<h1 class=“heading”> </h1>
<ul id=“main-list”>
<li> </li>
<li> </li>
</ul>

Definitions
element : Inclusive of HTML start and end tag
id : Unique indentifier for an HTML element
class : Non-unique attribute used to target CSS
<h1 class=“heading”> </h1>
<ul id=“main-list”>
<li> </li>
<li> </li>
</ul>

Choose a Doctype
The doctype declaration is required to begin an HTML document and tells the browser in what version of HTML the page is written.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>

<head> Element
<head> </head> is the container for the page’s definition elements.
<head>
<title>HTML 101</title>
<meta name=“description” value=“My first HTML page.” />
<meta name=“keywords” value=“html, html5, developer week” />
</head>

<body> Element
<body> </body> is the container for the page’s content.
<body>
<h1>HTML 101</h1>
<p>This is my first web page.</p>
</body>
html101a.html

Common Elements
Containers, Headers, Paragraph, Lists, Images
<div> </div> : container
<a> </a> : anchor/link
<h1> </h1>, <h2> </h2>… <h6> </h6> : headings
<p> </p> : paragraph
<img /> : image
<ul> </ul> : unordered list
<ol> </ol> : ordered list
<li> </li> : list item
html101b.html

Hands-On
Open notepad.exe or your text editor of choice.
Create a file “html101.html” and save it to your C:// drive, or location of your choice.
Display http://www.activenetwork.com/Assets/ActiveNetwork.com/media/active-com.jpg and the text, “Hello, world.”, on a page. Link the image and text to Active.com.

Style
Cascading Style Sheets (CSS) define the page’s look and feel.
<style type="text/css">
body {text-align:center; font-family:Verdana;}
.bounding-box {width:990px; text-align:left; margin:0 auto;}
h1, h2, h3 {font-family:Arial;}
a.lede {text-align:center; display:block;}
a.lede img {padding:2px; border:2px solid #ccc;}
#example {float:left; width:48%;}
#color {float:right; width:48%;}
#colors {color:yellow;}
ol li {padding:0 0 5px;}
.red {color:red;}
.blue {color:blue;}
.yellow {background-color:#666;}
.float {float:left; width:48%;}
.right {float:right;}
</style>
html101c.html

http://csszengarden.com

Hands-On
Change the font family, size, and weight of your text.
Center the globe image
Change the page’s background color and text color.

The Promise of HTML5
Semantic containers
nav, header, footer, section , article
Form fields
email, url, date, placeholder, range
Geolocation
http://html5demos.com/geo
Native <video> and <audio> elements
Offline caching, local storage & databases
html101-form.html

Questions?

http://community.active.com	4420
http://webcache.googleusercontent.com	2
http://meltwaternews.com	2
http://www.5z5.com	1

HTML 101

by The Active Network

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 4,425

Statistics

HTML 101 Presentation Transcript