Post on 08-Jun-2015
HTML
Lex BijlsmaLex BijlsmaInformatica-InstituutInformatica-Instituut Universiteit Utrecht Universiteit Utrecht
HTMLHTML
HyperText Markup LanguageEen taal om WWW pagina’s mee op
te maken Lay-out Lettertype Plaatjes Links naar andere WWW pagina’s
HTML is ASCIIHTML 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: TagsHTML: 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-tagsHTML-tags
HTML-tags: algemene vorm Left angle bracket, tag name, right angle
bracketBijvoorbeeld: <TITLE><TITLE>
Structuur-elementen kunnen weer andere structuur-elementen bevatten. Plaatjes in een tabel In HTML gerealiseerd door geneste paren
Tags: paren en attributenTags: 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></TAG>
Sommige tags hebben attributen. <TAG ATTRIBUTE="VALUE"><TAG ATTRIBUTE="VALUE"> Quotes bij attribuutwaarden (”), behalve
bij keywords: <P ALIGN=CENTER><P ALIGN=CENTER>
Minimaal HTML documentMinimaal HTML document
Elk HTML-document moet bepaalde standaard structuur-elementen en dus HTML-tags bevatten. <HTML><HTML> (declaratie van gebruikte taal) <HEAD><HEAD> (informatie over het document)
Title
<BODY><BODY> (het document zelf)De zichtbare inhoud
Opbouw van een HTML-document Opbouw van een HTML-document
<HTML><HTML><HEAD><HEAD><TITLE>Hello World</TITLE><TITLE>Hello World</TITLE></HEAD></HEAD><BODY><BODY>Dit is een HTML document!Dit is een HTML document!</BODY></BODY></HTML></HTML>
Verplichte tags kun je bijvoorbeeld in een PFE-template zetten.
Title en headingsTitle en headings
<TITLE><TITLE> De titel van een document verschijnt
in de title bar van de browser.Headings
Kopjes in verschillende grootten <H1> </H1><H1> </H1> ... <H6> </H6><H6> </H6>
Layout HTML-code is onbelangrijkLayout 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’sAlinea’s
Paragraph Geeft een regelovergang en extra witruimte <P> </P><P> </P> De end tag mag worden weggelaten.
Browsers weten dat een nieuwe paragraaf de oude afsluit.
Line Break Geeft alleen een regelovergang <BR><BR>
CentrerenCentreren
Bij de paragraph tag kan een ALIGNALIGN attribuut worden gebruikt. <P ALIGN=CENTER> … </P><P ALIGN=CENTER> … </P> Alleen bij gebruik van begin/end tags
Voor centreren van een groter paginadeel is handiger:<CENTER> … </CENTER><CENTER> … </CENTER>
LijstenLijsten
List Lijst, opsomming Verschillende vormen Unnumbered list
Opsomming met een bullet voor elk item<UL> </UL><UL> </UL><LI><LI>
Numbered listOpsomming met een oplopend getal voor elk
item<OL> </OL><OL> </OL>
<UL><UL><LI>Appels<LI>Appels<LI>Peren<LI>Peren</UL></UL>
• Appels• Peren
DefinitielijstenDefinitielijsten
Definition listEen lijst van termen met hun definities<DL> </DL><DL> </DL>Definition term <DT><DT>Definition definition <DD><DD>
Geneste lists zijn mogelijkLists binnen lists
<DL><DL><DT>UU<DT>UU<DD>Universiteit Utrecht<DD>Universiteit Utrecht</DL></DL>
UU Universiteit Utrecht
Speciale vormgevingSpeciale vormgeving
Preformatted text Voor het weergeven van tekst waarin de
witruimte van belang isProgramma’s
<PRE> </PRE><PRE> </PRE> Tekst wordt afgebeeld “as is”.
Quotation Voor langere citaten <BLOCKQUOTE> </BLOCKQUOTE><BLOCKQUOTE> </BLOCKQUOTE>
Horizontale lijnen
Tag <HR><HR> (horizontal rule) Attributen voor lijndikte en lengte
<HR SIZE=4 WIDTH=”50%”><HR SIZE=4 WIDTH=”50%”>
Logische stijlLogische 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: voordelenLogische 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: nadelenLogische stijl: nadelen
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 formatLogische stijl:character format
Definition, <DFN> </DFN><DFN> </DFN>Voor definities van woorden, meestal italics
Emphasis, <EM> </EM><EM> </EM>Voor nadruk, meestal italics
Cite, <CITE> </CITE><CITE> </CITE>Voor titels van boeken, films, etc., meestal italics
Code, <CODE> </CODE><CODE> </CODE>Voor programma’s, meestal fixed-width
Strong, <STRONG> </STRONG><STRONG> </STRONG>Voor extra nadruk, meestal bold
Fysieke stijlFysieke 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 formatFysieke stijl:character format
Bold, <B> </B><B> </B> Italics, <I> </I><I> </I>
Typewriter text, <TT> </TT><TT> </TT>
Underline, <U> </U><U> </U>
Escape sequencesEscape 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:voorbeeldenEscape sequences:voorbeelden
Speciale HTML-karakters << geeft < >> geeft > && geeft &
Vreemde tekens öö geeft ö ññ geeft ñ ÈÈ geeft È
HTML en case sensitivityHTML en case sensitivity
HTML is case insensitive. <HTML><HTML> is gelijk aan <html><html> is gelijk aan <hTmL>.<hTmL>.
Vaak worden hoofdletters gebruikt om de tags herkenbaar te maken.
Maar er zijn uitzonderingen... << is niet gelijk aan << öö is niet gelijk aan ÖÖ
Font tagFont tag
Voor het wijzigen van de grootte van de tekst en de kleur van de tekst “Fysieker” dan <H3><H3> <FONT> </FONT><FONT> </FONT> Attributen SIZESIZE en COLORCOLOR
<FONT SIZE="+2"><FONT SIZE="+2"><FONT SIZE="3"><FONT SIZE="3"><FONT COLOR=RED><FONT COLOR=RED>
Attribuut FACEFACE
HyperlinksHyperlinks
De kracht van HTML zit in de hyperlinks.
Anchor <A HREF="filename"><A HREF="filename">
Tekst die als hyperlink dient
</A></A><A HREF=<A HREF="homepage.htmlhomepage.html">>My homepageMy homepage</A></A>
Hyperlinks:relatief en absoluutHyperlinks:relatief en absoluut
Padnamen Relatief ten opzichte van de locatie van het huidige document
Absoluut (de complete URL)
<A HREF=<A HREF="personal/cv.htmlpersonal/cv.html">My CV</A>>My CV</A>
<A HREF=<A HREF="http://www.provider.nl/~myname/personal/cv.htmlhttp://www.provider.nl/~myname/personal/cv.html">>My CV</A>My CV</A>
Hyperlinks:meestal relatiefHyperlinks: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 documentVerwijzingen 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 NAME="anchorname"> … </A></A> Aangepaste hyperlink
<A HREF="(filename)#anchorname"><A HREF="(filename)#anchorname"> Tekst die als hyperlink dient</A></A>
Vaak bij inhoudsopgave boven aan de pagina
Mailto linksMailto links
Voor het eenvoudig versturen van e-mail vanuit de browser
<A HREF="mailto:email-adres"><A HREF="mailto:email-adres">Tekst die als mailto link dient
</A></A>
You can reach me by sendingYou can reach me by sending<A HREF=<A HREF="mailto:myname@provider.nlmailto:myname@provider.nl">>e-mail</A>.e-mail</A>.
ImagesImages
De meeste browsers kunnen plaatjes afbeelden GIF- of JPEG-formaat <IMG SRC="imagename"><IMG SRC="imagename"> Imagename (of URL); net als bij HREFHREF Relatief of absoluut (de complete URL)
<IMG SRC=<IMG SRC="http://www.cs.uu.nl/icons/li-dsol.gifhttp://www.cs.uu.nl/icons/li-dsol.gif">>
Images: attributenImages: attributen
Hoogte en breedteVersnelt het opvragen van een pagina<IMG SRC="imagename" HEIGHT=100 <IMG SRC="imagename" HEIGHT=100 WIDTH=85>WIDTH=85>
Plaatsing op de paginaRelatieve positie van het plaatje ten
opzichte van de belendende tekst<IMG SRC=”imagename” ALIGN=RIGHT><IMG SRC=”imagename” ALIGN=RIGHT>
Images: alignmentImages: alignment
ALIGN=TOPALIGN=TOP
ALIGN=CENTERALIGN=CENTER
ALIGN=BOTTOMALIGN=BOTTOM
Deze tekst is uitgelijnd met de bovenkantDeze tekst is uitgelijnd met de bovenkant
Deze tekst is uitgelijnd met het middenDeze tekst is uitgelijnd met het midden
Deze tekst is uitgelijnd met de onderkantDeze tekst is uitgelijnd met de onderkant
ALIGN=RIGHTALIGN=RIGHTDeze tekst staat links van het plaatje enDeze tekst staat links van het plaatje enbestaat uit meerdere regelsbestaat uit meerdere regels
Images: alternatiefImages: alternatief
Attribuut ALTALT 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"><IMG SRC="imagename" ALT="text">De browser laat de tekst zien
Images en hyperlinksImages en hyperlinks
Ook van een image kan een hyperlink gemaakt worden. <A HREF="filename"><A HREF="filename">
<IMG SRC="imagename"><IMG SRC="imagename">
</A></A>
Overige hyperlinksOverige hyperlinks
Tekst <A HREF="textfile.<A HREF="textfile.txttxt">">
Geluid <A HREF="soundfile.<A HREF="soundfile.wavwav">">
Animaties <A HREF="animation.<A HREF="animation.movmov">">
E.e.a. is afhankelijk van de mogelijkheden die de browser biedt.
De extensie bepaalt het filetype.
BackgroundBackground
Nieuwere browsers kunnen ook plaatjes als achtergrond afbeelden Wordt “getiled”
afgebeeld Attribuut van de BODYBODY
tag<BODY<BODY
BACKGROUND="imagename">BACKGROUND="imagename">
Vaak een zogenaamde texture
KleurenKleuren
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 <BODY BGCOLOR=BLACK TEXT=RED LINK=GREY VLINK=WHITE>VLINK=WHITE>
Kleuren: hexadecimaalKleuren: 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"><BODY BGCOLOR="A024FC">
Kleuren: WYSIWYG
TabellenTabellen
Tabeldefinitie <TABLE> </TABLE><TABLE> </TABLE> Attribuut BORDER
<TABLE BORDER=4><TABLE BORDER=4>
Titel voor de tabel <CAPTION> </CAPTION><CAPTION> </CAPTION>
Rijdefinitie <TR> </TR><TR> </TR>
Tabellen: cellenTabellen: cellen
Header cell <TH> </TH><TH> </TH>
Data cell <TD> </TD><TD> </TD>
Attributen <TD ALIGN=CENTER VALIGN=TOP<TD ALIGN=CENTER VALIGN=TOPCOLSPAN=2 ROWSPAN=3>COLSPAN=2 ROWSPAN=3>
Tabellen: voorbeeldTabellen: voorbeeld
<TABLE BORDER=4><TABLE BORDER=4><CAPTION>Software Tools</CAPTION><CAPTION>Software Tools</CAPTION><TR><TR> <TH>Naam</TH><TH>Naam</TH> <TH>Studentnummer</TH><TH>Studentnummer</TH> <TH>Cijfer</TH><TH>Cijfer</TH></TR></TR><TR><TR> <TD>Willem Alexander</TD><TD>Willem Alexander</TD> <TD>8998890</TD><TD>8998890</TD> <TD>5</TD><TD>5</TD></TR></TR></TABLE></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><FRAMESET> </FRAMESET> Attributen voor rijen en kolommen
<FRAMESET ROWS=“100,20%,*”><FRAMESET ROWS=“100,20%,*”><FRAMESET COLS=“10%,*,30”><FRAMESET COLS=“10%,*,30”>
Alternatieve pagina voor browsers zonder frames: <NOFRAMES> </NOFRAMES><NOFRAMES> </NOFRAMES>
Frames: codeFrames: code
De frames zelf bevatten de WWW-pagina’s <FRAME SRC="framefile"><FRAME SRC="framefile"> Attributen voor kantlijn, naam, etc.
<FRAME SRC="framename" MARGINHEIGHT=0 <FRAME SRC="framename" MARGINHEIGHT=0 MARGINWIDTH=10 SCROLLING=NO NORESIZE MARGINWIDTH=10 SCROLLING=NO NORESIZE NAME="framename">NAME="framename">
Bij een anchor tag kan een TARGETTARGET attribuut gebruikt worden<A HREF="filename" TARGET="framename"><A HREF="filename" TARGET="framename">
Frames: nestingFrames: nesting
Framesets kunnen genest worden Frames binnen frames
<FRAMESET ROWS=<FRAMESET ROWS="50%,*50%,*">> <NOFRAMES><BODY>No frames!</BODY></NOFRAMES><NOFRAMES><BODY>No frames!</BODY></NOFRAMES> <FRAMESET COLS=<FRAMESET COLS="20%,80%20%,80%">> <FRAME SRC=<FRAME SRC="first.htmlfirst.html" NAME= NAME="eersteeerste">> <FRAME SRC=<FRAME SRC="second.htmlsecond.html" NAME= NAME="tweedetweede">> </FRAMESET></FRAMESET> <FRAME SRC=<FRAME SRC="third.htmlthird.html" NAME= NAME="derdederde">></FRAMESET></FRAMESET>
StandaardenStandaarden
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
CompatibiliteitCompatibiliteit
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...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