x

Inloggen

Je bent nog niet ingelogd. Aanmelden of een nieuw account Registreren

Cursus Html voor beginners 2

Door Mindcrime gepubliceerd op Friday 28 September 12:09

Hier is het vervolg van cursus HTML voor beginners. Lees snel verder!

Introductie

Hier is het vervolg van Cursus HTML voor beginners! ( http://www.xead.nl/cursus-html-voor-beginners )
In dit deel krijgt u te leren hoe je een achtergond moet instellen, je lettertype(kleur) veranderen, en hoe je plaatjes moet invoegen.

Achtergrond instellen.

We waren gebleven bij:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
Inhoud pagina
</body>
</html>

Voor een achtergrondkleur in te stellen, heb je de volgende code nodig: <BODY BGCOLOR="Green">
Voor Green kan je ook bijvoorbeeld Black,Silver,Brown,White,Yellow enz.. ivullen.

Je krijgt nu dus:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BGCOLOR="Green">
Inhoud pagina
</body>
</html>

Als je deze code dus invoegt, krijg je dus een achtergrondkleur.
Maar het is natuurlijk ook mogelijk om je eigen plaatje als achtergrond in te stellen op je eigen site!
Hiervoor gebruik je de code: <BODY BACKGROUND="Achtergrond.png"> 
Het plaatje dat u wilt gebruiken, moet u wel opslaan in uw public_html.
Let op! als het om plaatjes gaat, is HTML hoofdletter gevoelig!

Als je een eigen achtergrond hebt ingesteld, krijg je dus:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
Inhoud pagina
</body>
</html>

Lettertypes veranderen.

Als je de grootte van je lettertype wilt aanpassen, gebruik je de tag: FONT.
Je hebt daarvoor de code: <FONT size="1"> Jouw tekst in grootte</FONT>
De waardes gaan van 1 t/m 7, waarvan 1 de kleinste lettertype is, en 7 de grootste.

Je zou dus dit kunnen hebben:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
<FONT size="1"> Inhoud pagina</FONT>
</body>
</html>

Je kunt ook de lettertype aanpassen, je hebt bij het vorige deel ook al het lettertype typmachine geleerd ( <tt> ). Dit werkt iets anders. Je gebruikt hiervoor namelijk ook de tag: FONT.
Voor andere lettertypes gebruik je de code: <FONT face="Verdana"> nu heb je het lettertype Verdana</FONT> .  Je kunt hiervoor ook bijvoorbeeld Arial gebruiken enz....

Nu zou je dit kunnen hebben:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
<FONT face="Verdana"> Inhoud pagina. </FONT>
</body>
</html>

Nu heb je dit, maar wil je nog de kleur aanpassen.
Daar heb je de volgende code voor: <FONT color="Silver"> Dit word als zilver lettertype getoond!</FONT>
Je kunt voor Silver ook nog andere kleuren gebruiken.

Je zult nu dit kunnen hebben:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
<FONT color="Silver"> Inhoud pagina. </FONT>
</body>
</html>

Als je het allemaal nodig hebt, is het een kwestie van alles achter elkaar plakken.
Dat ziet er zo uit:  <FONT size="1" face="Verdana" color="Silver">Nu heb je lettertype Verdana, met lettergrootte 1, in zilvere kleur!</FONT>

Dat komt er zo uit te zien:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
<FONT size="1" face="Verdana" color="Silver"> Inhoud pagina. </FONT>
</body>
</html>


Afbeeldingen invoegen

Om een afbeelding in te voegen, gebruik je de tag <IMG> .
IMG staat voor image ( afbeelding ). 
Hiervoor is de code: <IMG SRC="plaatje.jpg">
De afbeelding word hiermee op ware grootte weergeven.

Je kunt ook zelf de maten instellen: <IMG src="plaatje.jpg" height="150" width="100">
Ook kun je bepalen waar hij komt te staan: <IMG src="plaatje.jpg" height="150" width="100" align="top">
Je kunt dan kiezen tussen, top, middle of buttom.

Dit is dan de volledige code:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="Achtergrond.png">
<FONT size="1" face="Verdana" color="Silver"> Inhoud pagina. </FONT><BR>
<IMG src="plaatje.jpg" height="150" width="100" align="top">
</body>
</html>

Slot.

Dit is het einde van deel 2, er komt nog een vervolg deel 3!

Deel 3: Klik hier!

Reacties (3) 

Voordat je kunt reageren moet je aangemeld zijn. Login of maak een gratis account aan.
Interessant
U bent niet ingelogd. Wilt u nu inloggen of een account aanmaken?
Je code is niet helemaal xHTML valid.

Ik zou eerder dit doen: &lt;img src="plaatje.jpg" style="width: 100px; height: 500px;" alt="Naam van image" /&gt; ipv &lt;IMG src="plaatje.jpg" height="150" width="100" align="top"&gt;

En &lt;br /&gt; ipv &lt;BR&gt;
dat 1e is iets heel anders dandat je verbetert?