Web Authoring

Darryl Friesen, Peter ScottUniversity of Saskatchewan LibrariesComputers In Libraries ‘99

Web Authoring

Beyond the Basics

Computers in Libraries '99

Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries

HTML Terminology

Element Portion of an HTML document Start Tag, Content, and End Tag

Tag Markup, not part of the content Delimited by < and > (end tags also have /)

Attribute Defines properties for tags and/or elements Value may be case sensitive, attribute is not

HTML Terminology

Comment Portions of text that do not appear in the

browser



TIP: do not use ‘--’ in a comment

Entity Textual representation of characters or

symbols that are hard to reproduce on the keyboard, or are not available in the document’s character encoding



HTML Terminology

<FONT COLOR=“YELLOW”>© 1999</FONT>

Start Tag

End Tag

Content

AttributeAttribute Value

The entire piece is an Element

Entity



Minimal HTML Document

All HTML documents should have at least these tags:

<HTML> <HEAD> <TITLE>Document Title</TITLE>

</HEAD> <BODY> Document Content </BODY></HTML>



Recommended Tags

The addition of DOCTYPE and META tags is recommended

<DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.0//EN” “http://www.w3c.org/TR/REC-html40/loose.dtd”><HTML> <HEAD> <TITLE>Document Title</TITLE> <META NAME=“Name” CONTENT=“Content”> </HEAD> <BODY> Document Content </BODY></HTML>



HTML Versions

HTML 3.2 Most common in use and most supported The ‘everything and its dog’ version Different levels of support for different elements

in different browsers

HTML 4.0 Strict Frames, targets, and many elements and

attributes not allowed Emphasizes structure over presentation Meant for use with style sheets



HTML Versions

HTML 4.0 Transitional Strict plus additional presentational

attributes, deprecated elements, targets Why? Current support for style sheets is so

poor

HTML 4.0 Frameset Variant of Transitional for documents using

frames



DOCTYPE Tag

Specifies the version of HTML the document conforms to

DOCTYPE tag should be the first tag in the document, preceding even the HTML tag

Required for valid HTML 4.0 documents Will theoretically allow the browser to

parse and display the document better



DOCTYPE Tag

HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.0 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN” "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML 4.0 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN” "http://www.w3.org/TR/REC-html40/loose.dtd">

HTML 4.0 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN” "http://www.w3.org/TR/REC-html40/frameset.dtd">



METADATA

Metadata is “structured data about data” Describes the document more than its

content Excellent example of metadata is the

Library catalog HTML provides the META tag as a

means of inserting metadata into your HTML documents



META Tag

Used to provide metadata about a document

Must be placed inside the HEAD element<HTML><HEAD> <TITLE>Web Authoring: Beyond the Basics</TITLE> <META NAME=“Author” CONTENT=“Darryl Friesen”> <META NAME=“Author” CONTENT=“Peter Scott”> <META HTTP-EQUIV=“Refresh” CONTENT=“10; URL=http://library.usask.ca/“></HEAD><BODY> …</BODY></HTML>



Dublin Core

Standard set of metadata elements established through consensus by an international, cross-disciplinary group of professionals

Elements prefixed by DC. In META tag <META NAME=“DC.Creator” CONTENT=“Darryl Friesen”>

Intellectual PropertyContent Instantiation

Coverage SourceDescription SubjectType TitleRelation

ContributorCreatorPublisherRights

DateFormatIdentifierLanguage



Tables - An Example

Simple Example<TABLE> <TR> <TH> </TH><TH>Score</TH><TH> </TH> </TR> <TR> <TD>Los Angeles Lakers</TD><TD>97</TD><TD>Final</TD> </TR> <TR> <TD>Phoenix Suns</TD><TD>91</TD><TD> </TD> </TR></TABLE>

Score

Los Angeles Lakers 95 Final

Phoenix Suns 98



Tables - TABLE Tag

Tables are defined using the TABLE element<TABLE attributes>…</TABLE>

WIDTH=“x” or WIDTH=“x%”Defines the table’s width in pixels, or as a percentage of the browser’s window size

ALIGN=[ left | center | right ]Controls the horizontal alignment of the table on the page

