1 Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum:2 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HT...
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011
1 Whisper380-computerhulp.net
Inhoudsopgave Wat gaan we doen? .................................................................................................................... 4 Eerst wat uitleg: .......................................................................................................................... 4 Wat is HTML: ........................................................................................................................ 4 Wat is CSS: ............................................................................................................................ 4 Wat is het resultaat van deze 2 dingen gecombineerd?:......................................................... 4 Wat hebben we nodig? ............................................................................................................... 4 We hebben 4 programma’s nodig: ......................................................................................... 4 Waarvoor hebben we deze programma’s nodig? ................................................................... 4 Downloaden van de programma’s: ............................................................................................ 5 Internet Explorer: ................................................................................................................... 5 Firefox: ................................................................................................................................... 5 Chrome: .................................................................................................................................. 5 Safari: ..................................................................................................................................... 5 Notepad++: ............................................................................................................................. 5 Het bouwen van uw fotoalbum site. ........................................................................................... 6 Het begin: ............................................................................................................................... 6 De site wat inhoud geven: .................................................................................................... 11 Een menu maken 1/3: ........................................................................................................... 14 Uitleg ................................................................................................................................ 15 Een menu maken 2/3: ........................................................................................................... 17 Uitleg ................................................................................................................................ 23 Een menu maken 3/3 ............................................................................................................ 24 De site er goed uit laten zien in verschillende resoluties. ........................................................ 28 De achtergrond veranderen: ..................................................................................................... 36 Site opmaken: ........................................................................................................................... 37 Een logo toevoegen: ............................................................................................................. 37 Tekst toevoegen op de homepage: ....................................................................................... 43 De fotoalbums vullen: .............................................................................................................. 48 Voorbereiding: ..................................................................................................................... 48 Stap 1: ............................................................................................................................... 48 Stap 2: ............................................................................................................................... 48 Stap 3: ............................................................................................................................... 48 Stap4: ................................................................................................................................ 48 Stap 5: ............................................................................................................................... 48 Stap 6: ............................................................................................................................... 48 Stap 7: ............................................................................................................................... 48 2 Whisper380-computerhulp.net
Stap 8: ............................................................................................................................... 50 Het album maken: ................................................................................................................ 51 HTML: ............................................................................................................................. 51 CSS: .................................................................................................................................. 53 Uitleg: ............................................................................................................................... 53 Het resultaat: .................................................................................................................... 56 Een omschrijving toevoegen aan de foto’s .......................................................................... 57 HTML: ............................................................................................................................. 57 CSS: .................................................................................................................................. 59 Resultaat: .......................................................................................................................... 62 De laatste dingetjes om het net even wat mooier te maken: .................................................... 63 De titel van het album aan passen: ....................................................................................... 63 Het menu nog aanpassen: ..................................................................................................... 63 Menu aanpassen op de site: .................................................................................................. 63 Op de “onze honden” pagina een stukje tekst toevoegen: ................................................... 65 De grote afbeeldingen weergeven: ........................................................................................... 67 LET OP! ............................................................................................................................... 67 Stap 1: ................................................................................................................................... 67 Stap 2: ................................................................................................................................... 68 Stap 3: ................................................................................................................................... 68 Stap 4: ................................................................................................................................... 68 Stap 5: ................................................................................................................................... 68 Stap 6: ................................................................................................................................... 68 Stap 7: ................................................................................................................................... 68 Stap 8: ................................................................................................................................... 68 De CSS goed leesbaar maken zodat u alles makkelijk terug kan vinden: ................................ 70 Nawoord: .................................................................................................................................. 74
3 Whisper380-computerhulp.net
Wat gaan we doen? We gaan een Fotoalbum website maken. Dit gaan we doen met HTML en CSS. Dit wordt een handleiding die iedereen kan volgen. Het maakt dus niet uit of je een beginner bent of een iets professioneler bent.
Eerst wat uitleg: Wat is HTML: HTML is de standaard taal waarin een website word gemaakt. Een html pagina (bestand) is bijna altijd hetzelfde opgebouwd. Je hebt altijd de volgende tags: , en . Later in deze handleiding komen er nog meer tags voor maar dit zijn op dit moment de belangrijkste.
Wat is CSS: CSS is een bestandje waarin alle stijlen van de website in staan. Denk dan bijvoorbeeld aan de opmaak van de lettertypes.
Wat is het resultaat van deze 2 dingen gecombineerd?: Als je deze 2 dingen combineert krijg je een mooi opgemaakte website.
Wat hebben we nodig? We hebben 4 programma’s nodig: Internet Explorer, Firefox, Chrome/Safari en Notepad++
Waarvoor hebben we deze programma’s nodig? We hebben 3 browsers nodig dat zijn: Internet Explorer, Firefox en Chrome/Safari. Deze programma’s gaan we gebruiken om de website in te testen. Omdat dit de meest gebruikte browsers zijn. Alle browsers geven helaas de site anders weer omdat deze andere standaarden gebruiken. En omdat we willen dat onze site er overal goed uitziet willen we natuurlijk alles getest hebben. Notepad++ hebben we nodig om het CSS bestandje te maken en om het HTML bestandje te maken.
4 Whisper380-computerhulp.net
Downloaden van de programma’s: Internet Explorer: Deze zit al in Windows gebouwd. Maar heeft u deze toch niet dan kunt u hier de laatste versie downloaden: http://download.cnet.com/Internet-Explorer/3000-2356_4-10013275.html
Firefox: Firefox kunt u hier downloaden: http://www.mozilla-europe.org/nl/firefox/
Chrome: Google Chrome kunt u hier downloaden: http://www.google.com/chrome/index.html?hl=nl&brand=CHMB&utm_campaign=nl&utm_s ource=nl-ha-emea-nl-bk&utm_medium=ha
Safari: Safari kunt u hier downloaden: http://www.apple.com/nl/safari/download/
Notepad++: Notepad++ kunt u hier downloaden: http://notepad-plus-plus.org/download (kies dan voor: current version)
5 Whisper380-computerhulp.net
Het bouwen van uw fotoalbum site. Installeer eerst 3 browsers (Chrome en Safari zijn precies het zelfde hiervan kunt u er een kiezen) en Notepad++.
Het begin: Open Notepad++ U ziet dan dit mooie scherm:
U ziet nu gewoon een kladblok voor u. Maar dit kladblok is zeer goed om webpagina’s mee te maken. We gaan nu eerst een basis voor de HTML pagina maken. Type het volgende: (U kunt niet kopiëren u moet het dus zelf typen) U scherm ziet er nu zo uit:
6 Whisper380-computerhulp.net
Het is nu nog geen HTML bestand. Dit gaan we nu doen: Klik op het diskettetje bovenin het scherm (Zie zwarte pijl) (Of houdt de ctrl knop ingedrukt en druk dan op S) u krijgt dan dit te zien:
7 Whisper380-computerhulp.net
Om het even makkelijk te houden slaan we het bestand op op het bureaublad in een nieuwe map genaamd website-fotoalbum. Dit doen we door op bureaublad (desktop) te drukken en dan vervolgens op het mapje met het rode sterretje. Dit gebeurt er dan op het scherm:
Vul hier de naam voor de map in: website-fotoalbum, wanneer u klaar bent met typen drukt u op enter. Het scherm veranderd dan hierin:
Dubbel klik op de map website-fotoalbum. Dan krijgt u dit te zien:
8 Whisper380-computerhulp.net
Waar nu Normal text file (*.txt) staat moet komen te staan: Hyper tekst markup language file (*.html, *.htm, enz.) Zoals hieronder afgebeeld:
Nu gaan we de bestandsnaam invullen. Dat word index.html. Zorg ervoor dat uw scherm er net zo uitziet als het scherm hieronder:
9 Whisper380-computerhulp.net
Het enige wat we nu nog moeten doen is op save drukken. Het begin van de pagina is gemaakt.
10 Whisper380-computerhulp.net
De site wat inhoud geven: De site moet een titel hebben zodat de mensen weten dat ze op uw site zijn. Dit gaan we doen in de HTML pagina.
Zoals je ziet is de tekst blauw geworden in Notepad++, dit komt omdat de tekst tags zijn. Ga naar het einde van de Head tag en druk op enter. Er komt nu een lege regel tussen type hier het volgende: (Druk eerst een keer op de tab toets (boven de capslock) ) mijn fotoalbum. Uw scherm ziet er dan zo uit:
11 Whisper380-computerhulp.net
Druk nu op het diskettetje of druk CTRL in +S. Het rode diskettetje in het tabje word nu weer blauw in plaats van rood dit betekend dat het bestand weer is opgeslagen. Doe dit elke keer als u iets typt! Dan kunt u het resultaat direct in de browser zien. We gaan nu Alle 3 de browsers openen met de website! Ga naar de het index.html bestand op uw bureaublad in het mapje website-fotoalbum. Klik er met de rechtermuisknop op en druk op openen met, kies hier voor 1 van de browsers. Doe dit dan nog 2 keer voor de andere browsers. Dit is een plaatje van Internet Explorer: ( Zie volgende pagina (z.v.p). )
12 Whisper380-computerhulp.net
Zoals je ziet is de website nu nog leeg. In het tabje in Internet Explorer, Firefox, Chrome/Safari ziet u nu staan mijn fotoalbum.
13 Whisper380-computerhulp.net
Een menu maken 1/3: We gaan nu een menu aanmaken zodat we bijvoorbeeld verschillende feesten op verschillende pagina’s kunnen zetten. In Notepad++ ziet u nu dit:
Ga achter staan en druk op enter. Er word een lege regel toegevoegd typ hier nu het volgende:
Zoals u misschien al heeft gezien gaan we straks nog een aantal HTML pagina’s maken. In deze handleiding ga ik er een maken die we 3 keer gaan gebruiken. Maar u kan er zelf 3 maken op de zelfde manier als het eerste album. Ik ga eerst het stukje uitleggen wat we nu hebben getypt.
Een menu maken 2/3: We hebben nu een menu maar nu gaan we het menu opmaken hiervoor gaan we een CSS bestand gebruiken. In Notepad++ gaan we een nieuwe tab openen. Dit doet u door op nieuw te drukken (zwarte pijl in afbeelding hieronder) Het scherm veranderd hierin:
Het index.html bestand is ook nog geopend! Houdt hier rekening mee! Als eerste gaan we dit in het CSS bestand typen: *{ margin: 0px; padding: 0px; } Dit zorgt ervoor dat alles ongeveer hetzelfde blijft in de verschillende browsers. Later gaan we uitleggen wat dit betekend. Het scherm ziet er nu zo uit:
17 Whisper380-computerhulp.net
Nu gaan we dit bestand opslaan als een CSS bestand. Dit doet u op de zelfde manier als de html pagina alleen verander je: Normal tekst file (*txt) in: Cascade style sheet file (*.css) de bestandsnaam wordt: fotoalbum.css. en dit bestand zet u in de zelfde map als het index.html bestand. Zorg ervoor dat het scherm er dus zo uit ziet voordat u het bestand opslaat:
Druk nu op save. 18 Whisper380-computerhulp.net
Nu het bestand is opgeslagen gaan we verder. In het html bestand hadden we hiermee het menu gemaakt:
Zoals je ziet staat er aan het begin van dit stukje het volgende:
Het id geeft aan dat dit uniek is. Met dit id gaan we het menu aanpassen in de CSS. We maken het volgende aan: #navbar{ Hiermee bedoelen we dus dat dit stukje alleen effect heeft op het stukje tekst in de HTML die dit id heeft. Nu gaan we het menu horizontaal maken: #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } Hierdoor hebben we alleen het menu aangepast maar nog niet de items. Die gaan we dadelijk doen. Sla het bestand nu op door CTRL ingedrukt te houden en vervolgens op S te drukken. Omdat we nu wel willen zien wat we hebben gedaan gaan we er eerst voor zorgen dat de HTML pagina het CSS bestand kan vinden en gebruiken. Klik op het tabje in Notepad++ met index.html erin. Je ziet dan het HTML bestand weer voor je: mijn fotoalbum
(We gebruiken even geen screenshots meer omdat het zo duidelijker is.) Nu ziet het menu er in de browsers zo uit:
Zoals u ziet is het menu nu aan de rechterkant van het scherm beland. En zijn de bolletje ervoor verdwenen. Alleen staat het menu nog niet horizontaal. Dat gaan we nu doen.
20 Whisper380-computerhulp.net
In Notepad++ drukt u op het tabje met fotoalbum.css en dan krijgt u het volgende script te zien: *{ margin: 0px; padding: 0px; } #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } Zet tussen elk stukje CSS een lege regel zodat het overzichtelijk blijft. Als u later iets wil veranderen kan u het altijd makkelijk terug vinden! Nu gaan we hieraan het volgende toevoegen: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; } Dit stukje heeft effect op alle items in het menu. Nu u dit heeft toegevoegd ziet u CSS bestand er zo uit: *{ margin: 0px; padding: 0px; } #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } #navbar li { font-family: arial; text-decoration: none; 21 Whisper380-computerhulp.net
font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; } Nu gaan we het resultaat bekijken (Dit is in Firefox):
Het menu staat horizontaal. Zoals we willen maar werkt nog niet volledig zoals wij dat willen maar dat doen we later. Nu de uitleg wat we precies hebben gedaan: We beginnen met dit stukje: #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; }
22 Whisper380-computerhulp.net
Uitleg Margin: Dit betekend de afstand tussen een of meerdere objecten of op welke positie het object weergegeven moet worden. In ons script is dat op 75% links van het scherm en 10% onder de bovenkant van het scherm. Dit kunt u ook in pixels invullen dan veranderd dit % in dit: px. List-style-type: Hierin kunt u de opsommingstekens (bolletje, vierkantje, cijfers, enz.) bepalen die voor een item komen. De waardes die u kunt gebruiken zijn bijvoorbeeld: Disc, circle en square, enz. Tekst-decoration: Hierin kunt u aangeven of de woorden onderstreept, lijntje er boven, doorgestreept moeten worden of moeten knipperen (blink). De waardes die u kunt gebruiken zijn: underline, overline, line-trough en blink. Position: Hiermee geef je aan hoe je een object wil plaatsen op de site. De waardes die u kunt gebruiken zijn: absolute, relative, fixed, static en inherit. Nu gaan we dit stukje bespreken: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; } font-family: welk lettertype ga je gebruiken voor dit item. font-size: De tekengrootte voor het item Font-weight: Of het item dik gedrukt moet zijn Color: De letterkleur. Display: Dit bepaald of de browser een element/item weer moet geven en hoe die dat moet doen.
23 Whisper380-computerhulp.net
Een menu maken 3/3 We willen als we op een pagina zijn natuurlijk wel aan het menu zien op welke pagina we zijn. Dit doen we door middel van het volgende stukje: a:link {color:#0000ff;} /* unvisited link */ a:visited {color:#ff0000;} /* visited link */ a:hover {color:#ffAA00;} /* mouse over link */ a:active {color:#000000;} /* selected link */ De letters en cijfers die achter het # vormen samen met het # de kleurcode van de links. Deze kleurcodes kunt u aan passen om zelf de kleuren te kiezen die u wilt. Dit stukje moet in onze CSS komen. Dit ziet er op dit moment zo uit: *{ margin: 0px; padding: 0px; } #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; } Nu gaan we het stukje toevoegen onder : *{ margin: 0px; padding: 0px; } Dan komt onze CSS er zo uit te zien: *{ margin: 0px; padding: 0px; } a:link {color:#0000ff;} /* unvisited link */ a:visited {color:#ff0000;} /* visited link */ 24 Whisper380-computerhulp.net
a:hover {color:#ffAA00;} /* mouse over link */ a:active {color:#000000;} /* selected link */ #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; } Dit zorgt ervoor dat het menu er nu zo uit ziet:
Nu hebben we een menu dat werkt zoals wij het willen.
25 Whisper380-computerhulp.net
Alleen ziet het menu er nog niet helemaal netjes uit. We willen natuurlijk wel knoppen hebben. Voeg daarom deze code toe: border-width: 1px; border-style: solid; border-color: #000000; aan navbar li. Dan komt dat stukje er in de CSS zo uit te zien: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; } En dat geeft dit effect in de browser:
Nu nog een kleurtje aan de knoppen toevoegen: Hiervoor voegt u deze code toe: Background-color: #42C142. 26 Whisper380-computerhulp.net
Dan komt het stukje er zo uit te zien: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; Background-color: #42C142 } En dat geeft dit effect:
Uitleg: border-width: dit geeft aan hoeveel pixels de de rand om het item moet zijn. (hoe dik de lijn is) border-style: Dit geeft aan hoe de lijn eruit moet zien: een hele lijn (solid), dotted (puntjes), dashed (streepjes), double (dubbele lijn). border-color: geeft aan welke kleur de lijn moet zijn. Background-color: geeft aan welke kleur de achtergrond krijgt.
27 Whisper380-computerhulp.net
De site er goed uit laten zien in verschillende resoluties. Als je nu het scherm verkleint ziet u dat alles blijft staan en dat u naar links en rechts moet scrollen. Dit willen we niet. We gaan nu de site centreren op het midden van de pagina. Dit gaan we down door middel van: - Een div toevoegen in de HTML. - Een id toevoegen in de CSS. We beginnen met de html. Dit is de HTML code op dit moment: mijn fotoalbum
#alles{ margin: 0px auto; width: 760px; } Dan komt de CSS er zo uit te zien: *{ margin: 0px; padding: 0px; } a:link {color:#0000ff;} /* unvisited link */ a:visited {color:#ff0000;} /* visited link */ a:hover {color:#ffAA00;} /* mouse over link */ a:active {color:#000000;} /* selected link */ #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; } #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; Background-color: #42C142 } #alles{ margin: 0px auto; width: 760px; } Nu gaan we het resultaat bekijken:
29 Whisper380-computerhulp.net
Zoals je ziet is de tekst meer naar het midden van de pagina gekomen. De mensen die met chrome of firefox gaan kijken zijn het volgende:
30 Whisper380-computerhulp.net
Door de verschillende standaarden die de browsers gebruiken ziet de de site er in de ene browser wel mooi uit en in de andere niet. Nu gaan we er voor zorgen dat alles er wel goed uit komt te zien: In de CSS gaan we het volgende toevoegen aan #alles. Dit is het stukje zoals het er nu uitziet: #alles{ margin: 0px auto; width: 760px; } Daar maken we nu dit van: #alles{ margin: 0px auto; width: 760px; text-align: left; } Bij #navabar halen we het volgende weg: margin-left: 75%; margin-top: 10%; Dat stukje komt er dus zo uit te zien: #navbar{ list-style-type: none; text-decoration: none; position: absolute; } Het bewerken is van bestaande stukjes is klaar maar nu is het nog niet goed. 31 Whisper380-computerhulp.net
We moeten 2 stukjes toevoegen: Het stukje wat het menu nu goed gaat plaatsen op de site: #menu{ margin-left: 465px; margin-top: 25px; position: relative; } En een stukje dat we straks ook nodig hebben voor de achtergrond maar wat nu aan gaat geven dat de site gecentreerd moet worden in alle browsers: body{ text-align: center; } Nu we dit hebben toegevoegd ziet de CSS er als volgt uit: ( Zie volgende pagina)
Nu is de site te zien in alle resoluties zonder dat alles door elkaar gaat schuiven.
35 Whisper380-computerhulp.net
De achtergrond veranderen: Nu hebben we de site mooi gecentreerd maar die lelijke witte achtergrond willen we weg hebben. We willen heb bijvoorbeeld een zand achtige kleur geven. Om dit voor elkaar te krijgen moeten we het volgende toevoegen in de CSS aan Body{. Ons stukje ziet er nu zo uit: body{ text-align: center; } Nu voegen we dit toe: background-color: #C3AE7F; Het stukje CSS ziet er dan zo uit: body{ text-align: center; background-color: #C3AE7F; } En het resultaat is:
Dat ziet er al een heel stuk mooier uit.
36 Whisper380-computerhulp.net
Site opmaken: Nu hebben we een menu en een fatsoenlijke achtergrond. Maar dat maakt het nog niet echt een site. We moeten wel vermelden waar het over gaat. Omdat we op de Home pagina zitten gaan we hier vermelden wat de bezoekers hier kunnen zien/vinden. We typen de tekst eerst voor dat we hem gaan opmaken. (De tekst die in deze handleiding word getypt is puur als voorbeeld) We gaan eerst boven het menu de site naam weergeven. Dit kan ook met een plaatje als logo maar dit word dadelijk ook uitgelegd.
Een logo toevoegen: De tekst die ik wil hebben boven het menu is Fotoalbum. In de HTML: mijn fotoalbum
Tussen deze 2 regels gaan we de tekst typen. Dan komt het er zo uit te zien:
Fotoalbum
Nu gaat dit aan de bovenkant van de site komen en gaan we de tekst dezelfde kleur geven als de knoppen van het menu. Hiervoor moet de tekst opgemaakt gaan worden: Dit doen we zo: ( Zie volgende pagina. )
37 Whisper380-computerhulp.net
Fotoalbum
Nu gaan we in CSS het volgende stukje typen om de tekst daadwerkelijk op te maken en te positioneren boven het menu. h1{ font-family: arial; text-decoration: none; font-size: 25px; font-weight: bold; color: #42C142; position: relative; display: inline; } Maar nu moeten we de div nog positioneren. Typ daarom ook in het CSS bestand het volgende: #logo{ Margin-left: 475px; margin-top: 25px; } In uw browser ziet de site er nu zo uit:
Nu gaan we ons logo er nog naast zetten. Dit logo is een plaatje. In onze map waar de bestanden allemaal in zitten (website-fotoalbum) Maken we een nieuwe map aan genaamd afbeeldingen. 38 Whisper380-computerhulp.net
Hierin zet ik ons logo neer en die ga ik aan roepen in de HTML. In de HTML boven
typ je het volgende: In de CSS typt u dit er nog bij: img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; } Resultaat:
In chrome en Firefox ziet het er iets anders uit:
39 Whisper380-computerhulp.net
Hier heb je nog een klein stukje ruimte boven de het logo. Het HTML bestand op dit moment ziet er zo uit: mijn fotoalbum
Ons logo staat nu boven de site met daarachter foto album.
42 Whisper380-computerhulp.net
Tekst toevoegen op de homepage: Omdat we op de home pagina bezig zijn moeten we de bezoekers even welkom zeggen tegen de bezoekers. Dit gaan we op de zelfde manier doen, als het stukje Fotoalbum. Eerst maken we een nieuwe Div aan. Onder de eerste keer
onder maken we de div aan genaamd welkom:
Hiertussen typen we de tekst weer:
Welkom op deze site! Hier vind u de fotoalbums van: (Bijvoorbeeld naam van feest, huisdieren, etc.) Deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)
Nu gaan we deze 3 regels een eigen op maak geven:
Welkom op deze site!
Hier vind u de fotoalbums van: (Bijvoorbeeld naam van feest, huisdieren, etc.)
Deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)
Uiteindelijk moet de HTML er zo uitzien: ( Zie volgende pagina)
Hier vind u de fotoalbums van: Bijvoorbeeld naam van feest, huisdieren, etc.)
Deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)
In de browser ziet het er nu zo uit:
44 Whisper380-computerhulp.net
Uitleg: : dit betekend een enter, oftewel ga verder op een nieuwe regel. Als een regels te lang is en je zet er dit tussen, dan begint de tekst na dit op een andere regel. Nu gaan we de opmaak regelen in CSS. Voeg het volgende toe aan de CSS: Eerst gaan we de DIV positioneren: #welkom{ margin-top: 20%; margin-left:150px; position: absolute; text-align: center; } Nu gaan we de welkom ’s boodschap positioneren: p.welkomsboodschap { color: #FF0000; font-family: arial; font-size: 20px; font-weight: bold; } Nu gaan we het stukje over de albums positioneren: p.vind { color: #0000FF; font-family: arial; font-size: 15px; font-weight: bold; } Nu gaan we het stukje over de maker positioneren: p.deze { color: #FFD42A; font-family: arial; font-size: 25px; font-weight: bold; } Uitleg: text-align: Dit geeft aan hoe de tekst uitgelijnd moet worden. Dit kan zijn left (links), right (rechts), of center ( in het midden). Je CSS bestand ziet er nu zo uit: ( Zie volgende pagina)
De fotoalbums vullen: Nu hebben we de simpele Home pagina af. Nu moeten we alleen nog een album maken met Afbeeldingen.
Voorbereiding: Stap 1: Maak een map genaamd: foto, aan in de map website-fotoalbum. Maak daarin een map aan ( Die bijvoorbeeld: Naam van een feestje, evenement, ect. Heet.) Stap 2: Doe de foto’s die u wilt gebruiken voor het album daarin. Stap 3: Open album1.html in notepad++ Stap4: Kopieer alles van Index. html naar Album1.html. Stap 5: Haal het volgende weg in Album1:
Welkom op deze site!
Hier vind u de fotoalbums van: Bijvoorbeeld naam van feest, huisdieren, etc.)
Deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)
Stap 6: Maak een map aan in Website-fotoalbum genaamd icoon. Stap 7: Verklein de plaatjes in uw gemaakte map foto > naam album zitten naar 150px bij 150px. ( uitleg: Ga naar de volgende site: www.faststone.org/FSResizerDownload.htm Klik op Download onder exe. Installeer daarna het programma. Open het programma: Dan krijgt u dit scherm:
48 Whisper380-computerhulp.net
Ga naar de map van Website-fotoalbum (C:\Users(gebruikers)\(uw gebruikersnaam)\Desktop\website-fotoalbum\foto\(naam album).(zwarte pijl) Klik op Add all. (rode pijl) Klik op advanced options. (groene pijl) Onder het tabje resize:
Klik op pick a standard size. (gele pijl) Kies 120x90 Klik dan op ok. (Bruine pijl)
49 Whisper380-computerhulp.net
Bij output selecteerd u de map icoon in de map website-fotoalbum. (roze pijl) Klik dan op convert. (Blauwe pijl) Klik in dit scherm op done als hij klaar is: (oranje pijl)
Sluit het programma. Stap 8: Nu kunnen we gaan beginnen.
50 Whisper380-computerhulp.net
Het album maken: HTML: Eerst gaan we in de HTML een Div aanmaken genaamd img. (images)
Dit zet u neer tussen
en
onder
Tussen
en
Zet u het volgende neer: Dan komt het er zo uit te zien:
Doe dit voor alle foto’s in de map icoon! Dan ziet de HTML er zo uit als u klaar bent met alle foto’s (Ik gebruik er 9 in dit voorbeeld). mijn fotoalbum
CSS: Eerst gaan we de div img positioneren: #img { padding-top: 75px; margin: 2px; margin-left: 50px; height: auto; width: auto; float: left; text-align: center; } Uitleg: Float: Dit is een manier om een element (afbeelding/tekst) te kunnen uitlijnen ten opzichten van een ander element. Dan gaan we de plaatjes die in de div img zitten positioneren: #img img { display: inline; margin: 15px; border: 1px solid #000000; } Dan gaan we de instellen wat er gebeurd als je over een afbeelding heen gaat. In ons voorbeeld komt er een blauwe rand omheen. #img a:hover img { border: 1px solid #0000ff; }
Onze CSS ziet er nu zo uit: ( Zie volgende pagina )
De laatste dingetjes om het net even wat mooier te maken: De titel van het album aan passen: Omdat we een album hebben gemaakt met bijvoorbeeld honden (zoals in het voorbeeld) geven we deze pagina de titel Honden. Daarvoor pas je dit stukje aan van: mijn fotoalbum Naar: Onze honden
Het menu nog aanpassen: Het menu staat er nu als volgt:
Menu aanpassen op de site: Op de site word nog steeds album 1 weergegeven omdat het nu over “onze honden” gaat veranderen we dat naar Onze honden. Hiervoor pas je het volgende aan. Van:
Het menu is nu te breed. Dus moet je de marges wat aanpassen. In de CSS ga je naar dit stukje: #menu{ margin-left: 465px; margin-top: 25px; position: relative; } En dit pas je aan naar dit: #menu{ margin-left: 405px; margin-top: 25px; position: relative; } ( Let op elke keer als je de tekst in het menu aanpast moet je het menu herpositioneren. ) Dan is het resultaat:
64 Whisper380-computerhulp.net
Op de “onze honden” pagina een stukje tekst toevoegen: Om de site wat mooier te maken voeg je nog een stukje tekst toe boven de foto’s dit doe je als volgt: Achter dit stukje HTML: Onze honden
Omdat we al eerder tekst hebben opgemaakt pakken we een bestaande opmaak.
Hier vind u de foto’s van mijn honden:
In de CSS voegen we nu dit toe om de tekst op te maken: p.hier { color: #0000FF; font-family: arial; font-size: 15px; font-weight: bold; } En voegen we dit toe om de div te positioneren: #onderwerp{ text-align: center; margin-top: 75px; } Resultaat:
66 Whisper380-computerhulp.net
De grote afbeeldingen weergeven: Voor de gene die goed hebben opgelet. Als je op een plaatje drukt krijg je dit te zien:
Dit komt omdat de plaatjes doorlinken naar een andere pagina. Namelijk: hond (1) + big.html Open een nieuw bestand in Notepad++ . Dit kan u doen door op ctrl+N te drukken. Noem het bestand (in geval van het voorbeeld): hond (1) big.html
LET OP! De afbeeldingen die u met uw digitale camera hebt genomen zijn vaak heel groot ( ongeveer 3 mb per foto.) Als je een website host bij een bedrijf kan het beteken dat daar een verkeerslimiet (dataverkeer) geld. Meestal is dat rond de 2-3 gb. Als iedere bezoeker alle foto’s kijkt (in mijn voorbeeld 9) dan vergt dat per bezoeker 9x3=27 mb aan dataverkeer. Stel je hebt een datalimiet op je host zitten van 2gb = 2048 mb. 2048/27=ongeveer 76 bezoekers en dan ben je door je limiet heen ( in mijn voorbeeld ). Het is dus aan te raden je foto’s te verkleinen met de Faststone Photo Resizer die we al eerder hebben gebruikt. Pak dan het formaat: 1024 bij 600 te gebruiken. Dan zijn ze niet te klein en niet te groot.
Stap 1: Verklein de foto’s en gooi ze in een andere map dan het origineel.
67 Whisper380-computerhulp.net
Stap 2: Vervang de foto’s in de map foto’s > naam map met de verkleinde foto’s.( Deze folder heeft u aangemaakt in de map website-fotoalbum. )
Stap 3: Ga naar Notepad++ en ga naar het nieuwe bestand.
Stap 4: Typ hier de volgende code: (naam)
Stap 5: Noem het bestand zoals de link van de foto. Voorbeeld:
Onze honden
Dus dan sla je het bestand op als Hond (1) big.html En zorg ervoor dat er bij save as type hyper tekst markup language file staat!
Stap 6: Refresh de album pagina.
Stap 7: Klik op de foto.
Stap 8: Resultaat:
68 Whisper380-computerhulp.net
Nu heeft u de foto in het groot.
69 Whisper380-computerhulp.net
De CSS goed leesbaar maken zodat u alles makkelijk terug kan vinden: Om later alles makkelijk terug te vinden kan u commentaar toevoegen aan de CSS dat doet u door middel van /* (commentaar) */ Als je dat hebt toegevoegd kan je CSS er zo uit zien: *{ margin: 0px; padding: 0px; } /* menu gedrag */ a:link {color:#0000ff;} /* unvisited link */ a:visited {color:#ff0000;} /* visited link */ a:hover {color:#ffAA00;} /* mouse over link */ a:active {color:#000000;} /* selected link */ /* einde menu gedrag */ /* menu */ #navbar{ list-style-type: none; text-decoration: none; position: absolute; } #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; background-color: #42C142; } #menu{ margin-left: 405px; margin-top: 25px; position: relative; } /* einde menu */ /* alles centreren */ #alles{ margin: 0px auto; width: 760px; text-align: left; 70 Whisper380-computerhulp.net
} /* einde ales centreren */ /* body eigenschappen (hele website) */ body{ text-align: center; background-color: #C3AE7F; } /* einde body eigenschappen */ /* tekst: fotoalbum */ h1{ font-family: arial; text-decoration: none; font-size: 25px; font-weight: bold; color: #42C142; position: relative; display: inline; } /* einde tekst */ /* div logo */ #logo{ Margin-left: 475px; margin-top: 25px; } /* logo afbeelding */ img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; } /* einde logo afbeelding */ /* einde logo */ /* div id welkom */ #welkom{ margin-top: 20%; margin-left:150px; position: absolute; text-align: center; } /* einde div id welkom */ /* tekst class welkomsboodschap */ p.welkomsboodschap { color: #FF0000; font-family: arial; font-size: 20px; font-weight: bold; 71 Whisper380-computerhulp.net
} /* einde tekst class welkomsboodschap */ /* tekst class vind */ p.vind { color: #0000FF; font-family: arial; font-size: 15px; font-weight: bold; } /* einde tekst class vind */ /* tekst class deze */ p.deze { color: #FFD42A; font-family: arial; font-size: 25px; font-weight: bold; } /* einde tekst class deze */ /* begin foto album */ /* div id img */ #img { padding-top: 75px; margin: 2px; margin-left: 50px; height: auto; width: auto; float: left; text-align: center; } /* einde div id img */ /* afbeeldingen in div img */ #img img { display: inline; margin: 15px; border: 1px solid #000000; } /* einde afbeeldingen in div img */ /* afbeelding opmaak wanneer je er met de muis overheen gaat */ #img a:hover img { border: 1px solid #0000ff; } /* einde afbeelding opmaak wanneer je er met de muis overheen gaat */ /* einde foto album */ /* div omschrijving */ #omschrijving 72 Whisper380-computerhulp.net
{ text-align: center; font-weight: normal; width: auto; margin: 2px; } /* einde div omschrijving */ /* tekst class hier */ p.hier { color: #0000FF; font-family: arial; font-size: 15px; font-weight: bold; } /* einde tekst class hier */ /* div id onderwerp */ #onderwerp{ text-align: center; margin-top: 75px; } /* einde div id onderwerp */ Door commentaar toe te voegen kun je makkelijker dingen terug vinden als u er een tijdje niet aan heeft gewerkt.
73 Whisper380-computerhulp.net
Nawoord: Nu zijn we aan het einde gekomen van deze grote handleiding. Ik hoop dat u het leuk vond en het allemaal goed kon volgen. Als u vragen of problemen tegenkomt aarzel dan niet om naar het forum te komen, dan kunnen ik of andere leden u helpen met het probleem of uw vraag. Ik hoop dat u na het volgen van deze handleiding zin heeft gekregen om ook een eigen website te gaan maken. (De website in het voorbeeld komt niet online en is ook niet als voorbeeld te downloaden.) Ik hoop dat u veel heeft geleerd en hoop dat mensen hier ook echt iets mee kunnen. De code’s die zijn gebruikt kunt u aanpassen om uw eigen website ook echt een eigen “look” te geven. Met vriendelijke groet, Whisper380
In de CSS typt u dit er nog bij: img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; } Resultaat:.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
/(naamfoto).jpg)