De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

HTML Lex Bijlsma Informatica-Instituut Universiteit Utrecht Lex Bijlsma Informatica-Instituut Universiteit Utrecht.

Verwante presentaties


Presentatie over: "HTML Lex Bijlsma Informatica-Instituut Universiteit Utrecht Lex Bijlsma Informatica-Instituut Universiteit Utrecht."— Transcript van de presentatie:

1 HTML Lex Bijlsma Informatica-Instituut Universiteit Utrecht Lex Bijlsma Informatica-Instituut Universiteit Utrecht

2 HTML zHyperText Markup Language zEen taal om WWW pagina’s mee op te maken yLay-out yLettertype yPlaatjes yLinks naar andere WWW pagina’s

3 HTML is ASCII zEen HTML-document of WWW-pagina bestaat uit gewone tekst. yASCII yKan bewerkt worden met bijvoorbeeld PFE. zIn de tekst wordt een structuur aangegeven. yTitels, kopjes, plaatjes, paragrafen, tabellen, lijsten, links naar andere pagina’s,...

4 HTML: Tags zDeze structuurelementen worden gedefinieerd met HTML-tags. yEen vlag waarmee aangegeven wordt om wat voor structuur-element het gaat yDe HTML tags worden begrepen door de WWW browser. zVoor elk structuur-element is er een tag. y Titels, kopjes, tabellen, lijsten, plaatjes,...

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

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

7 WYSIWYG: voor- en nadelen zVoordeel van een WYSIWIG-editor is dat je de te bereiken effecten meteen visueel voor je ziet. zNadeel is dat niet alle gewenste effecten langs deze weg te bereiken zijn. zMogelijk compromis: ruwe versie in WYSIWYG, fijnregeling door bewerking HTML-tags.

8 HTML-tags zHTML-tags: algemene vorm yLeft angle bracket, tag name, right angle bracket  Bijvoorbeeld: zStructuur-elementen kunnen weer andere structuur-elementen bevatten. yPlaatjes in een tabel yIn HTML gerealiseerd door geneste paren

9 Tags: paren en attributen zTags komen vaak in paren voor. yBegintag en eindtag yEen eindtag (of closing tag) geeft het einde van een structuur-element aan. yEen eindtag is een begintag met een slash (/) voor de tagname.   zSommige tags hebben attributen. y y  Quotes bij attribuutwaarden ( ” ), behalve bij keywords:

10 Minimaal HTML document zElk HTML-document moet bepaalde standaard structuur-elementen en dus HTML-tags bevatten.   (declaratie van gebruikte taal)   (informatie over het document) xTitle   (het document zelf) xDe zichtbare inhoud

11 Opbouw van een HTML-document Hello World Hello World Dit is een HTML document! zVerplichte tags kun je bijvoorbeeld in een PFE-template zetten.

12 Title en headings   yDe titel van een document verschijnt in de title bar van de browser. zHeadings yKopjes in verschillende grootten   y... y y

13 Layout HTML-code is onbelangrijk zWitruimte yRegelovergangen, extra spaties, tabs en overige witruimte in de ASCII-tekst leiden niet tot witruimte in het afgebeelde HTML- document. yEr zijn speciale voorzieningen (tags) nodig voor extra witruimte. zWordwrapping vindt automatisch plaats. yAls er geen ruimte meer is op een regel wordt een woord automatisch op de volgende regel geplaatst.

14 Alinea’s zParagraph yGeeft een regelovergang en extra witruimte y y yDe end tag mag worden weggelaten. xBrowsers weten dat een nieuwe paragraaf de oude afsluit. zLine Break yGeeft alleen een regelovergang y y

15 Centreren ALIGN  Bij de paragraph tag kan een ALIGN attribuut worden gebruikt.  …  … yAlleen bij gebruik van begin/end tags zVoor centreren van een groter paginadeel is handiger: … …

16 Lijsten zList yLijst, opsomming yVerschillende vormen yUnnumbered list xOpsomming met een bullet voor elk item   yNumbered list xOpsomming met een oplopend getal voor elk item x x

  • Appels
  • Peren
Appels Peren

17 Definitielijsten zDefinition list xEen lijst van termen met hun definities    Definition term  Definition definition zGeneste lists zijn mogelijk xLists binnen lists

