X

Sinterklaasgedichten maak je simpel, snel en origineel!

  • Ontvang 5 originele gedichten
  • Volledig gepersonaliseerd
  • In 2 minuten klaar!
Ga naar sinterklaasgedichten.net
Infoyo
Vragen en antwoorden
Zoek artikelen:

Enquete iPhone 4

Ontvang het laatste nieuws over "Computers en internet" en maak kans op 1000 euro cash.
Laat nu je e-mailadres achter. Speel gratis mee.


html: 2 - De basis van de indeling.

Venster sluiten

Maak een melding van dit artikel
Selecteer de motivatie van je melding:
Spam / reclame Misleidende of onduidelijke inhoud
Lage inhoudelijke kwaliteit Niet Nederlands
Erotische inhoud Artikel bestaat reeds op internet
Gokken / Illegale promotie Andere reden...

Omschrijf de motivatie van je melding:
Venster sluiten

Stuur dit artikel door
Je naam:
Je e-mailadres:
E-mailadres ontvanger:
Artikelscore
+1
  Goed artikel ( +1 )
  Slecht artikel ( 0 )
RSS van Xiotin Xiotin Auteur op infoyo sinds
18 December 2009


Bekijk het profiel van Xiotin
Datum: 13-01-2010
Auteur: Xiotin
In deze serie artikelen wil ik uitleggen wat HTML is, omdat dit de meest belangrijke programmeertaal is voor het programmeren van websites. Wat je verder ook gebruikt, HTML komt er altijd bij kijken.

Notepadd++

Ik heb de keuze en de reden voor notepad++ in deel 1 al uitgelegd en zal dat daarom hier niet weer opnieuw behandelen.

Ik benoem het programma hier enkel en allen omdat ik denk dat den mensen die het nog niet gebruikten het beter vanaf nu wel kunnen gaan doen, omdat het toch echt overzichtelijker werkt.

Zoals uit de tekst van hierboven blijkt, ga ik ervan uit dat je de inhoud van het voorgaande artikel kent, en herhaal ik de uitleg daaruit niet (of nauwelijks) opnieuw.

Adres van je bestand

Voor je een link of een plaatje kunt toevoegen moet je eerst weten wat het adres naar je bestand is.

In dit voorbeeld staat mijn test pagina op de volgende locatie op mijn harde schijf: C:/mijntestwebsite/. Dit kan natuurlijk ook zijn: D:/documenten/xiotin/testspul/html/. Als we er van uitgaan dat je het bestand hebt opgeslagen als: test5.html. Dan zal het pad in dit voorbeeld zijn: C:/mijntestwebsite/test5.html, dit zie je dan ook staan in de adresbalk van je browser.

Wat goed is om te onthouden is dat de browser het verschil ziet tussen enkel een bestand, of een adres (naar bestanden op je pc moet hier meestal nog file: voor) . Ook weet de browser dat we ons nu bevinden in C:/mijntestwebsite/. Dus als ik een link (of plaatje) heb, neem de pagina test6.html, hoef ik alleen deze naam op te geven (mits het bestand in dezelfde map staat).

Stel test6.html staat niet in dezelfde map, maar op het lokale adres: C:/mijntestwebsite/weereentest/. Dan volstaat het om alleen “weereentest/test6.html”te gebruiken.

In sommige gevallen staat je bestand een mapje terug. Dus als we in het laatste geval een link terug willen maken, van test6.html naar test5.html, moeten we of weer het hele adres gebruiken, of we nemen de verkorte manier hiervoor.

uiteraard nemen wij de verkorte (en universele) manier hiervoor. Wij maken een link naar “../test5.html”. Hierbij ../ staat voor een map omhoog.

Waarom is dit handig?

Stel, je maakt je hele website op je harde schijf. En je wilt hem daarna online zetten, dan is het adres niet meer C:/mijntestwebsite/. Echter hoef je nu niet alles aan te gaan passen, in je nieuwe adres, want je mappen structuur, en je bestaands benaming blijft hetzelfde. De browser weet op deze verkorte manier je bestanden ook te vinden.

naast het oor deel online, hoef je ook niet steeds het hele adres te typen, wat bij locaties als “D:/documenten/xiotin/testspul/html/” toch wel een fijne luxe is.

Alinea's maken.

Hier op de site gebruikt iedereen ze. Maar hoe maak je nu een goede (en handig te gebruiken) alinea. In het vorige artikel komt <br> naar voren. Dit is echter niet handig te gebruiken als je veel tekst heb.

