Software Tools
Download
Report
Transcript Software Tools
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
Voorbeelden: HTMLed, EditPlus, HoTMetaL
Gespecialiseerde teksteditors
bieden
syntaxkleuring,
invoegen van
tags met een
enkele muisklik,
ingebouwde
browser.
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
<HTML>
<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>
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 HTMLdocument.
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
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
<UL>
<LI>Appels
<LI>Peren
</UL>
• Appels
• Peren
Opsomming met een bullet voor elk item
<UL> </UL>
<LI>
Numbered list
Opsomming met een oplopend getal voor elk
item
<OL> </OL>
Definitielijsten
Definition list
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
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
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
<A HREF="personal/cv.html">My CV</A>
Absoluut (de complete URL)
<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:[email protected]">
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
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
<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
Vaak een
Nieuwere browsers
kunnen ook plaatjes als zogenaamde texture
achtergrond afbeelden
Wordt “getiled”
afgebeeld
Attribuut van de BODY
tag
<BODY
BACKGROUND="imagename">
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
<TABLE> </TABLE>
Attribuut BORDER
<TABLE BORDER=4>
Titel voor de tabel
<CAPTION> </CAPTION>
Rijdefinitie
<TR> </TR>
Tabellen: cellen
Header cell
<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>
<TR>
<TD>Willem Alexander</TD>
<TD>8998890</TD>
<TD>5</TD>
</TR>
</TABLE>
Frames: voorbeeld
Meer dan een document in een WWWpagina
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 WWWpagina’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">
</FRAMESET>
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