WEBSITE FUNDAMENTALSMarkup Documents

MARKUP DOCUMENTSWhat is HTML?

WHAT IS HTML?

HTML is the language websites are written in. The letters stand for HyperText Markup

Language. It might sound complicated, but it’s actually

pretty easy to understand.

WHAT IS HTML?

HTML has two essential features:1. Hypertext2. Universality

WHAT IS HTML?

HyperTextHyperText means you can create a link in a Web

page that leads the visitor to any other web page or to practically anything else on the internet.

It means that information on the Web can be accessed from many different directions.

WHAT IS HTML?

Universality:Universality means that because HTML documents

are saved as Text Only files, virtually any computer can read a Web page.

It doesn’t matter if your visitors have Macintosh or Windows machines, or whether they’re on a Unix box or even a handheld device like a Palm.

The Web is open to all.

MARKUP DOCUMENTSHTML VS. XHTML: What should you use?

HTML VS. XHTML

XHTML stands for eXtensible HyperText Markup Language; it is the simplicity of HTML with the power and flexibility of XML and became the perfect foundation for CSS.

HTML VS. XHTML

XHTML is a great improvement over HTML. It’s stronger, more flexible, more powerful,

more likely to be supported in the future, and can be expanded to fit any need.

However, there are times when you just need to publish a web document without having to stress over every last quotation mark.

MARKUP DOCUMENTSMarkup: Elements, Attributes and Values

MARKUP

XHTML is an ingenious system of including information about the content right in a text document.

This information - called markup, accounting for the m in XHTML - can include formatting instructions as well as details about the relationships between parts of the document.

However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.

MARKUP

XHTML has three principle types of markup:1. Elements2. Attributes3. Values.

ELEM

EN

TS

Elements are like little labels that identify and structure the different parts of a Web page.

Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.

<hr />

<td colspan=“3”>February</td>

<img src=“blueflax.jpg” width=“300” />

ELEM

EN

TS

Elements can contain text and/or other elements, or they can be empty.

A non-empty element consists of an opening tag, the content, and a closing tag.

<hr />

<td colspan=“3”>February</td>

<img src=“blueflax.jpg” width=“300” />

ELEM

EN

TS

An empty element looks like a combination opening and closing tag, with an initial less than sign, the element’s name followed by any attributes it may have, a space, a forward slash, and the final greater than sign.

<hr />

<td colspan=“3”>February</td>

<img src=“blueflax.jpg” width=“300” />

AT

TR

IBU

TES

AN

D V

ALU

ES

Attributes contain information about the data in the document, as opposed to being that data itself.

Some attributes can accept any value at all, others are more limited.

Perhaps the most common are those that accept enumerated or predefined values.

In other words, you must select a value from a standard list of choices.

<hr />

<td colspan=“3”>February</td>

<img src=“blueflax.jpg” width=“300” />

AT

TR

IBU

TES

AN

D V

ALU

ES

Many attributes require a number or percentage for their value, particularly those describing size and length.

A numeric value never includes units.

Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.

<hr />

<td colspan=“3”>February</td>

<img src=“blueflax.jpg” width=“300” />

AT

TR

IBU

TES

AN

D V

ALU

ES

The attributes controlling colour can contain values that are either a colour name or a hexadecimal representation of the red, green, and blue content of the colour.

Some attributes reference other files and thus must contain values in the form of a URL, or Uniform Resource Locator, a file’s unique address on the Web.

<p color=“yellow”>

<p color=“#FFFFFF”>

<a href=“test.html”>Click Here</a>

<a href=“http://www.google.com/”>Goo

gle Search</a>

BLO

CK

VS

. INLIN

E

An element can be block-level or inline.

If it is block-level, it will always be displayed on a new line, like a new paragraph in a book.

If it is inline, it will be displayed in the current line, like the next word in a paragraph.

Block Level Elements<div> <p> <table>

Inline Elements<span> <a>

BLO

CK

VS

. INLIN

E

Block-level elements are considered the bigger structural pieces of your Web page, and as such can usually contain other block-level elements, inline elements, and text.

Inline elements, in contrast, can generally only contain other inline elements and text.

Block Level Elements<div> <p> <table>

Inline Elements<span> <a>

PA

REN

TS

AN

D C

HIL

DR

EN

If one element contains another, it is considered to be the parent of the enclosed, or child element.

Any element contained in the child element is considered descendants of the outer, parent element.

You can actually create a family tree of a Web page that both shows the hierarchical relationships between each element on the page and uniquely identifies each element.

