Het bouwen van een website.

Maat: px

Weergave met pagina beginnen:

Download "Het bouwen van een website."

Dirk Sasbrink
5 jaren geleden
Aantal bezoeken:

1 Het bouwen van een website. Les 1. Wat is een website? Hoe werkt het web? Het web of internet dat zijn een verzameling van speciale computers genaamd servers, Die allemaal met elkaar verbonden zijn. Onze computer thuis of in de shack is niet rechtsreeks verbonden met het internet. Wij hebben daarvoor een ISP(1*) nodig, wat dit inhoud is momenteel nog niet belangrijk. Onthoud dat onze computer geen server is die onderdeel uitmaakt van het internet. De inhoud van een website is onderverdeeld in een speciale set van regels. Je kan dit zien als een geheime taal Code die Computers kunnen verstaan. En wij binnenkort ook! Elke website bestaat uit deze taal. Als we bijvoorbeeld naar gaan. Leest onze computer of onze browser deze geheime taal. Waar staat dan deze geheime code? Inderdaad op een server. Aangezien wij eerst onze website lokaal gaan bouwen kunnen andere mensen ons meesterwerk nog niet zien, dit komt later aan bod. Les 2 Een kijkje achter de schermen Html? De geheime code om een website te bouwen waar we het in voorige les over hadden is HTML. Deze bepaald de structuur die een website heeft. Deze code is toegankelijk voor iedereen, enkel de browser vertaald de code naar hetgeen wij zien op ons scherm. Deze code kunnen wij zelfs bewerken in onze browser. Dit is tijdelijk aangezien de echte code op de server staat en onze computer deze code ophaalt van de server maar niet rechtstreeks kan aanpassen. Staar je niet blind op de code die je ziet dit is bij een echte website zoals deze van coderdojo heel uitgebreid en beperkt zich niet enkel tot HTML. Hier worden ook Scripts en plugin s gebruikt later hier meer over. 1. Open je browser (bij voorkeur Chrome) en ga naar 2. Druk op F12 om de elementen van de website te zien 3. Selecteer de item selector. 4 ga naar een stukje tekst in de webpagina zelf 5 Pas deze tekst aan met wat je zelf wil in de elements container. (Hier staat de werkelijke HTML -code)

2 StapenPlan

Les 3 Onze eerste eigen website. Hoe beginnen? Om HTML code te schrijven hebben we een IDE nodig.

Je kan perfect een website schrijven in Notepad!

Namelijk Brackets. Dit kan je downloaden via volgende link en is volledig gratis. www.brackets.

3 Les 3 Onze eerste eigen website. Hoe beginnen? Om HTML code te schrijven hebben we een IDE nodig. Dit is een programma om code taal te schrijven. Als je denkt dat dit een duur of groot software pakket is ben je mis. Je kan perfect een website schrijven in Notepad!! Aangezien wij natuurlijk echte webdevelopers zijn gaan wij hiervoor natuurlijk een echte tool gebruiken. Namelijk Brackets. Dit kan je downloaden via volgende link en is volledig gratis. In volgende stappen gaan we onze IDE installeren en klaarzetten voor onze eerste pagina te bewerken met HTML code. 1.Installeer Brackets. 2.Maak een folder aan ergens op je lokale computer op de c schijf. 3. Benoem deze folder naar Mijn Eerste website

5 Onze eerste pagina? In deze folder maak je een nieuw document aan en noem dit index.html Dit is de hoofdpagina van je nieuwe website. HTML bestaat uit elementen die de structuur van je pagina bepalen. Meestal gebruiken we een Begin en een End-tag. Voorbeeld: <title>mijn Eerste Website</title> Begintag <title> Content (inhoud) Mijn eerste website EndTag </title> <html> Om de browser een signaal te geven dat de pagina uit HTML code bestaat starten we elke pagina van onze website met <HTML> en eindigen we onze pagina met </HTML> <head> Ondanks dit niet nodig is heeft elke pagina ook een <head> tag. hierin kunnen we allerlei dingen steken die niet rechstreeks op de pagina zullen worden weergegeven. Breek hier alvast je head niet op. Wij gaan dit momenteel enkel gebruiken om de titel van onze webpagina te definiëren. <title>mijn Eerste Website</title> De title tag zit in de head tag. Dit noemt men nesten. Vergeet daarom niet je head tag te sluiten! <head> Openen head tag <title>mijn Eerste Website</title> Nesten title tag </head> Sluiten head tag <body> In de body van onze pagina komt de werkelijke inhoud van onze pagina. Hierin kunnen we allerlei andere elementen nesten. laat ons beginnen met de <P> tag die staat voor een paragraaf op onze website. <body> Openen body tag <p> een paragraaf op onze website </p> nesten van onze paragraaf in de Body </body> sluiten van de body tag.

6 Druk nu op de bliksemflits in Brackets om je eerste website te starten. Je code zou er als volgt moeten uitzien. Indien bepaalde tags niet goed gesloten zijn zullen deze in het rood worden weergegeven. Dit is de kracht van onze IDE en helpt ons zo een pagina sneller te ontwikkelen dan bv in Notepad. Heb je nog een voordeel ondervonden? Inderdaad eens je een tag opent en je tagelement definieert krijg je meteen een lijst van de mogelijke elementen dit noemt men Intellisense Als een webdeveloper moet je eigenlijk de meeste van deze tags vanbuiten weten. Gelukkig hebben we internet boordevol met deze documentatie. Als je een echte developer wilt worden is het zoeken naar een oplossing voor je probleem een echte kunst. Via deze link kan je alvast een uitgebreide lijst vinden met allerlei tags die je kan gebruiken in je website. Experimenteer en speel hiermee.

Vergelijkbare documenten

De tag aan het begin van het PHPscript is "<?php" aan het einde van het PHPscript gebruik je "?>".

De tag aan het begin van het PHPscript is <?php aan het einde van het PHPscript gebruik je ?>. PHP Les 3 Commando ECHO Interessante links: o http://www.donboscozwijnaarde.be/~moermant/ o http://php.net/manual/en/function.echo.php o http://www.w3schools.com/php/default.asp Wat is PHP? PHP is een