Html 1 - De basis van de basis

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.

Notepad++

Zelf werk ik altijd met Notepad++ als ik ga programmeren. Je kunt dit programma nu al vast downloaden en installeren. Al is het voor deze les niet een speciale aanvulling.

Dit omdat de belangrijkste handigheden zijn: het bewerken van meerdere bestanden in een applicatie (er staat dus maar 1 programma onder in je balk, terwijl je bijvoorbeeld wel 10 pagina’s open hebt staan) en de syntax highlighting (er wordt met kleurcodes gewerkt, zodat je snel kunt zien wat wat is, zonder de code echt terug te hoeven lezen).

Als je geen notepad++ gebruikt...

Als je er voor kiest om geen notepad++ te gebruiken, kun je gebruik maken van de standaard notepad op je computer (start -> alle programma’s -> Bureau-accessoires-> kladblok (bij de Nederlandse versie van XP)).

Bij het opslaan moet je dan kiezen voor (in plaats van wat hier onder staat beschreven) Bestand> opslaan als -> Als bestandsnaam: jouwnaam.html (vergeet het .html er niet achter te zetten), en als type kies je voor “alle bestanden”. Het eerste begin In deze eerste stap gebruiken we de volgende code:

Dit is dus mijn eerste pagina in HTML.

Je kunt deze code kopiëren naar je editor, maar je kunt hem dadelijk ook stapsgewijs overtypen als we alle elementen behandelen. Mijn mening is dat je van het laatste het meeste leert, omdat je dan weet waarom je wat typt, en omdat je het ook zelf doet.

Ik ga hieronder alles per regel uitleggen.

deze tag (een tag is een stukje code die wat verteld over de komende of voorgaande tekst) lijkt zoals je ziet veel op de benaming van het bestand. Dit komt ook omdat deze tag de web browser (Internet Explorer of een andere) vertelt dat het om een html bestand gaat. Deze tag vind je dus terug in alle html bestanden (evenals alle volgende tags omdat dit allemaal belangrijke tags zijn)

Zoals je ziet is er hier een tab voor de tag geplaatst. Ik doe dit zodat je in je code duidelijk kunt zien wat er onder iets valt. Bijvoorbeeld de tag De hiervoor al veel benoemde . Als je nu net begreep van mij waar dit verschijnt, kun je op hyves even kijken waar dit staat in je beeld scherm. Dit is tevens de eerste keer dat we een afsluitende tag tegen komen. Veel tags hebben weer een afsluitende tag, die vertellen aan de web browser, tot hier is dat, in niet verder. Deze bevatten meestal een / in de tag (zie het verschil tussen ). In dit geval staat er dus dit was de titel van de website.

Dit is de afsluitende tag voor het head deel van je website. Want uiteraard dient ook de browser te weten dat we verder gaan met de website zelf.

Deze tag geeft aan dat de inhoud van de website begint. Alles wat na deze tag komt (en voor de afsluitende tag staat) word weergeven op de website.

Dit is dus mijn eerste pagina in HTML. Deze tekst zal dus zichtbaar worden op de pagina zelf. Echter kun je hier veel meer neer zetten dan platte, zwarte tekst. Hierover komt echter later meer.

Zoals misschien wel verwacht de afsluitende tag van de tag. Al zegt deze tag letterlijk, hier stopt het te weergeven deel van de website. Betekent dat niet dat alles wat hieronder staat niet zichtbaar is. Al zou dat officieel dus wel zo moeten zijn, denken veel browsers mee, en zeggen vervolgens: “Hé daar staat ook nog tekst, laat ik die ook weergeven, vast een slordig foutje van de programmeur.”. Echter Maak je het jezelf alleen lastig als je dit niet aan leert dit gelijk netjes te doen als je later meer (en moeilijkere) dingen leert.

Dit is alweer de laatste tag uit het voorbeeld. En zoals verwacht een afsluitende tag, van de tag. Die daarmee ook verteld, dit was de website.

Hierbij wil ik toch vertellen dat er afsluitende tags zijn, die als je ze vergeet door de browser worden aangevuld. Echter berekent iedere browser deze tags verschillend, en kun je er (als je ze weg laat) niet vanuit gaan dat je pagina goed word weergeven (evenals bij de tekst buiten de tag).

Een simpele opmaak

Als laatste wil ik met jullie wat simpele opmaak attributen doornemen. Zodat als jullie dit alles lekker oefenen, je ook lekker creatief kunt zijn.

De tags: en . Alle text die je (binnen je en tag uiteraard) tussen deze twee tags zet zal vetgedrukt op het beeld verschijnen. Denk aan de functie vet van Word of andere editors.

De tags: en . Alle text die je tussen deze twee tags zet zal cursief op het beeld verschijnen. Denk aan de functie cursief van Word of andere editors.

De tags: en . Alle text die je tussen deze twee tags zet zal met een streep er onder op het beeld verschijnen. Denk aan de functie onderstrepen van Word of andere editors.

De tag: < br>. (zonder spatie) Deze tag kun je het beste vergelijken met de enter toets op je toetsenbord. Als je deze tag gebruikt, zal de tekst die er achter komt op een volgende regel staan. Zoals je ziet is deze tag een van de weinige tags (die in standaard html) niet word afgesloten.

Opslaan en bekijken

Het opslaan van je pagina in notepad++ gaat als volgt:

1. Je klikt op bestand -> oplsaan.
2. Er komt nu een venster naar voren voor het opslaan.
3. Ga naar de map waar je je test bestand(en) wilt opslaan.
4. Voer de naam in van je bestand bij bestandsnaam.
5. Kies bij: “opslaan als type” voor: “Hyper Text Markup Language file (….)”.
6. Klik op opslaan.

Op je website te openen ga je naar het bestand toe, en klik je er 2 keer op. Als het goed is opent je browser hem dan gelijk. Gebeurt dat niet, dan is er niks aan de hand. Open dan zelf je browser, en vaak kun je het bestand dan openen via bestand -> openen, of door hem in je browser te slepen.

Nawoord

Dit was alweer het eerste deel van een groeiende serie. In het tweede deel wil ik meer opmaak attributen behandelen, zodat jullie er echt wat leuks van kunnen maken. Zoals bijvoorbeeld platjes, en links naar andere websites en bestanden van jezelf.