HTML – Design Goals Web Engineering � simple � easy to author for non-computer-experts � application independent Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt � 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 . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 1 Prof. Dr. Dr. h.c. mult . Ge rhard 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> Web Engineering <body bgcolor="#000000" text="#FFFFFF" link="#999999" 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 . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 2 Prof. Dr. Dr. h.c. mult . Ge rhard 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 . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 5 Prof. Dr. Dr. h.c. mult . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 7 HTML 4.01 HTML - BODY � Clear distinction between content and layout � BODY � „clearing out“ elements � HEADING � Cascading Style Sheets to describe presentation and layout � 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 � TABLE documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" � IMG "http://www.w3.org/TR/html4/strict.dtd"> � MAP � The HTML 4.01 Transitional DTD includes everything in the strict DTD 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 � Source and target anchor Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> � OBJECT � The HTML 4.01 Frameset DTD includes everything in the transitional 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 . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 6 Prof. Dr. Dr. h.c. mult . Ge rhard 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 . Ge rhard Krüger , Albrecht Schmidt: Web Engineering, WS00/01 page 9 Prof. Dr. Dr. h.c. mult . GerhardKrü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 – <map name="anyImage"> file with frame definition: file list1.htm : <area shape=rect coords="1,1,249,49" href="#Anchor"> <html> <head> <title> <html> <head> <title>List <area shape=rect coords="1,51,149,299" href="file.htm"> Frame Page</title> of links</title> </head> <area shape=rect coords="251,1,399,399" href="../file.htm"> </head> <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> <img src="hypgraph.gif" usemap="#anyImage" border=0> </html> Prof. Dr. Dr. h.c. mult . GerhardKrüger, Albrecht Schmidt: Web Engineering, WS00/01 page 10 Prof. Dr. Dr. h.c. mult . GerhardKrüger, Albrecht Schmidt: Web Engineering, WS00/01 page 12
Document Type Definition I Document Type Definition III � Example: Declaration of HTML Tables Examples from the HTML 4.0 DTD <!ELEMENT TABLE – – (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> � Entities: <!ELEMENT CAPTION – – (%INLINE;)* > caption sequence of characters with a name, e.g. <!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 <!ELEMENT (TH|TD) – o (%FLOW;)* > header/data Cell � Elements: components in the document structure, e.g. e.g. <TABLE> <!ELEMENT (%HEADING;) – – (%INLINE;)*> <CAPTION>this is a 2*2-Table</CAPTION> <TR><TD>top left</TD ><TD>top right</TD></TR> Def. of HTML elements <H1>...</H1>, <H2>…</H2>, … <TR><TD>down left</TD ><TD>down right</TD ></TR> start-tag and end-tag required </TABLE> Prof. Dr. Dr. h.c. mult . GerhardKrüger, Albrecht Schmidt: Web Engineering, WS00/01 page 13 Prof. Dr. Dr. h.c. mult . GerhardKrü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] No end-tag required <!ATTLIST IMG � 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 … � color, font, layout, position ... > USEMAP %URI; #IMPLIED > � 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 . GerhardKrüger, Albrecht Schmidt: Web Engineering, WS00/01 page 14 Prof. Dr. Dr. h.c. mult . GerhardKrüger, Albrecht Schmidt: Web Engineering, WS00/01 page 16
Recommend
More recommend