Als je elk blok tekst tussen <p> en de sluit tag </p> dan word dit vanzelf een alinea, mat erboven en onder een witregel. Echter plaats je 2 keer een blok onder elkaar, is de browser slim genoeg om maar 1 witregel te laten zien.

Links maken

Om een link te maken moet je rekening houden met 2 dingen: is het een onderdeel van jouw website, of is het een andere website?

De tags
Zoals jullie wel verwachten heeft een link ook een opende en afsluitende tag. In dit geval zijn dat: <a> en </a>. waarbij tussen deze tags de te weergeven tekst komt te staan. Nu zul je zeggen: Waar laat ik nu het adres waar naartoe gelikt moet worden? Dat komt in een attribuut te staan.

Attributen zijn extra gegevens die je aan een tag kunt meegeven in dit geval maken we gebruikt van het attribuut href. De volledige link zal dan worden: <a href=”doel van de link”>text die de bezoeker ziet</a>. Attributen heb je in allerlei soorten en vormen, maar hierover behandelen we later mee.

Een link naar een ander bestand van je site
Een link naar (de eerder gebruikte pagina) test5.html, vanaf de pagina test6.html zal dus de code krijgen: <a href=”../test5.html”>terug naar test5.html</a>(Dit was voor een map omhoog).

Staat het bestand in dezelfde map, dan word het: <a href=”test4.html”>testpagina 4</a>. En als we van test5 naar test6 (nog altijd in een map lager) willen linken word het: <a href=”weereentest/test6.html”>testpagina 4</a>.

Plaatjes toevoegen

Plaatjes toevoegen Oke, nu alweer het laatste onderdeel van dit artikel, voor ik dit artikel afrond, en jullie weer lekker laat oefenen. We gaan het hebben over het invoegen van plaatjes. Daar voor is het handig als jullie eerst wat (kleinere) plaatjes verzamelen. Dit kun je doen met de zoekfunctie van google. Ik gebruik het plaatje dat je hiernaast ziet. Deze heeft de naam smile030.jpg.

Wat is nu de tag die je nodig hebt voor een plaatje? Is de vraag die ik jullie allemaal kan horen denken. Ik zal jullie niet langer in spanning houden, de tag die je nodig hebt is de <img> tag. Deze wordt net zoals de <br> tag niet afgesloten.

Om een plaatje (in dezelfde map) te kiezen moet je natuurlijk wel meer opgeven als alleen de <img> tag, want hoe weet de computer anders wat hij moet tonen, daarvoor hebben we weer een attribuut. In dit geval is deze attribuut stc=””. Je ontkomt er bij een plaatje niet aan (net als bij een link) om dit attribuut te gebruiken. De gehele tag zal er dan zo uitzien: <img src=””>.

Omdat we net de links hebben behandeld, denk ik dat jullie wel verwachten dat je het adres van het plaatje op geeft tussen de “” van het scr attribuut. Dit is ook helemaal correct. In mijn geval (het plaatje staat in dezelfde map) zal de tag er zo uit zien: <img src=”smile030.jpg”>.

Door de bovenstaande voorbeelden (bij links en daarboven) verwacht ik wel dat jullie zelf kunnen uitvogelen hoe en wat als het plaatje in en andere map staat.

Nawoord

Zo dit was dan weer het tweede deel. Ik denk dat we de volgende keer meerdere attributen gaan behandelen, voor de tags die we nu al kennen. En misschien gaan we ook met kleurtjes spelen, maar daarvan moet ik eerst kijken hoe dat uitpakt, en hoeveel dat is. Want ik probeer elk deel redelijk compact te houden zodat ik jullie niet overspoel met informatie.

Reacties op dit artikel
Wees de eerste die een reactie plaatst!
Plaats een reactie
Naam:
E-mailadres:

Reactie:

Auto en vervoer Computers en internet Dier en natuur Electronica Eten en drinken Financieel Hobby en vrije tijd Huis, tuin en wonen Kunst en cultuur Mens en gezondheid Mijn mening over... Muziek, Tv en films Samenleving en ontwikkeling School en studie Sport Vakantie en vermaak Wetenschap Zakelijk




      Home   -   Aanmelden   -   Top artikelen   -   Nieuwe artikelen   -   Sitemap   -   Help   -   Links   -   Privacy policy   -   Contact
Copyright © 2017 - Infoyo.nl