Zelf een webpagina maken met HTML-code

Transcriptie

1 Zelf een webpagina maken met HTML-cde Stappenplan: 1. De brncde maken met Kladblk 2. Het resultaat bekijken met Internet Explrer 3. Een tweede webpagina maken en beide pagina s linken 4. De webpagina s uitbreiden met ng meer HTML 5. Opsmmingen tevegen 6. Plaatjes tevegen 7. Tabellen maken 8. Attributen aan de cde tevegen Bendigde spullen: Laptp, met je eigen map p de server in beeld De prgramma s Kladblk en Internet Explrer (f een andere webbrwser) Het prgramma Acrbat Reader m deze tekst te kunnen lezen De link m deze tekst te kunnen dwnladen Lenardschl Guda Pagina 1

2 Stap 1: De brncde maken met Kladblk Eerst gaan we een leeg bestand aanmaken dat we vervlgens gaan penen met het prgramma Kladblk. In het lege bestand gaan we de HTML-cde typen die ndig is vr een webpagina. Ver de vlgende acties uit: Ga naar de map met je eigen naam in de map van je eigen klas, p de server van Lenard Klik met je rechter muisknp p een lege plek van je map Kies de ptie: Nieuw > Tekstbestand Op de plek waar je geklikt hebt, verschijnt een wit icntje in de vrm van een leeg dcument en het heeft de naam Nieuw Tekstbestand.txt Wijzig deze naam in webpagina1.html (let ged p de spelling) en klik p Enter Er verschijnt een melding p het scherm met de vraag f je zeker weet dat je de naam wilt aanpassen mdat het bestand anders misschien niet meer leesbaar is: Klik p Ja Het icntje is veranderd in een blauwe e met een guden cirkel er mheen Klik met je rechter muisknp p de blauwe e Kies de ptie: Openen met > Kladblk Lenardschl Guda Pagina 2

3 Het prgramma Kladblk start p en tnt een leeg dcument Type nu de vlgende regels nauwkeurig ver: <html> <head> <title>mijn eerste webpagina</title> </head> <bdy> <h1>de titel van de tekst</h1> <p>dit is de tekst nder de titel</p> </bdy> </html> Let p: Je mag hfdletters f kleine letters gebruiken Je mag meer f minder witte regels er tussen huden Vergeet niet de / in het eindcmmand Sla dit bestand p dr de tetsencmbinatie ctrl-s f dr de menuptie Bestand > Opslaan. Laat het prgramma Kladblk gewn pen Het resultaat is een bestand in je map met de naam webpagina1.html. Daarin staat de minimale HTML-cde vr je eerste webpagina Lenardschl Guda Pagina 3

4 Stap 2: Het resultaat bekijken met Internet Explrer Als het bestand van Kladblk klaar is, kunnen we het penen met Internet Explrer m te zien he de webpagina er uit ziet. Ver de vlgende acties uit: Dubbelklik met je muis p het bestand webpagina1.html dat in je map staat Internet Explrer start p en tnt je juw eigen, eerste webpagina. Dat ziet er ngeveer als vlgt uit (het kan per cmputer een beetje anders zijn): Vergelijk eens de tekst in Internet Explrer met de tekst in Kladblk Vragen: Waar zie je de tekst terugkmen die tussen <title> en </title> staat? Wat is het verschil tussen de tekst die tussen <h1> </h1> staat en de tekst die tussen <p> </p> staat? Het resultaat is een webpagina in Internet Explrer. Deze tnt de tekst die je eerder in Kladblk met HTML-cde hebt gemaakt. Lenardschl Guda Pagina 4

5 Stap 3: Een tweede webpagina maken en beide pagina s linken Als je eerste webpagina klaar is, kan je een tweede webpagina maken. Beide pagina s gaan naar elkaar verwijzen dr middel van een hyperlink. Ver de vlgende acties uit: Ga terug naar stap 1 en maak p precies dezelfde manier een tweede bestand aan. Maar de de vlgende dingen net iets anders: nem dit bestand webpagina2.html, verzin een andere titel (tussen <title> en </title>) gebruik geen <h1> en </h1>, maar <h2> en </h2> verzin een andere tekst tussen de <h2> en </h2> verzin een andere tekst tussen de <p> en </p> Het resultaat is een tweede bestand in je map met de naam webpagina2.html. Daarin staat de minimale HTML-cde vr je tweede webpagina Ga terug naar stap 2 en bekijk je nieuwe webpagina in Internet Explrer Het resultaat is een webpagina in Internet Explrer. Deze tnt de tekst die je eerder in Kladblk met HTML-cde hebt gemaakt. Pas nu met Kladblk de tekst in webpagina1.html p de vlgende wijze aan (let p de vetgedrukte zin): <html> <head> <title>mijn eerste webpagina</title> </head> <bdy> <h1>de titel van de tekst</h1> <p>dit is de tekst nder de titel</p> <p>klik <a href= webpagina2.html >hier</a> m naar de andere pagina te gaan</p> </bdy> </html> Lenardschl Guda Pagina 5

