Les 2: HTML, meer over body, plaatjes en links

Sommige woorden zijn belangrijker dan anderen in een tekst. Om dit aan te geven kun je ervoor kiezen om je tekst dikgedrukt te laten zien. Dit doe je met de <Strong>-tag rondom het woord of de woorden die je dikgedrukt wilt. Hiernaast zie je hier een voorbeeld van. Als je wilt dat je tekst op een nieuwe regel verder gaat, gebruik je de <br>-tag. Deze is een beetje raar omdat hij alleen maar een close-tag is.

<html>
    <h1>Over mij:</h1>
    <p>Hallo mijn naam is <strong>Laura.</strong><br>
     Ik hou heel erg van <strong>programmeren en gamen.</strong><br>
     Deze website is een voorbeeld voor de coderdojo. Hoe        
     cool is het om je eigen website te kunnen programmeren!    
     :)
    </p>
</html>

Tot nu toe zijn we eigenlijk alleen maar bezig geweest met de tekst op onze website. Maar er zijn nog genoeg andere leuke dingen om op je website te zetten, bijvoorbeeld plaatjes! Voor plaatjes gebruik je de <img> -tag, maar je moet deze tag nog wat extra informatie meegeven over het plaatje wat je wilt gebruiken.

Voor een plaatje vanaf je eigen computer gebruik je <img src="LOCATIE PLAATJE">
Bijvoorbeeld <img src="Laura/Afbeeldingen/laura.jpg">

Je kunt ook een  plaatje van het internet gebruiken. Achter src=” zet je dan de website link naar het plaatje.
Bijv.: <img src="http://www.gscdn.org/library/cms/11/12611.JPG">

Het is ook leuk om op je website naar andere pagina’s of websites te kunnen verwijzen. Hiervoor heb je link’s nodig, dit doe je met de <a>-tag. Net als bij plaatjes heeft de <a>-tag meer informatie nodig. Net zoals je bij een plaatje een link moet zetten moet je dat hier ook doen. In plaats van src gebruik je href en daarachter zet je de link van de pagina waarnaar je wilt verwijzen. Zoals hiernaast te zien is. Bij de -tag hadden we niets tussen de open- en sluit-tag in gezet. Bij de <img>-link doen we dat wel. De tekst waarop je kunt klikken om naar de link te gaan zet je tussen deze tags.

<a href="http://www.google.nl">Klik hier om naar Google te gaan.</a>

Opdrachten

[1] Kijk eens terug naar de teksten die je hebt geschreven bij de vorige leskaart. Zijn daar woorden tussen die je belangrijker vindt dan de rest van de woorden? Maak deze dan dik gedrukt zodat ze goed opvallen. Probeer tenminste 3 dikgedrukte woorden op je pagina te hebben.

[2] Het is leuk om onder het kopje “over mij” een foto van jezelf toe te voegen. Als je die niet hebt kun je ook een leuk plaatje van iets anders zoeken op internet. Extra: Misschien vind je je plaatje wel wat te groot of te klein. Het formaat van het plaatje kun je aanpassen binnen de tag. Om te weten hoe je dit kunt doen kun je eens een kijkje nemen op de volgende website: https://www.w3schools.com/tags/tag_img.asp als je er niet uitkomt, vraag het dan gerust aan de begeleiders!

[3] Maak een kopje aan met “leuke linkjes” en daaronder een korte paragraaf met linkjes die je leuk vindt. Kijk terug op wat je bij leskaart 1 hebt geleerd als je niet meer zo goed weet hoe kopjes en paragrafen werken. Extra: Met de <a>-tag kun je nog meer dan alleen maar een link openen in het bestaande scherm. Je kunt bijvoorbeeld ook een nieuw tabblad openen waarin de pagina uit het linkje komt te staan. Om te weten hoe je dit moet doen kun je kijken naar de volgende website: https://www.w3schools.com/tags/att_a_target.asp

Ben je klaar? Tof! Je site ziet er nu al een stuk leuker uit dan eerst. Laat aan een van de begeleiders zien hoe je site eruit ziet.

PreviousLes 1: HTML, de basisNextLes 3: HTML, lijsten

Last updated