Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015
Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!
Wat is een Website? Een website is eigenlijk niks meer dan een bestand op een computer (server) die door andere computers opgevraagd kan worden. Als je op je studentenschijf een mapje www aanmaakt, werkt dat als website (www.students.science.uu.nl/~studentnr) Als je met een webbrowser naar een website gaat wordt er altijd gezocht naar een bestand genaamd index.html Het is ook mogelijk om bij A Eskwadraat een website te hosten, vraag de WebCie voor meer informatie.
Inleiding HTML HTML (HyperText Markup Language) is een taal die de opmaak van een website bepaalt. In de meest simpele vorm is een website gewoon een HTML bestand dat geopend wordt door een webbrowser. (klik maar eens op bron weergeven als je een website bezoekt) HTML bestaat uit tags Tags geven betekenis of opmaak aan de tekst die tussen de tags staan Tags worden omgeven door <> (bijvoorbeeld <html>) Bij elke begintag hoort een sluittag (Bijvoorbeeld <html>...</html>) Een tag kan attributen bevatten (Bijvoorbeeld <html id="vb">)
Basis HTML-tags Een HTML-pagina wordt omgeven door <html> tags Binnen de html-tags komt eerst een <head> tag en daarna een <body> tag De daadwerkelijke website wordt omgeven door <body> tags Overige informatie over de website, zoals de titel wordt omgeven door <head> tags
Zelf aan de slag Tips Maak met behulp van de Basis HTML-tags een website met een titel en als inhoud de tekst Hello World Het is mooi (en vaak noodzakelijk) om tags goed te nesten, bijvoorbeeld: <tag1><tag2>..</tag2></tag1> Het is handig om een tab of spaties te gebruiken bij een geneste tag, bijvoorbeeld: <tag1> <tag2>... </tag2> </tag1> Als je niet weet hoe een tag werkt of hoe het eruit hoort te zien, kijk dan op www.w3schools.com
Tekst en opmaak Het is leuk om meer op je website te zetten dan niet opgemaakte tekst. Een paragraaf zet je tussen <p> tags Wil je dikgedrukte tekst? Gebruik dan <b> Of schuin? gebruik dan <i> Voor headers van bijvoorbeeld hoofdstukken of je website gebruik je <h1> Waarbij het getal van 1 t/m 6 kan om aan te duiden hoe groot de header moet zijn. Wil je een enter in je tekst, gebruik dan <br/> Let op! Omdat deze tag geen aparte sluittag heeft wordt hij op een ander manier afgesloten. één van de belangrijkste tags is de <a> tag. Hiermee maak je een link naar een bestand op je computer of naar een andere website. Probeer maar uit!
Containers/Layout Het is handig om stukken van je website in blokken te plaatsen, zodat je die later met bijvoorbeeld CSS op de goede plaats kan zetten Hiervoor kan je de <div> tag gebruiken Vanaf HTML5 is het ook mogelijk om <header>, <nav>, <section>, <article>, <aside>, <footer> en <summary> tags te gebruiken, die ongeveer hetzelfde doen, maar soms in sommige browsers extra functionaliteit hebben. De <p> tag is ook een container
Geavanceerd Het is ook leuk om in je website tabellen (<table>), lijsten (<ul> en <ol>), plaatjes (<img>) formulieren (<form>) en audio/video (<audio> of <video>) te zetten. Kijk op www.w3schools.com hoe deze tags werken en zet ze in je website
Overzicht We hebben vandaag de basis van HTML behandeld. Wil je hier meer over weten? Kijk dan op www.w3schools.com Bij de volgende cursus behandelen we de Layout (CSS) en de laatste cursus gaat over interactiviteit (Javascript) Wil je na deze cursus graag meer leren over hoe het is om een grote website te onderhouden? Kom eens langs bij de WebCie!