6 Sla met de tetscmbinatie ctrl-s het bestand webpagina1.html p Veg nu met Kladblk deze zin k te aan webpagina2.html, maar type nu tussen de aanhalingstekens webpagina1.html (dus nu met cijfer 1 in plaats van 2 er in) Sla met de tetscmbinatie ctrl-s het bestand webpagina2.html p Dubbelklik met je muis p het bestand webpagina1.html dat p je bureaublad staat Internet Explrer start p en tnt je juw eigen, eerste webpagina. Dat ziet er ngeveer als vlgt uit (het kan per cmputer een beetje anders zijn): Vergelijk eens de tekst in Internet Explrer met de tekst in Kladblk Vragen: He kan je de link naar de andere pagina herkennen? Wat gebeurt er als je p de link klikt? De resultaten zijn twee webpagina s in Internet Explrer. Ze zijn naar elkaar gelinkt dr de HTML-cde die je hebt ingeverd. Lenardschl Guda Pagina 6

7 Stap 4: De webpagina uitbreiden met ng meer HTML Dr het bestand weer te penen met Kladblk kunnen we ng meer HTML-cdes inveren en het resultaat bekijken via Internet Explrer. Er zijn ng veel meer HTML-cde die je kan gebruiken. Zet ze maar in het bdy-gedeelte van je webpagina, sla je bestand p en bekijk het resultaat in Internet Explrer. Titels Titels kan je maken met de vlgende HTML-cmmand s: <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> De titel bven in je brwser maak je met <title> </title> Gewne tekst Vr gewne tekst hef je geen HTML-cmmand s te gebruiken, maar het is beter van wel: Een paragraaf f alinea maak je met <p> </p> Een nieuwe regel maak je met <br/> (let p het streepje er achter!) Dikgedrukte tekst maak je met <b> </b> f <em> </em> Schuingedrukte tekst maak je met <i> </i> Links Een link maak je met extra cmmand s in het eerste <a> cmmand: Een gewne link maak je met <a href= naamvandewebpagina.html > </a> (vul p de plek van de schuine tekst de naam in van de webpagina waar je naar te wilt linken, bijvrbeeld Een link die een nieuw brwserscherm pent, maak je met <a href= naamvandewebpagina.html target= _blank > </a> Een mailadres in je link maak je met <a href= mailt:[email protected] > van de schl</a> Lenardschl Guda Pagina 7

8 Stap 5: Een psmming tevegen Sms wil je een psmming f een lijstje in je verhaal pnemen, waarin je een aantal pties met een punt ervr wilt laten zien. Een psmming maak je met verschillende cmmand s: Een psmming met puntjes ervr (zals in deze regel) maak je met <ul>... </ul> en alle regels ertussen met <li>... </li> 1. Een psmming met getallen ervr (zals in deze regel) maak je met <l>... </l> en alle regels ertussen met <li>... </li> Bijvrbeeld: <p>opsmming met puntjes:</p> <ul> <li>de eerste regel met een punt</li> <li>de tweede regel</li> <li>de laatste regel met een punt ervr</li> </ul> <p>opsmming met cijfers:</p> <l> <li>de eerste regel met een 1 ervr</li> <li>de tweede regel met een cijfer</li> <li>de laatste regel, nu met een 3 ervr</li> </l> Neem bvenstaande cde ver in je webpagina1.html, sla deze p en bekijk het resultaat. De snelste manier m de bvenstaande cde ver te nemen is dr deze te selecteren met je muis en te kpieren met ctrl-c. Daarna kan je deze plakken met ctrl-v in je Kladblk. Let p dat je de dubbele aanhalingstekens wel vervangt dr die p je tetsenbrd. Vraag: Maakt de vlgrde van de regels iets uit als je puntjes gebruikt? En maakt de vlgrde iets uit wanneer je cijfers gebruikt? 1 Het resultaat is een tweetal psmmingen, één met puntjes en één met cijfers. 1 <ul> is de afkrting van unrdered list, fwel een niet-gerdende lijst. <l> is de afkrting van rdered list, fwel een gerdende lijst, dus een met cijfers die een vlgrde aangeven. Lenardschl Guda Pagina 8

9 Stap 6: Een plaatje tevegen Een plaatje kan je heel eenvudig f meer cmplex maken met verschillende cmmand s. Niet alle nderdelen van dit plaatjescmmand zijn verplicht, je heft ze alleen te gebruiken als je ze ndig vindt. Zrg eerst dat er een plaatje in de flder staat waarin k webpagina1.html staat. In dit vrbeeld heeft het plaatje de bestandsnaam ft.jpg: Ga p je cmputer p zek naar een plaatje dat je in je webpagina wilt tnen. Je kunt k een plaatje van het internet afhalen. Maak een kpie van het plaatje p je cmputer en zet die kpie in dezelfde map als waar je webpagina1.html en webpagina2.html staan. Of, als je een plaatje van het internet haalt, sla dit dan p in de map van webpagina1.html. In de vlgende regel gaan we er van uit dat juw plaatje de bestandsnaam ft.jpg heeft, maar je mag k een andere naam gebruiken (maar hud het eenvudig). Open webpagina1.html en veg de vlgende tekst te bven de regel met </bdy>: <img src="ft.jpg" alt= Tekst bij het plaatjes width=75 height=88 brder=0> Sla je webpagina1.html p via Kladblk en bekijk het resultaat in de brwser. Het resultaat is een webpagina waarin nderin een plaatje te zien is. Misschien is het plaatje te breed f te smal f te hg. Als je er met je muis ver heen gaat zie je een tekst verschijnen. Vraag: Wat zie je gebeuren als je de getallen bij breedte (width) en hgte (height) aanpast, bijvrbeel d width=300 en height=10? En wat zu er gebeuren als je width en height helemaal weghaalt? Wat gebeurt er als je het getal bij brder aanpast, bijvrbeeld brder=5? Wat zie je als je de tekst tussen de aanhalingstekens bij alt aanpast, bijvrbeeld alt= mi plaatje? En welk plaatje krijg je als je ft.jpg vervangt dr de hele vlgende term: Vr de echte kanjers ng een lastige: cmbineer een link en een plaatje: <a href= webpagina2.html><img src= ft.jpg alt= klik hier maar p ></a> Lenardschl Guda Pagina 9

10 Stap 7: Een tabel maken Sms wil je gegevens gerdend p het scherm tnen, en dan gebruik je een tabel. Een tabel bevat rijen en klmmen. Er zijn aparte cmmand s m een tabel te beginnen en te eindigen, m een rij te beginnen en te eindigen en m klmmen te beginnen en te eindigen: Bijvrbeeld: Een tabel begin en eindig je met: <table>... </table> Daarna kan je één f meerdere rijen maken met: <tr>... </tr> En daarna kan je één f meerdere klmmen maken met: <td>... </td> <table> <tr> <td>naam</td> <td>leeftijd</td> <td>telefnnummer</td> </tr> <tr> <td>jan</td> <td>14</td> <td> </td> </tr> <tr> <td>piet</td> <td>12</td> <td> </td> </tr> <tr> <td>klaas</td> <td>15</td> <td> </td> </tr> </table> Neem bvenstaande cde ver in je webpagina1.html, sla deze p en bekijk het resultaat. De snelste manier m de bvenstaande cde ver te nemen is dr deze te selecteren met je muis en te kpieren met ctrl-c. Daarna kan je deze plakken met ctrl-v in je Kladblk. Vraag: Wat gebeurt er met je tabel als je een hele grte waarde invert in een van de vakjes? Wat zie je als je de vlgende wijziging tepast: <table> wrdt <table brder=2>? Het resultaat is een tabel met een titelrij (Naam, Leeftijd, Telefnnummer) en drie gegevensrijen (die van Jan, Piet en Klaas). Ok kan je de dikte van de randjes aanpassen. Lenardschl Guda Pagina 10

11 Stap 8: Attributen tevegen Je kunt aan een aantal HTML-cdes een attribuut tevegen, waarmee je bijvrbeeld de kleuren van teksten f achtergrnden kunt aanpassen. Smmige attributen ken je al, namelijk <a href=...> en <img src=...>. Een nieuw vrbeeld: <BODY bgclr="yellw" text="red" link="pink" alink="purple" vlink="brwn"> f <p align=right>, etc. Kijk maar eens p de vlgende site vr een aantal vrbeelden: Kijk k eens naar deze site vr allemaal interessante vrbeelden van HTML-cde: Lenardschl Guda Pagina 11