HTML: Tabellen Pagina Lay-out Begin met een nieuwe pagina, noem deze “index.html”. Deze pagina wordt de startpagina die de rest van de lessen wordt uitgebreid. We gaan de startpagina indelen met behulp van tabellen. Er komen 4 onderdelen op de startpagina: een titel, een menu, de inhoud en de voettekst. Let op: Alle pagina’s die je deze les maakt moeten <html> en <body> tags op de juiste plekken bevatten. Tip! Weet je niet meer hoe iets van een vorige les moest? Kijk dan in de oude opdrachten of presentaties. In de presentatie van les 2 vind je een goed voorbeeld van het gebruik van <html> en <body>. Stap 1 Begin met het maken van een tabel die 100% breed is en zet de rand op zichtbaar, zodat je ziet wat je doet. Voeg daarna een rij toe en geef die rij als tekst “Titel”. Let erop dat je deze rij dus één cel (kolom) moet geven om het correct te laten werken. Stap 2 Begin daarna weer op een nieuwe rij en zet nu twee kolommen neer. Zet in de eerste kolom de tekst “Menu” en zet in de tweede kolom de tekst “Inhoud”. Zet daarna de breedte van “Menu” op 10%. St. Michaël College | Programmeren kun je leren! | 2014-2015 HTML: Tabellen Stap 3 Doordat de tweede rij twee kolommen bevat is de rij waar “titel” staat nu niet meer even breed als de pagina. Zorg dat dit wel weer het geval is. Stap 4 Voeg ten slotte een derde rij toe en zet daarin de tekst “Voettekst” en zorg dat ook deze rij even breed is als de pagina. Het eindresultaat zou er zo uit moeten zien: Let op: de breedte van de rijen is afhankelijk van hoe groot het scherm is, het zou dus kunnen dat jouw tabelrijen langer of korter zijn. Stap 5 Kopieer deze pagina en begin de volgende opdracht in de kopie. Tabellen Nu gaan we de tekst in de pagina lay-out aanpassen. Stap 1 Verander de tekst “Titel” in “Tabellen” of iets vergelijkbaars. De opmaak mag je zelf bepalen, pas bijvoorbeeld de kopgrootte aan. Stap 2 Verander de voettekst in “Gemaakt door: <jouw naam hier> op <de datum hier>”. Haal ten slotte de randen van de tabel weer weg, zodat je pagina er mooier uitziet. St. Michaël College | Programmeren kun je leren! | 2014-2015 HTML: Tabellen Stap 3 Nu gaan we de opdracht van vandaag maken. Haal de tekst “inhoud” weg en voeg een kopje toe met de tekst “Opdracht tabellen”. Zet daaronder een paragraaf met de volgende tekst: “De opdracht van vandaag gaat over tabellen. Hieronder komen twee tabellen te staan.” Stap 4 Voeg dan een tabel in met 2 rijen en 3 kolommen. Zet in de eerste rij per kolom: 1. jouw voornaam; 2. jouw leeftijd; 3. je lievelingseten. In de tweede rij zet je per kolom: 1. de voornaam van je buurman; 2. zijn leeftijd; 3. zijn lievelingseten. Zet ten slotte de afstand tussen de cellen op 10. Stap 5 Voeg dan een lege regel toe en maak nog een tabel met 2 kolommen en 2 rijen. Zorg daarna dat de linkerkolom maar één rij bevat door de twee rijen samen te voegen. Zet in de linker kolom de tekst “Tabel”. Zet in de bovenste rij van de rechter kolom de tekst “Nummer” en zet in de onderste rij van de rechter kolom de tekst “3”. Zorg er ten slotte voor dat iedere cel in de tabel een opvulling heeft van 10. Stap 6 Laat je gemaakte werk door ons controleren en ga hierna verder met de JavaScript opdracht. St. Michaël College | Programmeren kun je leren! | 2014-2015
© Copyright 2024 ExpyDoc
