|
 | Topic :: [TUT] .:: HTML voor beginners ::. | |  |
| | | Index › HTML/CSS › [TUT] .:: HTML voor beginners ::. |  1  |  [TUT] .:: HTML voor beginners ::. | woensdag 16 januari 2008 om 16:17 |
| Psvhoolie
8 Posts | * Wat is HTML? HTML is niet gevoelig voor hoofdletters en kleine letters. Ik gebruik voor de TAGS alleen hoofdletters. om alles een beetje overzichtelijker te maken.
* Hoe beginnen we een HTML document?
We starten Notepad, Pico (of een andere textverwerker)
op en beginnen met de tag <html>. Tags zijn een soort
commando's die tussen tagnaam> worden gezet en door
</tagnaam> sluit je een tag af. De basis van een site
ziet er meestal zo uit:
<HTML> <-- Hiermee geef je aan dat het om een HTML document gaat.
<HEAD> <-- Hiermee wordt de HEAD geopend.
<TITLE>Titelnaam van de site </TITLE>> <-- Hiermee geef je een titel op. De titelnaam staat tussen de <TITLE> en </TITLE>.
</HEAD> <-- Hiermee wordt de HEAD afgesloten.
<BODY> <-- Hiermee wordt de body geopend. Dit is het 'lichaam' van de site.
</BODY> <-- Hiermee wordt de body afgesloten.
</HTML> <-- Hiermee wordt het HTML document afgesloten.
Tagnaam :> Uitleg :
--------------- ---------------
<HTML> Deze tag geeft aan dat het om een HTML document gaat.
<HEAD> Deze tag geeft beschrijvende info weer.
<BODY> In deze tag komt de 'site' te staan. (bv. text plaatjes etc.)
We gaan nu maar eens een .HTML document maken. Start Notepad op en type:
<HTML>
<HEAD>
<TITLE> Dit is mijn eerste site </TITLE>
</HEAD>
<BODY>
Dit is mijn eerste website 
</BODY>
</HTML>
Druk op opslaan als en sla het op met de naam test.html
Als je test.html nu opend krijg je als alles goed is in
de titelbalk: "Dit is mijn eerste site" en linksboven als
output op het scherm: "Dit is mijn eerste website ".
(dit alles zonder ""
[ TEXT OPMAAK ]
We kunnen natuurlijk van alles met deze text doen zoals bv:
Tagnaam : Uitleg :
--------------- -------------- <B> </B> Vetgedrukt
<I> </I> Cursief
<U> </U> Onderstreept
<S> </S> Doorgestreept
<SUB> </SUB> Subschrift
<SUP> </SUP> Superschrift
Hier even een voorbeeld van deze tags:
<HTML>
<HEAD>
<TITLE> Dit is mijn tweede site </TITLE>
<BODY>
<B><U> Dit is mijn tweede website </U></B>
</BODY>
</HTML>
Als alles goed is, is nu de output vetgedrukt en onderstreept.
Om het lettertype, grootte en kleur te wijzigen maken we gebruik
van de FONT tag.
Tagnaam : Uitleg :
--------------- ----------------
<FONT FACE="lettertype"> </FONT> Lettertype invoeren (let hierbij wel op dat degene die de site bekijkt ook dit lettertype moet hebben)
<FONT SIZE=getal> </FONT> Lettergrootte invoeren (op de plaats van "getal" komt de grootte te staan
dit zijn de getallen van groot naar klein:
7 6 5 4 3 2 1 0 -1 -2 -3 -4 -5 -6 -7)
<FONT COLOR="kleur"> </FONT> Kleur invoeren (hierbij kunnen we gebruik maken van de heximale kleurcodes
voorafgaande van een # of gewoon de naam van de kleur bv. blauw = blue)
Omdat alles eigenlijk in dezelfde TAG staat (FONT) kunnen we ook
alles in 1 keer in de FONT tag zetten bv.
<FONT FACE="verdana" SIZE=7 COLOR="green">
Hier even een voorbeeld over het gebruik van de FONT tag:
<HTML>
<HEAD>
<TITLE> Dit is mijn derde site </TITLE>
</HEAD>
<BODY>
<FONT FACE="verdana" SIZE=7 COLOR="green">
De text is als het goed is in lettertype verdana, de grootste grootte en de kleur groen.
</FONT>
En nu niet meer...
</BODY>
</HTML>
Andere TAGS die van toepassing zijn op text:
Tagnaam : Uitleg :
--------------- ----------------
<CENTER> </CENTER> Dit centreert de text
<BLINK> </BLINK> Dit laat de text knipperen (Alleen van toepassing bij Netscape browsers)
<BIG> </BIG> Andere manier om de text groter te maken
<SMALL> </SMALL> Andere manier om de text kleiner te maken
<Hgetal> </Hgetal> Dit maakt een kop, bij getal moet weer de invoer die bij FONT staat uitgelegd.
<BR> Dit geeft een enter (Deze TAG hoef je natuurlijk niet af te sluiten)
<P> </P> Dit maakt een alinea (2 enters)
<P ALIGN=*> </P> Dit lijnt de alinea uit. op de plaats van het * komt: LEFT, CENTER of RIGHT te staan
<HR> Dit geeft een horizontale lijn weer
Hier een voorbeeldje van een paar TAGS die tot nu toe besproken zijn:
<HTML>
<BODY>
<TITLE> Dit is mijn vierde site </TITLE>
<HEAD>
<BODY>
<FONT FACE="verdana">
<H1><CENTER> Dit is de kop </CENTER></H1>
<P>Dit is text in een alinea <BR>
waar ook een enter in zit. </P>
<HR>
<FONT COLOR="blue">
<P ALIGN=right> Dit is een alinea die <BR>
naar de rechterkant is uitgelijnd.</P>
</FONT>
</BODY>
</HTML>
[ DE BODY ]
Je kunt ook een aantal dingen aanpassen in de BODY. Dit zet je dan in de body TAG
Tagnaam Uitleg
-------------- -----------------
<BODY BACKGROUND="url"> Met deze TAG kun je een plaatje als achtergrond plaatsen
Op de plaats van url komt het adres van het plaatje
<BODY BGCOLOR="kleur"> Met deze TAG kun je de achtergrond kleur veranderen
<BODY TEXT="kleur"> Met deze TAG kun je de kleur van de text wijzigen
<BODY LINK="kleur"> Met deze TAG kun je de kleur van de links wijzigen
<BODY VLINK="kleur"> Met deze TAG kun je de kleur van een bezochte link wijzigen
<BODY ALINK="kleur"> Met deze TAG kun je de kleur van een actieve link wijzigen
Hier een voorbeeldje van het gebruik van de BODY TAG:
<HTML>
<HEAD>
<TITLE> Dit is mijn vierde site </TITLE>
</HEAD>
<BODY BGCOLOR="black" TEXT="silver">
Hier staat de text
</BODY>
</HTML>
Als alles goed is is nu de achtergrondkleur zwart en de textkleur zilver.
Het verschil tussen <FONT COLOR="kleur"> en <BODY TEXT="kleur"> is dat je
met de BODY TAG de standaard kleur opgeeft van de site. Met <FONT COLOR="kleur">
kun je die weer weizigen, maarals je de FONT weer afsluit krijg je weer de kleur
die je in de BODY hebt gezet. Het klinkt allemaal vaag dus hier zet ik even een
vorbeeldje neer:
<HTML>
<HEAD>
<TITLE> Dit is mijn zesde site </TITLE>
</HEAD>
<BODY TEXT="red">
Deze text is rood <BR>
<FONT COLOR="blue">
Deze text is blauw <BR>
</FONT>
Deze text is weer rood
</BODY>
</HTML>
Als je dit tot zover snapt, snap je de opbouw van HTML een beetje.
Ik ga daarom geen voorbeelden van hele sites meer geven. Jullie kunnen
nu allemaal zelf creatief aan de slag.
[ INVOEREN VAN PLAATJES EN LINKS ]
Bij het invoeren van plaatjes kunnen we *.JPG en *.GIF bestanden gebruiken.
We gebruiken hiervoor de TAG:
<IMG SRC="url"> Op de plaats waar url staat komt weer de plaats van het plaatje
Je kunt ook weer de plaats waar het plaatje staat bepalen door de tag ALIGN in de TAG te zetten
bv. zo:
<IMG SRC="plaatje.jpg" ALIGN=RIGHT>
Nu wordt het bestand plaatje.jpg aan de rechter kant weergegeven. Als het plaatje niet in dezelfde
map staat moet je ook de plaats van de map bepalen
bv. zo:
<IMG SCR="c:mapnaamplaatje.jpg">
Om een link in te voeren gebruik je de TAG:
<A HREF="url"> text </A> Op de plaats waarde url staat komt het adreswaarde link naartoe moet
Tussen de <A HREF="url"> en </A> komt de text te staan die de link bevat
Om een link te maken die naar jou email adres mailt gebruik je deze TAG:
<A HREF="mailto:Twan@hackers.nl"> email mij </A>
Je kunt ook van een plaatje een link maken. Dit doe je door een mix te maken van een link en een plaatje
invoegen dus op deze manier:
<A HREF="http:\www.hackers.nl"><IMG SRC="plaatje.jpg"></A>
[ HET MAKEN VAN FRAMES ]
Bij het maken van frames doe je eigenlijk niets anders dan de pagina in delen splitsen. In elk deel van
een frame wordt een apparte pagina ingeladen.
Je begint met de pagina op te delen in rijen (ROWS) en kolommen (COLS). Ik geen hier even een kort voor-
beeldje en zal deze later uitleggen. Dit is een voobleed van het (denk ik) meest voorkomende frame gebruik.
------------
|-----------| Zoiets zou het moeten worden
| | |
| | |
| | |
------------
<HTML>
<HEAD>
<TITLE>Het werken met frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*" FRAMEBORDER="NO" border="0">
<FRAME NAME="topFrame" SCROLLING="NO" NORESIZE SRC="url_van_de_pagina1.html" >
<FRAMESET COLS="20%,*" FRAMEBORDER="NO" BORDER="0">
<FRAME NAME="leftFrame" SCROLLING="NO" NORESIZE SRC="url_van_de_pagina2.html">
<FRAME NAME="mainFrame" SRC="url_van_de_pagina3.html">
</FRAMESET>
</FRAMESET>
</HTML>
Uitleg:
<FRAMESET> In deze tag worden de eigenschappen van de Frame dus weergegeven
ROWS=20%,*" Ik heb dus hier de rijen van de frame ingedeeld in procenten
FROMEBORDER="NO" Dit is de tag voor I.E. om geen randen aan te geven
BORDER="0" Dit is de tag voot Netscape om geen randen aan te geven
<FRAME> Hier komen de eigenschappen van de pagins die ingeladen wordt
NAME="topframe" Dit is gewoon de naam van de frame
SCROLLING="NO" Hiermee kun je scrolling aan en uit zetten
NORESIZE Dit is de tag om het verplaatsen van de frameborder tegen te gaan
SRC="url.html" Hier wordt dus de url van de pagina die moet worden weergegeven aangegeven
NOTE: Als je bijvoorbeeld een link in de "leftframe" hebt en je wilt dat deze weergegeven wordt in de
"mainframe" gebruik je de tag TARGET="framenaam" in de link tag.
NOTE: Let op dat je geen <BODY> gebruikt in de pagina met de FRAMES.
Dit was mijn les HTML voor beginners. Ik raad je aan om veel te oefenen en alles op een andere manier
proberen te maken.Hier leer je gewoon het meest van. |
    |
| | Re: [TUT] .:: HTML voor beginners ::. | vrijdag 25 januari 2008 om 23:41 |
| Carharttguy
Administrator
42 Posts | Heeeel mooie tutorial, heel uitgebreid! 10/10 |
|
| | Re: [TUT] .:: HTML voor beginners ::. | zaterdag 13 september 2008 om 21:18 |
| Byboy
7 Posts | als je nu een lettertype upload naar je server en je wilt het op je website wat moet je dan nemen ? |
|
| | 1 |
| |
|
| |
|
Youtube Downloader 2
Ziggo player