Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen...

of 38 /38
Webdesign Webdesign

Embed Size (px)

Transcript of Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen...

  • Dia 1
  • Webdesign
  • Dia 2
  • HTML
  • Dia 3
  • HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker zoals kladblok volstaat. Er bestaan wel gesofisticeerde programmas om websites te maken, zoals Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive
  • Dia 4
  • HTML HTML-taal bestaat uit codes, die meestal in paren voorkomen (tags): een openingscode een afsluitcode Afsluitcode is gelijk aan de openingscode maar met dat verschil dat er een schuine streep (/) voorkomt te staan. De codes staan altijd tussen punthaken ( ).
  • Dia 5
  • HTML Voorbeeld: Hier komt je titel Hier komt je tekst
  • Dia 6
  • HTML De 4 dubbele codes of tags zijn ABSOLUUT nodig in ELKE html-pagina:
  • Dia 7
  • HTML Wordt een koppel genoemd omdat het een hoeveelheid gegevens tekst vb. kan bevatten. Elke pagina moet verplicht beginnen met en even verplicht eindigen met Het zijn codes die aan je browser vertellen dat hij van nu af aan tekst of afbeeldingen mag verwachten die hij netjes in een webpagina moet omzetten. De ruimte tussen die 2 tags moet ook (verplicht) verdeeld worden in HEAD- en een BODY-gedeelte
  • Dia 8
  • HTML Bevat een aantal gegevens die NIET op de webpagina zelf zullen terechtkomen. Is wel zichtbaar en wordt in de titelbalk van de browser weergegeven. De tekst die daarin staat wordt doorgaans ook opgeslagen in de bookmarks of favorieten als de bezoeker die wilt bewaren. Zorg dat daar kort en duidelijk staat wat je op deze pagina kunt vinden.
  • Dia 9
  • HTML Hiertussen komen de gegevens voor de eigenlijke webpagina. Alle tekst, afbeeldingen, geluiden, filmpjes etc. moeten daar dus te vinden zijn.
  • Dia 10
  • HTML Browsers: houden geen rekening waar jij de tekst afbreekt trekken zich niets aan van dubbele spaties, tabs of harde returns (hiervoor bestaan er mogelijkheden) een website kan er bij een andere browser anders uitzien
  • Dia 11
  • HTML Oefening typ de volgende structuur in de kladblok Hier komt je titel Hier komt je tekst
  • Dia 12
  • HTML Bekijk het resultaat in de browser Typ nu veel meer tekst tussen de body-tags en bekijk het resultaat in de browser
  • Dia 13
  • HTML Titelniveaus Hoofdtitel: Kleinste titel: Paragraaftags Tekst wordt mooi bij elkaar gehouden gescheiden door een witruimte. is niet echt nodig maar best overzichtelijk, een lege tag
  • Dia 14
  • HTML Afzonderlijke alineas : harde return Ook een lege tag, heeft geen nodig Op de plek waar je deze tag zet, wordt de tekst afgebroken en de rest gaat naar een nieuwe lijn. Er wordt geen witregel tussengevoegd, zoals bij de paragraaftag.
  • Dia 15
  • HTML Horizontale lijn Een andere manier om tekst af te scheiden. Die zet een lijn over de volle lengte van je browserscherm. Is ook terug een lege tag.
  • Dia 16
  • HTML Opmaaktags = bold of vet = underline of onderstreept = italic of cursief Om afzonderlijke woorden of gedeelten uit de tekst te laten uitspringen. De woorden tussen de twee tekst wordt naargelang de tag vet, onderstreept, of cursief geplaatst.
  • Dia 17
  • HTML Oefening blz. HTML3
  • Dia 18
  • HTML Lijst plaatsen op je site Genummerde en ongenummerde lijsten Genummerde lijst (ordered list): voorafgegaan door een volgnummer Ongenummerde lijst (unordered list): voorafgegaan door een bolletje of een ander symbool
  • Dia 19
  • HTML Genummerde lijst Wordt ingesloten door de tags: Elk apart item van de lijst wordt op zijn beurt voorafgegaan door de tag, de sluittag mag maar moet niet. Voorbeeld: Ten eerste Ten tweede Ten derde
  • Dia 20
  • HTML Ongenummerde lijst Wordt ingesloten door de tags: Elk apart item van de lijst wordt op zijn beurt voorafgegaan door de tag, de sluittag mag maar moet niet. Voorbeeld: Microsoft Adobe Macromedia
  • Dia 21
  • HTML Begrippenlijst of Definition List Wordt ingesloten door de tags: Elk begrip komt achter te staan. De uitleg van het begrip komt achter te staan. Aan deze lijst worden noch nummers, noch symbooltjes toegevoegd.
  • Dia 22
  • HTML Voorbeeld: Groen kleur van de hoop Geel kleur van de haat Rood kleur van de liefde
  • Dia 23
  • HTML Oefening blz. HTML5
  • Dia 24
  • HTML Standaarnummering door 1, 2, 3 enz. Veranderen? Voeg het attribuut: TYPE aan de tag Voorbeelden: : een nummering met A, B, C : een nummering met a, b, c : romeinse cijfers : kleine romeinse cijfers.
  • Dia 25
  • HTML Standaarongenummerde lijst d.m.v. zwarte bolletjes Veranderen? Voeg het attribuut: TYPE aan de tag Voorbeelden: : zwarte vierkantjes : open cirkeltjes Binnen de lijst mag je geen tags gebruiken.
  • Dia 26
  • HTML Tabellen Handig om gegevens op een webpagina te structureren. Tabellen gebruiken om: tekst of getallen te structuren afbeeldingen uit te lijnen lay-out van je pagina te maken
  • Dia 27
  • HTML Tabellen Een tabel begint en eindigt met de tags: Dit maakt een tabel zonder lijnen. Met lijnen moet de volgende tag gebruikt worden: Hoe hoger het cijfer hoe dikker de lijn.
  • Dia 28
  • HTML Rijen en kolommen Tussen de -tags een horizontale rij definiren. Binnen elke rij worden de kolommen gedefinieerd met de tags
  • Dia 29
  • HTML Een titel boven de tabel -tag zet een titel boven je tabel en centreert de tekst. Kolomtitels De kolomtitels worden in de browser in vetjes gezet en gecentreerd boven de kolom waar ze bij horen.
  • Dia 30
  • HTML Oefening blz. HTML6
  • Dia 31
  • HTML Hyperlinks Ook anker genoemd waaraan een bepaalde tekst of afbeelding aan een webpagina vastzit. Verankerd is aan een andere pagina. Een hyperlink is gemakkelijk te herkennen de muisaanwijzer verandert in een handje zodra je er op terecht komt. De hyperlinktag: De A van Anchor (anker)
  • Dia 32
  • HTML Hyperlinks Voorbeeld: Klik hier voor Pcpol HREF = HyperText REFerence. Een hyperlink kan ook naar een pagina op je eigen website verwijzen of naar een afbeelding: Fotos
  • Dia 33
  • HTML Hyperlinks Een hyperlink moet niet altijd naar een http-adres verwijzen, mag ook een ftp-adres zijn. Of naar een e-mailadres: e-mail Icolaes
  • Dia 34
  • HTML Hyperlinks Een verwijzing binnen dezelfde pagina. Eerst op de plaats waar je naartoe wilt springen een naam definiren met de tag Op een andere plaats naar die plaats verwijzen: Ga naar daar
  • Dia 35
  • HTML Figuren Om een figuur op de webpagina te plaatsen: of Afsluittag Om een hyperlink achter een figuur te verbergen:
  • Dia 36
  • HTML Kleuren Om een gekleurde achtergrond te verkrijgen: Om een tekst een ander uitzicht te geven: Size kan zowel n of +n zijn (n = natuurlijk getal)
  • Dia 37
  • Dia 38
  • VEEL SUCCES!!!!