BORDER=“x”Sets the thickness of the border line (0 = no border)

CELLPADDING=“x”Controls the spacing between cells

CELLSPACING=“x”Controls the spacing within cells



Tables - Rows

Table rows are defined using the TR element Must be contained inside a TABLE element

<TR attributes>…</TR> - Table Row ALIGN=[ left | center | right ]

Specifies the horizontal alignment of each cell in the row VALIGN=[ top | middle | bottom | baseline ]

Specifies the vertical alignment of each cell in the row BGCOLOR=“color”

Specifies the background color to use for each cell in the row



Tables - Cells

Table cells are defined using the TH (header cell) or TD (data cell) elements, and must be contained inside a TR element

<TH attributes>…</TH> or <TD attributes>…</TD> WIDTH=“x” or WIDTH=“x%” HEIGHT=“x”

Suggests the cell’s width and height in pixels. Cell widths can also be expressed as a percentage of the table’s width.

ALIGN=[ left | center | right ] VALIGN=[ top | middle | bottom | baseline ]

Specifies the horizontal and vertical alignment of data in the cell BGCOLOR=“color”

Suggests a background color to use for the cell NOWRAP

Disables word wrap for the cell



Tables - Pros, Cons & Tips

Pros Convenient method of displaying tabular data Can be used as a layout tool to produce more

interesting sites (i.e. simulates frame layout)

Cons Can causes problems those using non-visual

browsers, large fonts, small screen resolution

Tips Make sure you have the same number of cells in

each row and column, including the ROWSPAN and COLSPAN values!

Netscape and Internet Explorer treat table and cell WIDTHs differently (suggested vs absolute widths)



Tables - Revised Example

<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=0 WIDTH=200> <TR BGCOLOR="#CC9966"> <TH> </TH><TH COLSPAN=2 ALIGN=LEFT>Score</TH> </TR> <TR BGCOLOR="#CCCC99"> <TD WIDTH="125">Los Angeles Lakers</TD> <TD>97</TD> <TD><FONT COLOR="red">Final</FONT></TD> </TR> <TR BGCOLOR="#CCCC99"> <TD>Phoenix Suns</TD><TD>91</TD><TD> </TD> </TR></TABLE>

Score

Los Angeles Lakers 97 FinalPhoenix Suns 91



Frames

Frames allow the browser window to be split into discrete sections (frames)

Each frame displays its own HTML document which can be manipulated independently of the others

Actions in one frame can update the contents of another (by using targets)



Frames - Pros and Cons

Pros Frames can make the site easier to navigate

Cons Frames can make the site harder to navigate Individual portions cannot be addressed

directly (using a URL) Not supported by many browsers



Frames - An Example

<HTML> <HEAD> <TITLE>This document uses frames</TITLE> </HEAD>

<FRAMESET COLS="200,*"> <FRAME NAME="nav" SRC="navigation.html"> <FRAME NAME="main" SRC="main.html">

<NOFRAMES> <BODY BGCOLOR="#FFFFFF"> Hey, you can't see frames! </BODY> </NOFRAMES> </FRAMESET></HTML>



Frames - FRAMESET Tag

<FRAMESET attributes>…</FRAMESET> ROWS=“x,y, …”

Defines the number and height of rows in the frame set COLS=“x,y, …”

Defines the number and width of columns in the frame set

Frame sets can nested (i.e. 2 rows, top with 2 columns, bottom with 3 columns)

Lengths can be specified 3 ways Pixel widths

<FRAMESET COLS="200,*"> Percentages

<FRAMESET COLS=”25%,*"> Relative sizes

<FRAMESET COLS=”2*,3*">



Frames - FRAME Tag

Individual frames are defined using the FRAME element, and must be contain inside a FRAMESET

<FRAME attributes>…</FRAME> NAME=“name”

Gives the frame a name so that it can be referenced later SRC=“URL”

Specifies the HTML document to display in the frame MARGINWIDTH=“x” MARGINHEIGHT=“x”

Specifies the width and height of the margins inside the frame FRAMEBORDER=[ 0 | 1 ]

