HTML

Uit Roncalli Wiki

HTML is de codetaal van webpagina's. Naast HTML worden er ook vaak javascript en CSS gebruikt, maar ook dan heb je nog steeds HTML nodig.

HTML Schrijven

Een HTML pagina kan je makkelijk schrijven met een text-editor zoals Notepad2. Het kan ook met programma's als Frontpage, Dreamweaver of NVU. Zij hebben ook ingebouwde HTML-editors.

De truuk is om:

Notepad2 te starten en de pagina te schrijven. Sla direct op als .html-bestand.
De pagina ook te openen in de browser
Na elke kleine wijziging, telkens opslaan. Dan in de browser op verversen klikken.

Opbouw Pagina

Een HTML-pagina bestaat uit de head en de body.

De head geeft informatie over de pagina, zoals de titel en meta-tags die voor Google enzo worden ingevuld. De body bevat de eigenlijke pagina. Een belangrijk attribuut is bgcolor, daaarmee zet je de achtergrondkleur van de pagina: <body bgcolor="red">

Opdracht 1

Maak nu de Opdracht HTML Basispagina

Koppen en Paragrafen

Om een tekst overzichtelijk te maken moet je de tekst opknippen in paragrafen. Dat kan met

<p>

Een paragraaf sluit je ook weer af met

 </p>

Kortom:

 <p>Deze tekst zit in een paragraaf.</p>

geeft

Deze tekst zit in een paragraaf.

Met het attribuut align kun je de uitlijning van de paragraaf regelen.

 <p align="center">...</p>

zorgt voor centreren. Je kan ook kiezen voor align=left en align=right.

De kopjes maak je met de tags

 <h1>...</h1>
 <h2>...</h2>
 <h3>...</h3>

<h1> is voor de titel van de pagina <h2> voor de paragrafen en <h3> voor sub-paragrafen.

Opdracht 2

Maak nu de Opdracht Opdracht HTML Koppen en Paragrafen

Als je een tag gebruikt dat niet bestaat, zoals het <tag>-tag, dan negeert de browser het gewoon. Een overzicht van HTML-tags vind je bijvoorbeeld op [hier]

Fonts

Erg belangrijk is het font ofwel lettertype. Met het lettertype kan je een aantal attributen veranderen:

size (grootte)
face (lettertype)
color (kleur, zie ook HTML RGB Kleurcode)

In de praktijk gebruik je ze gewoon alledrie in 1 tag:

 <font color="#DDDDDD" face="arial" size="5">...</font>

Opdracht 3

Maak nu de Opdracht HTML Font

Links

Erg belangrijk op een webpagina zijn natuurlijk de links. De code voor een link moet je gewoon uit je hoofd kennen. De code is: <a href="http://wiki.roncalli.nu/">blauwe tekst</a> Het tag bestaat uit:

 <a href="doel-adres">blauwe tekst</a>

Het <a> tag met het attribuut href="doel-adres".
Het doel-adres begint meestal met http:// als je naar een andere site linkt.
Als je naar een pagina pagina.html linkt, is dat het doel-adres.
De blauwe tekst, in het voorbeeld Blauwe Tekst, is de tekst waaar je op kunt klikken. je kan er ook plaatjes of andere tags tussen zetten.
</a> Het A sluiten tag.

Opdracht 4

Maak nu de Opdracht HTML Links

Afbeeldingen

Wat is een website zonder adbeeldingen? Saai! Je kan plaatjes gebruiken van de volgende typen:

jpg voor foto's en afbeeldingen met veel kleuren
'gif en png' voor afbeeldingen met minder kleuren zoals logo's.

Het tag voor abeeldinge (images) is

<img src="plaatje.jpg">

Verder zijn er de attributen:

width="50" (pixels)
height="50" (pixels)
align="left" of "right" of "center" voor het horizontaal uitlijnen
align="top of "bottom" of "middle" voor het verticaal uitlijnen