<div>

<p></p>

<p>

<a></a>

</p>

</div>

PA

REN

TS

AN

D C

HIL

DR

EN

This structure is a key feature of HTML code and facilitates adding style to the elements and applying JavaScript effects to them.

<div>

<p></p>

<p>

<a></a>

</p>

</div>

PA

REN

TS

AN

D C

HIL

DR

EN

It is important to note that when elements contain other elements, each element must be properly nested and is fully contained within its parent.

Whenever you use a closing tag, it should correspond to the last unclosed opening tag.

In other words, first open A then open B, then close B and then close A.

<div>

<p></p>

<p>

<a></a>

</p>

</div>

MARKUP DOCUMENTSCSS

(Cascading style Sheets)

CSS

Most word processors today include a way to make changes to text not just word by word, but throughout an entire document using styles.

Styles collect all the different properties, such as font family, size, and colour that you want to apply to similar types of text - titles, headers, captions, and so on - and give these groups of properties a common name.

CSS

CSS brings to the Web the same convenience for setting styles that’s available in one central location to affect the appearance of a particular XHTML tag on a single Web page or across an entire Web site.

Although CSS works with XHTML, it is not XHTML. Rather, CSS is a separate code that enhances the abilities of XHTML, by allowing you to redefine the way that existing tags display their content.

MARKUP DOCUMENTSTypes of CSS Rules

TYPES OF CSS RULES

The best thing about Cascading Style Sheets is that they are amazingly simple to set up.

They don’t require plug-ins or fancy software - just text files with rules.

A CSS rule specifies the XHTML to which a style or definition applies, and then defines the style, or how the selected XHTML should behave in the browser window.

You can set up rules to tell a specific XHTML tag how to display its content, or you can create generic rules and then apply them to tags at your discretion.

TYPES OF CSS RULES

The three most common selectors or ways to select the XHTML to which a style applies, are:1. XHTML Selector2. Class Selector3. ID Selector

XH

TM

L S

ELEC

TO

R

The XHTML element’s name is used as a selector to redefine the associated XHTML tag

div { ... }

p { ... }

a { ... }

CLA

SS

SELEC

TO

R

A class is a “free agent” that can be applied to an XHTML tag.

You can name the class almost anything.

Because it can be applied to multiple XHTML tag, a class is the most versatile type of selector

.class

.menuItem

.clear

ID S

ELEC

TO

R

Much like classes, IDs can be applied to any XHTML tag, but only once on a given page to a particular tag to create an object for use with a JavaScript function

#ID

#navigation

#footer

MARKUP DOCUMENTSThe parts of a CSS rule

THE PARTS OF A CSS RULE

All CSS rules consist of a selector and a declaration block.

The declaration block, which is surrounded by curly braces, is made up of declarations, which are pairs of properties and values separated by a semicolon.

SELEC

TO

RS

Selectors start each rule, appearing before the left curly brace

The selector can be a XHTML tag selector, a class, an ID, or a combination of these

selector { property: value; }

PR

OP

ER

TIE

S

Properties identify the style that is being defined.

There are several dozen properties, each responsible for an aspect of the page content’s behaviour and appearance.

selector { property: value; }

VA

LU

ES

Values are assigned to a property to define its nature.

A value can be a keyword such as “yes” or “no”, a number, or a percentage.

The type of value used depends solely on the property to which it is assigned.

selector { property: value; }

MARKUP DOCUMENTSWhere to put CSS Rules

WHERE TO PUT CSS RULES

You can set up rules in three places:1. Inline2. Embedded3. External

INLIN

E

In an XHTML tag within the body of your document, to affect a single tag in the document.

This type of rule is often referred to as an inline rule.

<p style=“color: red;”>This is a paragraph displayed in red.</p>

EM

BED

DED

In the head of a document, to affect a single Web page.

This type of rule is called an embedded rule.

<style>

p { color: red; }

</style>

EX

TER

NA

L

In an external document that is then linked or imported into your XHTML document(s), to affect an entire Web site.

This type of rule is called an external rule.

# STYLESHEET: screen.css

p {

color: red;

}

WHERE TO PUT CSS RULES

The position of a rule in relationship to the document and other CSS rules determines the scope of the rule’s effect on the document.

MARKUP DOCUMENTSCSS and Markup languages

CSS AND MARKUP LANGUAGES

CSS is not XHTML; it simply means that XHTML now relies on the capabilities of CSS.

The W3C’s thinking is this:

Style sheets should be used to “relieve XHTML of the responsibilities of presentation.”