HTML & CSS

Mystudy HOME

HTML

HTML is een computertaal gemaakt voor het designen van webpagina's. HTML staat voor HyperText Markup Language. een HTML-bestand begint altijd met (HTML) en eindigt met (/HTML). Na de html begintag volgt de (head) met daarin (title) en links. Na (head) volgt (body) met daarin de header, nav, arcticle etc.

Opmaak met CSS

In dit hoofdstuk leert u werken met CSS-code. Met CSS-code kunt u uw HTML-website opmaken met kleuren, lettertypevariaties en nog veel meer.

CSS staat voor 'Cascading Style Sheet', in het Nederlands vertaald 'Algemeen Stijldocument'. Aangezien een HTML-bestand en een CSS-bestand gescheiden zijn, moet u ze koppelen met deze link: 'link rel = "stylesheet" type = "text / css" href = "style.css">'. de 'href' hoeft niet altijd 'style.css' te zijn. Je kunt de naam naar veranderen als je dat wil, maar de extensie '.css' moet altijd hetzelfde blijven, bijvoorbeeld: 'awooo.css'.

In een CCS-bestand is het een beetje anders dan normaal wanneer je iets wilt toevoegen. In een CSS-bestand moeten de eigenschappen (hier 'kleur') en de waarde (hier rood) altijd tussen accolades '{...}' staan. Je kunt de kleuren ook op andere manieren aanpassen: voer een hexadecimale waarde in (voor rood is # ff0000) of met RGB (rood groen blauw). Je kunt de achtergrond ook een kleur geven, dit werkt net als het inkleuren van de letters. Het is ook mogelijk Foto als achtergrond, dat heb ik gedaan. Je plaatst een foto met de regel: body {background-image: url ('image.png');}

Het lettertype kun je ook veranderen, je doet het met line: body {font-family: ....;}, ik heb gekozen voor 'Roboto', sans-serif;. Uitlijning speelt ook een rol bij het maken van je website. Je kunt de uitlijning wijzigen met: p {text-align: ....;}, bij die deed ik 'justify'. In plaats van 'p' kun je Je kunt ook het lettertype wijzigen, dus in plaats van (b) kun je het volgende gebruiken: p {lettertype: vet;}. Hetzelfde geldt voor (i) = p {lettertype: cursief;} en (u) = p {lettertype: onderstrepen;}. De kleur van hyperlinks kun je ook aanpassen daarnaast kun je de underlining verwijderen. dit doe je door te typen, text-decoration:none;

k