Welkom
Welkom bij jou eerste les in webdesign. In deze les ga je je verdiepen in de grondbeginselen van webdesign: HTML. HTML staat voor HyperText Markup Language. Hypertext is een techniek waarmee verbinding wordt gemaakt met een bepaald media, bijvoorbeeld een document, een foto of een muziekbestand. Markup is het gebruik van code (script) om browsers (Internet explorer / Mozilla Firefox / Opera) duidelijk te maken hoe de webpagina eruit moet zien en naar welke pagina's de Hyperlinks (hier vertel ik later meer over) moeten leiden.
Geschiedenis
HTML ontstond ongeveer tegelijk met de populaire browser (Internet Explorer) en iets minder populaire browser (Netscape) die ontwikkeld werden door de bedrijven Microsoft en Netscape. In 1991 richtte Tim Berners-Lee de organisatie W3C op om een standaard* voor HTML te realiseren, gezien HTML steeds weer veranderd en uitgebreid werd door beide bedrijven. Voor verdere geschiedenis verwijs ik u naar het internet.
Les 1: Hello World
Genoeg gepraat, tijd om te beginnen. Bij het aanleren van een nieuwe programmeertaal is het gebruikelijk te beginnen met een Hello World programma. Hoewel programma hier niet het juiste woord is, gezien we een document schrijven en geen programma. Daarom zal ik vanaf nu ook script, in plaats van programmeer-code gebruiken. Ik ga er hierbij vanuit dat je al de beschikking hebt over een webserver en een FTP programma om documenten te uploaden. Zoniet, dan raad ik je aan hier te stoppen en eerst wat meer informatie over webservers op te zoeken. Zoals mijn leraar vroeger altijd zei: Spring niet in het diepe zonder eerst je diploma's te halen.
Copieër (of beter nog, schrijf het over) de volgende code in jouw favoriete texteditor. Dit kan Kladblok (die standaard op iedere Windows versie zit) zijn, maar ik raad een meer geavanceerd programma zoals EditPlus aan, gezien deze een stuk overzichtelijker is. Wanneer je straks grotere scripts gaat schrijven, wordt Kladblok voor de meeste mensen te onoverzichtelijk.
Code:
|
Mijn eerste webpagine - Hello World
Hello World!
|
Sla het bestand op als index.html of index.htm. Upload het bestand naar jou webserver en open het met jouw favoriete webbrowser door naar jouw website te gaan (www.jouw-website.nl/com/eu). Als je alles goed gedaan hebt, zie je nu "Hello World" staan. Zo niet, lees alles dat nog eens goed door en probeer het nog eens. Zo wel, gefeliciteerd! Je hebt zojuist je eerste webpagina gemaakt!
De uitleg
Wat is er nu precies gebeurd? Wat betekenen al die lijnen code precies en wat doen ze? Deze vragen ga ik nu beantwoorden. Want wat heb je aan een eigen website als je niet eens weet wat je nu precies gedaan hebt? Maar eerst even een korte uitleg over elementen (nee, geen water, vuur, aarde en lucht) en attributen.
Elementen
Elementen zijn alle stukjes code tussen deze <> haakjes. ,
, , <body> en nog velen meer zijn dus allemaal elementen. Maar aan elementen kunnen we ook attributen meegeven.
</p><p><u>Attributen</u>
</p><p>Attributen zijn stukjes code binnen elementen die een extra beetje informatie aangeven. In ons stukje code hebben we één element die gebruik maakt van een attribuut, namelijk: <i><font color="#000000"></i>. We beginnen hier met het element <i><font></i> en geven daar als attribuut <i>color="#000000"</i> mee. Attributen worden altijd pas na het element opgegeven. Het is niet mogelijk codes te schrijven als: <i><color="#000000" font></i>, want de browser zou dit zien als een element genaamd color met de attribuut font.
</p><p><i><html>: </i>Hiermee geven we aan dat we beginnen met het maken van een html pagina. Hoewel de meeste browsers tegenwoordig de hele website net zo goed weer zouden geven als je alleen maar "Hello World" in je code zou typen, is het toch een goede gewoonte dat je ieder HTML document hiermee begint. Wanneer je later met andere codes gaat werken, zul je hier veel profijt van hebben.
</p><p><i><head>:</i> Dit is het "hoofd" van onze website. Hier kunnen we werkelijk allerlei belangrijke informatie in stoppen die we later in het document kunnen gebruiken. De informatie die we hierin stoppen, wordt niet op de webpagina weergegeven, tenzij we dit later specifiek aanroepen met een andere taal zoals Javascript.
</p><p><i><title>'</i>: Hiermee geef je jouw website een titel. Dit is vaak een korte beschijving van de webpagina. Stel dat jou website "Bongo Games" zou heten, dan zou je hier bijvoorbeeld "Bongo Games - Voorpagina" tussen kunnen zetten. Gaat iemand naar jou contact pagina, dan zou je daar "Bongo Games - Contact" neer kunnen zetten. Het beste is dit netjes en kort te houden, maar in feite kun je hier alles wat je maar wilt tussen zetten.
</p><p><i>: En hier komen we bij een belangrijk stukje. Hiermee sluiten we het element </i> af. Het afsluiten van een element is erg belangrijk en daarom ook een zeer goede gewoonte dit direct aan te leren! Het afsluiten van een element is belangrijk omdat de browser anders niet weet dat dat het einde van de opdracht is. Dan zouden alle andere opdrachten voor verwarring zorgen met als gevolg dat je helemaal niets meer ziet op je webpagina, met uitzondering van sommige browsers zoals Mozilla Firefox. Deze zijn zo slim dat ze sommige afsluitende opdrachten zelf weten te plaatsen. Maar ondanks dat, blijft het afsluiten van elementen belangrijk, want mensen die Internet Explorer gebruiken kunnen jou website anders niet bekijken.
</p><p><i></head>:</i> Omdat we nog bezig zijn met onze grondbeginselen, hoeven we verder niets in het <i><head></i> element te plaatsen. Daarom sluiten we deze af.
</p><p><i><body>:</i> Hier beginnen we met de inhoud van onze webpagina. Het lichaam. Alles wat we hierin zetten, zal worden weergegeven op onze webpagina, tenzij we specifiek aangeven dat dit niet zichtbaar moet zijn, maar daar komen we in een volgende les nog op terug.
</p><p><i><font color="#000000">:</i> Dit is ons eerste element waar we ook meteen gebruik maken van een attribuut. Hoewel in dit geval de attribuut volledig overbodig en zelfs niet langer standaard is, wou ik je hier toch eventjes alvast kennis mee laten maken. Het <i><font></i> element is eigenlijk bedoeld om de opmaak van je tekst aan te passen. Als je dus gewoon tekst in wilt typen zonder deze te bewerken, hoef je het <i><font></i> element eigenlijk niet te gebruiken. Hoewel het toch een goede gewoonte is dit wel te doen. Met attributen kunnen we onze tekst bewerken. In dit geval geven we aan dat onze tekst een zwarte kleur moet hebben. Hadden we <i>color="black"</i> gebruikt, dan werkte dit net zo goed. HTML kan namelijk overweg met simpele, engelse kleuren als: black, blue, purple, green, yellow enz enz. Hoewel er niets mis is met het gebruik van woorden, heb je met kleurcodes een velen malen breder arsenaal aan kleuren.
</p><p><i></font>:</i> Ook hier sluiten we het <i><font></i> element weer af. Belangrijk om hierbij te melden is dat alle teksten die na dit afsluitende element in onze code zetten, niet langer beïnvloed worden door de attributen van het <i><font'></i><b> </b>element.
</p><p><i></body>:</i> Hier sluiten we het <i><body></i> element af. Hoewel het niet onmogelijk is, gebeurd het maar zelden dat er nog meer HTML code achter het <i></body></i> element komt behalve <i></html></i>. Mensen die met meerdere talen tegelijk werken, bijvoorbeeld HTML in combinatie met PHP, zullen vaak nog wel vele codes achter het <i></body></i> element schrijven.
</p><p><i></html>:</i> Hiermee sluiten we ons HTML document af. We zijn klaar en hebben geen codes meer die nog in ons HTML document thuis horen. Ook hier geld dat mensen dat met meerdere talen tegelijk werken, vaak nog vele lijnen code achter het<i> </html></i> element schrijven.
</p><p><b>Zelfstudie opdrachten</b>
</p><p>1) Probeer zelf een webpagina te schrijven met alle elementen en attributen die je hier geleerd hebt zonder te spieken.
</p><p>2) Zoek op internet op hoe je in HTML een enter achter een tekstregel maakt en maak een webpagina met 2 of meer zinnen.
</p><p><b>Uitdagingen</b>
</p><p>1) Maak een webpagina met 2 zinnen en zorg dat iedere zin een eigen tekstkleur heeft.
</p><p>2) Zoek op internet welk attribuut van het <i><body></i> element benodigd is om de achtergrondkleur van je webpagina te veranderen en geef de achtergrond van je webpagina een andere kleur. Vergeet hierbij niet de tekstkleur op je webpagina te veranderen zodat deze leesbaar blijft.
</p><p><b>Einde eerste les</b>
</p><p>En dan zijn we alweer aangekomen op het einde van onze eerste les in HTML. De grondbeginselen zijn gelegd en binnenkort kunnen we onze duik in het diepe gaan maken. Ik hoop je dat je het leuk vond en dat je mijn lessen blijft volgen zodat ook jij straks helemaal zelf je eigen website's kan maken.
</p>
<ul><li> Een standaard houd in dat dit de officiële code is. Vrijwel iedere ontwikkelaar van software applicaties houd zich aan de standaard van de code. Anders zouden gebruikers gedwongen worden een bepaalde applicatie te gebruiken om informatie op het World Wide Web te bekijken.
</li></ul>
<p><br />
</p> <div class="clearfix"></div>
</section>
<footer>
<div id="related-articles">
<div id="lig_leerwiki_articleend_3ads" class="ligatus"></div>
<script type="text/javascript" src="https://a-ssl.ligatus.com/?ids=94926&t=js&s=1" async></script>
<div class="OUTBRAIN" data-src="DROP_PERMALINK_HERE" data-widget-id="AR_1"></div>
<div class="clearfix"></div>
</div>
<h4>Reacties (0)</h4>
<section id="comments" class="theme-buttons">
<div class="bubble-container">
<div class="avatar pull-left">
<span style="color:#888;font-size:24px"><i class="glyphicon glyphicon-user"></i></span>
</div>
<div class="bubble">
<div class="panel panel-default triangle-border left"><div class="panel-heading">Reageer</div><div class="panel-body"><form id="w2" action="/article/message/indirectMessage/create/" method="post"><input type="hidden" id="articlemessage-owner_id" name="ArticleMessage[owner_id]" value="11664">
<div class="form-group field-articlemessage-parent_id">
<input type="hidden" id="articlemessage-parent_id" class="form-control" name="ArticleMessage[parent_id]">
<div class="help-block"></div>
</div>
<div class="form-group field-articlemessage-text required">
<textarea id="articlemessage-text" class="form-control" name="ArticleMessage[text]" rows="4" placeholder="Reageer..." aria-required="true"></textarea><div class="help-block"></div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group field-articlemessage-blameable-profile-first_name required">
<label class="control-label" for="articlemessage-blameable-profile-first_name">Voornaam</label>
<input type="text" id="articlemessage-blameable-profile-first_name" class="form-control" name="ArticleMessage[blameable][profile][first_name]" aria-required="true">
<div class="help-block"></div>
</div>
<div class="form-group field-identity-captcha">
<label class="control-label" for="identity-captcha">Captcha</label>
<div class="g-recaptcha" data-sitekey="6LfK3h8UAAAAAIOF8ypWaHOwqd6zmcNW76_iOXg8"></div>
<div class="help-block"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group field-articlemessage-blameable-profile-email required">
<label class="control-label" for="articlemessage-blameable-profile-email">Email</label>
<input type="email" id="articlemessage-blameable-profile-email" class="form-control" name="ArticleMessage[blameable][profile][email]" aria-required="true">
<div class="help-block"></div>
</div>
</div>
</div><div class="form-group form-group-button"><button type="submit" class="btn btn-primary" label="Verstuur je bericht">Verstuur je bericht</button></div></form></div></div>
</div>
<div class="clearfix"></div>
</div> <div id="w1" class="list-view query-list-view"><div class="empty">Geen resultaten gevonden</div></div> </section>
<div class="alert alert-copyright" style="margin-top: 200px ">
<h5>Copyright</h5>
<p>
Dit artikel is eigendom van de auteur Bjorno43. Gebruik van deze informatie is
alleen toegestaan met toestemming van de auteur of met een geldige bronvermelding (het plaatsen van een weblink naar dit artikel)
</p>
<br/>
<p>
Raadpleeg onze Algemene Voorwaarden voor meer informatie of neem contact op met de auteur.
</p> </div>
</footer>
</div>
<aside class="col-xs-12 col-sm-5 col-md-2 col-md-push-2 sidebar">
<div class="affix-top" data-spy="affix" data-offset-top="0" data-offset-bottom="100">
<div class="ligatus ligatus-sidebar">
<script type="text/javascript" src="https://a-ssl.ligatus.com/?ids=94928&t=js&s=1" async></script>
<div id="lig_leerwiki_sidebar_3ads"></div>
<div class="OUTBRAIN" data-src="DROP_PERMALINK_HERE" data-widget-id="SB_1"></div>
</div>
</div>
</aside>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 col-md-2 col-md-pull-10">
<div class="criteo">
<script async type="text/javascript">
Criteo.DisplayAd({
"zoneid": 63981,
"async": false
});
</script>
</div>
</div>
</div>
</div>
</article>
</main>
<div class="clearfix"></div>
</div>
<footer class="footer">
<div class="container"><nav><ul class="nav pull-right"><li><a href="#">Over LeerWiki.nl</a></li></ul></nav><span>© 2006-2024 LeerWiki.nl 5.3.9</span></div>
</footer><script src="https://www.google.com/recaptcha/api.js?hl=nl"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/assets/9799b66f/yii.js?v=1511370192"></script>
<script src="/assets/9799b66f/yii.activeForm.js?v=1511370192"></script>
<script type="text/javascript">jQuery(function ($) {
jQuery('#w2').yiiActiveForm([], []);
});</script>
</body>
</html>