1 / 54

Web Authoring

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

santo
Download Presentation

Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Authoring Beyond the Basics Darryl Friesen, Peter Scott University of Saskatchewan Libraries Computers In Libraries ‘99

  2. 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

  3. 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

  4. HTML Terminology <FONT COLOR=“YELLOW”>&copy; 1999</FONT> Start Tag Content Attribute Entity Attribute Value End Tag The entire piece is an Element Computers in Libraries '99

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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”> Content Intellectual Property Instantiation Coverage Source Description Subject Type Title Relation Contributor Creator Publisher Rights Date Format Identifier Language Computers in Libraries '99

  14. Simple Example <TABLE> <TR> <TH>&nbsp;</TH><TH>Score</TH><TH>&nbsp;</TH> </TR> <TR> <TD>Los Angeles Lakers</TD><TD>97</TD><TD>Final</TD> </TR> <TR> <TD>Phoenix Suns</TD><TD>91</TD><TD>&nbsp;</TD> </TR> </TABLE> Tables - An Example Score Los Angeles Lakers 95 Final Phoenix Suns 98 Computers in Libraries '99

  15. 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

  16. 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

  17. 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

  18. 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

  19. Tables - Revised Example <TABLE CELLPADDING=3 CELLSPACING=0 BORDER=0 WIDTH=200> <TR BGCOLOR="#CC9966"> <TH>&nbsp;</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>&nbsp;</TD> </TR> </TABLE> Score Los Angeles Lakers 97 Final Phoenix Suns 91 Computers in Libraries '99

  20. 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

  21. 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

  22. <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 - An Example Computers in Libraries '99

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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 styles CODE.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

  31. CSS - Selectors • Contextual Selectors • two or more selectors separated by white space • style only applied to elements that match hierarchy P EM {background: yellow } • Grouping Selectors • Selectors separated by a comma allow the same style definition for each element H1, H2, H3 { font-family: Arial, san-serif; font-weight: medium } Computers in Libraries '99

  32. 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

  33. 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

  34. 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

  35. 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

  36. CGI and Forms  The server passes the data to the CGI program  Browser sends the form data to the server  The server sends the results back to the browser  The CGI program processes the data and passes back the results (HTML)  User fills out the form Computers in Libraries '99

  37. 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

  38. 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

  39. 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 • CHECKED Indicates a control is initially checked Computers in Libraries '99

  40. 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) • MULTIPLE Allows the selection of more than one options from the list Computers in Libraries '99

  41. 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 • SELECTED Indicates the item should be initially selected in the list. • display value This 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=“Darryl.Friesen@usask.ca>Darryl</OPTION> <OPTION VALUE=“scottp@library.usask.ca>Peter</OPTION> </SELECT> Computers in Libraries '99

  42. 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

  43. 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

  44. Tired? Need to stretch? Computers in Libraries '99

  45. 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

  46. JavaScript - Rotating Banners • JavaScripts leading to other JavaScripts • Example: • Amazon Rotating Computers in Libraries '99

  47. 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

  48. The Dark Side of the Net • Free pages • Advertising • URL Cloaking • Monica's Story (www.pcpages.com/pick/monica) Computers in Libraries '99

  49. Remote Resources • Graphics • Editors and web-based authoring tools library.usask.ca/html Computers in Libraries '99

  50. 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

More Related