UU Universiteit Utrecht Universiteit Utrecht
UU Universiteit Utrecht

18 Speciale vormgeving zPreformatted text yVoor het weergeven van tekst waarin de witruimte van belang is xProgramma’s y y yTekst wordt afgebeeld “as is”. zQuotation yVoor langere citaten y y

19 Horizontale lijnen  Tag (horizontal rule) yAttributen voor lijndikte en lengte x x

20 Logische stijl zOorspronkelijk was er in HTML een strikte scheiding tussen inhoud en presentatie. yDe tags geven alleen de betekenis van een structuur-element aan en een relatieve ordening. x“Dit is een titel” x“De titel moet groter zijn dan de tekst zelf” yDe weergave wordt aan de browser en de gebruiker overgelaten. xVerschillende browsers geven verschillende resultaten.

21 Logische stijl: voordelen zPlatformonafhankelijk yOude browsers, zwart/wit scherm zDe gebruiker is de baas over z’n scherm. yEenmaal aanpassen aan eigen voorkeuren zMeer consistentie in de opmaak van documenten  versus Times Roman Bold 24 punts

22 Logische stijl: nadelen zNadelen yAbsolute plaatsing van structuur-elementen is met HTML niet mogelijk. x“30 millimeter rechts van de linkerkantlijn” yDe auteur heeft geen zekerheid over het uiterlijk van de pagina’s. zVerschuiving richting absolute lay-out yToekomstige HTML-versies yConsensus over afbeelden logische stijl

23 Logische stijl: character format  Definition, xVoor definities van woorden, meestal italics  Emphasis, xVoor nadruk, meestal italics  Cite, xVoor titels van boeken, films, etc., meestal italics  Code, xVoor programma’s, meestal fixed-width  Strong, xVoor extra nadruk, meestal bold

24 Fysieke stijl zVoor het character format (bold, italics) is er naast de logische stijl ook een fysieke stijl. yVaak hetzelfde resultaat als de logische stijl yMaar wel zekerheid

25 Fysieke stijl: character format  Bold,  Italics,  Typewriter text,  Underline,

26 Escape sequences  en & hebben in HTML een speciale betekenis. yZe kunnen niet zomaar in een tekst gebruikt worden. zEen aantal bijzondere karakters is niet beschikbaar via het toetsenbord. yVreemde talen, wiskundige symbolen zOm deze tekens af te beelden in een browser zijn speciale tags nodig: escape sequences.

27 Escape sequences: voorbeelden zSpeciale HTML-karakters  <  < geeft <  >  > geeft >  &  & geeft & zVreemde tekens  ö  ö geeft ö  ñ  ñ geeft ñ  È  È geeft È

28 HTML en case sensitivity zHTML is case insensitive. .  is gelijk aan is gelijk aan. yVaak worden hoofdletters gebruikt om de tags herkenbaar te maken. zMaar er zijn uitzonderingen...  <<  < is niet gelijk aan <  öÖ  ö is niet gelijk aan Ö

29 Font tag zVoor het wijzigen van de grootte van de tekst en de kleur van de tekst  “Fysieker” dan   SIZECOLOR  Attributen SIZE en COLOR x x   FACE  Attribuut FACE

30 Hyperlinks zDe kracht van HTML zit in de hyperlinks. zAnchor   Tekst die als hyperlink dient My homepage

31 Hyperlinks: relatief en absoluut zPadnamen yRelatief ten opzichte van de locatie van het huidige document yAbsoluut (de complete URL) My CV My CV My CV My CV

32 Hyperlinks: meestal relatief zIn het algemeen worden relatieve padnamen gebruikt. yEenvoudiger om een groep documenten te verplaatsen yEfficiënter om het document op te vragen van de WWW-server yMinder typwerk zAbsolute padnamen wanneer gelinkt wordt naar een niet direct gerelateerd document

33 Verwijzingen binnen een document zAnchors kunnen ook gebruikt worden om naar een bepaalde paragraaf van een ander of hetzelfde document te springen yNamed anchors markeren target   … yAangepaste hyperlink x x Tekst die als hyperlink dient yVaak bij inhoudsopgave boven aan de pagina

34 Mailto links yVoor het eenvoudig versturen van vanuit de browser   Tekst die als mailto link dient You can reach me by sending .

