HTML en CSS hulp

Introductie

Als je altijd al je eigen lookup of petpage hebt willen maken zit je hier aan het juiste adres. Je zult niet meteen van die hele mooie kunnen maken, die je ziet bij gebruikersprofiel in de week en zo, maar met een heleboel oefenen kom je er ooit wel :)
Eerst wat belangrijke dingen:
Zorg dat je lookup/petpage in alle browsers werkt. Internet explorer en Mozilla Firefox zijn de belangrijkste. Ik ga geen codes uitleggen die alleen op Internet Explorer werken. Ik vind Firefox de betere browser. Als je geen firefox hebt, raad ik je aan die snel te installeren. Je kan het vinden via google. Zoek naar: Mozilla Firefox.
Ik zou ook graag willen dat je bij de kant en klare lookup codes mijn naam in de code laat staan. Doe niet alsof je het zelf geschreven hebt, want daarvoor kan je gerapporteerd worden. Wanneer je de codes een beetje snapt, kun je je eigen codes schrijven, en als je het echt helemaal zelf vanaf een blanco notepad hebt geschreven, hoef je niet te linken. Dit geldt dus alleen voor de complete lookup codes. De losse codes die op deze pagina staan, van Zuzael, kunnen gebruikt worden zonder link.

Ik werk nog verder aan deze gids.
Layout door fresh_air_elemental (AKA lifae). Tips of ideeën? Laat het mij weten.

Tekst veranderen

Met tekst kun je een heleboel doen. Ik zal eerst de basis HTML en CSS uitleggen.
Tags. Tags zijn kleine stukjes code die iets met je tekst kunnen doen. Bijvoorbeeld de font tag:

Ziet er zo uit: Tekst hier
Let erop dat je je tags altijd afsluit met de </tagnaam>

De kleurcodes gaan van #FFFFFF (wit) naar #000000 (zwart). De eerste twee getallen/letters (van 0 tot 9 en van A tot F) geven aan hoeveel rood er is, de volgende twee getallen geven de hoeveelheid groen aan, en de laatste twee geven de hoeveelheid blauw aan. Hoe hoger het getal of letter, hoe meer van die kleur. Letters zijn hoger dan getallen. Om geel te maken, zet je rood en groen op F: #FFFF00. Grijs is van alle kleuren evenveel: #393939 bijvoorbeeld.
Voor een kaart met alle kleuren en hun codes kun je naar deze site gaan:
http://www.neopets.com/~Rantimaru

Om een nieuwe regel te beginnen gebruik je de volgende tag:

Dit is de enige tag die je niet hoeft af te sluiten, want de / aan het eind is al een afsluiting van de tag.

Je kan ook andere leuke dingen met tekst doen:

vetgedrukt
schuingedrukt
een streep eronder

Nu zal ik wat uitleggen over CSS. CSS is een andere taal, die je ook kan gebruiken om tekst en andere zaken te veranderen. CSS staat altijd tussen de volgende tag:

Let vooral op de : en de ;
Deze zijn heel belangrijk. Voor de haakjes staat wat je verandert, voor de dubbele punt staat wat je van dat deel verandert, na de dubbele punt staat waarnaar het veranderd wordt, en de ; sluit het af. Aan het einde is die ; niet belangrijk, maar tussen twee stukjes in wel. Als je die namelijk vergeet, wordt de code overgeslagen, en zie je er niets van terug.

In de CSS kun je van alles doen. Ik zal je nu uitleggen hoe je de kleuren van alle tekst kan veranderen.

Deze CSS maakt alle tekst op een pagina zwart.
Op dezelfde manier kun je vette tekst en schuine tekst kleuren geven:

Om deze kleuren in de tekst te verwerken, gebruik je de CSS in cimbinatie met de volgende HTML.

Dan ziet het er zo uit:
Blauwe, vetgedrukte tekst
Grijze, schuingedrukte tekst

De grootte van de tekst is ook goed aan te passen:

Zoals je ziet, kun je zowel punten (dan wordt het net zo groot als in een tekstverwerkingsprogramma, als word) als pixels gebruiken. Experimenteer hiermee, tot de tekst zo groot is als je wil.

Tekst centreren

Om tekst te centreren kun je meerdere codes gebruiken. De HTML en de css codes. css kun je in iedere tag toepassen, dus je kan ook een gedeelte van de site centreren. HTML:

De css:

Achtergrondkleur veranderen

