Markup Languages Controlling the Display Of Web Content

Markup Languages  There are two components to any document  What 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.

Hypertext  The 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 Language  A markup language designed for displaying information on the web  Standard maintained by the World Wide Web Consortium ( w3c.org )  Current standard is 4.01  Designed using a metalanguage called SGML  HTML is being transitioned to XHTML

XML  Extensible Markup Language  HTML has a limited number of element names  All browsers need to recognize these element names  XML allows a user to define new element names and specify how they are used

Defining XML Languages  Use 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

Syntax  Document should start with an XML declaration   An XML document consists of a hierarchy of nested elements.  content  The root element encloses all the other elements  Regular syntax makes it easy to parse

Well-Formed XML  has a root element  uses correct case  closes all elements  has elements nested properly  encloses all attributes in double quotes

XML Elements content  tag an element name optionally followed by a list of attributes  content can include other elements  The ending tag needs to have the same name as the start tag  All elements must be closed

Elements with no content  Some 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

Tags  Tags are enclosed by  Tags consist of a name followed by zero or more attributes  Attributes are separated by white space  Some tags can appear only in certain contexts

Attributes  Attributes 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 files  Mac OS X preference files use XML

XHTML  XHTML is very similar to HTML except the syntax is stricter  Based 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 Element  Structural - describes purpose (e.g. headers and titles)  Presentational - describes how it looks  Hypertext -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 Elements  html  head  Contains elements describing document  body  Can contain only block-level elements

Head Elements  - page title generally appears in browser title bar   - related documents  - data about document  - URL  - language for client-side scripting

Block-level Elements  Behave like paragraphs  Headings …  for paragraphs , for pre-formatted text and quotations  to create blocks  Lists -,,  Tables and Forms  for horizontal lines

Inline Elements  Behave like words, characters, phrases  for anchors  line break  for images  Emphasis and styling,,,, …  In HTML, there are tags like,, that you should now implement in a stylesheet

Odds and Ends  Entities are escape sequences for characters that are used by HTML and some non-keyboard characters < > &  Special characters can be specified by their unicode value. © ¢  Comments are enclosed by

Minimal HTML Document in title bar Marked-up content

Links  The tag is used for making links, either internally or externally  Attribute 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

Images  You can link to an image file and have that file open in the browser  You use the image tag to embed an image into another document  where image is the location of the image file  jpg, gif and png formats supported

Page Layout  For vertical layout use paragraphs, headings and rules  If you need horizontal as well as vertical formatting, use tables  A table cell can hold all sorts of other elements

Tables  Use the tag to create a table  Use border, cellspacing, cellpadding to control looks  Use … and … to group rows together  … for each row  for each cell in the row  for column and row labels (bold)  colspan and rowspan allow you to make irregular tables

Sample Table …

Forms  is a block-level element in the body of your HTML page  A 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 Elements  Use the 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, and

Input types  checkbox - for on/off options  radio - to select from several choices  name must be the same for all buttons in group  text - one-line text entry, you can specify maximum length  password - similar to text but the typed characters are masked  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  tag works like button but gives you more control

Input types  file - allows user to specify name of file to be uploaded  hidden - stores information that is transmitted but not seen by the user  - pull-down menus  elements define choices

Frames  Use frames to display multiple pages in a single window  Use the following DOCTYPE declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" >  Replace the element with a element  rows and cols attributes control subdivision  use a element to give source and attributes for each frame (no content)

Framesets  Each creates a grid  cols and rows control the number of boxes  use one element for each box  use another to nest another grid into a box

frames  Each 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 Style  Style sheets are external specifications of desired style  linked to the document with a element in the element  element in element  style attribute in a particular element  style="property1=value1; property2=value2; … "

Sources  Web Design and Programming by Paul S. Wang and Sanda S. Katila  HTML The Definitive Guide by Chuck Musciano and Bill Kennedy  Wikipedia   W3C 