DOCSLIB.ORG

Web Engineering § Easy to Author for Non-Computer-Experts

Web Engineering § Easy to Author for Non-Computer-Experts

HTML – Design Goals ¨ simple Web Engineering § easy to author for non-computer-experts Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt ¨ application independent § any application should be possible Universität Karlsruhe ¨ platform independent Fakultät für Informatik § focus on content not on presentation Institut für Telematik ¨ defined by means of SGML Wintersemester 2000/2001 § HTML DTD from version HTML 2.0 on Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 1 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 3 Example-Document <html> <head> <meta name="Author" content="Albrecht Schmidt"> <title>Web Engineering - Homepage</title> </head> <body bgcolor="#000000" text="#FFFFFF" link="#999999" Web Engineering vlink="#CCCCCC" alink="#666666"> <h1> Web Engineering - Homepage< br> ... <a href="/lehre/webe/unterlagen.html"><br> Chapter 3: The Web – An Information System <img SRC="/lehre/webe/unterlagen .gif" height=40 width=140 alt="Unterlagen" border=0 align=ABSCENTER></a> .... <h3>Art der Veranstaltung: Vorlesung, 2 SWS</h3> ...   ... </body></html> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 2 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 4 HTML - Development HTML - HEAD ¨ 1990 HTML ¨ HEAD § CERN - first implementation § TITLE ¨ 1991 HTML+ § LINK § Implementation in the Arena Browser ¨ link to other documents, e.g. Style Sheet ¨ 1994 HTML 2.0 ¨ specifying relation to other Documents § Combined features from Mosaic, Arena and other browsers § META ¨ e.g. Forms § SCRIPT § then Netscape was founded – browser are ahead of definitions § STYLE ¨ 1997 HTML 3.2 ¨ embedded Style Sheet § when published far behind the state of the art § functionality ¨ z.B. tables, Applets, ... ¨ Dec 1997 HTML 4.0 [Raggetet al. 1998] ¨ Dec 1999 HTML 4.01 ¨ Jan 2000 XHTML 1.0 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 5 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 7 HTML 4.01 HTML - BODY ¨ Clear distinction between content and layout § „clearing out“ elements ¨ BODY § Cascading Style Sheets to describe presentation and layout § HEADING § Text ¨ 3 Document Type Definitions § Lists § The HTML 4.01 Strict DTD includes all elements and attributes that have ¨ unordered list <UL>, ordered list <OL>, definition list <DL> not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: § TABLE <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" § IMG "http://www.w3.org/TR/html4/strict.dtd"> § The HTML 4.01 Transitional DTD includes everything in the strict DTD § MAP plus deprecated elements and attributes (most of which concern visual ¨ client-side Image Map presentation). For documents that use this DTD, use this document type § Anchor, <A> declaration: <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ¨ Source and target anchor § The HTML 4.01 Frameset DTD includes everything in the transitional § OBJECT DTD plus frames as well. For documents that use this DTD, use this ¨ replaces other tags, e.g. <APPLET> document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 6 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 8 HTML - FORMS HTML – Image Maps - Server-Side ¨ forms Image-Maps § INPUT ¨ Server-Side § BUTTON § IMG tag with ISMAP attribute § SELECT § position submitted to the server § RADIO-BUTTONS § server replies with the corresponding resource § OPTION § mapping of position to resource on the server § TEXTAREA ¨ connected to actions by URI § Action Attribute <a href="MapName"><img src="datei.gif" ismap></a> ¨ see CGI (later chapter) Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 9 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 11 HTML - Framesets HTML – Image Maps - Client-Side ¨ FRAMESET Image-Maps § DTD ¨ Client-Side § columns and rows of frames § IMG tag with USEMAP attribute, MAP definition § browser selects based on position the resource ¨ Interaction between Frames § browser request only this resource from the server example part 1 – example part 2 – file with frame definition: file list1.htm : <map name="anyImage"> <html> <head> <title> <html> <head> <title>List <area shape=rect coords="1,1,249,49" href="#Anchor"> Frame Page</title> of links</title> <area shape=rect coords="1,51,149,299" href="file.htm"> </head> </head> <area shape=rect coords="251,1,399,399" href="../file.htm"> <frameset cols="200,*"> <body> <area shape=rect coords="151,51,249,299" <frame src="list1.htm" <a href="news. htm" href="http://www.nix.de/"> name="left"> target="right"> <area shape=rect coords="1,301,249,399" nohref> <frame src="title.htm" Neuigkeiten</a> </map> name="right"> </frameset> </body> </html> </html> <img src="hypgraph.gif" usemap="#anyImage" border=0> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 10 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 12 Document Type Definition I Document Type Definition III Examples from the HTML 4.0 DTD ¨ Example: Declaration of HTML Tables <!ELEMENT TABLE – – ¨ Entities: (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> sequence of characters with a name, e.g. <!ELEMENT CAPTION – – (%INLINE;)* > caption <!ELEMENT THEAD – o (TR)+ > header <!ENTITY %HEADING “H1|H2|H3|H4|H5|H6”> <!ELEMENT TFOOT – o (TR)+ > footer ... <!ELEMENT TBODY o o (TR)+ > body <!ENTITY %INLINE “#PCDATA | %FONTSTYLE; | %PHRASE; | …”> … <!ELEMENT TR – o (TH|TD)+ > line ¨ Elements: <!ELEMENT (TH|TD) – o (%FLOW;)* > header/data Cell components in the document structure, e.g. e.g. <TABLE> <!ELEMENT (%HEADING;) – – (%INLINE;)*> <CAPTION>this is a 2*2-Table</CAPTION> Def. of HTML elements <H1>...</H1>, <H2>…</H2>, … <TR><TD>top left</TD ><TD>top right</TD></TR> <TR><TD>down left</TD ><TD>down right</TD ></TR> start-tag and end-tag required </TABLE> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 13 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 15 Document Type Definition II Cascading Style Sheets ¨ Elements with attributes (example from HTML 4.0 DTD) ¨ formats and layouts for HTML documents <!ELEMENT IMG – o EMPTY> § CSS level 1 (CSS1) [Lie et al. 1996] <!ATTLIST IMG No end-tag required § CSS2, positioning %ATTRS; SRC %URI; #REQUIRED ¨ rule based ALT %TEXT; #REQUIRED § values are assigned to properties of HTML elements LONGDESC %URI; #IMPLIED ¨ e.g.: P { text-align: right; color: green } HEIGHT %LENGTH; #IMPLIED § selectors can be context dependent WIDTH %LENGTH; #IMPLIED § very expressive … ISMAP (ISMAP) #IMPLIED > USEMAP %URI; #IMPLIED > ¨ color, font, layout, position ... ¨ inheritance of attribute values along the HTML e.g. <IMG SRC="file.gif" ALT="an Image. " HEIGHT=30> document hierarchy Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 14 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 16 CSS Rule Syntax Using Styles ¨ Inline Styles ¨ External Style Sheets ¨ style sheets have one or more rules that describe the format of ¨ Embedded Styles ¨ Importing elements <HTML> <HEAD> ¨ rules consist of selector and declaration <TITLE>title</TITLE> ¨ the declaration consists of one or more pairs with property and <LINK REL=STYLESHEET TYPE="text/css" value HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> H1 { color: blue } ¨ syntax: </STYLE> <STYLE> <selector> "{" <declaration> "}" @import url(http://style.com/basic); </STYLE> <declaration>::= <property> ":" <value-list> [";" <property> ":" <value-list>]* </HEAD> <BODY> <value-list>::= <value> ["," <value>]* <H1>Headline is blue</H1> <P STYLE="color: green">While the paragraph is green. </BODY> </HTML> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 17 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 19 CSS Selectors Using Styles ¨ Inline Styles ¨ External Style Sheets <HTML> <HEAD> ¨ type selectors, ¨ Embedded Styles ¨ Importing HTML -elements <TITLE>Title</TITLE> § H1 { color: blue } <STYLE TYPE="text/css"> <HTML> <HEAD> <TITLE>title</TITLE> ¨ Groups of selectors H1.cool { color: blue } <LINK REL=STYLESHEET TYPE="text/css" ¨ <DIV> - Block .important { color: red} HREF="http://style.com/cool" TITLE="Cool"> P#2311 { color: green} ¨ <SPAN> - Inline <STYLE TYPE="text/css"> #2317 { color: blue} H1 { color: blue } ¨ selectors in context </STYLE> </HEAD> </STYLE> § H1 { color: blue } <STYLE> <BODY> § H1 B { color: red } @import url(http://style.com/basic); <H1 CLASS=cool>See Here</H1> ¨ Class </STYLE> <P CLASS=important>text</P> ¨ ID <H2 CLASS=important>And Again</H2> </HEAD> <P id=2311>text</P> <BODY> <H1>Headline is blue</H1> <H2 id=2317>And Again</H2> <P STYLE="color: green">While the </BODY> </HTML> paragraph is green. </BODY> </HTML> Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 18 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering,

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    15 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us