Web Technologies and Publishing On the Web Applications Publishing information on the WWW is an activity that involves three major steps: Winter 2001 1. Create a document CMPUT 499: 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 Dr. Osmar R. Zaïane, 2001 1 Dr. Osmar R. Zaïane, 2001 2 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta Course Content Objectives of Lecture 4 • Introduction • Databases & WWW HTML and beyond HTML and beyond • Internet and WWW • SGML / XML • Protocols • Managing servers • Get an overview of the hypertext markup • HTML and beyond • Search Engines language used for publishing on the WWW. • Animation & WWW • Web Mining • Java Script • CORBA • See some advanced features of the last • Dynamic Pages • Security Issues version of the languages such as cascading • Perl • Selected Topics style sheets • Java Applets • Projects • After the Lecture, students will demonstrate a sound understanding of HTML standards. Dr. Osmar R. Zaïane, 2001 Dr. Osmar R. Zaïane, 2001 3 3 4 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta
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 Dr. Osmar R. Zaïane, 2001 5 Dr. Osmar R. Zaïane, 2001 6 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta History of HTML Major Syntax Components • < TAG parameters=values> text </ TAG > HTML was originally developed by Tim Berners-Lee in • CERN in 1990 . HTML+ ( 1993 ) was later abandoned. • < TAG parameters=values> HTML 2.0 , now obsolete, was ratified by the IETF in 1994 . • • You may have many parameters or no parameters HTML 3.0 was a abandoned due to lack of compromise at all. • between major browsers • HTML is not case sensitive HTML 3.2 (less than HTML 3.0 ) is the most used standard • • Values can be case sensitive 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, XHTML 1.0 is the latest recommendation of the W3C. It is • etc. a combination of HTML4 and XML . Dr. Osmar R. Zaïane, 2001 Dr. Osmar R. Zaïane, 2001 7 8 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta
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 generate HTML . • Cascading Style Sheets Dr. Osmar R. Zaïane, 2001 9 Dr. Osmar R. Zaïane, 2001 10 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta Page Structure What Comes in the Head? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> …… </HEAD> Header section of the HTML page <HTML> Optional Head elements: title text here <HEAD> Head <TITLE> title text here </TITLE> • <TITLE> …</TITLE> Title of page </HEAD> • <BASE HREF=“…”> Starting location for relative URLs • <SCRIPT …>…</SCRIPT> Embedded script programs <BODY BGCOLOR=“#00FF00”> • <STYLE …>…</STYLE> Specify cascading style sheets • <LINK …> Creates associations between 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”> • And many others Dr. Osmar R. Zaïane, 2001 Dr. Osmar R. Zaïane, 2001 11 12 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta
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://developer.netscape.com/library/documentation/htmlguid/colortab.htm Dr. Osmar R. Zaïane, 2001 13 Dr. Osmar R. Zaïane, 2001 14 Web Technologies and Applications University of Alberta Web Technologies and Applications 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> <P ALIGN=left|right|center>...</P> Paragraph <CODE> some code </CODE> Some code Can also use <DIV>…</DIV> <VAR> myVar </VAR> 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> & 1<2 <PRE> Text is unchanged 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> <I> Italic Text </I> <BLINK> blinking text </BLINK> Special characters in HTML http://www.w3.org/pub/WWW/TR/REC-html132.html#charset Dr. Osmar R. Zaïane, 2001 Dr. Osmar R. Zaïane, 2001 15 16 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta
Recommend
More recommend