Specifies whether or not the frame has a visible border or divider SCROLLING=[ yes | no | auto ]

Specifies whether or not scrollbars are provided for the frame NORESIZE

Prevents individual frames from being resized



Frames - NOFRAMES Tag

<NOFRAMES>…</NOFRAMES>

NOFRAMES defines alternate content for browsers that do not support frames

The content should be meaningful, NOT a message telling the user to upgrade the browser

Since the outermost FRAMESET tag replaces the normal BODY tag in the document, a BODY tag should be placed inside the NOFRAMES tag

Only one NOFRAMES element can be present



Frames - Targets

Targets specify in which frame the target of a link should be displayed

Implemented as attributes to A, BASE, FORM and LINK tags

Value of the attribute is the name given to the frame using the FRAME tag

<FRAME NAME="main" SRC="main.html">

<FORM ACTION=“/cgi-bin/search.cgi” TARGET=“main”> … </FORM><A HREF=“cil99.html” TARGET=“main”>CIL ‘99</A>

<BASE TARGET=“main”><LINK TARGET=“main” … >



Frames - Special Targets

There are a number of target names that have special meaning:

_top Renders the specified link in the full browser windows,

essentially removing all the frames

_self Renders the specified link in the current frame (used to

override the default target given in the BASE and LINK tags)

_parent Renders the specified link in the immediate parent frameset

_blank Renders the specified link in a new unnamed window



Style Sheets

Style sheets are simply a set of rules that tell the browser (or printer, or document reader etc.) how to format and present a document

By separating the document structure from its presentation and using style sheets we can: create documents that are more portable format documents differently for different devices ease the burden of site management

Several different ‘standards’: Cascading Style Sheets (CSS), eXtensible Style Sheet Language (XSL), Document Style Semantics and Specification Language

(DSSSL)



Cascading Style Sheets (CSS)

Each formatting rule is made up of a selector (usually an HTML element) and a style to be applied

Styles are made up of one or more properties, each with a value

Syntax: selector { property: value } selector { property1: value1; property2 : value 2 }

Example: H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue }



CSS - Selectors

Basic Selectors Selectors are basic HTML elements

H1 { font-size: x-large; color: red }

Class Selectors allows the same element to have different

stylesCODE.html {color: yellow }

CODE.css {color: orange }

class can be omitted allowing the style to be applied to any element

.note {font-size: small }



CSS - Selectors

Contextual Selectors two or more selectors separated by white

space style only applied to elements that match

hierarchyP EM {background: yellow }

Grouping Selectors Selectors separated by a comma allow the

same style definition for each elementH1, H2, H3 { font-family: Arial, san-serif;

font-weight: medium }

CSS - Using Style Sheets

Embedded Style Sheets Use the LINK tag inside the HEAD element

<STYLE TYPE=“text/css” MEDIA=“screen”> </STYLE>

External Style Sheets use the LINK tag inside the HEAD element

<LINK REL=“StyleSheet” HREF=“somestyle.css” TYPE=“text/css”>

Inline Styles<P STYLE=“color: red”>Hi, I’m red.</P>



CSS - Using Style Sheets

CLASS Attribute Assumes style is defined using one of the previous

methods CLASS attribute specifies the style to use

This is <CODE CLASS=“css”>CSS</CODE>This is <CODE CLASS=“html”>HTML</CODE>

SPAN and DIV Elements Simple containers that allow a style to be applied to

HTML that is not part of an HTML element, but on their own do nothing to alter the format of the document

SPAN is for ‘inline’ use; DIV for block use.highlight: { background: yellow }

This is <SPAN CLASS=“highlight”>Important!</SPAN>



CGI and Forms

User fills out the form

Browser sends the form data to the server

The server passes the data to the CGI program

The CGI program processes the data and passes back the results (HTML)

The server sends the results back to the browser



CGI and Forms

Common Gateway Interface (CGI) is a standard method for external programs to communicate with information servers (such as web servers)

(Almost) every web page containing forms will require a CGI programs to process the form data

Processing done on the server by a program or script written in Perl, C, Java etc.

Typically requires special access to the server, advanced knowledge of how the server works, as well as programming skills



Creating Forms

