Cursus Html voor beginners 3

Door Mindcrime gepubliceerd op Friday 28 September 12:09

Hier het 3e deel van Cursus HTML voor beginners! Lees snel verder!

Introductie

Hier het vervolg van Cursus HTML voor beginners 2! (http://www.xead.nl/cursus-html-voor-beginners-2)
Je gaat hier leren hoe je een eigen header maakt, en op je site gaat publiceren!

Header maken

Een header is de bovenste ''balk'' (logo) van de site.
Om een Header te maken, heeft u eerst een bewerkingsprogamma nodig.
Paint is geen optie hiervoor!

Zelf werk ik het liefst met photofiltre studio X, die je hier kunt downloaden: http://static.infomaniak.ch/photofiltre/utils/StudioNL.zip

De afmetingen van een header kunnen verschillend zijn.
Hieronder zie je een voorbeeldheader:

 

 

 

De maten die ik meestal gebruik, zijn: 800PX (breedte ) bij 120PX (hoogte)
PX= pixels
Je kunt zelf ook een leuke maat verzinnen!

Photofiltre uitleg: http://www.oudje.nl/?PhotoFiltre:Lessen_voor_PhotoFiltre

Header op site plaatsen

Om jouw header op de site te plaatsen, hebben we natuurlijk weer html nodig.
We hebben tot nu toe dit:

<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>

Om het nu nog simpel te houden heb ik dit voor jullie gemaakt:

<html>
<head>
<title> Jouw websitenaam.nl </title>
</head>
<body>
<BODY BACKGROUND="achtergrond.png">
<h1><center><img src="ban1.png"></center></h1>
<FONT size="1" face="Verdana" color="Silver"> <center>Inhoud pagina.</center> </FONT>
<br><center><IMG src="plaatje.png" height="200" width="150" align="top"></center></br>
</body>
</html>

Ik heb voor h1 gekozen om ervoor te zorgen dat het in google sneller word opgenomen, dit noem je ook wel SEO. Center heb ik gedaan om te centreren van de header.
Voor de header te plaatsen heb ik deze code genomen: <img src="header.png"> hij is heel simpel, maar genoeg!
Zorg wel dat je hem onder de achtergrond plaatst, ander komt hij niet bovenin te staan!

Klik hier om het voorbeeld te bekijken! 

Later zal in uitleggen, hoe je beter een header op een site kan zetten door middel van CSS!

Slot

Dit is het einde van de cursus!
In de toekomst komt er een cursus disignen, en CSS, en HTML voor gevorderden!

Reacties (2) 

Voordat je kunt reageren moet je aangemeld zijn. Login of maak een gratis account aan.
Kijk, paint kan opzich wel, maar dan word je site denk niet zo serieus genomen word. want je kunt er geen prof. header mee maken. Maar het zou opzich wel kunnen..
waarom kun je geen paint gebruiken voor het maken van een eenvoudige header? Je kunt zelf de maat bepalen, opslaan als PNG, plaatje invoegen en tekst, dat is toch genoeg of mis ik nu iets?