|
|
|
|
|
|
|
|
|
Informatie
blok |
 |
|
|
|
|
HTML programming language
Dit
document bevat een introductie over web-begrippen en een aantal veelgebruikte HTML-codes.
Scroll
naar beneden, of klik
hier,
voor de HTML
- programmeer projecten, en selecteer
vervolgens een onderwerp dat U interessant vindt...
|
|
|
|
|
| Auteur: Johnny Heesterbeek |
Datum: 03-04-2008 | |
|
|
|
|
|
|
|
|
|
|
|
|
HTML
- programming language |
 |
|
|
|
|
| |
 HTML
- programming language |
|
| |
|
|
D e naam HTML
betekent eigenlijk HyperText Markup Language. Hypertext is de manier van
linken naar webbronnen en beeldmateriaal zoals plaatjes of video's. De markup staat voor de layout van de webpagina, en bepaald waar alles op
de pagina weergegeven moet worden en waar de links naartoe leiden. De language staat uiteraard voor taal. HTML is tevens ook de meest
gebruikte taal op het hele world wide web. World wide web word afgekort
als WWW. Deze afkorting ziet men ook terug in ieder URL op internet. De
browser heeft WWW nodig om te kunnen bepalen of het bestand dat je
aanroept zich op het world wide web bevindt, of op je computer. Een goed
voorbeeld is dat op www.high-tech-web.nl.tt het zelfde kan staan als op
C:/high-tech-web.nl.tt. WWW geeft dus gewoon alleen de plaats aan. De meeste browsers van tegenwoordig zetten
(http://) WWW er al zelfs automatisch voor. Let
wel op dat WWW niet in links hoeft voor te komen als de link wijst naar
dezelfde server of directory. Met de directory word de desbetreffende
locatie van de map op de computer bedoeld, en dit betekent vrij vertaald; plaats of richting.
Om een website met
html te bouwen kun je het beste kladblok gebruiken of een html editor.
Het gemakkelijkste is een html editor, omdat deze eventuele fouten kan
opsporen en herstellen. Twee voorbeelden van bekende HTML editors zijn
Microsoft frontpage en Dreamweaver. Voor de beginner raad ik Frontpage
aan, omdat dat een stuk simpeler is. Frontpage maakt het zelfs mogelijk
om bijna zonder enige HTML kennis toch een mooie (grafische) website te
bouwen. Maar door enige de kennis van HTML kun je veel gemakkelijker en
sneller fouten opsporen, functies invoeren, of je site aanpassen. In
deze mini cursus gaan we alleen in op het code gedeelte van de editors.
Om te beginnen met
HTML kun je het beste een bepaalde map op je computer aanmaken om
georganiseerd je website te kunnen bouwen. maak bijvoorbeeld in de map
"mijn documenten" via het menu start een map website aan. Voor Microsoft
Vista gebruikers, klik op het ronde Windows logo in de linksonder in het
scherm, en selecteer Uw gebruikers naam, en maak een nieuwe map aan met
website. Voor alle besturingssystemen geldt: ga nu verder met in deze
map een map afbeeldingen aan te maken of maak zelfs een complete pagina
directory aan.
Als je je HTML
bewerkingsprogramma start, zul je zien dat er al bepaalde codes
voorgeprogrammeerd staan. Dat kan handig zijn want anders zul je deze
alsnog moeten typen. Over de genoemde codes wil ik het bij deze juist
over gaan hebben.
Dit zal bij het starten op het scherm te
voorschijn komen:
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Nieuwe pagina 1</title>
</head>
<body>
</body>
</html> |
Zoals je ziet bestaat een HTML pagina uit
verschillende codes. De codes hierboven, ga ik als eerste toelichten.
Dit is de eerste tag. Deze tag zorgt
ervoor dat de browser weet dat de inhoud een HTML code bevat.
Een tag wordt meestal afgesloten met een
schuine streep voor de tag. ( / ) Hierdoor weet de browser dat dit het
einde is van de functie.
De volgende code is de is een code om te
laten zien dat je iets aan de eigenschappen van het document wilt
toevoegen, de kop van het document. De zogenaamde head tag. Ook deze tag
dient afgesloten te worden met een schuine streep voor de laatste tag.
|
1
2
3
4
5
6
7 |
<html>
<head>
</head>
</html> |
In de head tags wordt meestal wat
belangrijke informatie voor de browser gezet, de naam zegt het eigenlijk
al de kop. Boven in de browser komt de naam van de webpagina te staan.
De "title" is de titel van de pagina. De andere informatie is minder
belangrijk voor het testen van je eerste website, het zegt namelijk iets
over meta tekst. Deze is belangrijk voor zoekmachines, zoals
www.google.nl of
www.live.nl. Op de meta tekst komen we
zo weer terug.
|
1
2
3
4
5
6
7
8 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Mijn eerste
website!</title>
</head>
</html> |
De belangrijkste tag is de body tag. In
de body komt de eigenlijke zichtbare inhoud van de pagina. In de body
kun je in principe al iets gaan typen.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Mijn eerste
website!</title>
</head>
<body>
</body>
</html> |
Dit is dus de basis van een pagina.
Belangrijke
informatie: deze tekst opslaan in een bestand met .htm of .html
extensie. Geef het bestand bijvoorbeeld als naam basis_tag.htm en zet
het in een map genaamd html zodat je het later gemakkelijk kunt terug
vinden.
Let op bij het opslaan dat je geen spaties gebruikt, anders krijgt U bij
het bezoeken van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
).
Als je deze tekst zou kopiëren, en zou
plakken in een document en dat een .htm, of .html extensie zou geven,
zou je via de browser al kunnen kijken. Het resultaat is dat je boven in
je browser: "Mijn eerste website!" zult zien staan. Dit zal vervolgens bovenin je browser
verschijnen:
Met deze code kan
je een bericht op een webpagina weergeven. Zet deze code in de body van
je pagina. (tussen <body> en </body> tags dus)
Je code zal er dus zo uit komen te zien:
1
2
3
4
5
6
7
8
9
10
11
12 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Mijn eerste
website!</title>
</head>
<body>
Ik heb op www.high-tech-web.nl.tt mijn eerste HTML source-code leren
schrijven!
</body>
</html> |
En hier is de mogelijkheid om het stukje tekst te
kopiëren vanaf deze site, overtypen is uiteraard het meest leerzaam.
Belangrijke informatie: deze tekst opslaan in een
bestand met .htm of .html extensie. Geef het bestand bijvoorbeeld als
naam tekst_oefening_1.htm. Let op bij het opslaan dat je geen spaties
gebruikt, anders krijgt U bij het bezoeken van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of
- ). Dit zal vervolgens in je browser
verschijnen:
| Ik heb op www.high-tech-web.nl.tt
mijn eerste HTML source-code leren schrijven! |
Op dit moment ben
je al in staat om tekst in de browser te krijgen, en eventueel een
simpele webpagina te kunnen maken. Maar het zal niet prettig lezen voor
de bezoeker. Om je tekst duidelijker te maken is het handig om gebruik
te maken van kopjes en alinea's. Voor deze instructies hebben we ook
weer aparte tags. Met de volgende tag kan men kopjes en allinea's maken.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Voorbeeld
tekstopmaak</title>
</head>
<body>
<H1>Dit is Kop 1</H1>
<H2>Dit is Kop 2</H2>
<p>Dit is een voorbeeld van
de eerste alinea.</p>
<p>Dit is een voorbeeld van
een tweede alinea.</p>
</body>
</html> |
Ook deze HTML oefening kun je naar je kladblok of editor
kopiëren om te bekijken hoe dat dit er in werkelijkheid eruit ziet:
Belangrijke informatie: deze tekst opslaan in een bestand met .htm of
.html extensie. Geef het bestand bijvoorbeeld als naam
opmaak_oefening_1.htm. Let op bij het opslaan dat je geen spaties
gebruikt, anders krijgt U bij het bezoeken van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
). Dit zal vervolgens op ware grootte in
je browser verschijnen,
tenzij je de getallen tussen de tags aanpast.:
Dit is Kop 1
Dit is Kop 2
Dit is een voorbeeld van de eerste alinea.
Dit is een voorbeeld van een tweede alinea. |
Drie andere veel voorkomende opmaak-tags zijn: Vet
(big), Cursief en Ondersteept (underline).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Voorbeeld
tekstopmaak</title>
</head>
<body>
<b>vet</b>
<i>cursief</i>
<u>onderstreept</u>
</body>
</html> |
Dit zijn de tags die je naar je eigen kladblok kunt
kopiëren.
Belangrijke informatie: deze tekst opslaan in een bestand met .htm of
.html extensie. Geef het bestand bijvoorbeeld als naam
opmaak_oefening_2.htm. Let op bij het opslaan dat je geen spaties
gebruikt, anders krijgt U bij het bezoeken van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
).
Dit zal vervolgens in je browser
verschijnen:
| vet cursief
onderstreept
| |
:: Tekst opmaak (uitlijning) :: |
|
Ook
deze tags worden vaak gebruikt. Het wordt de uitlijning genoemd. Men kan
de pagina links, rechts en in het midden uitlijnen. De functie uitvullen
(justify) wordt door de meeste browsers niet goed ondersteunt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Voorbeeld tekstopmaak</title>
</head>
<body>
<p
align="left">links</p>
<p align="right">rechts</p>
<p align="center">midden</p>
</body>
</html> |
Dit
zijn de tags die je naar je eigen kladblok kunt kopiëren.
|
Belangrijke informatie: deze tekst opslaan in een bestand met .htm of
.html extensie. Geef het bestand bijvoorbeeld als naam
uitlijning_oefening_1.htm.
Let op bij het
opslaan dat je geen spaties gebruikt, anders krijgt U bij het bezoeken van de
site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
). Dit zal vervolgens in je browser
verschijnen:
Het
internet staat vol met links. Ook U bent op deze pagina gekomen door
middel van links. Zonder links zou het internet zoals het nu is niet
bestaan. Hier wordt de code uitgelegd om een link op een pagina te
kunnen maken.
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>Voorbeeld link</title>
</head>
<body>
<a
href=http://www.high-tech-web.nl.tt>high-tech-web</a>
</body>
</html> |
Belangrijke informatie: deze tekst opslaan in een bestand met .htm of
.html extensie. Geef het bestand bijvoorbeeld als naam
link_oefening_1.htm.
Let op bij het
opslaan dat je geen spaties gebruikt, anders krijgt U bij het bezoeken
van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
). Dit zal vervolgens in je browser
verschijnen:
| |
:: Afbeelding plaatsen :: |
|
Om een website nog
aantrekkelijker of duidelijker te maken is het gebruik van afbeeldingen
een uitkomst. Op een website kun je op verschillende manieren
afbeeldingen in voegen. Hier wordt op dit moment alleen de basis manier
toegelicht.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>De afbeelding</title>
</head>
<body>
<img
src="http://www.
[jouw hosting] .nl/ [jouw map] /logo.gif"
>
</body>
</html> |
Dit zal vervolgens bovenin je browser
verschijnen:
Dit is de basis om
een plaatje in je browser te zetten. Je kan namelijk nog veel meer
eigenschappen aan deze afbeelding toewijzen. De standaard toewijzingen
uit editors zijn om er een rand omheen te maken (de zogenaamde border)
en om de grootte van de afbeelding toe te wijzen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>De afbeelding</title>
</head>
<body>
<img
border="1"
scr="http://www. [jouw
hosting] .nl/ [jouw map] /logo.gif"
>
</body>
</html> |
Dit zal vervolgens bovenin je browser
verschijnen:
Er zijn gevallen
waarin het beter uitkomt dat een afbeelding niet standaard links op de
pagina getoont moet worden, maar rechts of in het midden. In zo'n geval
kun je dezelfde code gebruiken als de opmaak code in de alinea-tags.
align="right"
of align="left"
of
align="center".
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<title>De afbeelding</title>
</head>
<body>
<img
src="http://www.
[jouw hosting] .nl/ [jouw map] /logo.gif"
align="right">
</body>
</html> |
Dit zal vervolgens bovenin je browser
verschijnen:
Belangrijke informatie: deze tekst opslaan in een bestand met .htm of .html
extensie. Geef het bestand bijvoorbeeld als naam
afbeelding_oefening_2.htm.
Let op bij het
opslaan dat je geen spaties gebruikt, anders krijgt U bij het bezoeken
van de site "%20" in het url van uw
browser te zien. Gebruik bijvoorbeeld underscore of een normaal streepje ( _ of -
).
Zoals U kunt zien,
is deze cursus nog lang niet compleet, maar graag zouden wij
feedback krijgen over wat u van deze opzet vindt (te kort van stof of te
langdradig, te diep erop in gegaan of juist niet), ideeën of feedback
is altijd van harte welkom...
contact
|
|
|
|
|
|
| Auteur: Johnny
Heesterbeek | Datum: 03-04-2008 | |
|
|
|
|
|
Meer
informatie
|
|
|
|
|
|
Gerelateerde informatie
Hieronder,
vindt U aanvullende
informatie over het
bovenstaande onderwerp:
-
Er is momenteel nog geen
aanvullende informatie
aanwezig...
Informatie zoeken...
Ook
kunt U zelf de gewenste
specifieke informatie
zoeken, middels deze
zoekmachine:
|
|
|
|
|
|
|
|
|
|
|
Pagina
bewaren / delen
|
 |
|
|
|
|
Favorieten
U
kunt
deze website toevoegen aan
uw favorieten, zodat U later
nog eens terug kunt kijken.
Klik hier:
(Ctrl D voor FF.)
Voeg
deze site toe aan uw
favorieten!
Delen
Ook
kunt U deze pagina delen,
bewaren en doorsturen naar
vrienden door middel van het
onderstaande URL te
gebruiken.
Kopieer de volgende URL:
Klik 3 maal om te
selecteren, 'Ctrl -C' om te
kopiëren...
|
|
|
|
|
|
|
|
|
|
|
|
|
U bevindt zich hier:
