Web-Based Information Publishing On the Web Systems Publishing information on the WWW is an activity that involves three major steps: Winter 2006 1. Create a document CMPUT 410: HTML and Beyond • HTML with any text editor Dr. Osmar R. Zaïane • HTML editors 2. Put the document on the Web 3. Validate the document • Try the page with different browsers and Oss University of Alberta • HTML validators 1 2 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Course Content Objectives of Lecture 4 • Introduction • Perl & Cookies HTML and beyond HTML and beyond • Internet and WWW • SGML / XML • Protocols • CORBA & SOAP • Get an overview of the hypertext markup • HTML and beyond • Web Services language used for publishing on the WWW. • Animation & WWW • Search Engines • CGI & HTML Forms • Recommender Syst. • See some advanced features of the last • Javascript • Web Mining version of the languages such as cascading • Databases & WWW • Security Issues style sheets • Dynamic Pages • Selected Topics Publishing Web Content • After the Lecture, students will demonstrate a sound understanding of HTML standards. Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 3 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 4
Outline of Lecture 4 Web Publishing with HTML • What is HTML? • HTML stands for HyperText Markup Language. • Basic HTML • Language format based on SGML. • Building Lists • Non-proprietary language. • Tables • Based on a set of tags that indicate how • Frames document-content should be rendered. • Image Maps • There are many versions of HTML and different • Validating HTML pages browsers have their own add-ons. • Cascading Style Sheets 5 6 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta History of HTML Major Syntax Components • < TAG parameters= " values " > text </ TAG > HTML was originally developed by Tim Berners-Lee in • • < TAG parameters= " values " > CERN in 1990 . HTML+ ( 1993 ) was later abandoned. • You may have many parameters or no parameters HTML 2.0 , now obsolete, was ratified by the IETF in 1994 . • at all. HTML 3.0 was abandoned due to lack of compromise • between major browsers • HTML is not case sensitive HTML 3.2 (less than HTML 3.0 ) along with HTML 4.0 , it is the • Values can be case sensitive • most used standard today (since 1997 ) • Tags for changing appearance of text, tags for HTML 4.0 (end of 1997 ) brought new enhancements. structuring sections, tags for embedding objects, • etc. XHTML 1.0 is a combination of HTML4 and XML (used in our textbook) . • XHTML 1.1 is the latest recommendation of the W3C. • Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 7 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 8
Do We Have to Know HTML? Outline of Lecture 4 • There are many HTML editors and publishing software • What is HTML? that generate HTML . • Basic HTML • We can create web pages without knowing HTML . • Building Lists • However, HTML editors do not generate correct HTML and • Tables the generated HTML is not easy to update. • Many HTML editors do not deal with style sheets and • Frames JavaScript that can add neat functionalities. • Image Maps • In order to write web-based application one need to • Validating HTML pages know HTML since server-side scripts and programs • Cascading Style Sheets generate HTML . 9 10 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Page Structure What Comes in the Head? <HEAD> …… </HEAD> Header section of the HTML page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Optional Head elements: <HTML> <HEAD> title text here • <TITLE> …</TITLE> Title of page Head <TITLE> title text here </TITLE> • <BASE HREF="…"> Starting location for relative URLs </HEAD> • <SCRIPT …>…</SCRIPT> Embedded script programs • <STYLE …>…</STYLE> Specify cascading style sheets <BODY BGCOLOR=“#00FF00”> • <LINK …> Creates associations between pages Useful for printing linked pages Text and tags come here Body • <META…> Records document information � Name and Content </BODY> <META Name="author" Content="O. Zaiane"> </HTML> � HTTP-EQUIV <META HTTP-EQUIV="Expires" Content="Sun, 31 Dec 2000 23:59"> <HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> Refresh and set-cookies are other example • And many others Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 11 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 12
What Comes in the Body? Some HTML Tags <BODY …> …… </BODY> Body section of the HTML page Some useful tags: Optional parameters for BODY tag: title text here Headers: Header 1 <H1> Header 1 </H1> • BACKGROUND Specifies URL of an image to display in the background Header 2 <H2> Header 2 </H2> • BGCOLOR Specifies the color of the background Header 3 <H3> Header 3 </H3> • TEXT Specifies the color of the text Header 4 Header 5 <H4> Header 4 </H4> • LINK Specifies the color of the unvisited hyperlinks Header 6 <H5> Header 5 </H5> • VLINK Specifies the color of the visited hyperlinks <H6> Header 6 </H6> • ALINK Specifies the color of the links currently selected <H? ALIGN=left|right|center>...</H?> Horizontal line: <BODY BCKGROUND="http://www.somewhere.ca/image.gif" <HR> BGCOLOR="#FFFF00" TEXT="#000000" LINK="#0000FF" <HR SIZE=4> VLINK="#800000" ALINK="#008080"> <HR WIDTH="50%"> … </BODY> http://devedge.netscape.com/library/manuals/1998/htmlguide/colortab.html 13 14 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta Some HTML Tags – con’t Some HTML Tags – con’t Some useful tags: Some useful tags: title text here title text here Line breaks and Paragraphs: Descriptive markup: Line 1 and Contact info Line 1 and <BR> Line 2 <ADDRESS> Contact info< /ADDRESS > Line 2 some text <P> Paragraph </P> <BLOCKQUOTE> some text </BLOCKQUOTE> Paragraph <P ALIGN=left|right|center>...</P> <CODE> some code </CODE> Some code <VAR> myVar </VAR> Can also use <DIV>…</DIV> myVar See also <NOBR>…</NOBR> and <WBR> Rendering depends upon browser Bold Text Bold Text and Underlined Text: also <KBD>…</KBD> <DFN>…</DFN> <CITE>…</CITE> etc. Teletype text <B> Bold Text </B> (or <STRONG>…</STRONG>) Text sections: Text unchanged Underlined text <TT> Teletype text </TT> <PRE> Text is unchanged & 1<2 Striked text Interpretation off 2>1 <U> Underlined text </U> & 1<2 </PRE> Italic Text <S> Striked text </S> (or <STRIKE>…</STRIKE>) <XMP> Interpretation off 2>1 </XMP> is used to enclose to text to be presented literally. It is unfortunately an obsolete HTML element since 4.0. <I> Italic Text </I> <BLINK> blinking text </BLINK> Special characters in HTML Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 15 Dr. Osmar R. Zaïane, 2001-2006 Web-Based Information Systems University of Alberta 16
Recommend
More recommend