Opdracht 5

Maak nu de Opdracht HTML Afbeeldingen

Pagina Kleuren

Je hebt in HTML de mogelijkheid om veel kleuren te gebruiken. Lees de pagina HTML_RGB_Kleurcode en HTML Body

Opdracht 6

Maak daarna de Opdracht HTML Body.

Tabellen

Een belangrijke manier om een pagina netjes op te maken is met tabellen. Omdat tekst altijd verschuift naar links, rechts of naar het midden is het samen met CSS Stylesheets de enige manier om een pagina op te maken zodat tekst en plaatjes netjes naast andere tekst en plaatjes komen te staan.

Table

Een table begin je met het <table> tag. Het heeft veel attributen, zoals

* width
* height
* border
* bordercolor
* margin
* cellpadding
* align

Rijen en Kolommen

Een tabel bestaat uit rijen die zijn aangegeven met het <tr> (table row) tag. In elke rij zijn een aantal tabel-cellen, die je maakt met <td>.(td=table data). De truuk is om het aantal '<td> in elke rij gelijk te laten. De hoeveelheid spaties staan, zoals in alle HTML, alleen voor de leesbaarheid van de code en verder betekenen ze niks.

Simpele tabel

Een eenvoudige tabel is deze:

 <table>
  <tr><td>Uur</td><td>Maandag</td> <td>Dinsdag</td><td>Woensdag</td><td>Donderdag</td><td>Vrijdag</td></tr>
  <tr><td>1    <td> <td>SWT</td>          <td>SWT</td>       <td><SWT<td>          <td>SWT</td>           <td>SWT</td>    </tr>
</table>

Opdracht 7

Maak nu de Opdracht Eenvoudige Tabel

Tabel in een tabel

Op veel sites zie je dat webpagina's zijn gebouwd met tabellen - in - tabellen. Meestal heb je dan een hoofdtabel van 9 vakjes (3 rijen, 3 kolommen), en is het midden-midden vakje zelf met een tabel gevuld, waar de inhoud van de pagina netjes in staat. Dan krijg je dus zoiets:

 <table width="100%">
 <tr><td>Logo</td><td>Banner of foto</td><td></td></tr>
 <!-- tweede rij -->
 <tr><td>
         <b>Menu</b> <br>
         <b>Menu optie 1</b><br />
         <b>Menu optie 2</b><br />
         <b>Menu optie 3</b><br />
         <b>Menu optie 4</b><br />
    </td>
    <td><!-- hoofd gedeelte -->Hier komt de pagina
    </td>
    <td></td>
 <tr><td>This site was made</td><td>by you and me</td></tr>
 </table>

Opdracht 8

Gebruik dit voorbeeld in de volgende Opdracht Tabel in tabel

Tabel Achtergronden

Heel veel websites gebruiken plaatjes als achtergrond in een tabel. Je kunt een achtergrond zetten in een tabel, met

 <table background="plaatje.gif">....</table>
 </table>

Opdracht 9

Maak nu de Opdracht HTML Tabel Achtergrond. Op die manier kan je een tabel ronde hoeken geven, maar dan moet de hoogte en breedte van de tabel wel vast staan.

Je kan ook plaatjes als achtergrond van een cel gebruiken. Dan kan je een tabel met een wisselende hoogte en breedte van ronde hoeken voorzien. Maak nu de table na uit [deze pagina]

Volgende Opdracht

Ga nu door naar de serie over HTML met CSS.

opdracht 10

probeer nu met alles wat je geleert heb een eigen website maken.

wel met de standaart dingen:

<title>eigen site</title>
<head>           </head
<body>je tekst   </body>
<img src="typ hier je site tussen"width="1000" height="500"
width zelf de grootte bepalen
height zelf groote bepalen

wat moet er in staan:

achtergtrond
plaatje
tekst
tekstgroote

HELEMAAL NIKS !!!!!!!!!!