HTML Basics

Webdesign Basics

What is the Internet?

Most people use a

browser on their

computer to view

webpages.

Wikipedia on Safari Mobile, iPhone

Wikipedia on a regular cellphone

iPhone applications Widgets

3 Layers

HTML (structure)

CSS (presentation)

JavaScript (interaction)

HTML

HyperText Markup Language

Files usually have .htm or .html as extension

Basic Structure of an HTML Document

• Doctype

• Head

‣ Title

‣ Metadata

• Body

‣ Content

Basic Structure of an HTML Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World</title></head><body> <h1>Hello World</h1></body></html>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

Tags (HTML Elements)

Container Elements

<tag>text or other elements go here</tag>start tag + content + end tag

Empty Elements

<tag />single tag

Headings

<h1> Heading Level 1 (most important)

<h2><h3><h4><h5><h6> Heading Level 6 (least important)

Headings

<h1>This is the main heading</h1><h2>This is a subheading</h2>

Paragraphs

<p>This is a paragraph.</p><p>This is another paragraph.</p>

Forced Line Breaks

<p>This is a very very long line of text.<br />This piece of text is forced to the next line.</p>

Unordered Lists

<h1>Colors</h1><ul>

<li>Blue</li><li>Red</li><li>Orange</li><li>Green</li>

</ul>

Ordered Lists

<h1>My Favorite Movies</h1><ol>

<li>Star Wars Episode IV: A New Hope</li><li>A Nightmare On Elm Street</li><li>Fritz the Cat</li><li>Kids</li>

</ol>

Definition Lists

<dl><dt>CSS</dt><dd>Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in HyperText Markup Language.</dd>

</dl>

Emphasis

<p>Within a larger body of text, a piece in <em>italics</em> does not stand out much; instead, it signifies a context difference only <em>while</em> the text is being read.</p>

http://en.wikipedia.org/wiki/Emphasis_(typography)

Strong Emphasis

<p>By contrast, <strong>boldface</strong> makes text darker than surrounding text. With this technique, the emphasized text strongly stands out from the rest.</p>

http://en.wikipedia.org/wiki/Emphasis_(typography)

First Assignment

This will be a collaborative project.

The end product will be a small website.

Each one of you will make one page.

You will learn about:

• Structuring text (HTML)

• Typography for the web (CSS)

• Art Direction for the web (CSS + Photoshop techniques)

Part I: Structuring Text

• Choose a page from Wikipedia with a lot of text.

• Analyse the text and remove all unnecessary items ([footnotes], [edit],

image captions, ...).

• Add structure to the text using the html tags you’ve just learned.

The final stuctured text

will look somewhat like

this page.

Software

For the class asignments we will use Firefox

as our main development Browser.

You will also need to install the following add-ons:

• Web Developer by Chris Pederick

• Firebug by Joe Hewitt & Rob Campbell

Software

Install a few other browsers on your computer

• Safari

• Opera

• Chrome (Windows Only)

• Internet Explorer (Windows Only)

• Other less popular browsers: Flock, Camino, …

Software

In class we will use TextWrangler and Vormplus Webtools to

create HTML and CSS files.

http://www.barebones.com/products/TextWrangler/

http://vormplus.info/rmatica/vormplus-webtools





Software

Get a good text editor that supports

syntax highlighting.

Mac OS X

• TextWrangler

• BBEdit

• TextMate

• Espresso

Windows

• Crimson Editor

• Notepad++

• UltraEdit

Questions?

Software Demo

Installing Firefox and Add-ons

Installing TextWrangler and Vormplus Webtools

Working with Vormplus Webtools

HTML Basics

Education

Transcript of HTML Basics