Hoe gebruik je de webruimte ()

HTML: Introductie
Let op: als je in de opdracht van dit blok iets tussen aanhalingstekens (“”) tegenkomt,
betekent dat je die tekst letterlijk moet overtypen, maar dan zonder de
aanhalingstekens.
Hoe gebruik je de webruimte
Voor we aan de slag gaan met webpagina’s maken, ga je eerst kort kennis maken met
de webruimte (http://smcaccent.nl/webruimte). Maak eerst een nieuw bestand aan
en noem dat “mijn eerste bestand.html”. Laat de map optie staan op (niet in een map
aanmaken). Klik op bestand aanmaken en dan zie je een nieuw bestand verschijnen.
Zoals je ziet worden spaties er automatisch uitgehaald. Dit is om het linken naar
pagina’s makkelijker te maken.
Maak nu een tweede bestand aan en noem dit bestand “mijn tweede bestand.doc”. Als
je nu klikt op bestand maken, zie je dat je een foutmelding krijgt. Dit is omdat .doc
bestand niet mogen. Je kunt ze namelijk niet gebruiken om webpagina’s mee te
maken. De belangrijkste extensies die jullie gaan gebruiken zijn “.html”, “.css”, “.js” en
verschillende afbeeldingenextensies zoals “.png” of “.jpeg”.
Maak nu een derde bestand aan en noem dat “3.html”. Kies bij map voor de optie imgs
(kort voor images, het Engelse woord voor plaatjes). Dit is de map waar je plaatjes in
kunt zetten. Klik op bestand aanmaken. Klik daarna op de imgs map om hem uit te
klappen en te kijken naar de bestanden die erin staan. Klik dan bij opties op het meest
linker icoontje. Dit is het verwijder icoontje. Het middelste icoontje (het pijltje) is om het
bestand te downloaden en het rechter icoontje (het potlood) is voor het bewerken.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
HTML: Introductie
Zoek ten slotte nog een plaatje van een vis via Google, download hem naar je computer
en gebruik daarna de upload optie in de webruimte om het plaatje te uploaden naar de
imgs map.
Eerste stapjes met HTML
De eerste opdracht die we gaan maken is een webpagina met jouw naam erop. Klik op
bewerken bij het bestand mijneerstebestand.html. Alles wat je hier typt komt als
gewone tekst op de webpagina. Probeer dit uit door jouw naam te typen. Sla de pagina
op door op opslaan te klikken.
Nu gaan we testen of alles werkt. Open je webbrowser en typ de volgende link in:
“smcaccent.nl/webruimte/” en typ daarna jouw voornaam (zonder hoofdletters),
gevolgd door “/mijneerstebestand.html”. Dit opent jouw pagina met jouw naam erop.
In plaats van de link te typen had je ook in de webruimte zelf kunnen klikken op de
naam van jouw pagina, of bij het bewerken op de preview knop kunnen drukken.
Nu gaan we een echte webpagina maken met de tekst “Hallo, wereld!”. Zoals is
uitgelegd tijdens de presentatie maak je HTML met behulp van zogenaamde tags. De
eerste tag die we nodig hebben om een website te maken is de “<html>” tag. Nadat we
een tag gebruiken moeten we laten weten dat we aan het einde van die tag zijn
gekomen door hem te sluiten. Normaal gesproken doe je dit door op een nieuwe regel
“</html>” te typen, maar de webruimte heeft de sluiten tag automatisch al voor je
gemaakt. Mocht dit niet gebeuren, dan zul je het zelf alsnog moeten typen.
Zoals je ziet is het enige verschil tussen de open tag en de sluit tag de /. Onthoud dit
goed, want bij alle tags moeten worden gesloten en dat gaat altijd met de /. Nu we de
HTML tag geopend en gesloten hebben, wordt alles tussen het openen en het sluiten
gezien als onderdeel van de HTML pagina. Een HTML pagina heeft twee dingen nodig
St. Michaël College |
Programmeren kun je leren! | 2014-2015
HTML: Introductie
om goed te werken: een head en een body. Voor de eerste les hebben we head nog
niet nodig, dus gaan we alleen een body tag toevoegen.
De body is wel belangrijk voor onze pagina. In de body komt de inhoud van de
webpagina te staan, zoals tekst, plaatjes, tabellen of lijsten. Maak een body aan met de
“<body>” tag. Deze tag moet tussen de HTML open tag en de HTML sluiten tag komen.
Zet daarna in de body de tekst “Hallo, wereld!”. Met in de body bedoelen we tussen de
open en de sluiten tag. Let op dat de body tag goed wordt afgesloten. Open opnieuw
jouw webpagina en als alles goed is gegaan zie je nu “Hallo, wereld!” staan op jouw
pagina.
Zie volgende pagina voor vervolg.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
HTML: Introductie
Tweede stapje HTML
Maak nu een nieuwe pagina aan en zet er weer de goede tags in om er een volledige
html pagina van te maken. Probeer het zelf te doen, maar als je vastloopt kun je altijd
spieken in de code van de eerste opdracht of de tekst hierboven nog een keer
doorlezen. Als je alle tags op de goede plek heb neergezet mag je de body vullen met
een verhaaltje over hoe jouw kerstvakantie was.
Experimenteer in het verhaaltje met spaties en enters en kijk wat er gebeurt op de
webpagina. Typ ten slotte deze vragen over en zet het antwoord erachter op jouw
tweede webpagina.
“Wat gebeurt er met mijn verhaaltje als ik meer dan één spatie gebruik in mijn HTML
code?”
“Wat gebeurt er met mijn verhaaltje als ik precies één enter gebruik in mijn HTML
code?”
“Wat gebeurt er met mijn verhaaltje als ik meer dan één enter gebruik in mijn HTML
code?”
St. Michaël College |
Programmeren kun je leren! | 2014-2015

Download Report