Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum:

Maat: px
Weergave met pagina beginnen:

Download "Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011"

Transcriptie

1 Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum:

2 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 Het begin:... 6 De site wat inhoud geven: Een menu maken 1/3: Uitleg Een menu maken 2/3: Uitleg Een menu maken 3/ De site er goed uit laten zien in verschillende resoluties De achtergrond veranderen: Site opmaken: Een logo toevoegen: Tekst toevoegen op de homepage: De fotoalbums vullen: Voorbereiding: Stap 1: Stap 2: Stap 3: Stap4: Stap 5: Stap 6: Stap 7:

3 Stap 8: Het album maken: HTML: CSS: Uitleg: Het resultaat: Een omschrijving toevoegen aan de foto s HTML: CSS: Resultaat: De laatste dingetjes om het net even wat mooier te maken: De titel van het album aan passen: Het menu nog aanpassen: Menu aanpassen op de site: Op de onze honden pagina een stukje tekst toevoegen: De grote afbeeldingen weergeven: LET OP! Stap 1: Stap 2: Stap 3: Stap 4: Stap 5: Stap 6: Stap 7: Stap 8: De CSS goed leesbaar maken zodat u alles makkelijk terug kan vinden: Nawoord:

4 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: <Head>, <Body> en <Html>. 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

5 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: Firefox: Firefox kunt u hier downloaden: Chrome: Google Chrome kunt u hier downloaden: ource=nl-ha-emea-nl-bk&utm_medium=ha Safari: Safari kunt u hier downloaden: Notepad++: Notepad++ kunt u hier downloaden: (kies dan voor: current version) 5

6 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) <html> <head> </head> <body> </body> </html> U scherm ziet er nu zo uit: 6

7 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

8 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

9 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

10 Het enige wat we nu nog moeten doen is op save drukken. Het begin van de pagina is gemaakt. 10

11 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) ) <title> mijn fotoalbum</title>. Uw scherm ziet er dan zo uit: 11

12 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

13 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

14 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 <body> staan en druk op enter. Er word een lege regel toegevoegd typ hier nu het volgende: <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> In Notepad++ ziet dit er zo uit: (z.v.p.) 14

15 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. <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> Uitleg De <ul> tag: Dit betekend dat we met een ongeordende lijst te maken hebben. Dit houdt in dat elk item begint met een klein zwart bolletje. De <li> tag: Dit betekend dat dit een item is in de ongeordende lijst. <a> tag: Deze ziet u niet gelijk maar deze is er wel, de volgende 2 dingen hebben er mee te maken in dit voorbeeld: <a href: Dit betekend dat je met een link te maken hebt. Dit houd in dat als je op de tekst drukt je op een andere pagina terecht komt. 15

16 <a style: Dit is de opmaak van het <a> tag (De <a> tag is voor links naar een (andere) pagina) Tussen <a> en </a> staat nog tekst (bijvoorbeeld: Home): Dit word de tekst die zichtbaar is op de site. Dan is het menu ook aangemaakt maar nu wil u weten hoe dit eruit ziet? Dit ziet er zo uit: Nu gaan we het menu opmaken met CSS. 16

17 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

18 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

19 Nu het bestand is opgeslagen gaan we verder. In het html bestand hadden we hiermee het menu gemaakt: <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> Zoals je ziet staat er aan het begin van dit stukje het volgende: <ul id="navbar"> 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: <html> <head> <title> mijn fotoalbum</title> </head> <body> <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we deze regel toevoegen aan het HTML script. <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> Deze regel zet je onder de regel: title. 19

20 Je HTML script ziet er dan als volgt uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> (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

21 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

22 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

23 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

24 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

25 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

26 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: #42C

27 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

28 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: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we boven <u lid= navbar > het volgende typen: <div id= alles > En onder </ul> typen we: En dan komt de HTML er zo uit te zien: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu moeten we in de CSS het volgende typen: 28

29 #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

30 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

31 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

32 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) 32