Interactive forms are defined with the FORM tag Each element of the form (input boxes, buttons

etc.) must appear within the FORM element

<FORM attributes>…</FORM> METHOD=[ GET | POST ]

Specifies the method used to send the form data to the server. POST is most often used.

ACTION=“URL”Specifies the URL of the CGI program that will process the form data

<FORM METHOD=“POST” ACTION=“/cgi-bin/search.cgi”>



Forms - Common Elements

Text input fields, radio button and checkbox controls, and buttons are done using the INPUT tag

<INPUT attributes> NAME=“name”

Identifies the form element by name TYPE=[ text | password | hidden (text

elements)checkbox | radio (controls)submit | reset ] (buttons)

VALUE=“value”Specifies a default value for the element

SIZE=“x”Specifies a width for text input elements

CHECKEDIndicates a control is initially checked




Drop menus and lists are created using the SELECT element

<SELECT attributes> … </SELECT> NAME=“name”

Identifies the form element by name SIZE=“x”

Indicates the number of elements of the total list that are visible at any one time (i.e. drop down menu vs scrolling list box)

MULTIPLEAllows the selection of more than one options from the list




Each item in the drop menu or list is defined using the OPTION element

<OPTION attributes> display value </OPTION> VALUE=“value”

Specifies the value sent to the CGI program when the item is selected

SELECTEDIndicates the item should be initially selected in the list.

display valueThis is the text that appears in the list or drop down, and can be different that the value sent to the CGI program

<SELECT NAME=“email”><OPTION VALUE=“[email protected]>Darryl</OPTION><OPTION VALUE=“[email protected]>Peter</OPTION></SELECT>



Server Side Includes

Most web servers have the ability topre-process an HTML document before sending it to the client browser.

Server Side Includes (SSI) take advantage of this feature, and allow the documents to become more dynamic

Basic idea: the web server looks at the content of the HTML file, replacing special embedded commands with other text

Usually some flag indicating the document uses SSI (file extension of .phtml is common)

Server Side Includes

Syntax:

Including the contents of another file:

Stamping the document with the current date and time:

Showing the date the file was last changed:



Tired? Need to stretch?



JavaScript - Resources

Website Abstraction(www.wsabstract.com)

Dark Library(www.darklibrary.com)

JavaScript WebRing(leden.tref.nl/ageytenb/jswr/)

My Own WebRing(library.usask.ca/~scottp/webring/)



JavaScript - Rotating Banners

JavaScripts leading to other JavaScripts Example:

Amazon Rotating



Design Issues

Sites for discussion Arkansas State University Baxter County Library John Brown University North Arkansas College Phillips Community College University of Arkansas, Little Rock University of Central Arkansas



The Dark Side of the Net

Free pages Advertising URL Cloaking

Monica's Story (www.pcpages.com/pick/monica)



Remote Resources

Graphics Editors and web-based authoring tools

library.usask.ca/html



HTML & CSS Resources

W3C - Word Wide Web Consortium www.w3.org www.w3.org/TR/REC-html40/ www.w3.org/Style/CSS/

Web Design Group www.htmlhelp.com www.htmlhelp.com/reference/html40/ www.htmlhelp.com/reference/css/

Index Dot HTML www.blooberry.com/html/



Validation Services

W3C HTML:validator.w3.org CSS: jigsaw.w3.org/css-validator/

Web Design Group HTML:www.htmlhelp.com/tools/validator/ CCS: www.htmlhelp.com/tools/csscheck/

weblint HTML:www.cre.canon.co.uk/~neilb/weblint/



Other Resources

The Dublin Core purl.org/dc Nordic DC Metadata Creator

http://www.lub.lu.se/cgi-bin/nmdc.pl

Structure of an HTML Document www.htmlhelp.com/reference/html40/structure.html

HTML Entities www.htmlhelp.com/reference/html40/entities/



Questions



Contact

Darryl FriesenProgrammer/AnalystDepartment of Computing ServicesUniversity of [email protected]

Peter ScottSmall Systems ManagerUniversity of Saskatchewan LibrariesUniversity of [email protected]

Web Authoring

Documents

Transcript of Web Authoring