Site Map Opdrachten Theorie Modulen Trajecten

HTML: 07- Webpagina Inhoud- Overige


Afbeelding

afbeelding in HTML code Figuur 1: een afbeelding in HTML code

Er wordt gezegd dat een afbeelding meer zegt dan duizend woorden. Voor het plaatsen van een afbeelding gebruik je de “img (image) tag”, dat een lege tag is. In deze tag zijn een aantal attributen die gebruikt kunnen worden waarvan één verplicht is. Het verplichte attribuut is src (source) waarmee je aangeeft wat de URL is van de afbeelding.
Met het attribuut alt (alternative text) kan je aangeven welke tekst wordt getoond indien de afbeelding niet bestaat. Het bestand kan namelijk van naam veranderen of verwijderd worden. Het aanpassen van de omtrekken van een afbeelding kan met de tags height (hoogte) en width (breedte). De waarden van deze tags worden opgegeven in pixels. Vul je een van beide waarden in, dan wordt de afbeelding automatisch naar verhouding geschaald.
Stel je gebruikt een afbeelding met de afmeting 1920 bij 1080. De ruimte die je hebt in de breedte is 540 pixels, dan is het verstandig om een kopie van de afbeelding op te slaan met gewenste afmetingen. De foto zal de afmeting krijgen van 960 bij 540. Dit heeft als voordeel dat
  • de afbeelding kleiner is, qua afmeting en aantal MBs
  • de afbeelding sneller geladen wordt
  • de pagina sneller geladen wordt

Terug naar boven

Hyperlinks zijn een belangrijk onderdeel van HTML omdat je hiermee kan verwijzen naar andere webpagina's, locaties op (andere) webpagina's of mediabestanden. Een essentieel onderdeel in een website. Om zo'n hyperlink toe te voegen gebruik je de "a (anchor) tag". In de tag kan je een aantal attributen gebruiken waarvan href (hyperlink reference) als enige verplicht is.

hyperlink in HTML code
Figuur 2: een hyperlink in HTML code

Het attribuut href krijgt de waarde van een URL. Na het klikken van de hyperlink wordt de gebruiker doorverwezen naar de opgegeven URL. Naast het doorverwijzen naar een URL kan dit ook naar een tag. Zo voorkom je dat de gebruiker naar beneden moet scrollen en komt de tag bovenaan de webpagina te staan. Dit laatste wordt een "bookmark" genoemd. Om dit te bereiken moet de tag waarnaar je wil verwijzen een waarde voor het id attribuut, bijvoorbeeld paragraaf2 (id="paragraaf2"). De waarde van de href attribuut wordt hierdoor #paragraaf2 (href="#paragraaf2").

bookmark in HTML code
Figuur 3: een bookmark in HTML code

Houdt er rekening mee dat wanneer je een bookmark gebruikt, de webpagina niet altijd gaat scrollen. Om deze te laten scrollen moet er onder de tag waarnaar verwezen wordt, voldoende informatie zijn toegevoegd waardoor deze tag ook daadwerkelijk bovenaan kan staan.
Een hyperlink kan op twee manieren worden geopend, namelijk op dezelfde pagina of in een nieuw tabblad. Om hierover een keuze te kunnen maken gebruik je het target attribuut. Om een webpagina te openen in een nieuw tabblad, krijgt deze de waarde "_blank" (zie figuur 2). Wil je de webpagina in dezelfde scherm openen, dan gebruik je de waarde "_self". Gebruik je deze attribuut niet, dan wordt automatisch "target=_self" gebruikt.

Terug naar boven

Extern

Als je filmpjes online wil tonen dan is de kans groot dat je YouTube of Vimeo gebruikt. Wanneer je bezig bent (met je online portfolio), wil je dit ook op je eigen website tonen. Maar hoe doe je dat?

iframe in HTML code
Figuur 4: een iframe in HTML code

Dit wordt gedaan met de "iframe (inline frame) tag". Deze tag biedt de mogelijkheid om in je webpagina, te verwijzen maar een andere URL. De attributen die je kan gebruiken zijn height, width en de verplichte src (source). Met height en width bepaal je respectievelijk de hoogte en de breedte. Het attribuut src verwijst naar de URL.
Er is nog een vierde attribuut (dat veel browsers ondersteunen) genaamd allowfullscreen. Deze wordt alleen gebruikt wanneer je via de "iframe tag" een filmpje wil tonen. Dit geeft de gebruiker de mogelijkheid het filmpje het hele scherm te laten vullen.

Terug naar boven

Symbolen

Bij het gebruik van symbolen kan het voorkomen dat de browser deze niet goed toont. Om zeker te zijn dat deze symbolen worden getoond, kan je gebruik maken van hun HTML code. In onderstaand tabel is een overzicht van symbolen met bijbehorende code en waarvoor je ze gebruikt.
 
Symbool HTML code Gebruik
© © Het copyright teken
€ Om geld in euro’s weer te geven
… Om aan te geven dat de tekst wordt afgekapt
» » Voor het gebruik in breadcrumbs
® ® Om een merknaam aan te geven
™ Om eentrade mark aan te geven
Tabel 1: symbolen in HTML

Terug naar boven



Ga verder naar HTML: 08- Block vs Inline
Over Visual Code

Visual Code is een methode, opgezet voor iedereen die een website wil leren maken. Er zijn verschillende soorten websites. Deze soorten websites zijn opgedeeld in trajecten. Deze trajecten zijn opgedeeld in modulen. Zo begin je met het opzetten van een statische website om deze steeds verder uit te breiden.
Contact

Twitter | Vimeo