Ik weet het al veel mensen weten al hoe dat gedoe werkt,
Al dat HTML maar toch zijn er mensen op One2xs die geen verstand hebben van HTML.
Naja kijk gewoon!
Les 1
Html, betekent hyper text mark-up language. Met html kan je door middel van codes, een layout met inhoud schrijven. Wil je dus beginnen aan het bouwen van een site moet je html leren. Html is een vereiste als je aan css, javascript, php, asp enz wil beginnen. Een html pagina kan je gewoon in kladblok schrijven. Daarna moet je klikken op bestand > opslaan alles "index.html".
Je begint als eerste met de tag. Hierdoor weet je browser dat het om Html gaat. Als je hele pagina af is zet je aan het einde
De gegevens die niet echt op het beeld komen maar toch heel belangerijk zijn zoals: De title en metatages moeten in de header staan. De header begin je met en sluit je af met We gaan verder met de titel die bovenaan in de title balk van je browser komt, de titel moet in de header want hij komt niet echt op de pagina. Dit doe je met de
voorbeeld:
Tussen de body tags schrijf je wat wel echt op het scherm moet komen. Daarvoor gebruik je tag en om weer af te sluiten de .
In de body tag kan je aangeven welke achtergrond kleur je site moet hebben.
Je kan ook een plaatje als achtergrond gebruiken.
Tekst-link kleuren kun je ook veranderen met de tag. voor beeld:
link= gewone onaangeklikte link.
alink= link die op dat moment aangeklikt word.
vlink= een al aangeklikte link
let er wel bij op dat de tekst tussen en moeten staan.
Voorbeeld hele pagina:
Les 2 In deze les ga ik uitleggen hoe je, teksten mooier kan maken.
We beginnen met de font tag en om hem af te sluiten tussen deze tags moet de tekst staan. Nu heb je er nog weinig aan want je had het net zo goed zonder tags kunnen typen. Daarom kan je dingen aan de font tag toevoegen. Dit hoeft alleen in de beginnende tag.
Met size bedoelen we de grootte van de letters deze gaat van 1 tot 7, met face bedoelen we het lettertype, en de color natuurlijk welke kleur de tekst krijgt.
Soms wil je een tekst schuin of onderstreept hebben dit kan ook maar met een losse tag.
Je moet nog steeds je font tag gebruiken als je wilt dat hij bijvoorbeeld cursief is en letter grootte 2 is. Dan krijg je het dus zo:
Een schuine tekst met font tag.
Als je een tekst wil centeren (in het midden zetten.) moet je gebruik maken van de center tag, en De tekst tussen de tag wordt dan gecentreerd. Natuurlijk kan je dat ook weer doen dat het doorgestreept is, in lettertype verdana en gecentreerd.
De pre tag, als je normaal html gebruikt en je zet 4 spaties dan zal er maar een worden weergegeven. Wil je dat je er 4 krijgt als je 4 keer een spatie neerzet in je broncode dan moet je de tag
Een nieuwe alinea maken doe je met
Bij href moet je de naam van de tweede pagina zetten, of de url. De linknaam is de naam die op het scherm komt waar je op kunt klikken, waardoor je wordt door verwezen naar de link of url die staat bij href.
Een site is saai zonder plaatjes, gelukkig is er de img tag. Met de img tag kun je een plaatje invoegen.
Bij src staat de link naar het plaatje. Bij alt staat wat er moet komen als het plaatje niet wordt geladen, en zorgt ervoor als je er met je muis overheen gaat je die tekst in een geel vakje ziet.
Je kan ook van een plaatje een link maken. Dat doe je zo:
Zoals je ziet is html vooral codes bij elkaar voegen, om het juiste effect te bereiken. Alleen nu krijg je een lelijke border om je plaatje. Dit hef je op door border="0" toe te voegen aan de img tag.
Om een mailvenster te openen gebruik je:
Je krijgt als je op deze link klikt een outlook venster, met mailen naar x_robbert_x@hotmail.com
Als je hele lange paginas hebt is het makelijk een anker te maken. Je zet dan ergens op je pagina:
Je kan dan door ergens anders op dezelfde pagina weg te zetten:
Meteen naar de plek van a anker gaan. Je kan ook direct van een andere pagina naar het anker gaan door:
Ankers hebben alleen zin op vrij lange paginas
Les 4
Met frames kun je je site in delen verdelen met daarin andere paginas. In je pagina worden dus andere paginas "geladen". Met frames kun je je website dus verdelen in een header, menubars en de daadwerkelijke inhoud. Het is niet aan te raden meer dan 4 frames te gebruiken op een website.
Je hebt twee soorten frames namelijk:
Gewone frames.
Inline frames.
We beginnen met de gewone frames:
Je krijgt nu vakjes met pagina niet gevonden. Je moet dus eerst de bestanden hoofd.html, menu.html en main.html maken. En deze zullen er in worden geladen.
Zoals je ziet gebruiken we geen body bij gewone frames. De body tags worden vervangen door . Hiermee geef je aan dat je frames gaat gebruiken. De rows zijn de rijen en de cols de kolommen. Dus als je neer zet 120 en 500 bij rijen. Wordt de eerste rij 120 pixels hoog en de tweede 500. Met cols is het precies zo. Je mag het aangeven in pixels en in %.
verder zijn er nog een paar opties:
Je krijgt geen rand meer tussen je frames.
scrolling=no/yes/auto
yes geeft altijd een scrollbar, no geeft nooit een scrollbar en auto geeft een scrollbar wanneer dit nodig is.
marginwidth en height is de afstand van de ingeladen pagina tot de rand van het frame.
NORESIZE zorgtervoor dat mensen het frame niet kunnen vervormen door met de muis te slepen. Altijd doen dus.
Het inline frame:
Bij een inline frame beslaat het frame niet de gehele pagina. Je moet daarom ook niet de body tags vervangen.
Les 5
Met tabellen kan je je site vorm geven. Heel veel sites gebruiken dit dan ook,
omdat het vrij makkelijk werkt en er zeer professioneel uit ziet.
Tabellen staan altijd tussen de body tags en beginnen altijd met en wordt beeindigd met
. In de tabel tag kan je instellen of je een ?border? (lijst) erom heen wilt hebben.
Dat doe je zo:
. De x staat voor een getal dat kan varieren van 0 (geen border) tot 5 (hele dikke border).
In een tabel kan je ook de achtergrondkleur zetten en de kleur van de border. Dat doe je met deze codes:
voor de borderkleur:
voor de achtergrondkleur:
Opmerking: Inplaats van bgcolor kun je ook background zetten als je een plaatje als achtergond van je tabel wil hebben, beide gebruiken kan ook als het plaatje nog niet geladen is dan krijg je eerst de kleur.
Je kan door verschil tussen bordercolor en bgcolor een mooi contrast maken.
Je kan de breedte van een tabel aanpassen door. Hierbij kan x als pixels zetten ?f in procenten. Dat laatste is heel makkelijk zodat je ook voor lagere resoluties dezelfde breedte hebt. . Ook hierbij kan je met procenten of pixels werken.
Al dat HTML maar toch zijn er mensen op One2xs die geen verstand hebben van HTML.
Naja kijk gewoon!
Les 1
Html, betekent hyper text mark-up language. Met html kan je door middel van codes, een layout met inhoud schrijven. Wil je dus beginnen aan het bouwen van een site moet je html leren. Html is een vereiste als je aan css, javascript, php, asp enz wil beginnen. Een html pagina kan je gewoon in kladblok schrijven. Daarna moet je klikken op bestand > opslaan alles "index.html".
Je begint als eerste met de tag. Hierdoor weet je browser dat het om Html gaat. Als je hele pagina af is zet je aan het einde
De gegevens die niet echt op het beeld komen maar toch heel belangerijk zijn zoals: De title en metatages moeten in de header staan. De header begin je met en sluit je af met We gaan verder met de titel die bovenaan in de title balk van je browser komt, de titel moet in de header want hij komt niet echt op de pagina. Dit doe je met de
<title> tag en die sluit je weer af met </title>voorbeeld:
<title>One2xs - Voor jou domein en host!</title>Tussen de body tags schrijf je wat wel echt op het scherm moet komen. Daarvoor gebruik je tag en om weer af te sluiten de .
In de body tag kan je aangeven welke achtergrond kleur je site moet hebben.
<body bgcolor="red">Je kan ook een plaatje als achtergrond gebruiken.
<body background="url plaatje">Tekst-link kleuren kun je ook veranderen met de tag. voor beeld:
<body background="#" link="blue" alink="red" vlink="purple">link= gewone onaangeklikte link.
alink= link die op dat moment aangeklikt word.
vlink= een al aangeklikte link
let er wel bij op dat de tekst tussen en moeten staan.
Voorbeeld hele pagina:
<html>
<head>
<title>One2xs</title>
</head>
<body bgcolor="steelblue" link="blue" alink="red" vlink="purple">
Deze tekst zal je zien op je beeldscherm, hij heeft nu nog geen opmaak.
</body>
</html>Les 2 In deze les ga ik uitleggen hoe je, teksten mooier kan maken.
We beginnen met de font tag en om hem af te sluiten tussen deze tags moet de tekst staan. Nu heb je er nog weinig aan want je had het net zo goed zonder tags kunnen typen. Daarom kan je dingen aan de font tag toevoegen. Dit hoeft alleen in de beginnende tag.
<font size="2" face="verdana" color="black">Met size bedoelen we de grootte van de letters deze gaat van 1 tot 7, met face bedoelen we het lettertype, en de color natuurlijk welke kleur de tekst krijgt.
Soms wil je een tekst schuin of onderstreept hebben dit kan ook maar met een losse tag.
<i>Deze tekst wordt schuin afgedrukt.</i>
<u>Deze tekst wordt onderstreept.</u>
<b>Deze tekst wordt dik afgedrukt.</b>
<s>Deze tekst wordt doorgestreept.</s>Je moet nog steeds je font tag gebruiken als je wilt dat hij bijvoorbeeld cursief is en letter grootte 2 is. Dan krijg je het dus zo:
Een schuine tekst met font tag.
Als je een tekst wil centeren (in het midden zetten.) moet je gebruik maken van de center tag, en De tekst tussen de tag wordt dan gecentreerd. Natuurlijk kan je dat ook weer doen dat het doorgestreept is, in lettertype verdana en gecentreerd.
De pre tag, als je normaal html gebruikt en je zet 4 spaties dan zal er maar een worden weergegeven. Wil je dat je er 4 krijgt als je 4 keer een spatie neerzet in je broncode dan moet je de tag
en Een nieuwe alinea maken doe je met
, geen afsluitende tag nodig.
Op een nieuwe regel beginnen(dus geen lijn er tussen open houden) kan met de
ook hier is geen afsluitende tag nodig.
Les 3
Het is natuurlijk leuk, om een site van meerdere paginas te hebben. Maar deze paginas moeten wel met elkaar verbonden zijn. Dit doe je met links.
<a href="pagina2.html">Linknaam</a>Bij href moet je de naam van de tweede pagina zetten, of de url. De linknaam is de naam die op het scherm komt waar je op kunt klikken, waardoor je wordt door verwezen naar de link of url die staat bij href.
Een site is saai zonder plaatjes, gelukkig is er de img tag. Met de img tag kun je een plaatje invoegen.
<img src="plaatje1.jpg" alt="logo">Bij src staat de link naar het plaatje. Bij alt staat wat er moet komen als het plaatje niet wordt geladen, en zorgt ervoor als je er met je muis overheen gaat je die tekst in een geel vakje ziet.
Je kan ook van een plaatje een link maken. Dat doe je zo:
<a href="pagina2.html"><img src="plaatje1.jpg" alt="logo"></a>Zoals je ziet is html vooral codes bij elkaar voegen, om het juiste effect te bereiken. Alleen nu krijg je een lelijke border om je plaatje. Dit hef je op door border="0" toe te voegen aan de img tag.
<a href="pagina2.html"><img src="plaatje1.jpg" alt="logo" border="0"></a>Om een mailvenster te openen gebruik je:
<a href="mailto:x_Jouemail@jouemail.com">mail me</a>Je krijgt als je op deze link klikt een outlook venster, met mailen naar x_robbert_x@hotmail.com
Als je hele lange paginas hebt is het makelijk een anker te maken. Je zet dan ergens op je pagina:
<a name="anker1">Je kan dan door ergens anders op dezelfde pagina weg te zetten:
<a href="#anker1">Linknaam</a>Meteen naar de plek van a anker gaan. Je kan ook direct van een andere pagina naar het anker gaan door:
<a href="pagina2.html#anker1">Linknaam</a>Ankers hebben alleen zin op vrij lange paginas
Les 4
Met frames kun je je site in delen verdelen met daarin andere paginas. In je pagina worden dus andere paginas "geladen". Met frames kun je je website dus verdelen in een header, menubars en de daadwerkelijke inhoud. Het is niet aan te raden meer dan 4 frames te gebruiken op een website.
Je hebt twee soorten frames namelijk:
Gewone frames.
Inline frames.
We beginnen met de gewone frames:
<html>
<head>
<title>Je eerste frame</title>
</head>
<frameset rows="120, 500">
<frame src="hoofd.html">
<frameset cols="20%, 80%">
<frame src="menu.html">
<frame src="main.html">
</frameset>
</frameset>
</html>Je krijgt nu vakjes met pagina niet gevonden. Je moet dus eerst de bestanden hoofd.html, menu.html en main.html maken. En deze zullen er in worden geladen.
Zoals je ziet gebruiken we geen body bij gewone frames. De body tags worden vervangen door . Hiermee geef je aan dat je frames gaat gebruiken. De rows zijn de rijen en de cols de kolommen. Dus als je neer zet 120 en 500 bij rijen. Wordt de eerste rij 120 pixels hoog en de tweede 500. Met cols is het precies zo. Je mag het aangeven in pixels en in %.
verder zijn er nog een paar opties:
<frameset rows="120, 500" frameborder=no>Je krijgt geen rand meer tussen je frames.
<frame src="menu.html" scrolling=no marginwidth=1 marginheight=1 NORESIZE>scrolling=no/yes/auto
yes geeft altijd een scrollbar, no geeft nooit een scrollbar en auto geeft een scrollbar wanneer dit nodig is.
marginwidth en height is de afstand van de ingeladen pagina tot de rand van het frame.
NORESIZE zorgtervoor dat mensen het frame niet kunnen vervormen door met de muis te slepen. Altijd doen dus.
Het inline frame:
Bij een inline frame beslaat het frame niet de gehele pagina. Je moet daarom ook niet de body tags vervangen.
<html>
<head>
<title>Je eerste inline frame</title>
</head>
<body>
<font face=verdane color=black size=2>
Hier kan dus gewoon tekst. Maar ook onder het frame kan tekst en code. Iets wat bij een gewoon frame niet kan.
</font>
<frameset>
<iframe width=200 height=150 src="pagina.html" >
</frameset>
</body>
</html>Les 5
Met tabellen kan je je site vorm geven. Heel veel sites gebruiken dit dan ook,
omdat het vrij makkelijk werkt en er zeer professioneel uit ziet.
Tabellen staan altijd tussen de body tags en beginnen altijd met
Dat doe je zo:
<table border="x">. De x staat voor een getal dat kan varieren van 0 (geen border) tot 5 (hele dikke border).
In een tabel kan je ook de achtergrondkleur zetten en de kleur van de border. Dat doe je met deze codes:
voor de borderkleur:
<table bordercolor="black">voor de achtergrondkleur:
<table bgcolor="black">Opmerking: Inplaats van bgcolor kun je ook background zetten als je een plaatje als achtergond van je tabel wil hebben, beide gebruiken kan ook als het plaatje nog niet geladen is dan krijg je eerst de kleur.
Je kan door verschil tussen bordercolor en bgcolor een mooi contrast maken.
Je kan de breedte van een tabel aanpassen door
| en eindig je met | . en ook hier kan je weer met procenten of pixels werken. Ook kan je de uitlijning instellen. verticaal instellen: | horizontaal instellen: | Je kunt ook kolommen maken door de td tags onder elkaar te zetten. Dit doe je heel gemakkelijk: Les 6 Een formulier begin je altijd met . De begintag kan je aanpassen, want je wilt natuurlijk wel dat er iets gebeurt met die gevens. Bij name geven we het form een naam, opzich is dit niet echt nodig. Tenzij je straks met javascript gaat werken. Method is gewoon de methode waarmee je het verstuurt je kan kiezen tussen post of get. De action kan ofwel een email adres zijn waar het naartoe wordt gestuurd of een url naar een script wat de gegevens verder verwerkt. Eerst gaan we simpele tekst velden aanmaken: Met het type zeg je dat het een textarea moet worden, met name geef je het veld een naam en het value is wat er in het veld staat. Voorbeeldje: Je kan ook tekstvakken maken: Met de rows geef je aan hoeveel rijen tekst, met cols geef je de breedte aan in cellen. Name is weer de naam van het veld. Weer een voorbeeldje: We hebben ook nog de mogelijkheid om een selecteer box te maken: Met Nu kan je een formulier maken maar heb je niet de mogelijkheid om, het formulier te verzenden of te resetten dit doe je met de reset en submit button. Zoals je ziet begin je zon button gewoon met Je kan kiezen bij type uit reset of submit. Zo simpel is het. Nog een voorbeeldje: Meerdere lessen komen WAARSCHIJNLIJK niet. Bron: http://design-web.nl/html.php |
.
