HTML Lex Bijlsma Informatica-Instituut Universiteit Utrecht
HTML HyperText Markup Language Een taal om WWW pagina’s mee op te maken Lay-out Lettertype Plaatjes Links naar andere WWW pagina’s
HTML is ASCII Een HTML-document of WWW-pagina bestaat uit gewone tekst. ASCII Kan bewerkt worden met bijvoorbeeld PFE. In de tekst wordt een structuur aangegeven. Titels, kopjes, plaatjes, paragrafen, tabellen, lijsten, links naar andere pagina’s, ...
HTML: Tags Deze structuurelementen worden gedefinieerd met HTML-tags. Een vlag waarmee aangegeven wordt om wat voor structuur-element het gaat De HTML tags worden begrepen door de WWW browser. Voor elk structuur-element is er een tag. Titels, kopjes, tabellen, lijsten, plaatjes, ...
HTML-editors Gespecialiseer-de teksteditors bieden syntaxkleuring, invoegen van tags met een enkele muisklik, ingebouwde browser. Voorbeelden: HTMLed, EditPlus, HoTMetaL
WYSIWYG-editors Vertonen de webpagina bijna precies zoals de browser dat zal doen.
WYSIWYG: voor- en nadelen Voordeel van een WYSIWIG-editor is dat je de te bereiken effecten meteen visueel voor je ziet. Nadeel is dat niet alle gewenste effecten langs deze weg te bereiken zijn. Mogelijk compromis: ruwe versie in WYSIWYG, fijnregeling door bewerking HTML-tags.
HTML-tags HTML-tags: algemene vorm Left angle bracket, tag name, right angle bracket Bijvoorbeeld: <TITLE> Structuur-elementen kunnen weer andere structuur-elementen bevatten. Plaatjes in een tabel In HTML gerealiseerd door geneste paren
Tags: paren en attributen Tags komen vaak in paren voor. Begintag en eindtag Een eindtag (of closing tag) geeft het einde van een structuur-element aan. Een eindtag is een begintag met een slash (/) voor de tagname. </TAG> Sommige tags hebben attributen. <TAG ATTRIBUTE="VALUE"> Quotes bij attribuutwaarden (”), behalve bij keywords: <P ALIGN=CENTER>
Minimaal HTML document Elk HTML-document moet bepaalde standaard structuur-elementen en dus HTML-tags bevatten. <HTML> (declaratie van gebruikte taal) <HEAD> (informatie over het document) Title <BODY> (het document zelf) De zichtbare inhoud
Opbouw van een HTML-document <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY> Dit is een HTML document! </BODY> </HTML> Verplichte tags kun je bijvoorbeeld in een PFE-template zetten.
Title en headings <TITLE> Headings De titel van een document verschijnt in de title bar van de browser. Headings Kopjes in verschillende grootten <H1> </H1> ... <H6> </H6>
Layout HTML-code is onbelangrijk Witruimte Regelovergangen, extra spaties, tabs en overige witruimte in de ASCII-tekst leiden niet tot witruimte in het afgebeelde HTML-document. Er zijn speciale voorzieningen (tags) nodig voor extra witruimte. Wordwrapping vindt automatisch plaats. Als er geen ruimte meer is op een regel wordt een woord automatisch op de volgende regel geplaatst.
Alinea’s Paragraph Line Break Geeft een regelovergang en extra witruimte <P> </P> De end tag mag worden weggelaten. Browsers weten dat een nieuwe paragraaf de oude afsluit. Line Break Geeft alleen een regelovergang <BR>
Centreren Bij de paragraph tag kan een ALIGN attribuut worden gebruikt. <P ALIGN=CENTER> … </P> Alleen bij gebruik van begin/end tags Voor centreren van een groter paginadeel is handiger: <CENTER> … </CENTER>
Lijsten List Lijst, opsomming Verschillende vormen Unnumbered list Opsomming met een bullet voor elk item <UL> </UL> <LI> Numbered list Opsomming met een oplopend getal voor elk item <OL> </OL> <UL> <LI>Appels <LI>Peren </UL> • Appels • Peren
Definitielijsten Definition list Geneste lists zijn mogelijk Een lijst van termen met hun definities <DL> </DL> Definition term <DT> Definition definition <DD> Geneste lists zijn mogelijk Lists binnen lists <DL> <DT>UU <DD>Universiteit Utrecht </DL> UU Universiteit Utrecht
Speciale vormgeving Preformatted text Quotation Voor het weergeven van tekst waarin de witruimte van belang is Programma’s <PRE> </PRE> Tekst wordt afgebeeld “as is”. Quotation Voor langere citaten <BLOCKQUOTE> </BLOCKQUOTE>
Horizontale lijnen Tag <HR> (horizontal rule) Attributen voor lijndikte en lengte <HR SIZE=4 WIDTH=”50%”>
Logische stijl Oorspronkelijk was er in HTML een strikte scheiding tussen inhoud en presentatie. De tags geven alleen de betekenis van een structuur-element aan en een relatieve ordening. “Dit is een titel” “De titel moet groter zijn dan de tekst zelf” De weergave wordt aan de browser en de gebruiker overgelaten. Verschillende browsers geven verschillende resultaten.
Logische stijl: voordelen Platformonafhankelijk Oude browsers, zwart/wit scherm De gebruiker is de baas over z’n scherm. Eenmaal aanpassen aan eigen voorkeuren Meer consistentie in de opmaak van documenten <H1> versus Times Roman Bold 24 punts
Logische stijl: nadelen Absolute plaatsing van structuur-elementen is met HTML niet mogelijk. “30 millimeter rechts van de linkerkantlijn” De auteur heeft geen zekerheid over het uiterlijk van de pagina’s. Verschuiving richting absolute lay-out Toekomstige HTML-versies Consensus over afbeelden logische stijl
Logische stijl: character format Definition, <DFN> </DFN> Voor definities van woorden, meestal italics Emphasis, <EM> </EM> Voor nadruk, meestal italics Cite, <CITE> </CITE> Voor titels van boeken, films, etc., meestal italics Code, <CODE> </CODE> Voor programma’s, meestal fixed-width Strong, <STRONG> </STRONG> Voor extra nadruk, meestal bold
Fysieke stijl Voor het character format (bold, italics) is er naast de logische stijl ook een fysieke stijl. Vaak hetzelfde resultaat als de logische stijl Maar wel zekerheid
Fysieke stijl: character format Bold, <B> </B> Italics, <I> </I> Typewriter text, <TT> </TT> Underline, <U> </U>
Escape sequences <, > en & hebben in HTML een speciale betekenis. Ze kunnen niet zomaar in een tekst gebruikt worden. Een aantal bijzondere karakters is niet beschikbaar via het toetsenbord. Vreemde talen, wiskundige symbolen Om deze tekens af te beelden in een browser zijn speciale tags nodig: escape sequences.
Escape sequences: voorbeelden Speciale HTML-karakters < geeft < > geeft > & geeft & Vreemde tekens ö geeft ö ñ geeft ñ È geeft È
HTML en case sensitivity HTML is case insensitive. <HTML> is gelijk aan <html> is gelijk aan <hTmL>. Vaak worden hoofdletters gebruikt om de tags herkenbaar te maken. Maar er zijn uitzonderingen... < is niet gelijk aan < ö is niet gelijk aan Ö
Font tag Voor het wijzigen van de grootte van de tekst en de kleur van de tekst “Fysieker” dan <H3> <FONT> </FONT> Attributen SIZE en COLOR <FONT SIZE="+2"> <FONT SIZE="3"> <FONT COLOR=RED> Attribuut FACE
Hyperlinks De kracht van HTML zit in de hyperlinks. Anchor <A HREF="filename"> Tekst die als hyperlink dient </A> <A HREF="homepage.html"> My homepage </A>
Hyperlinks: relatief en absoluut Padnamen Relatief ten opzichte van de locatie van het huidige document Absoluut (de complete URL) <A HREF="personal/cv.html">My CV</A> <A HREF="http://www.provider.nl/~myname/personal/cv.html"> My CV</A>
Hyperlinks: meestal relatief In het algemeen worden relatieve padnamen gebruikt. Eenvoudiger om een groep documenten te verplaatsen Efficiënter om het document op te vragen van de WWW-server Minder typwerk Absolute padnamen wanneer gelinkt wordt naar een niet direct gerelateerd document
Verwijzingen binnen een document Anchors kunnen ook gebruikt worden om naar een bepaalde paragraaf van een ander of hetzelfde document te springen Named anchors markeren target <A NAME="anchorname"> … </A> Aangepaste hyperlink <A HREF="(filename)#anchorname"> Tekst die als hyperlink dient </A> Vaak bij inhoudsopgave boven aan de pagina
Mailto links Voor het eenvoudig versturen van e-mail vanuit de browser <A HREF="mailto:email-adres"> Tekst die als mailto link dient </A> You can reach me by sending <A HREF="mailto:myname@provider.nl"> e-mail</A>.
Images De meeste browsers kunnen plaatjes afbeelden GIF- of JPEG-formaat <IMG SRC="imagename"> Imagename (of URL); net als bij HREF Relatief of absoluut (de complete URL) <IMG SRC="http://www.cs.uu.nl/icons/li-dsol.gif">
Images: attributen Hoogte en breedte Plaatsing op de pagina Versnelt het opvragen van een pagina <IMG SRC="imagename" HEIGHT=100 WIDTH=85> Plaatsing op de pagina Relatieve positie van het plaatje ten opzichte van de belendende tekst <IMG SRC=”imagename” ALIGN=RIGHT>
Images: alignment ALIGN=TOP Deze tekst is uitgelijnd met de bovenkant ALIGN=CENTER Deze tekst is uitgelijnd met het midden ALIGN=BOTTOM Deze tekst is uitgelijnd met de onderkant ALIGN=RIGHT Deze tekst staat links van het plaatje en bestaat uit meerdere regels
Images: alternatief Attribuut ALT Tekst ter vervanging van een plaatje Voor oude browsers die geen plaatjes kunnen afbeelden Voor mensen die de plaatjes “uit” hebben staan <IMG SRC="imagename" ALT="text"> De browser laat de tekst zien
Images en hyperlinks Ook van een image kan een hyperlink gemaakt worden. <A HREF="filename"> <IMG SRC="imagename"> </A>
Overige hyperlinks Tekst Geluid Animaties <A HREF="textfile.txt"> Geluid <A HREF="soundfile.wav"> Animaties <A HREF="animation.mov"> E.e.a. is afhankelijk van de mogelijkheden die de browser biedt. De extensie bepaalt het filetype.
Background Nieuwere browsers kunnen ook plaatjes als achtergrond afbeelden Wordt “getiled” afgebeeld Attribuut van de BODY tag <BODY BACKGROUND="imagename"> Vaak een zogenaamde texture
Kleuren Ook is het mogelijk de standaardkleuren van HTML documenten te wijzigen. Background color Text color Link color Followed link color Attribuut van de BODY tag <BODY BGCOLOR=BLACK TEXT=RED LINK=GREY VLINK=WHITE>
Kleuren: hexadecimaal Kleur kan ook als “getal” worden weergegeven Hexadecimaal (0 t/m 9, A t/m F) 6 cijfers 2 voor elke primaire beeldschermkleur Red, Green, Blue (RGB) Wit = FFFFFF, zwart = 000000, rood = FF0000, zilver = 9690CC <BODY BGCOLOR="A024FC">
Kleuren: WYSIWYG
Tabellen Tabeldefinitie Titel voor de tabel Rijdefinitie <TABLE> </TABLE> Attribuut BORDER <TABLE BORDER=4> Titel voor de tabel <CAPTION> </CAPTION> Rijdefinitie <TR> </TR>
Tabellen: cellen Header cell Data cell Attributen <TH> </TH> Data cell <TD> </TD> Attributen <TD ALIGN=CENTER VALIGN=TOP COLSPAN=2 ROWSPAN=3>
Tabellen: voorbeeld <TABLE BORDER=4> <CAPTION>Software Tools</CAPTION> <TR> <TH>Naam</TH> <TH>Studentnummer</TH> <TH>Cijfer</TH> </TR> <TD>Willem Alexander</TD> <TD>8998890</TD> <TD>5</TD> </TABLE>
Frames: voorbeeld Meer dan een document in een WWW-pagina
Frameset Er is een document dat de frames definieert. Dit document heeft zelf geen body. <FRAMESET> </FRAMESET> Attributen voor rijen en kolommen <FRAMESET ROWS=“100,20%,*”> <FRAMESET COLS=“10%,*,30”> Alternatieve pagina voor browsers zonder frames: <NOFRAMES> </NOFRAMES>
Frames: code De frames zelf bevatten de WWW-pagina’s <FRAME SRC="framefile"> Attributen voor kantlijn, naam, etc. <FRAME SRC="framename" MARGINHEIGHT=0 MARGINWIDTH=10 SCROLLING=NO NORESIZE NAME="framename"> Bij een anchor tag kan een TARGET attribuut gebruikt worden <A HREF="filename" TARGET="framename">
Frames: nesting Framesets kunnen genest worden Frames binnen frames <FRAMESET ROWS="50%,*"> <NOFRAMES><BODY>No frames!</BODY></NOFRAMES> <FRAMESET COLS="20%,80%"> <FRAME SRC="first.html" NAME="eerste"> <FRAME SRC="second.html" NAME="tweede"> </FRAMESET> <FRAME SRC="third.html" NAME="derde">
Standaarden Er zijn veel HTML standaarden 1.0, 2.0, 3.0, 3.2, 4.0 Elke standaard heeft z’n eigen tags Meestal een superset van de voorgaande, maar niet altijd Er zijn veel browsers en browser versies Elke browser ondersteunt een bepaalde standaard of een deel daarvan Sommige browsers hebben zelfs browser specifieke tags De verwerking van dezelfde tag kan verschillen
Compatibiliteit Er is door deze “chaos” geen absolute garantie te geven over het uiterlijk van een pagina bij de gebruiker De meeste browsers negeren tags die ze niet kennen Hoe geavanceerder de HTML tags, des te meer kans op discrepantie Er is een spanningsveld tussen geavanceerdheid en compatibiliteit van de pagina’s
Verder... Hier is slechts een deel van de beschikbare tags en attributen behandeld Er zijn met name veel andere attributen Zie HTML-boekje en experimenteer “Good artists copy, great artists steal” Document/frame source, document/frame info Save as Let op onjuist gebruik van HTML