Vanaf hier zal ik alleen CSS en een beetje HTML uitleggen. CSS is namelijk veel efficiënter.
Achtergrondkleuren zijn heel makkelijk te veranderen. Namelijk met deze code:

Dit maakt de achtergrondkleur zwart.

Helaas is er iets veranderd met de nieuwe layout. links en rechts van de layout zie je grijze vlakken. Dat is de body background. De witte achtergrond zit in een ander deel, genaamd #main. Dus als het voor je lookup/shop/gallerij is, kun je deze code gebruiken:

Je kan alle elementen (dus tags) een achtergrondkleur geven.

Plaatjes maken

Plaatjes worden gewoon met HTML gedaan. De code is best simpel:

Ziet er zo uit:

Let wel op dat je http:// in de link zet. Als je dat niet doet, zal het plaatje niet werken. Je ziet in deze tag, net als in de <br /> tag, dat de tag gelijk wordt afgesloten.

Als je je eigen plaatjes maakt, moet je ze eerst ergens op internet zetten. Een paar gratis paginas zijn photobucket.com en imageshack.us
Ze zijn helaas wel in het Engels. Als het goed is staat de url (de link naar het plaatje) eronder als je het "upload".
Let wel op dat je niet dezelfde gebruikersnaam en wachtwoord gebruikt als op Neopets.

Links maken

Om een link te maken gebruik je ook alleen HTML:

Ziet er zo uit: Neopets
Achter href, in plaats van de neopets link zet je er een andere link in (let op dat je op neopets niet kan linken naar sites die niet op neopets zelf staan). En in plaats van Neopets tussen de tags in, zet je waar de link heen gaat. Vergeet absoluut niet er http:// voor te zetten!

Om een link in een nieuwe pagina te laten openen, zet je het volgende in de tag:

Het komt er dan zo uit te zien:

De links kun je met CSS ook andere kleuren en groottes geven.

a geeft gewone links aan.
a:visited geeft bezochte links aan
a:hover geeft links aan waar de bezoeker met zijn muis op staat.

Linken naar een andere plaats op dezelfde pagina

Deze codes worden ook wel ankers of anchors genoemd.
Hiervoor hebben we een paar stukjes code nodig:

Deze code zegt waar iets heen gaat op de pagina. Het hekje # is heel belangrijk. Op de plek waar de link heen moet zet je het volgende:

Dit zet je aan het begin van het stukje tekst waar naartoe gelinkt wordt. #naam en naam zijn voorbeelden. Je kan ieder woord gebruiken wat je wilt. En zoveel links als je wilt, maar zorg dat je een naam dan niet dubbel gebruikt. Als je naar een bepaald stukje op een andere pagina wilt linken, kun je de URL neerzetten, met daarachter het hekje en de naam van de link. Bijvoorbeeld: http://www.neopets.com/~zuzael#lnk linkt naar het stukje op deze pagina over links.

Als je de code

gebruikt, kom je weer bovenaan de pagina terecht. Kijk maar:

Een link van een plaatje maken.

We hebben net bekeken hoe je een link en een plaatje maakt. Nu kunnen we de tags combineren om een plaatje te maken wat een link is. In plaats van tekst tussen de link tags te zetten, zet je er de code voor een plaatje neer.

Ziet er zo uit:

Als je die rand niet om het plaatje heen wil hebben, als het een link is, kun je de volgende code gebruiken:

Als je wel een rand wil, maar bijvoorbeeld een andere dikte of kleur, kun je deze code gebruiken:

Deze code verandert alle plaatjes. Als je alleen plaatjes wil veranderen die een link zijn, kun je deze code gebruiken:

Nu een uitleg bij de laatste twee codes:
1px is de breedte. Die kun je groter maken, zo groot als je wil. Als het 0px is, is er geen rand.
solid geeft aan dat er een doorlopende lijn omheen staat. Er zijn een aantal verschillende soorten: Solid is dus een doorlopende lijn.
dotted is een gestipte rand.
dashed is een streepjes rand.
double is een dubbele rand.

Randen kun je op alle dingen toepassen.

Van een plaatje een achtergrond maken

Dit is ook een simpele code.