35 Images zDe meeste browsers kunnen plaatjes afbeelden yGIF- of JPEG-formaat y y HREF  Imagename (of URL); net als bij HREF yRelatief of absoluut (de complete URL)

36 Images: attributen zHoogte en breedte xVersnelt het opvragen van een pagina x x zPlaatsing op de pagina xRelatieve positie van het plaatje ten opzichte van de belendende tekst x x

37 Images: alignment ALIGN=TOP ALIGN=CENTER ALIGN=BOTTOM Deze tekst is uitgelijnd met de bovenkant Deze tekst is uitgelijnd met het midden Deze tekst is uitgelijnd met de onderkant ALIGN=RIGHT Deze tekst staat links van het plaatje en bestaat uit meerdere regels

38 Images: alternatief ALT  Attribuut ALT yTekst ter vervanging van een plaatje xVoor oude browsers die geen plaatjes kunnen afbeelden xVoor mensen die de plaatjes “uit” hebben staan   xDe browser laat de tekst zien

39 Images en hyperlinks zOok van een image kan een hyperlink gemaakt worden. y y

40 Overige hyperlinks zTekst   zGeluid   zAnimaties y y zE.e.a. is afhankelijk van de mogelijkheden die de browser biedt. zDe extensie bepaalt het filetype.

41 Background zNieuwere browsers kunnen ook plaatjes als achtergrond afbeelden yWordt “getiled” afgebeeld BODY  Attribuut van de BODY tag zVaak een zogenaamde texture

42 Kleuren zOok is het mogelijk de standaardkleuren van HTML documenten te wijzigen. yBackground color yText color yLink color yFollowed link color yAttribuut van de BODY tag x x

43 Kleuren: hexadecimaal zKleur kan ook als “getal” worden weergegeven yHexadecimaal (0 t/m 9, A t/m F) y6 cijfers y2 voor elke primaire beeldschermkleur yRed, Green, Blue (RGB) yWit = FFFFFF, zwart = , rood = FF0000, zilver = 9690CC y y

44 Kleuren: WYSIWYG

45 Tabellen zTabeldefinitie   yAttribuut BORDER   zTitel voor de tabel   zRijdefinitie y y

46 Tabellen: cellen zHeader cell   zData cell   zAttributen y

47 Tabellen: voorbeeld Software Tools Software Tools Naam Naam Studentnummer Studentnummer Cijfer Cijfer Willem Alexander Willem Alexander

48 Frames: voorbeeld zMeer dan een document in een WWW- pagina

49 Frameset zEr is een document dat de frames definieert. yDit document heeft zelf geen body. y y yAttributen voor rijen en kolommen x x  Alternatieve pagina voor browsers zonder frames:

50 Frames: code zDe frames zelf bevatten de WWW- pagina’s y y yAttributen voor kantlijn, naam, etc. x x TARGET  Bij een anchor tag kan een TARGET attribuut gebruikt worden x x

51 Frames: nesting zFramesets kunnen genest worden yFrames binnen frames No frames! No frames!

52 Standaarden zEr zijn veel HTML standaarden y1.0, 2.0, 3.0, 3.2, 4.0 yElke standaard heeft z’n eigen tags xMeestal een superset van de voorgaande, maar niet altijd zEr zijn veel browsers en browser versies yElke browser ondersteunt een bepaalde standaard of een deel daarvan ySommige browsers hebben zelfs browser specifieke tags yDe verwerking van dezelfde tag kan verschillen

53 Compatibiliteit zEr is door deze “chaos” geen absolute garantie te geven over het uiterlijk van een pagina bij de gebruiker yDe meeste browsers negeren tags die ze niet kennen yHoe geavanceerder de HTML tags, des te meer kans op discrepantie yEr is een spanningsveld tussen geavanceerdheid en compatibiliteit van de pagina’s

54 Verder... zHier is slechts een deel van de beschikbare tags en attributen behandeld yEr zijn met name veel andere attributen xZie HTML-boekje en experimenteer z“Good artists copy, great artists steal” yDocument/frame source, document/frame info ySave as yLet op onjuist gebruik van HTML


Download ppt "HTML Lex Bijlsma Informatica-Instituut Universiteit Utrecht Lex Bijlsma Informatica-Instituut Universiteit Utrecht."

Verwante presentaties


Ads door Google