Markup Languages

Controlling the Display

Of Web Content

Markup LanguagesThere are two components to any

documentWhat it says (content)How it looks

A markup language uses a special syntax to imbed information about how the content should be displayed in the file that contains the content.

HypertextThe basic idea of hypertext has been

around since 1945 when Vannever Bush suggested the usefulness of being able to automatically follow references from one document to another

Think of it as providing non-linear access to information

Hypertext Markup LanguageA markup language designed for

displaying information on the webStandard maintained by the World Wide

Web Consortium (w3c.org) Current standard is 4.01 Designed using a metalanguage called

SGMLHTML is being transitioned to XHTML

XMLExtensible Markup LanguageHTML has a limited number of element

namesAll browsers need to recognize these element

names XML allows a user to define new element

names and specify how they are used

Defining XML LanguagesUse XML Scheme language or a DTD to

specify the tags that can be used and how to use them

Use cascading style sheets or XSL to define how the elements of the language are displayed

SyntaxDocument should start with an XML declaration

<?xml version="1.0" encoding="UTF-8"?>

An XML document consists of a hierarchy of nested elements.<tag>content</tag>The root element encloses all the other elements

Regular syntax makes it easy to parse

Well-Formed XMLhas a root elementuses correct casecloses all elementshas elements nested properlyencloses all attributes in double quotes

XML Elements

<tag>content</tag>tag an element name optionally

followed by a list of attributescontent can include other elementsThe ending tag needs to have the same

name as the start tagAll elements must be closed

Elements with no contentSome elements may have only attributes

associated with them for example, an image has a source file as an

attribute and no content

In this situation, you can use the special form

<name attributes />

TagsTags are enclosed by < >Tags consist of a name followed by zero

or more attributesAttributes are separated by white spaceSome tags can appear only in certain

contexts

AttributesAttributes have the form

Attrname="value"

The value must have double quotes around it

Attributes may be required or optional

Who uses XML?Ant build files are XML filesMac OS X preference files use XML

XHTMLXHTML is very similar to HTML except the

syntax is stricterBased on XML instead of SGML A DTD (Document Type Definition) is used to

define the allowed elements which are basically the same as those used in HTML

Names of tags and attributes are all lower case in XHTML

Types of Markup ElementStructural - describes purpose (e.g.

headers and titles)Presentational - describes how it looksHypertext -links to other documents or

other parts of the document

Trend is to move presentational markup into separate document (e.g. CSS).

Top-level elements Elementshtmlhead

Contains elements describing document

bodyCan contain only block-level elements

Head Elements<title> - page title generally appears

in browser title bar<style> <link> - related documents<meta> - data about document<base> - URL<script> - language for client-side

scripting

Block-level ElementsBehave like paragraphs

Headings <h1> … <h6><p> for paragraphs<pre>, <blockquote> for pre-formatted text

and quotations <div> to create blocksLists - <ul>, <ol>, <dl> Tables and Forms <table> <form><hr> for horizontal lines

Inline ElementsBehave like words, characters, phrases

<a> for anchors<br> line break<img> for imagesEmphasis and styling <em>, <kbd>, <sup>, <sub>, …In HTML, there are tags like <font>, <b>, <i> that you should now implement in a stylesheet

Odds and EndsEntities are escape sequences for characters that are

used by HTML and some non-keyboard characters&nbsp; &lt; &gt; &amp;

Special characters can be specified by their unicode value.&#169; &#162;

Comments are enclosed by<!-- … ->

Minimal HTML Document<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en">

<head><title>in title bar</title></head><body>Marked-up content</body></html>

LinksThe <a> tag is used for making links,

either internally or externallyAttribute href="location" where

location can be a URL or a relative path or a name in the current document

Attribute name allows you to create label to a particular part of the document for local links

ImagesYou can link to an image file and have

that file open in the browserYou use the image tag to embed an image

into another document<img src="image"> where image is

the location of the image filejpg, gif and png formats supported

Page LayoutFor vertical layout use paragraphs,

headings and rulesIf you need horizontal as well as vertical

formatting, use tablesA table cell can hold all sorts of other

elements

Tables Use the <table> tag to create a table

Use border, cellspacing, cellpadding to control looks Use <thead>…</thead> and <tbody>…</tbody> to group rows together

<tr>…</tr> for each row <td></td> for each cell in the row

<th></th> for column and row labels (bold) colspan and rowspan allow you to make irregular tables

Sample Table

<table>

<tr><th></th><th></th>…</tr>

<tr><td></td><td></td>…</tr>

<tr><td></td><td></td>…</tr>

</table>

Forms<form> is a block-level element in the body of

your HTML pageA form element can contain text input boxes,

buttons, checkboxes, pull-down menus and images

Your document can have multiple form elements

A special button called Submit is used to send the form data to the server

Form Attributes action (required) - provides the URL of the

application that needs to get the form data A cgi program or a mailto URL

method (required) - POST or GET Other tags

enctype - encoding format for the data Accept-charset target - to send results to another window id, name, title event

Form ElementsUse the <input> tag to create controls

type="input-type" needed to specify which type of control

name attribute needed to identify the element

There are special tags for <button>, <select> and <textarea>

Input typescheckbox - for on/off optionsradio - to select from several choices

name must be the same for all buttons in grouptext - one-line text entry, you can specify maximum

lengthpassword - similar to text but the typed characters

are masked<textarea> provides multi-line text input

Input types button - to trigger an immediate action, usually some

JavaScript code specified in the event attribute

reset - clears the form submit - activates the form processing sequence image - creates a clickable image which triggers

submit action coordinates of the mouse are transmitted with the rest of the

form data

<button> tag works like button but gives you more control

Input typesfile - allows user to specify name of file to

be uploadedhidden - stores information that is

transmitted but not seen by the user <select> - pull-down menus

<option> elements define choices

FramesUse frames to display multiple pages in a single

windowUse the following DOCTYPE declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

Replace the <body> element with a <frameset> elementrows and cols attributes control subdivisionuse a <frame> element to give source and attributes for

each frame (no content)

FramesetsEach <frameset> creates a grid

cols and rows control the number of boxes

use one <frame> element for each boxuse another <frameset> to nest another

grid into a box

framesEach <frame> needs a URL in the href attribute

links within the displayed pages can use the target attribute to cause the linked page to be displayed in a different frame

Presentation StyleStyle sheets are external specifications of

desired stylelinked to the document with a <link>

element in the <head> element

<style> element in <head> element style attribute in a particular element

style="property1=value1; property2=value2; … "

SourcesWeb Design and Programming by Paul S.

Wang and Sanda S. KatilaHTML The Definitive Guide by Chuck

Musciano and Bill KennedyWikipedia

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

http://www.w3.org/