Preddy Geplaatst: 15 oktober 2006 Rapport Geplaatst: 15 oktober 2006 (bewerkt) HTML Tutorial v3.04 -------------------------- Welkom op deze pagina met een HTML tutorial erop. Hierin zal ik je leren hoe je vanuit een tekstverwerker als Kladblok een website kan maken. Deze tutorial is vooral bedoelt voor diegenen die willen beginnen met het leren van HTML en er eigenlijk nog niet zoveel vanaf weten. Voor de tutorial gebruik ik de volgende opbouw: Tekstverwerker HTML Basis Opbouw Tekst Opmaak Headers Font Face Font Size Dik, Italic & Onderstreept Center Ordered/Unordered lijsten Font color [*]Tabellen [*]Hyperlinks [*]Plaatjes Dit is een voorlopige lijst, misschien update ik het nog eens om hem completer te maken. Edit: Plaatjes nog vergeten, binnenkort. ~done ==================== === Tekstverwerker ======================= Zoals al gezegd ga ik Kladblok gebruiken als standaard tekstverwerker voor deze tutorial. Dit omdat er op bijna elke computer tegenwoordig wel Kladblok staat, maar ook omdat het gewoon makkelijk in gebruik is. Niks geen lange laadtijden die je wel bij Word hebt. Nee, gewoon snel en effectief, zoals ik het graag zie. Natuurlijk ben je vrij in de keuze welke tekstverwerker jij gaat gebruiken. Eerst openen we Kladblok. Ik neem aan dat men wel enig verstand hiervan heeft, dus weet waar je moeten typen etc. Ik wou alleen nog even ingaan op het opslaan. Wil je een webpagina maken, moet je een kladblok bestand iets anders opslaan dan standaard door Kladblok wordt gedaan. Kladblok slaat zelf op als .txt format, alleen wij willen een .html format. Ga naar Bestand > Opslaan Als.... Je krijg een scherm te zien die je ook kan zien op plaatje 2. Type een naam bij Bestandsnaam, gevolgd door .html. Wil je een pagina maken die als naam index heeft, dan typ je daar neer: index.html. Hierna klik je op Opslaan als Type en selecteert daar Alle Bestanden. Klik hierna op Opslaan en je hebt een bestand in het html format. ======================== === HTML Basis Opbouw =========================== Eerst maar eens wat HTML nou precies is: HyperText Markup Language (afgekort HTML) is een taal voor de opmaak van documenten. HTML wordt vooral gebruikt op het internet, om webpagina's te tonen. Bron Met HTML kan je dus webpagina's maken, maar dat had je al wel door. De pagina die je nu leest is een webpagina, opgebouwd in HTML taal (+nog wat ander taalgebruik om het dynamisch te maken). HTML maakt gebruik van verschillende codes, voor elke opmaakfeature 1. Deze worden ook wel met het Engelse woord tags bedoelt. Een HTML-bestand heeft bijna altijd een vaste opbouw van tags. Deze kun je hieronder zien: <HTML> <HEAD> <TITLE> Je titel hier </TITLE> </HEAD> <BODY> Je tekst hier </BODY> </HTML> Deze kan je in principe voor elk HTML-bestand die je maakt gebruiken. De uitleg van bovenstaande code is als volgt: HTML Tags: Elk HTML bestand begint met de HTML tags, om aan te geven dat het om een HTML bestand gaat. HEAD Tags: Hierin komt onder andere de Titel van het document te staan, maar ook Styles en Scripts. Daarover later meer. TITLE Tags: Hierin komt de Titel van het document te staan. BODY Tags: Hierin komt de tekst die je wil laten zien op je webpagina te staan. Het is je waarschijnlijk wel opgevallen dat je deze tags niet ziet op deze pagina. Dit komt omdat je Browser deze tags vertaalt in de opmaak voor het opbouwen van de pagina. Alles wat er tussen de '<' & '>' tekens staat, wordt geïnterpreteerd als code. Verder zijn er nog 2 dingen die je goed in de gaten moet houden. - De 1e is dat Enter/Returns die je in Kladblok maakt niet worden herkend door je Browser. Hiervoor dien je de tag <br> te gebruiken. - De 2e is dat je Browser niet meer dan 1 spatie achterelkaar weergeeft. Opmaak dat gebaseerd is op meerdere spaties doe je dan met een tag voor de spatie, de tag. Een stapje verder in de opbouw van HTML is het toevoegen van elementen aan de tags. Met deze elementen kan je een tag verder specificeren. Elke tag heeft een aantal elementen waardoor het bijvoorbeeld een kleur krijgt toegewezen, een lengte of een breedte. Welk element je aan een tag kan toevoegen, zul je zelf moeten ontdekken. Een hulpmiddel hierbij is Google, waar je snel elementen op kan zoeken om toe te voegen. Als voorbeeld kan ik je wel een site geven, en wel deze, waar je zo'n beetje alle tags kunt vinden. Verderop zal je wel een paar basistags tegenkomen, dus je hoeft het nog niet te nauwkeurig te bekijken. Een toevoeging hierbij is dat we de specificatie van het element doorgaans tussen dubbele aanhalingstekens schrijven, dus tussen " ". Voorbeeldje: <font face="lettertype" size="grootte" color="kleur"> =================== === Tekst Opmaak ====================== Het lijkt mij het meest logisch als we vanuit de vorige kopje verdergaan op het opmaken van tekst. Tekst is immers het belangrijkste wat je op een site kan vinden, dus daar moet ook genoeg aandacht aan worden besteedt. Er zijn vele manieren om je tekst er anders uit te laten zien. Aangezien Microsoft Word wel veel voor tekstverwerken wordt gebruikt, ben ik op het idee gekomen om maar aan de hand van de tekstopmaak van dat programma het te behandelen. Die ziet er als volgt uit: Heb erin geknipt om het te verkleinen naar maximum plaatjes lengte. Ik zal niet elk stuk ervan bijlangs gaan, van sommige weet ik niet hoe het moet in HTML en van anderen vind ik het niet passen om het hier neer te zetten. Het zou te specifiek worden en te lastig, terwijl dat niet echt nodig is. Headers: In Word kan je onder dit menu'tje een aantal verschillende grootte headers vinden. Dit is ook mogelijk om te doen in HTML code. Er zijn in totaal 6 groottes, dus van <H1&> tot <H6>. Deze zien er ongeveer als volgt uit: Dit is een tekst geschreven in H1 <h1>Dit is een tekst geschreven in H1</h1> Dit is een tekst geschreven in H2 <h2>Dit is een tekst geschreven in H2</h2> Dit is een tekst geschreven in H3 <h3>Dit is een tekst geschreven in H3</h3> Dit is een tekst geschreven in H4 <h4>Dit is een tekst geschreven in H4</h4> Dit is een tekst geschreven in H5 <h5>Dit is een tekst geschreven in H5</h5> Dit is een tekst geschreven in H6 <h6>Dit is een tekst geschreven in H6</h6> Aangezien ik niet met HTML aan kan geven hoe het eruit ziet, heb ik het met de functie van het forum moeten doen. Het zal dan ook wat afwijken van hoe het er in HTML uitziet. Zoals je kan zien is H1 de grootste en H6 de kleinste. Wat je hier niet ziet is dat er in HTML nog een automatische ruimte komt boven en onder de headers komt. Note: Let er op dat je een Header moet afsluiten, dus met </hx>, waar x het nummer is dat je in de begintag hebt gebruikt. Font Face, ofwel Lettertype: Iedereen is we bekend met de term Lettertype. Er zijn een paar duizend lettertypen voor de PC, waar een 100tal standaard worden aangeboden. Standaard lettertypes zijn vooral Times New Roman, Courier New, Arial en Verdana. Hoe geven we dan aan welk lettertype we willen? Dat doen we met de volgende Tag + Element: Dit is een tekst geschreven in Times New Roman <font face="Times New Roman">Dit is een tekst geschreven in Times New Roman</font> Dit is een tekst geschreven in Courier New <font face="Courier New">Dit is een tekst geschreven in Courier New</font> Dit is een tekst geschreven in Arial <font face="Arial">Dit is een tekst geschreven in Arial</font> Dit is een tekst geschreven in Verdana <font face="Verdana">Dit is een tekst geschreven in Verdana</font> Zoals je ziet zijn de lettertypes onderling sterk verschillend. Let op deze verschillen, ze kunnen het verschil maken tussen een goed te lezen tekst en een brok tekst, in de lezer zijn ervaring. Courier New is erg handig voor bijvoorbeeld code weergeven, omdat elke letter evenveel plek inneemt. De andere 3 zijn wel geschikt om een grote tekst mee te schrijven.[br] Note: Let bij een speciaal lettertype erop dat niet iedereen die heeft. Jou pagina ziet er dan anders uit dan die van een ander. Font Size, ofwel de grootte van je letters: Zoals in Word mogelijk is, is het ook mogelijk om in HTML je lettertype groter en kleiner te maken. Het gaat echter ietwat anders, we hebben het nu niet over 10 of 12, maar over 1 tot 7 (absoluut) of -3 tot +3 (relatief). In principe lijkt een Font size wel wat op een Header, alleen gebruikt de Font size boven en onder geen extra plek. Ik kan met de functies van dit forum niet goed laten zien wat het precieze verschil is, dus dat zal je zelf eens moeten ontdekken. Hoe gebruik je het dan? Check: <font size="6"> voor Absoluut of <font size="+3"> voor Relatief Als je de Absolute waarde gebruikt, is het altijd hetzelfde. Gebruik je echter de Relatieve waarden, dan ligt het er net aan welke waarde je als standaard hebt ingevoerd. Het valt dan ook aan te raden om het eerst maar bij de Absolute waarden te houden. Dik, Cursief, Onderstreept & Doorstreept: Dit is in feite heel eenvoudig te doen, en ik zal er daarom ook niet teveel aandacht aan besteden. Lees het en je weet het voor altijd (mwa wel lang in ieder geval). Dit is een tekst geschreven in het dik <b>Dit is een tekst geschreven in het dik</b> Dit is een tekst geschreven in het cursief <i>Dit is een tekst geschreven in het cursief</i> Dit is een tekst geschreven met onderlijning <u>Dit is een tekst geschreven met onderlijning</u> Dit is een tekst die is doorgestreept <s>Dit is een tekst die is doorgestreept</s> Centreren: Ook hier kunnen we zeer kort over zijn, omdat er eigenlijk maar 1 ding aan te weten is. Dat is hoe de Tag eruit ziet: Dit is een gecentreerde tekst <center>Dit is een gecentreerde tekst</center> Misschien dat het je opvalt dat je Links, Rechts of Uitlijnen niet ziet staan. Dat komt omdat dezen geen Tag hebben, maar alleen elementen zijn van bepaalde Tags, zoals Table of P. Later meer hierover. Ordered/Unordered list: Wil je eens een opsomming in je tekst, is het handig om dat te doen met de lijst tags. Er zijn Ordered lijsten en Unordered lijsten. Een Ordered list start je met <OL>, gevolgd door een <li> voor elke nieuwe opsommingsonderdeel. Een Unordered list start je met <UL>, ook gevolgd door een <li> voor elke opsommingsonderdeel. Om het verschil aan te duiden is het misschien het handigst om maar even een voorbeeldje van elke te geven. Ordered List: Start PC op Maak verbinding met Internet Start browser op Ga naar GTAForum.nl <ol><li>Start PC op</li> <li>Maak verbinding met Internet</li> <li>Start browser op</li> <li>Ga naar GTAForum.nl</li></ol> Unordered list: Omdat het gezellig is Veel info te vinden is Goede HTML guide te vinden is <ul><li>Omdat het gezellig is</li> <li>Veel info te vinden is</li> <li>Goede HTML guide te vinden is :p</li></ul> Zoals je ziet werkt een Ordered List met cijfers, ter suggestie dat er een bepaalde Volgorde is. Een Unordered List werkt met symbooltjes, ter suggestie van Kenmerken, in dit geval van GTAForum.nl. Font color, ofwel de kleur van je tekst: Het standaard zwarte tekst kan nog wel eens saai worden. Het is dan leuk om wat kleurtjes toe te voegen. Gelukkig kan dat ook met HTML. Vooraf, er zijn een paar manieren om een kleur aan te geven. Je kan het bijvoorbeeld in tekst doen, zoals Black (let op, Engels!), maar ook in hex code, zoals #000000. In principe maakt het niet uit wat je gebruikt, je hoeft je niet aan 1 manier te houden. De Hex code kan je echter specifieker een kleur aangeven. Dit is een tekst in het rood of #FF0000 <font color="red">Dit is een tekst in het rood</font> <font color="FF0000">Dit is een tekst in FF0000</font> Zo kan je voor elke kleur doorgaan, het principe blijft hetzelfde. Voor beginners is het aan te raden om gewoon in de tekstvorm de kleuren aan te geven. Je ziet in één oogopslag aan de code welke kleur de tekst wordt en je weet zelf ook wel de namen van de kleuren in het Engels. In een later stadium kan je voorzichtig overstappen op de Hex aanduiding om daar later mee door te gaan. Laatste Note Al het bovenstaande kan je natuurlijk ook combineren. Een hele specificatie van de tag <font> zou er zo uit kunnen zien in HTML: <font face="Verdana" size="1" color="blue"><b>Test</b></font> ==================== ====== Tabellen ========================== Tabellen worden in HTML vaak gebruikt om de opmaak van je pagina mee te maken. Vooral voor beginners is dit de beste manier om te beginnen. Gevorderden zullen pleiten voor Divs in combinatie met CSS, alleen dat vereist wat meer inzicht in het HTML. Dus tabellen. Waarschijnlijk heb je wel eens een tabel gemaakt, in Word of een andere tekstverwerker. Of anders in Wiskunde klas. Een tabel bestaat uit rijen en kolommen. Rijen zijn horizontaal, kolommen verticaal. Samen vormen ze verschillende cellen, waar tekst in gezet kan worden. Het is erg belangrijk dat je onthoudt hoe een tabel werkt, want we gaan nu elk daarvan een Tag geven. Ze door elkaar halen zal een wel erge vage tabel opleveren, wat jou waarschijnlijk erg zal irriteren. Dus doe jezelf een lol en onthoud het goed. Om een Rij aan te geven, gebruiken we de <tr> tag. Om een Kolom aan te geven, gebruiken we de <th> of <td> tag. Het verschil tussen deze 2 tags is dat een <th> een aparte lay-out heeft, tekst wordt gecentreerd en dikgedrukt weergegeven. Een <td> geeft de gewone tekstopmaak weer. Het zal je nog erg vaag in de oren klinken, dus zullen we maar eens wat voorbeeldjes bekijken: 1. Stel we willen een doodsimpele tabel, met maar 1 cel. Hiervoor hebben we dus 1 rij nodig, en 1 kolom. De code ziet er dan als volgt uit, waar datgene dat tussen haakjes staat het commentaar is: <table> (aangeven dat we een tabel gaan maken) <tr> (eerst aangeven dat we een rij in de tabel willen) <td> (nu dat we een kolom willen) Cel 1 </td> (nu sluiten we alle tags weer af) </tr> </table> 2. Nu iets moeilijker, we willen 2 kolommen hebben, dus 2 cellen naast elkaar: <table> <tr> <td> Aangeven dat we een kolom willen in de rij Cel 1 </td> Afsluiten van de kolom <td> Aangeven dat we nog een kolom willen in de rij Cel 2 </td> </tr> Afsluiten rij </table> 3. Nog een stapje verder, 2 rijen met maar 1 kolom: <table> <tr> Openen rij <td> Nieuwe kolom Cel 1 </td> </tr> Afsluiten rij <tr> Nieuwe rij openen <td> Nieuwe kolom Cel 2 </td> </tr> </table> 4. Bovenstaande combineren naar een vierkant tabelletje met 4 cellen: <table> <tr> <td> Cel 1 </td> <td> Cel 2 </td> </tr> <tr> <td> Cel 3 </td> <td> Cel 4 </td> </tr> </table> Ga na of je het begrijpt. Als je het nog niet geheel begrijpt zou je eens wat kunnen gaan proberen met tabellen. Als je eenmaal het idee doorhebt, is het eigenlijk heel simpel. Het verder opmaken van een tabel zou ik ook allemaal uit kunnen gaan leggen, maar als je het tot zover hebt gelezen, zal je het zelf ook wel kunnen. Kijk naar deze pagina voor de elementen die je kan gebruiken. Je kan daar ook eens een kijkje nemen onder het kopje Try-It-Yourself Demos, zeer handig voor de beginner. ====================== ====== Hyperlinks ============================ Voorlopig het laaste stukje, maar zeker niet de minste: Hyperlinks. Deze maken het mogelijk om van de ene webpagina naar de ander te gaan. Zonder deze links zou internet dus niet zoveel kunnen, dus zal je het ook moeten leren. Maar vrees niet! Het is een eitje: Tutorial Dat is een link naar deze tutorial in een webpagina (die overigens niet af is). Klik erop en je wordt daarheen gebracht. Zo'n link neerzetten op het forum is eitje, in HTML ook. Dit zal de code zijn geweest: <a href="http://neola.e-dentify.nl/~riegahco/GTAForum/HTMLtut/tutorial.html">Tutorial</a> Je ziet dat de link (dus url van de doelpagina) achter <a href= wordt geplaatst, en afgesloten wordt met een >. Daarna volgt de omschrijving van die link en die wordt weergegeven op de pagina. Daarna wordt de link afgesloten, door </a> toe te voegen. Elke link ziet er zo uit, met uitzondering van wat elementen die kunnen worden toegevoegd (klik). ==================== ====== Plaatjes ========================== Was ik bijna de plaatjes vergeten. Op tekst na de meest voorkomende feature op een website. Er is bijna geen (mooie) website die geen plaatjes erin verwerkt heeft. Daarom moet het ook in deze Tutorial. Begreep je het Hyperlinks gebeuren, dan is het niet al te moeilijk om dit te volgen. Eerst hebben we de goede Tags nodig, ofwel <img src="linkjehier.EXTENSIE">. Zoals je ziet hoef je deze tag niet af te sluiten (alleen met de >) en bevat ook deze tag, net als de hyperlink tag een link. Bij het invullen moet je doorgaans goed letten op hoofdletter gebruik, maar dat geldt eigenlijk altijd bij links. Voorbeeldje dan maar: <img src="http://neola.e-dentify.nl/~riegahco/GTAForum/HTMLtut/Header.png"> Zoals je ziet is mijn plaatje weergegeven. De manier waarop kan verschillen wanneer jij een plaatje in een webpagina neerzet. Hiermee doel ik op een Border die er door je browser omheen wordt getrokken. Om dit uit te zetten, komen we weer op de elementen die je kan gebruiken. Zie hiervoor deze pagina. Hier zie je ook onder andere het eerder genoemde uitlijnen, ofwel Align. Lees het eens door als je er meer informatie over wil hebben. Nog even snel de Border uitzetten: <img src="http://neola.e-dentify.nl/~riegahco/GTAForum/HTMLtut/Header.png" border="0"> Dat was't voor nu, misschien updates later Laatste update was op: Bewerkt: 25 oktober 2006 door Preddy Reageren
tjah77 Geplaatst: 15 oktober 2006 Rapport Geplaatst: 15 oktober 2006 Leuk, maar ik had hier over de basis ook al een tut gemaakt. Dus misschien is het handig dat je het begin verwijderd, en enkel het h1 gedeelte+tables laat staan. Reageren
Preddy Geplaatst: 15 oktober 2006 Auteur Rapport Geplaatst: 15 oktober 2006 Leuk, maar ik had hier over de basis ook al een tut gemaakt. Dus misschien is het handig dat je het begin verwijderd, en enkel het h1 gedeelte+tables laat staan. Oh ik d8 dat jij 'm verwijderd had.. Over jou suggestie, ik voel er weinig voor om dat hele stuk te verwijderen, om eerlijk te zijn. Beetje concurrentie kan geen kwaad toch. Reageren
tjah77 Geplaatst: 15 oktober 2006 Rapport Geplaatst: 15 oktober 2006 Idd, maar omdat die van mij er eerst stond hoop ik dat ze allebei bij de tut list worden toegevoegd. Reageren
Damos Geplaatst: 15 oktober 2006 Rapport Geplaatst: 15 oktober 2006 Dit is een zeer goede tut je kan er veel van leren en je zult er wel een mooie website van kunnen maken. Ga zo door. Reageren
Gunslinger Geplaatst: 17 oktober 2006 Rapport Geplaatst: 17 oktober 2006 Toegevoegd aan Master Tutorial List! Reageren
Argon Geplaatst: 17 oktober 2006 Rapport Geplaatst: 17 oktober 2006 Toegevoegd aan Master Tutorial List! Mooie tutorial (vooral dan de vergelijking word <=> HTML) maar ik heb wel een foutje gezien. Jij zegt: <ol><li>Start PC op <li>Maak verbinding met Internet <li>Start browser op <li>Ga naar GTAForum.nl</ol> Juiste code: <ol><li>Start PC op</li> <li>Maak verbinding met Internet</li> <li>Start browser op</li> <li>Ga naar GTAForum.nl</li></ol> >>> Door Gunslinger: Aangepast. <<< Reageren
Preddy Geplaatst: 18 oktober 2006 Auteur Rapport Geplaatst: 18 oktober 2006 Toegevoegd aan Master Tutorial List! Mooie tutorial (vooral dan de vergelijking word <=> HTML) maar ik heb wel een foutje gezien. Jij zegt: <ol><li>Start PC op <li>Maak verbinding met Internet <li>Start browser op <li>Ga naar GTAForum.nl</ol> Juiste code: <ol><li>Start PC op</li> <li>Maak verbinding met Internet</li> <li>Start browser op</li> <li>Ga naar GTAForum.nl</li></ol> >>> Door Gunslinger: Aangepast. <<< Voor zover ik weet is het alleen een consequentiefout toch (niet afsluiten van tag)? Anders pas ik de <ul> ook ff aan. Reageren
Argon Geplaatst: 18 oktober 2006 Rapport Geplaatst: 18 oktober 2006 Je moet altijd je tags afsuiten anders is je code niet W3C valid, maar bij XHTML gaat het nog verder daar moet je ook img tags afsluiten dat gaat dan zo: <img src="img.jpg" /> Reageren
Le MrG Geplaatst: 18 oktober 2006 Rapport Geplaatst: 18 oktober 2006 Om een code horen toch ook altijd ' ? <font face='Verdana'>BLAAT</font> Zo heb ik het wel geleerd ieg Reageren
Argon Geplaatst: 18 oktober 2006 Rapport Geplaatst: 18 oktober 2006 Om een code horen toch ook altijd ' ? <font face='Verdana'>BLAAT</font> Zo heb ik het wel geleerd ieg Eigelijk moeten het zo'n " quote's zen niet zo'n ' quote's. In PHP code durft men wel al is ' quotes gebruiken omdat als je dit doet: <?php echo "<font face="Verdana">BLAAT</font>"; ?> Je een error krijgt, maar ik doe het meestal door dit te gebruiken: <?php echo "<font face=\"Verdana\">BLAAT</font>"; ?> Dan krijg je geen error en php output \" als een " dus dat is beter als je een w3c valid pagina wilt en google vind dit ook leuker. Reageren
Preddy Geplaatst: 18 oktober 2006 Auteur Rapport Geplaatst: 18 oktober 2006 ~Dubbele aanhalingstekens toegevoegd. Dank voor het melden Reageren
Recommended Posts
Een reactie plaatsen
Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.