HTML/CSS Lecture 1

Introduction to HTML and
CSS
Lecture 1

Who is this guy?
Lee Lundrigan
Soft ware Engineer
Blazing Cloud, Inc.

iPhone / iPad Applications in Objective-C
Javascript
HTML / CSS

Wrote a cross browser CSS framework for
iPhone, Android, Blackberry, and Windows Mobile.

Wrote a book - Pro Smartphone Cross-Platform
Development

What are we going to
talk about in this class?

XML

HTML foundation

CSS foundation

Website components

What will we not cover
in this class?
Differences between HTML and XHTML

Cross browser compatibility (including the mobile
space)

HTML 5 and CSS 3

Webpage Layouts

Todays Goals

Integrated Development Environment (IDE)

XML

HTML / XHTML

Introduction to CSS

Integrated Development
Environments
Oxygen XML Editor

http://www.oxygenxml.com/

Aptana

http://www.aptana.com/

TextEdit (on Mac)

TextPad (on Windows)

XML

Deﬁnition: Extensible Markup Language

XML is a simple, very ﬂexible text format derived from
SGML

W3C sets the XML standards

Current version: 1.0

XML Cont....
Tag: A markup construct that begins with "<" and
ends with ">"

Three different kinds of Tags

start-tags <tag>

end-tags </tag>

empty-tags <tag />

Declaration: Optional information about the XML
document
<?xml version="1.0" encoding="UTF-8"?>

XML Cont...
Attribute

A name/value pair that exists within a start-tag
or empty-element tag.

<img src=”ﬁrefox.png” alt=”Firefox Icon” />

The <img /> tag is an empty element tag with
two attributes: src and alt.

XML Example
<?xml version="1.0" encoding="UTF-8" ?>
<ship color=”blue”>
<captain>Mr.McGee</captain>
<crew>
<member>Joe</member>
<member>Jane</member>
</crew>
<anchored value=”true” />
</ship>

LAB 1

Lets build a simple XML document together

<HTML>

The markup language used to describe web pages.

HTML stands for:

Hypertext Markup Language

What’s a Markup
Language?

It is a set of symbols and 
rules in a document that 
describe its structure and 
format.

Who decides these
rules?
W3C (WORLD WIDE WEB CONSORTIUM)

W3C is an international standards body for both
HTML and CSS

Formed in October 1994

Founded by Tim Berners-Lee

Has 356 members as of September 09’

HTML Tags

are special keywords surrounded by angle bracket
like <div>

Most HTML tags come in pairs like <div></div>

Consisting of an opening and closing tag

Basic Tags
<a href=”http://www.google.com”>This is a link tag to Google.com</a>

<p>This is a paragraph tag</p>

<div>This tag represents a division in the page (called a “div”)</div>

<img src=”C:Desktopimage.png” alt=”My Image” />

<h1>This is heading 1..the largest heading</h1>

<h2>This is heading 2..the second largest heading</h2>

Heading tags are deﬁned h1-h6

Heading tags work just like headings in your favorite word processor

Basic Tags Continued

<br /> is a line break and can be used inside text-
nodes.

<ul> is an unordered list. It has children known as
<li> list items. Next to each list item will be a
bullet.
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Mouse</li>
</ul>

.HTM, .HTML or .XHTML?
Document extensions

.HTM is the same as .HTML

.HTM is a remnant from the old days when ﬁle
extensions were only three letters

.XHTML is the same as a .HTML document
except an .XHTML document is a well-formed
XML document

Structure of an HTML
Document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>

Doctype (DTD)
Document type declaration

Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML == Markup MUST be well formed XML

Transitional == Contains all HTML elements and
attributes, INCLUDING presentational and
deprecated elements (like the <font> tag)

<html>

The <html> tag tells the browser that this is an
HTML document.

The html element is the outermost element in
HTML and XHTML documents. The html element
is also known as the root element.

<head>
hidden from the user

can contain:

meta information

stylesheet references

scripts

title

<body>
The content of the document

text

hyperlinks

images

tables

lists

etc...

Deprecated what?

Basically, try to avoid using things marked as
DEPRECATED

While they are supported in the current version
there is no guarantee future versions will
continue support

Good Practice
HTML elements should be lowercase

Why? The W3C recommends it and may require
it in the future.

All elements should be closed.

Close an element by either adding a forward
slash to the start element <br /> or add a
forward slash to the ending element like <div></
div>

Helpful documentation

W3schools

http://www.w3schools.com/tags/default.asp

http://www.w3schools.com/html/default.asp

http://en.wikipedia.org/wiki/XML

http://en.wikipedia.org/wiki/HTML

Homework

Make an HTML page using images and
paragraphs (include headers and sub headings)

Make a link on the page to a new page

READ:

Well-formed XML:

http://www.developer.com/net/vb/article.php/
797861/Well-Formed-XML.htm

HTML/CSS Lecture 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to HTML/CSS Lecture 1

Similar to HTML/CSS Lecture 1 (20)

More from Lee Lundrigan

More from Lee Lundrigan (6)

Recently uploaded

Recently uploaded (20)

HTML/CSS Lecture 1

Editor's Notes