De url werkt hetzelfde als in links en plaatjes.
no-repeat zorgt ervoor dat het plaatje maar 1 keer op de achtergrond staat. Dit kun je door de volgende dingen vervangen:
repeat zorgt dat hij wel herhaalt en dus zo vaak mogelijk op het scherm staat (dit is standaard ingesteld).
repeat-y zorgt dat het plaatje alleen van boven naar beneden wordt herhaald.
repeat-x zorgt dat het plaatje alleen van links naar rechts herhaalt.
Dan zijn we bij "fixed" beland. Dit zorgt dat het plaatje meebeweegt met het scherm, als je naar beneden gaat op een pagina, zodat het plaatje altijd op dezelfde plek op het scherm blijft staan. Als je scroll gebruikt in plaats van fixed, gaat het plaatje mee met de rest van de pagina, als je naar beneden scrollt.

Let op! Net als bij achtergrondkleur, wat een eindje naar boven staat, moet je hier ook body vervangen voor #main, als het om een lookup/winkel of gallerij gaat!

Alle tekst in een vak.

Vanaf hier wordt het wat ingewikkelder: tekst in een vak zetten is een combinatie van HTML en CSS.
Hier is de code:

.blog gekoppeld aan <div class=blog>
Hier begint al een ingewikkeld iets. Om de div tag te laten weten wat hij precies moet doen, maken we een speciale class aan. In de CSS zet je er een punt voor. In dit stuk noem ik hem blog, maar je kan van alles verzinnen. Het woord banaan zal net zo goed werken. Als je in de css de punt ervoor maar niet vergeet! Achter class in de HTML tag, zet je de naam die je in de CSS hebt gezet. Zo weet de tag, waar hij de CSS vandaan moet halen. Je kan natuurlijk ook gewoon deze code gebruiken:

Maar als je meer div tags gaat gebruiken, en ze allemaal anders wil, is het makkelijker een class te gebruiken.

width geeft de breedte aan, height geeft de hoogte aan van het vak waar de tekst in komt.
overflow:auto; zorgt ervoor dat de tekst gaat scrollen als het meer is dan er in het tekstvak past.
En border en background-color ken je natuurlijk al.

Let op! Als je je stats (alle informatie van je lookup) ook in een vak wil hebben, moet je de volgende code gebruiken:

In plaats van de div af te sluiten, begin je een table tag. Zo zorg je dat de stats in de div komen te staan, en de table tag zorgt ervoor dat het ook op firefox werkt.

Tabellen

Tabellen maken is goed te doen, maar door de vele tags die erin zitten, kan het knap lastig worden.
We beginnen met een table tag:

Binnen een table hebben we rijen. Daarvoor gebruiken we een tr tag:

Je kan zoveel rijen maken als je wil.

Binnen rijen hebben we cellen. Deze worden in de code met td aangeduid. Binnen een rij kun je zoveel cellen maken als je wil, zolang het binnen iedere rij evenveel cellen zijn:

In het vorige voorbeeld heb ik twee rijen gemaakt, met in iedere rij twee cellen. Je kan ook cellen maken die de ruimte van twee cellen innemen. Dit kan ik alleen horizontaal uitleggen, verticaal is wat lastiger en dat moet ik zelf eerst even goed uitzoeken om het uit te kunnen leggen. Hier zal ik even laten zien, hoe je een cel breed kan maken met twee cellen eronder:

Zoals je ziet heb ik in de td tag colspan="2" toegevoegd. Je kan dit met meerdere cellen toepassen, zolang alle cellen totaal maar even veel colspan hebben. Een cel heeft standaard colspan="1".

Zoals ik zal zei, volgt later nog een manier om cellen ook rijen te laten overbruggen. Tot zover de korte cursus tabellen.

Tekst positioneren

Om tekst te positioneren, kunnen we dezelfde code gebruiken als voor het tekstvak:

Maar in de CSS van .blog voegen we het volgende toe:

position:absolute; vertelt dat het plaatje op een bepaalde plaats op het scherm moet komen te staan.
top geeft aan hoever van de bovenkant, 0px betekent dat hij helemaal bovenaan staat. In plaats van top kun je ook bottom gebruiken, zodat het plaatje onderaan komt.
left geeft aan hoever van de linkerkant het plaatje staat. Je kan ook right gebruiken om hem rechts te zetten.
Voor de laatste twee geldt: hoe hoger het getal, hoe meer naar de andere kant het plaatje staat.
De complete code ziet er nu zo uit:

Je kan hier natuurlijk ook een rand omheen zetten.

Plaatjes positioneren

Dit werkt hetzelfde als een stukje tekst positioneren. Je geeft het plaatje ook een class. Hier is een voorbeeldcode: