[TUT] Slicen #2

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Hallo allemaal,

    Naar aanleiding van vele vragen had ik een tutorial geschreven over hoe je moest slicen. Heb je deze nog niet doorgenomen? Lees dan eerst deel 1!

    Let op: Goed en netjes slicen leer je niet in een paar uur of een paar dagen. Ik heb er zo'n 3 jaar overgedaan om alle ins- en outs te weten van HTML en CSS. Dus houdt er rekening mee!

    Stap 1: De images


    Je hebt nu, als je deel 1 hebt gemaakt, het photoshop document omgezet naar 4 images in het .png formaat. Je moet er altijd voor zorgen dat je je images een goede en duidelijke naam geeft, zodat je jezelf later bij het coderen niet kan vergissen. Zo heb ik de volgende namen aan de images gegeven.

    Voor de header -> header.png
    Voor het menu -> menu-bg.png
    Voor de content -> content-bg.png
    Voor de footer -> footer-bg.png

    Hier staat bg voor background, de rest spreekt voor zich.

    Nu is het bij het coderen ook van belang dat je weet hoe breed en hoog de images zijn. Dit heb je namelijk nodig voor de CSS, oftewel de cascading stylesheet. Bij windows kun je dat vinden zoals ik dat op de onderstaande afbeelding heb gedaan:

    [Blocked Image: http://www.say-what.nl/ict/tutorial/images/slicen/stap1.png]

    Hier zie je onderaan het venster de volgende informatie staan. Nu hebben wij alleen de dimensions nodig, welke in dit geval 884 x 211 zijn. Het eerste getal, 884, is de breedte. Dit is altijd in pixels. Het tweede getal is de hoogte, 211.

    Stap 2: De broncode van het HTML bestand
    Nu is er alweer een nieuwe versie van html uit, namelijk HTML5. Maar omdat dit een beginners tutorial is, zal ik mij richten op xHTML 4 traditional. Wat dit precies inhoud, kun je via de onderstaande link teruglezen:
    w3schools.com/tags/tag_doctype.asp


    Om te beginnen hebben we natuurlijk eerst een codeerprogramma nodig. Dit kan met kladblok, maar ik maak gebruik van sublime text 2. Deze is te downloaden op: sublimetext.com/2

    Het is een simpele editor die vrij weinig voor programmeert. Naar mijn mening is dat ook precies wat je nodig hebt, wanneer je begint met programmeren.

    We beginnen met het HTML bestand. Je creëert een nieuw bestand en deze noem je index.html. Wanneer je namelijk je bestanden gaat uploaden naar je host en je naar je website gaat, zal de browser altijd eerst zoeken naar een bestand met de naam index.extensie. In ons geval is dus index.html de homepage.

    DOCTYPE
    Voor de broncode van HTML beginnen we altijd eerst met het aangeven welk DOCTYPE het bestand is. Dit doen we door de volgende code:

    Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Hierin geven we aan dat het om een xhtml 1.0 transitional bestand gaat.

    Vervolgens beginnen we met de volgende regel welke aangeeft dat het begint met HTML. Dit doen we op de volgende manier:

    HTML Source Code

    1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">


    HEAD
    Daarna hebben we de head tags. De head tags zorgen voor informatie die de browser kan opnemen en die zal niet worden getoond aan de bezoeker. Met andere woorden, het gaat hier om de titel van de website, een link naar je css bestand etc.

    Om de head van het HTML bestand te starten maken we gebruik van de volgende code:

    Source Code

    1. <head></head>


    Nu zie je dat de eerste regel zonder slash is en de tweede regel met slash. Met de slash beëindig of sluit je de tag.

    Nu hebben we alleen niks binnen de head tags staan, dus daarin zetten we de volgende informatie :

    Source Code

    1. <head>
    2. <title>Thjeu slicing tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="nl" />
    3. <link rel="stylesheet" type="text/css" href="opmaak.css" />
    4. </head>


    Nu zien we dat er 4 regels bij zijn gekomen. Namelijk: de title tags, 2 meta tags en een link tag. De title tag spreekt vrij voor zich. Hierin komt de titel die bovenaan in de tab van je browser zal verschijnen. Deze begin je weer door <title> en sluit je weer met een slash </title>

    Vervolgens hebben we de meta tags, hierin is heel veel mogelijk. Maar om het simpel te houden heb ik voor deze twee regels gekozen. We geven namelijk aan welke charset we gebruiken (UTF-8 is de standaard voor xhtml 1.0 traditional ) en we geven aan welke taal we gebruiken.

    En tot slot hebben we de link tag. Hierin geven we aan waar ons css bestand staat.

    Dat was het wel voor de head.

    BODY
    Vervolgens hebben we de body van het html bestand. In de body van je html bestand zul je alle opbouw van het bestand neerzetten. Deze roepen we op de volgende manier aan :

    Source Code

    1. <body></body>


    Wat er allemaal in de body komt te staan, zal ik zo verder op ingaan.

    /HTML


    En tot slot sluiten we het bestand. Dit doen we door de volgende manier :

    Source Code

    1. </html>


    Als je alles goed hebt overgeschreven heb je dus in totaal voor index.html de volgende code:
    pastebin.com/2LLSQJSn

    Je kunt dit bestand ook bewaren als een standaard versie voor al je html bestanden. Hierdoor hoef je niet elke keer weer dezelfde regels te schrijven.

    Het echte werk begint hier! 8)
    Nu zijn we aangekomen bij het echte werk! We gaan namelijk beginnen aan de structuur van de lay-out. Echter om daar mee te beginnen zijn er wel een paar regels die je MOET naleven.

    -Zorg altijd voor een nette opmaak. Dit houdt in: Inspringen (Zie voorbeeld code van hierboven), dezelfde aanhalingstekens gebruiken (Gebruik voor HTML altijd dubbele, zo kan je jezelf niet vergissen tussen HTML en PHP). En tot slot, mijn hoofdregel: Als je een tag begint, sluit deze dan eerst voordat je content in de tag zet. Hierdoor werk je gestructureerd en vergeet je geen tags af te sluiten.

    -Aangezien we in 2013 leven maken we geen gebruik meer tabellen, maar van DIV's. DIV staat voor division. Oftewel dit is een tag die een groep bij elkaar houdt. Hier zal ik straks verder op ingaan.

    -Geef duidelijk en gestructureerde namen aan je div's mee. Zo maak je geen fouten in je structuur, maar ook niet in je CSS.

    -Maak gebruik van comments. Meer informatie daarover kun je vinden op: Commentaar. Dit zorgt ervoor dat je zelf duidelijk kunt zien wat je schrijft en wat je doet. Ik gebruik de comments voornamelijk wanneer ik een div tag afsluit. Zo weet ik namelijk welke div wordt afgesloten. Maar dit zal later in deze tutorial voor zichzelf spreken.

    DIV (Divisions)
    Een div is eigenlijk de hoofdtag waar we gebruik van gaan maken. Met de div's in combinatie met CSS kunnen we namelijk alles maken wat je op het internet ziet. (Qua structuur dan ;) )


    Omdat niet elke div hetzelfde zal zijn, geven we aan de div ook een class of id mee. Nu zit hier een verschil in. Wanneer je namelijk een class aan een div meegeeft, zul je deze vaker kunnen gebruiken in de structuur van je script. Echter, wanneer je een id aan je div meegeeft, kan je deze maar één keer aanroepen.

    Om het simpel te houden zullen we alleen gebruik maken van classes.

    Het aanroepen en het sluiten van de div met een class doen we op de volgende manier:

    Source Code

    1. <div class="naam">
    2. </div><!-- EINDE VAN DIV CLASS NAAM -->


    Je ziet dat ik gebruik heb gemaakt van een class. De naam van de class is in dit voorbeeld naam. Verder sluit je div weer met een slash. Hierachter heb ik een comment gezet welke zegt dat dit het einde van de div class naam is. Omdat je elke div sluit op dezelfde manier: </div>, is het verstandig om hier een comment achter te zetten.

    Nu we de basis weten van div's, kunnen we eindelijk beginnen met de structuur. Wanneer we onze lay-out erbij pakken, is deze te verdelen in 4 div's. Namelijk:
    - header
    - menu
    - content
    - footer

    Hiervoor schrijven we dan de volgende code:
    pastebin.com/UAzX0mEg


    Je ziet hierin de 4 div's met hun comments en classes.

    De content tags
    In principe zouden we door middel van CSS nu al een lay-out kunnen maken. Echter hebben we ook nog content in de div's staan. Er zijn een heleboel tags voor html die we kunnen gebruiken, maar ik zal nu de hoofdtags uitleggen:

    H1 TAG
    Deze geeft aan dat het gaat om een heading size 1 gaat. Dit is het grootste font wat je zal gebruiken in je lay-out.

    H2,H3,H4,H5,H6
    Met de heading sizes tag, kun je doorgaan tot aan h6. Dus als je een titel of heading wilt hebben, maak dan gebruik van de heading size tags.

    Paragraph
    De text die je wilt gebruiken, zet je altijd in een paragraph. Deze is aan te roepen door :

    Source Code

    1. <p>
    2. Hier plaats je je tekst.</p><!-- EINDE P TAG -->


    Links / urls
    Links maken we met een <a> tag. Dit staat voor anchor. Aan een link geven we ook altijd een url. Dit doen we op de volgende manier: <a href="url"> link </a>.
    href staat voor hypertext reference.

    list / menu
    Om een menu of een lijst te maken, zijn er verschillende mogelijkheden. Maar om het simpel te houden maken we gebruik van de <ul> tag. Dit staat voor unorderd list. Elk list item roep weer aan door <li> wat staat voor list item.

    Final!
    Zo dat was een heleboel informatie, terwijl we eigenlijk nog niks gecreëerd hebben. Maar geen zorgen, we beginnen nu met de content!

    Menu
    In de header hebben we eigenlijk geen content staan. Dus deze slaan we eerst over. We gaan gelijk door naar een wat lastiger onderdeel, namelijk het menu.
    Zoals hierboven aangegeven, roep je eerst het menu aan met de <ul> tag. Vervolgens maken we list items met de <li> tag. En omdat we ook links aan de list items willen meegeven moeten er ook nog <a> tags in.

    Een menu maak je dus zo:
    pastebin.com/Djt6Cfqf


    Je kunt ook een class of een id aan je <ul> tag meegeven. Maar, omdat we in de lay-out maar 1 menu hebben is dat niet nodig.

    Tekst in de content div en de footer div
    Wanneer je naar de content in de lay-out kijkt, zie je dat er twee tags naar voren komen. Namelijk de H1 tag en de paragraph tag. Dit gaan we dus op de volgende manier doen:

    Source Code

    1. <h1>H1 Titel </h1>
    2. <p> Hier komt alle tekst te staan </p>


    Voor de footer div hebben we allemaal een kleine regel tekst. Dus maken we alleen gebruik van de paragraph tag:


    Source Code

    1. <p>Copyright 2013 - 2013 </p>


    Zo... Dat was een heleboel tekst, nu het complete plaatje. Deze is te vinden op:
    pastebin.com/ddTnFmqG


    Dit was het voor de structuur van je lay-out. Omdat we nog in de beginnersfase zitten van Slicen, HTML etc. Is het nog niet zo zeer nodig om te kijken of de code echt goed valide is geschreven. (W3 heeft een mooie validator waarmee je je code kan checken. Dus heb je het klaar, check de code met de volgende link: validator.w3.org/. Deze zal eventuele fouten aangeven of wanneer je alles goed hebt gedaan, helemaal geen fouten!)

    In mijn volgende blog zal ik verder op de CSS ingaan. Voor nu, veel succes ermee en bedankt voor het lezen!

    1,196 times read

Comments 6

  • Christian.B -

    Ik zelf kan niet wachten!

    Erg duidelijke tutorial en ik heb er toch al weer iets van opgestoken.

    Hoop dat deel 3 snel uit komt!!

  • M.Martens -

    Ik verheug me al op nummer 3 Thjeu

  • thjeu -

    Bedankt Ferhat! Het kost wel wat tijd om zo'n tutorial te schrijven, dus ik zal volgende week het 3e deel schrijven!

  • Ferhat.Remory -

    M.Martens: In mijn volgende blog zal ik verder op de CSS ingaan. Voor nu, veel succes ermee en bedankt voor het lezen!

    Goede blog en super geschreven. Heel duidelijk, ben benieuwd naar je volgende blog!

  • M.Martens -

    Krijgen we ook nog een 3 of?

  • crimecrime -

    super :p nu nog de css en ik kan volg gas gaan oefenen :)