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:

Tekst hier

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

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

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:


css {komt:hier;}

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.


body {color:#000000;}

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


b {color:#00AAFF;}
i {color:#393939;}

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

Blauwe, vetgedrukte tekst
Grijze, schuingedrukte tekst

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

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


body {color:#000000; font-size:10pt;}
b {color:#00AAFF; font-size:12px;}

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:

Tekst komt hier

De css:


body {text-align:center;}

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:


body {backgorund-color:#000000;}

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:


#main {backgorund-color:#000000;}

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

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

tp://www.neopets.com">Neopets

Ziet er zo uit: Neopets
Achter -disallowed_word- 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:

target="_new"

Het komt er dan zo uit te zien:

tp://www.neopets.com" target="_new">Neopets

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


a {color:#AA00FF; font-size:10pt;}
a:visited {color:#FFAA00; font-size:12px;}
a:hover {color:#00AAFF;}

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:

Naam

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:




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2018.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions