Welkom gast! Aanmelden Registreren


Waardering:
  • 0 stemmen - gemiddelde waardering is 0
  • 1
  • 2
  • 3
  • 4
  • 5
Beginner's tut HTML/CSS
#1

Beste Rn'ers,

Ik ga jullie vandaag laten zien hoe je precies een HyperText Markup Language (html) bestandje maakt.

Nou laten we beginnen bij het begin.
Zet in kladblok de code <html>
De haakjes geven aan de het een code is. En de code "<html>" gebruikt men om aan te duiden dat het een html bestandje is. Nu slaan we een regel over en typen we <head>.
Bij de code "<head>" gaan we later in de tutorial de links naar de stylesheets maken. Bij de script taal HTML moeten de codes altijd afgesloten worden. Dit doen we door door de code </head>.
Nu slaan we weer een regel over en typen de code <body>. De body is het belangrijkste deel van het bestandje. Hiermee duidt je aan wat je wil laten zien op jouw website. Als eerder vermeldt moeten alle codes afgesloten worden. Dus </body>
Na de body moeten we nog 1 ding afsluiten de code <html>. Dit doe je weer door </html>

Tot dusver hebben we de echte basis van html. Nu gaan we de website uitbreiden.

In de head gaan wij nu het volgende doen: typ <title>Mijn eerste website</title>. De code title gebruik je om boven aan je adresbalk de naam van jouw website te verschijnen.

Sla nu het bestandje op. Met de naam als: index.html

Nu gaan we de website een achtergrond geven. Dit doe je zo:
Typ in je head dit :

PHP-code:
<style>
body  {
        
background-color#000000;
}
</
style

Een kleine uitleg erover. Dit heet Cascading Style Sheets (CSS).
Met deze script taal kun je het uiterlijk bepalen van jouw website.
De code <style> toon je aan dat het een CSS stylesheets is. In elke website met de code Body gebruikt.
In de body kan je vanalles bepalen. Het lettertype , de achtergrond, letter kleur etc.
De code background-color spreekt voorzich. (achtergrond kleur).
#000000 is een html kleur code, die kleur staat voor zwart.
De { } staan voor dat de inhoud alleen bedoeld is voor het bovenstaande code.
In CSS wordt elke code tussen de { } afgesloten met een punt komma. (Wink

Nu zie je op je website dat de achtergrond zwart is.

Nu gaan we tekst op je website te laten verschijnen. Typ dit:
<p>Mijn eerste website</p>
De code "<p>" gebruik je om tekst op je website aan te tonen.

Om deze tekst zichbaar te maken doen we nu dit. (want de achtergrond is zwart. En de standaard kleur voor tekst is zwart) Typ in de CSS bij "body" de code: color: #fff;
Nu heb je dit in de CSS staan

PHP-code:
<style>
body  {
        
background-color#000000;
        
color#fff;
}
</
style

Zoals je nu ziet is de tekst op je website wit. Oftewel, de code Color geeft de kleur aan van je tekst.
#fff is de HTML kleur code voor wit dus.

Sla dit bestand op als: index.html

Ik hoop dat jullie hier iets mee hebben! (meer tut's komen er z.s.m aan)

Greatz.


Credits:

100% naar mij.
 
Reageer
#2
Goede tut, Luuk!
Heel handig voor beginners.
Doge
 
Reageer
#3
Aangezien je de content tussen de '<html>' en de '<body>' tags hebt kan je ook doen: (voor extra zekerheid)
PHP-code:
bodyhtml
{
   
background-color#fff;

Together we stand, divided we'll fall.
 
Reageer
#4
(04-04-2013, 17:20)Proud schreef: Goede tut, wist het al eigenlijk.
Maar waarom eigenlijk;
PHP-code:
<style>
body  {
        
background-color#000000;
}
</
style
Je kan net zo goed;
PHP-code:
<body bgcolor=#000000> 

Je kan dit op meerdere manieren toepassen.
 
Reageer
#5
Sticky btw.
Together we stand, divided we'll fall.
 
Reageer
#6
Thanks,

Binnenkort komt er een weer een nieuwe tut waar ik verder op html en css in ga.
 
Reageer
#7

Dit heeft me zo hard geholpen!
Dankje wel, ik wacht voor nieuwe Tuts. Happysmile

[Afbeelding: iyq42d.png]
 
Reageer
#8
Hele mooie en leerzame tutorial ga zo verder mijn complimenten!
 
Reageer
#9
<style>
body{
background-color: green; }
</style>


Dat is makkelijker.
[Afbeelding: dwhXcAf.png]
 
Reageer
#10
PHP-code:
<body bgcolor=#000000> 
Is inderdaad makkelijk maar als ik naar finley's script kijk (dat stukje code die hij zei) dan is die iets beter en fijner om mee te werken.
 
Reageer
  




Leden die dit momenteel bekijken: 1 gast(en)