web authoring
DESCRIPTION
Web Authoring. Beyond the Basics. Darryl Friesen, Peter Scott University of Saskatchewan Libraries Computers In Libraries ‘99. HTML Terminology. Element Portion of an HTML document Start Tag, Content, and End Tag Tag Markup, not part of the content - PowerPoint PPT PresentationTRANSCRIPT
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
HTML Terminology
Comment Portions of text that do not appear in the
browser
<!-- This is a comment -->
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
HTML Terminology
<FONT COLOR=“YELLOW”>© 1999</FONT>
Start Tag
End Tag
Content
AttributeAttribute Value
The entire piece is an Element
Entity
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Minimal HTML Document
All HTML documents should have at least these tags:
<HTML> <HEAD> <TITLE>Document Title</TITLE>
</HEAD> <BODY> Document Content </BODY></HTML>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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">
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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*">
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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” … >
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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 }
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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 }
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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 }
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
CSS - Common Properties
Font Properties
font-family: [ font | serif | san-serif | monospace ]
font-style: [ normal | bold | bolder | lighter ]
font-size: [ x-small | small | medium | large | x-large
larger | smaller
x pt | x in | x pc ]
Color & Background Properties
color: [ color name | “#rrggbb” ]
background-color: [ color name | “#rrggbb” | transparent ]
background-image: [ URL | none ]
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
CSS - Common Properties (con’t)
Text Properties
text-decoration: [ none | underline | line-through ]
text-align: [ left | right | center | justify ]
vertical-align: [ sub | super | top | middle | bottom ]
text-indent: [ x in | x cm | x pt | x % ]
line-height: [ normal | x | x in | x cm | x pt | x % ]
text-transform: [ none | lowercase | UPPERCASE | Capitalize ]
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
CSS - Using Style Sheets
Embedded Style Sheets Use the LINK tag inside the HEAD element
<STYLE TYPE=“text/css” MEDIA=“screen”> <!-- BODY { background: white; color: black } --></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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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”>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Forms - Common Elements
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Forms - Common Elements
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>
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Server Side Includes
Syntax:<!--#element attribute=value attribute=value ... -->
Including the contents of another file:<!--#include virtual=“/include/menubar.html” -->
Stamping the document with the current date and time:<!--#echo var=“DATE_LOCAL" -->
Showing the date the file was last changed:<!--#echo var="LAST_MODIFIED" -->
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Tired? Need to stretch?
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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/)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
JavaScript - Rotating Banners
JavaScripts leading to other JavaScripts Example:
Amazon Rotating
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
The Dark Side of the Net
Free pages Advertising URL Cloaking
Monica's Story (www.pcpages.com/pick/monica)
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Remote Resources
Graphics Editors and web-based authoring tools
library.usask.ca/html
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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/
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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/
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
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/
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Questions
Computers in Libraries '99
Darryl Friesen, Peter ScottUniversity of Saskatchewan Libraries
Contact
Darryl FriesenProgrammer/AnalystDepartment of Computing ServicesUniversity of [email protected]
Peter ScottSmall Systems ManagerUniversity of Saskatchewan LibrariesUniversity of [email protected]