1 / 54

HTML

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.

lindsey
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lex BijlsmaInformatica-Instituut Universiteit Utrecht

  2. HTML • HyperText Markup Language • Een taal om WWW pagina’s mee op te maken • Lay-out • Lettertype • Plaatjes • Links naar andere WWW pagina’s

  3. 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, ...

  4. 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, ...

  5. HTML-editors • Gespecialiseer-de teksteditors bieden syntaxkleuring, invoegen van tags met een enkele muisklik, ingebouwde browser. Voorbeelden: HTMLed, EditPlus, HoTMetaL

  6. WYSIWYG-editors • Vertonen de webpagina bijna precies zoals de browser dat zal doen.

  7. 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.

  8. 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

  9. 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>

  10. 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

  11. Opbouw van een HTML-document • Verplichte tags kun je bijvoorbeeld in een PFE-template zetten. <HTML> <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY> Dit is een HTML document! </BODY> </HTML>

  12. 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>

  13. 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.

  14. 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>

  15. 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>

  16. 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

  17. 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

  18. 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>

  19. Horizontale lijnen • Tag <HR> (horizontal rule) • Attributen voor lijndikte en lengte • <HR SIZE=4 WIDTH=”50%”>

  20. 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.

  21. 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

  22. 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

  23. 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

  24. 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

  25. Fysieke stijl:character format • Bold, <B> </B> • Italics, <I> </I> • Typewriter text, <TT> </TT> • Underline, <U> </U>

  26. 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.

  27. Escape sequences:voorbeelden • Speciale HTML-karakters • &lt; geeft < • &gt; geeft > • &amp; geeft & • Vreemde tekens • &ouml; geeft ö • &ntilde; geeft ñ • &Egrave; geeft È

  28. 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... • &lt; is niet gelijk aan &LT; • &ouml; is niet gelijk aan &Ouml;

  29. 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

  30. 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>

  31. 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>

  32. 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

  33. 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

  34. 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>.

  35. 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">

  36. 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>

  37. 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

  38. 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

  39. Images en hyperlinks • Ook van een image kan een hyperlink gemaakt worden. • <A HREF="filename"> <IMG SRC="imagename"> </A>

  40. 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.

  41. Nieuwere browsers kunnen ook plaatjes als achtergrond afbeelden Wordt “getiled” afgebeeld Attribuut van de BODY tag <BODY BACKGROUND="imagename"> Vaak een zogenaamde texture Background

  42. 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>

  43. 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">

  44. Kleuren: WYSIWYG

  45. Tabellen • Tabeldefinitie • <TABLE> </TABLE> • Attribuut BORDER • <TABLE BORDER=4> • Titel voor de tabel • <CAPTION> </CAPTION> • Rijdefinitie • <TR> </TR>

  46. Tabellen: cellen • Header cell • <TH> </TH> • Data cell • <TD> </TD> • Attributen • <TD ALIGN=CENTER VALIGN=TOP COLSPAN=2 ROWSPAN=3>

  47. 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>

  48. Frames: voorbeeld • Meer dan een document in een WWW-pagina

  49. 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>

  50. 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">

More Related