Talen
Pages
Wettelijk
Les 12 – HTML & CSS
Weet hoe het werkt, leer een aantal van de basale handelingen
en de begrippen.
Basis
• HTML (HyperText Markup Language) is de taal waarmee je webpagina's maakt. In deze handleiding worden de mogelijkheden van HTML uitgebreid toegelicht en van voorbeelden voorzien. Daarnaast is een beschrijving opgenomen van de HTML-elementen,
waarbij ook de ondersteuning door browsers is aangegeven.
• Met CSS (Cascading Style Sheets) heb je een groot aantal mogelijkheden om de presentatie van HTML-documenten te beïnvloeden. Naast een algemene toelichting is in deze handleiding een beschrijving opgenomen van de CSS-eigenschappen, voorzien van vele voorbeelden en informatie over de ondersteuning door browsers.
• HTML staat voor HyperText Markup Language:• Hypertext is de techniek waarmee een verbinding (een
link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.
• Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.
• HTML-code is opgebouwd uit elementen en attributen.
Elementen en attributen• Elementen bestaan meestal uit tweetallen: een deel dat het element
activeert en een deel dat de activering weer beëindigt. Zowel de activering (ook wel start tag genoemd) als de beëindiging (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de beëindiging zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de beëindiging. Tussen de activering en beëindiging staat de inhoud, waarop het element betrekking heeft. Als voorbeeld de opbouw van een paragraaf met behulp van het P element.
• <P>Deze tekst vormt een paragraaf.</P>• Een aantal elementen heeft geen inhoud. Voor deze lege elementen
is het gebruik van de beëindiging verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: BR is een element waarmee een zin wordt afgebroken
Voorbeeld The New School
Het Begin• Ga naar je kladblok/notepad• Zet daarin het skelet:• <HTML>• <HEAD>• <TITLE>• </TITLE>• </HEAD>• <BODY>• </BODY>• </HTML>
Html voor op de Mac.Om met HTML te programmeren op de Mac:Ga naar Programma’s,-> Text editor,Converteer naar platte tekst (appeltje + shift + t)Plak de tekst <head> etc. erinOpslaan als .HTML document op bureaubladOpenen met brouwser – gaat automatischDaar is je eerste webpagina
Opslaan
• Opslaan :
• “alle bestanden”
• Opslaan als index.html
• Op het bureaublad
De invulling
• Typ iets tussen <title> en </title>
• Opslaan, kijk – title balk
• Nu iets tussen ,<body> en </body>
• Nu opslaan of refresh
• <BODY BGCOLOR="BLACK" text=“red">
Plaatje• Als je een *.jpg of *.gif bestand heb gevonden, doe het in dezelfde map als je html bestand, of leg in die directory
een nieuwe map aan, waar je het in doet.Als je een aparte map voor je plaatjes wil maken, noem hem dan "plaatjes".
• Ok. Terug naar onze bron. Ik noem het plaatje even foto.jpg.Je kan de naam van je plaatje wijzigen, of in plaats van "foto.jpg", de naam van jou plaatje zetten in dit voorbeeld.Pas op; je kan *.jpg niet zomaar in *.gif wijzigen! De extensie moet dezelfde blijven hier.
• <IMG SRC="foto.jpg">, of met de dir;<IMG SRC="plaatjes/foto.jpg">.Ga nu je *.htm bestand openen (na SAVE natuurlijk), en kijk of je het plaatje in je browser ziet.Als je het niet ziet, heb je ergens een fout gemaakt.
• Voorbeelden van mogelijke fouten zijn: • 1x", in plaats van "2.jpg". (aan elke kant 1 " dus, of juist geen ") • Een spelfout in de naam van het bestand. • Een foutje in een van de Tags. • De extensie vergeten te vermelden. • Verkeerde document geopend. • Reload, Refresh of Vernieuwen. • Niet opgeslagen (SAVE). • Een spacie (lege letter) te veel of te weinig. • Verkeerde directory. • Naam van directory klopt niet.
Centreren
• Je kan het plaatje in het midden zetten door er
• <CENTER><IMG SRC="plaatjes/foto.jpg"></CENTER>
• van te maken.Precies hetzelfde effect, krijg je door;
• <DIV ALIGN=CENTER><IMG SRC="foto.jpg"></DIV>
Link invoegen• Als je 2 pagina's hebt, kan je ze aan elkaar verbinden. Om van de ene naar de andere pagina te
komen,zullen we nu dan een link maken.
• <A HREF=pagina.htm>EenPlaatjeOfText</A>, Of:<A HREF="pagina.htm">EenPlaatjeOfText</A>,wat eigenlijk hetzelfde is.Maak: " ".<A HREF="http://www.adres.nl/pagina.htm">EenPlaatjeOfText</A>, voor een pagina op een andere plek op het internet.
• Je kan ook naar andere bestanden dan *.html linken. Die worden niet altijd geopend in de browser. Zelfs naar een plek op een pagina.
• <A NAME="woord"></A>, om de plek aan te geven, <A HREF="#woord">WOORD\Plaatje</A>, om er heen te linken.<A HREF="pagina.html#woord">WOORD\Plaatje</A>, om naar een plek op een andere pagina te linken.
• <A HREF="http://www.adres.nl/dir/">EenPlaatjeOfText</A>, linkt naar de index.htm van de map "dir" op de url www.adres.nl.
• Voor een hogere map gebruik je ". . /bestand.htm". Ook voor . . /*.gif&*.jpg.. . / . . / is dus twee directories hoger \ terug.
• <A HREF="MAILTO:[email protected]">EenPlaatjeOfText</A>, om de bezoeker van je site een E-mail naar jou te laten sturen!
• De fouten, die je hier nogal 'ns maakt:De 'l' van .htm of .html.Die moet hetzelfde zijn, als de naam van het bestand.Anders zegt de browser gewoon, dat het bestand niet bestaat.x.htm is een andere bestand als x.html !
Linken
Deze noem ik index.htm Deze noem ik index.html
<HTML><HEAD><TITLE></TITLE></HEAD><BODY><A HREF="index.html">Klik hier om naar de andere pagina te gaan!</A></BODY></HTML>
<HTML><HEAD><TITLE></TITLE></HEAD><BODY><A HREF="index.htm"><IMG SRC="plaatjes/foto.jpg"></A></BODY></HTML>
•Nu een voorbeeld, van twee pagina's naar elkaar gelinkt:
Attributen• <BR>: Afkorting voor "BReak". Nieuwe regel
beginnen. Nu dus.<P>: Page break. Regel overslaan. Zoals hier:
• <I></I>: Italic. Betekent cursief. Zo dus.<B></B>: Bold. Vet. Dikke letters. Dit dan<H1></H1>:
• H1• Heading 1. Grote letters met nieuwe regels (boven
en onder).<H3></H3>: Headings kunnen genummerd worden. Hoe hoger het nummer, de kleiner de letters.H3
• <U></U>: Underline. Ondersteept. Dit dus.<BIG></BIG>: 1 punt groter. Gaat tot +4! 1234.<SMALL></SMALL>: Kleiner. Tot -2. 12Dan die nieuwe onderdelen van het plaatje:BORDER= ; De rand om het plaatje. Wordt vooral zichtbaar, als er link in het plaatje zit.
• ALT= ; De text die verschijnt, voordat het plaatje er is, en met je muis erover.
• HEIGHT= ; De hoogte van het plaatje in pixels of procenten (%).
• WIDTH= ; De breedte van het plaatje. Procent of pixel, moet je aangeven.
• De hoogte en breedte van een pixel: Ja, dat ligt aan de monitor van jezelf of van degene die je site bezoekt.Standaard banner maten zijn; 468x60, 400x40, 88x31, om een idee te geven.
En dan nu: De <FONT></FONT> Tags.Bij <FONT>, kan je aangeven, wat voor lettertype je wil, de kleur, hoe groot.Met </FONT> moet je dat dan afsluiten. Altijd. Als er een andere letter komt, aan het einde van je "BODY". </FONT> Blijft altijd </FONT>, terwijl <FONT> <FONT ...> wordt.Daarin wordt beschreven, wat er zoal veranderd moet worden aan de FONT.
FACE=Hier komt het lettertype. Er zijn er maar enkele die je kan gebruiken. Want, op de computer van de bezoeker van je site, moeten ze ook geïnstalleerd zijn. Je kan meerdere lettertypen aangeven, door komma's ertussen te zetten, voor als ze niet aanwezig zijn, in de computer van je bezoeker. De Browser pakt dan het eerste aanwezige lettertype. SIZE=Hoe groot je lettertype is. Van -4 tot +4, of van 1 tot 7. Goed.COLOR= De kleur. Hetzelfde aan te geven, zoals we al behandelden in de
<BODY ...> tag.
CSS
• Met CSS (Cascading Style Sheets) heb je een groot aantal mogelijkheden om de presentatie van HTML-documenten te beïnvloeden. Naast een algemene toelichting is in deze handleiding een beschrijving opgenomen van de CSS-eigenschappen, voorzien van vele voorbeelden en informatie over de ondersteuning door browsers.
CSS verbinden aan HTML dokument
•Stijlen verbinden met HTML
• Wanneer je met stijlen wilt werken, dan moet je die op de een of andere manier in verband brengen met je HTML-document. HTML biedt daarvoor drie mogelijkheden: inline stijlen, een stijlblok en een stijlblad.
• Een inline stijl gebruik je als een stijl slechts voor een enkel element binnen één HTML-document wilt gebruiken. Je voegt dan aan het element het STYLE attribuut toe en geeft het als waarde één of meer stijldeclaraties:
• STYLE="stijldeclaratie“
• Wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen één document, dan kun je het beste een stijlblok in de head van het document plaatsen. Dat doe je door het STYLE element op te nemen en daarbinnen één of meer stijlregels te plaatsen.
• <STYLE TYPE="text/css">stijlregel</STYLE>
• Wanneer een stijl in meerdere documenten gebruikt moet worden, dan is het verstandig deze in een apart document te plaatsen: een extern stijlblad. In de head van een HTML-document kun je het LINK element opnemen om aan te geven in welk stijlblad de stijlen staan.
• <LINK HREF="stijlblad.css" REL="stylesheet" TYPE="text/css">• Het stijlblad zelf bevat geen HTML-code, maar alleen één of meer stijlregels.• stijlregel
Het Erven van een stijlIn de volgende voorbeelden, waarin gebruik gemaakt wordt van een inline stijl,
is het principe van het erven van eigenschappen te zien.• <P STYLE="color: red;">Hier erft <B>vet</B> de kleur van de
paragraaf.</P>
Dit wordt als volgt weergegeven:Hier erft vet de kleur van de paragraaf.
Wordt ook voor vet een kleur gedefinieerd:• <P STYLE="color: red;">Hier gaat de stijl van <B STYLE="color:
green;">vet</B> boven de stijl van de paragraaf.</P>dan zie je:Hier gaat de stijl van vet boven de stijl van de paragraaf.
Bij de beschrijving van de verschillende eigenschappen wordt aangegeven of een stijl al dan niet geërfd wordt door descendent elementen.
Van erven is overigens alleen sprake, als er geen stijlregels zijn die voor het element zelf gelden.
HTML & CSS
•Meer informatie en uitleg te vinden op
• http://www.handleidinghtml.nl/