33 *{ 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{ 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: 465px; margin-top: 25px; position: relative; #alles{ margin: 0px auto; width: 760px; text-align: left; body{ text-align: center; 33

34 Maar nu werkt het nog niet omdat we nog wat toe moeten voegen in de HTML: onze HTML code ziet er nu zo uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we onder <div id="alles"> het volgende neer zetten: <div id="menu"> En onder </ul> zetten we dit neer: Dan ziet onze HTML code er zo uit: (Zie volgende pagina) 34

35 <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum1.css"/> </head> <body> <div id="alles"> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu is de site te zien in alle resoluties zonder dat alles door elkaar gaat schuiven. 35

36 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

37 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: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum1.css"/> </head> <body> <div id="alles"> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Voegen we onder <div id="alles"> het volgende toe: <div id="logo"> Tussen deze 2 regels gaan we de tekst typen. Dan komt het er zo uit te zien: <div id="logo"> 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. ) <div id="logo"> 37

38 <h1>fotoalbum</h1> 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

39 Hierin zet ik ons logo neer en die ga ik aan roepen in de HTML. In de HTML boven <div id="logo"> typ je het volgende: <img class="whisper" src="afbeeldingen/logo.jpg"/> 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

40 Hier heb je nog een klein stukje ruimte boven de het logo. Het HTML bestand op dit moment ziet er zo uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <img class="whisper" src="afbeeldingen/logo.jpg"/> <div id="logo"> <h1>fotoalbum</h1> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> 40

41 Het CSS bestand op dit moment ziet er zo uit: *{ 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{ 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: 465px; margin-top: 25px; position: relative; #alles{ margin: 0px auto; width: 760px; text-align: left; body{ text-align: center; background-color: #C3AE7F; h1{ font-family: arial; 41

42 text-decoration: none; font-size: 25px; font-weight: bold; color: #42C142; position: relative; display: inline; #logo{ Margin-left: 475px; margin-top: 25px; img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; Ons logo staat nu boven de site met daarachter foto album. 42

43 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 </ul> maken we de div aan genaamd welkom: <div id="welkom"> Hiertussen typen we de tekst weer: <div id="welkom"> 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: <div id="welkom"> <p class="welkomsboodschap">welkom op deze site!</p> <p class="vind">hier vind u de fotoalbums van: (Bijvoorbeeld naam van feest, huisdieren, etc.)</p> <p class="deze">deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)</p> Uiteindelijk moet de HTML er zo uitzien: ( Zie volgende pagina) 43

44 <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <img class="whisper" src="afbeeldingen/logo.jpg"/> <div id="logo"> <h1>fotoalbum</h1> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> <div id="welkom"> <p class="welkomsboodschap">welkom op deze site!</p><br><br> <p class="vind">hier vind u de fotoalbums van:<br>bijvoorbeeld naam van feest, huisdieren, etc.)</p><br> <p class="deze">deze foto albums zijn gemaakt door:<br>(bijvoorbeeld Whisper380)</p> </body> </html> In de browser ziet het er nu zo uit: 44

45 Uitleg: <br>: 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) 45

Websitecursus deel 2 CSS

Websitecursus deel 2 CSS Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Inhalen les 7 (versie B)

Inhalen les 7 (versie B) Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

HTML en CSS gevorderd

HTML en CSS gevorderd HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke

Nadere informatie

Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?

Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand? HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes

Nadere informatie

Internet Standaarden HC4

Internet Standaarden HC4 Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor

Nadere informatie

LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.

LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting. LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress

Nadere informatie

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders.

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. Stappenplan Website de Palster Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. 1 Inhoudsopgave: Titel bladzijde Aanmelden op de website 3 Foto s in het fotoboek

Nadere informatie

XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters

XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het

Nadere informatie

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3 Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm

Nadere informatie

Welkom bij mijn website tutorial (Deel 2)

Welkom bij mijn website tutorial (Deel 2) Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014

Nadere informatie

Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.

Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen

Nadere informatie

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS Handleiding CMS 1 Inhoudsopgave 1. Inloggen... 3 2. Het CMS... 3 3. Websitecontent... 4 3.1 Een nieuwe pagina toevoegen... 4 3.2 Een pagina wijzigen... 4 3.3 Een pagina verwijderen... 5 4. De WYSIWYG editor...

Nadere informatie

Extra: Hoe u uw website met HTML kunt verbeteren

Extra: Hoe u uw website met HTML kunt verbeteren Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Handleiding www.chiromeisjeszwaneven.be (v2).

Handleiding www.chiromeisjeszwaneven.be (v2). Handleiding www.chiromeisjeszwaneven.be (v2). Agenda Ga naar www.chiromeisjeszwaneven.be/admin en kies voor agenda. Log in met je gebruikersgegevens van het admingedeelte van de agenda. Pagina na het inloggen:

Nadere informatie

Handleiding ESS na de upgrade People Inc. versie 3.5.0

Handleiding ESS na de upgrade People Inc. versie 3.5.0 Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen

Nadere informatie

Welk programma gebruiken we? Om onze foto s te verkleinen gebruiken we het programma IrfanView. Het icoontje van IrfanView ziet er als volgt uit:

Welk programma gebruiken we? Om onze foto s te verkleinen gebruiken we het programma IrfanView. Het icoontje van IrfanView ziet er als volgt uit: Inleiding Om het laden op de website vlot te laten verlopen zijn er enkele afspraken gemaakt m.b.t. tot het formaat van een foto. Het formaat van een foto gaan we MAXIMUM instellen op 640 * 480 pixels.

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

Handleiding onderhoud basisschoolwebsite. Erik Zeeuwen - Versie: 1.2 Februari 2006

Handleiding onderhoud basisschoolwebsite. Erik Zeeuwen - Versie: 1.2 Februari 2006 1 Beste webmeester, Voor u ligt een korte handleiding voor het onderhouden van uw eigen website. Dit onderhoud gaat heel eenvoudig door het aanmaken van documenten in Microsoft Word. Er wordt dan ook verondersteld

Nadere informatie

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: 1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina

Nadere informatie

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

I. Vorming 1 (12/04/2012) 1. Werken met een tekstverwerker p2 2. Mappenstructuur op een computer p6 3. Externe USB- stick gebruiken p10

I. Vorming 1 (12/04/2012) 1. Werken met een tekstverwerker p2 2. Mappenstructuur op een computer p6 3. Externe USB- stick gebruiken p10 INHOUDSTAFEL De inhoudstafel blijft in eerste instantie nog beperkt. Deze zal gestaag aangroeien en zal pas compleet zijn na de laatste vormingssessie. Het doel is om in de eerste sessie, samen met de

Nadere informatie

Template maken voor Webshops van FreeWebShop

Template maken voor Webshops van FreeWebShop Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info De uitdaging. Een kennis die een site wil hebben, een webshop. Het grafisch ontwerp is er al. Voor

Nadere informatie

HAND- OUT. https://www.uwdomein.com/qzadmin. password: statistieken https://qwikstats.suares.com/www.uwdomein.com. support http://help.suares.

HAND- OUT. https://www.uwdomein.com/qzadmin. password: statistieken https://qwikstats.suares.com/www.uwdomein.com. support http://help.suares. HAND- OUT website: inloggen: login name: password: http://www.uwdomein.com https://www.uwdomein.com/qzadmin statistieken https://qwikstats.suares.com/www.uwdomein.com support http://help.suares.nl/ Kuki+Ko

Nadere informatie

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden

Nadere informatie

Handleiding installeren en wijzigen emailhandtekening

Handleiding installeren en wijzigen emailhandtekening Handleiding installeren en wijzigen emailhandtekening Inleiding Met behulp van een script kun je automatisch een handtekening plaatsen onder al je emailberichten. Je bericht komt er dan zo uit te zien:

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress V 1.0 Door Inhoud Inloggen op de website... 3 Het Dashboard... 4 Berichten... 5 Berichten aanmaken... 5 Berichten bewerken... 6 Pagina's... 7 Pagina's aanmaken... 7 Pagina's bewerken...

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

PDF XCHANGE EDITOR Waarom PDF XHCANGE Editor?

PDF XCHANGE EDITOR Waarom PDF XHCANGE Editor? PDF XCHANGE EDITOR PDF XHCANGE editor is een programma om PDF bestanden te lezen en te bewerken. Deze handleiding is geschreven voor versie 5.5 van PDF XCHANGE editor. Als je een andere versie gebruikt

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: dit is scheve tekst

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: <i>dit is scheve tekst</i> Wat is HTML? HTML staat voor HyperText Markup Language. Een HTML tekst bestaat uit zogenaamde platte tekst (ook wel de eerste 128 tekens van ASCII genoemd). In tegenstelling tot bijvoorbeeld tekstverwerker

Nadere informatie

http://blog.seniorennet.be/seniorennet_blogs_tips_trucs Inhoud van dit lesje: 1.Plaatsen van foto of afbeelding van uw harde schijf.

http://blog.seniorennet.be/seniorennet_blogs_tips_trucs Inhoud van dit lesje: 1.Plaatsen van foto of afbeelding van uw harde schijf. Op het blog SeniorenNet Blogs Tips en Trucs vind je in de linkerkolom verschillende mogelijkheden voor Aanmaken van een Internetadres (URL) en Foto s Verkleinen met uitleg. http://blog.seniorennet.be/seniorennet_blogs_tips_trucs

Nadere informatie

1. Gebruik van de online tekstverwerker op de schoolwebsite.

1. Gebruik van de online tekstverwerker op de schoolwebsite. 1. Gebruik van de online tekstverwerker op de schoolwebsite. Stap 1: aanmelden op de schoolwebsite Gebruik je gebruikersnaam zoals in SchoolOnline. Stap 2: ga naar jouw leerjaar in het menu bovenaan. Klik

Nadere informatie

Stap 1 Je eigen website maken... 1. Stap 2 Je template invullen... 9. Stap 3 Wat kunnen we met de inhoud?... 19

Stap 1 Je eigen website maken... 1. Stap 2 Je template invullen... 9. Stap 3 Wat kunnen we met de inhoud?... 19 INHOUDSOPGAVE Inhoudsopgave Stap 1 Je eigen website maken... 1 De eerste stap... 1 Kompozer downloaden... 1 Kompozer openen... 1 Een nieuwe pagina beginnen... 1 Je eerste tekst schrijven... 2 Je eerste

Nadere informatie

Dennis Wagenaar 19-04-10 v 1.0

Dennis Wagenaar 19-04-10 v 1.0 Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5

Nadere informatie

programmeren in HTML (5) CSS (3) JavaScript

programmeren in HTML (5) CSS (3) JavaScript programmeren in HTML (5) CSS (3) JavaScript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie remie.woudt@gmail.com Woudt Inhoudsopgave 1 HTML...1 1.1 Wat heb je nodig?...1

Nadere informatie