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: 1 - De basis van de basis

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: 23-12-2009
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.

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:

<html>
     <head>
          <title>Mijn eerste pagina in HTML</title>
     </head>

     <body>
          Dit is dus mijn eerste pagina in HTML.
     </body>
</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.

<html>
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)

<head>
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 <title> is een tag die weer binnen de <head> tag komt. Leer dit jezelf ook gelijk aan, daar heb je later veel plezier van als de code ingewikkelder word.

Deze tag zelf geeft aan dat er nu attributen komen die nodig zijn voor het correct weergeven van de website, maar die zelf niet op de pagina komen. Vandaar dus dat je de <title> tag hierin terug vind.

<title>Mijn eerste pagina in HTML</title>
De hiervoor al veel benoemde <title> tag doet niet veel meer als aangeven wat (zoals misschien wel verwacht, omdat html veel standaard Engelse woorden gebruikt) geeft deze tag aan dat de komende tekst de titel van de webpagina is. Deze titel vind je later terug p de website in de kop van het venster. Als voorbeeld zet ik hier graag de titel code van hyves.nl neer: <title>Hyves.nl: always in touch with your friends</title>. 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 <title> en </title>). In dit geval staat er dus dit was de titel van de website.

</head>

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.

<body>
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.

</body>
Zoals misschien wel verwacht de afsluitende tag van de <body> 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.

</html>
Dit is alweer de laatste tag uit het voorbeeld. En zoals verwacht een afsluitende tag, van de <html> 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 <body> 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: <b> en </b>.
Alle text die je (binnen je <body> en </body> 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: <i> en </i>.
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: <u> en </u>.
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>.
Deze tag kun je het beste vergelijken met de enter toets op je toetsenbord. Als ej 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.

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