Nieuwe cursus HTML+

Vragen/antwoorden betreffende het maken van je eigen website.

Jobe
Lid geworden op: 09 mar 2006, 19:43

27 nov 2006, 19:12

Beste,
Er is een nieuwe gratis HTML cursus online. Er zit geen enkele commerciele doelstelling aan vast.
Het betreft een UNIEKE cursus in zijn soort

De cursus richt zich vooral naar de beginnende webdesigner. Ook iets gevorderden kunnen er zeker iets van opsteken.

Wat is UNIEK?
Iedere HTML cursus richt zich vooral en quasi alleen op HTML. Voor de layout (lettertype, kleuren,...) worden eigenschappen opgenomen in de HTML tags.
Voorts wordt vooral tabellen behandeld als de manier om de layout van een webpagina te verzorgen.

Met de introductie van HTML 4.0, hebben de officiele webinstanties aangegeven dat tabellen liever niet meer gebruikt worden voor de layout van webpagina's.

Deze cursus introduceert tergelijkertijd de beginselen van HTML en CSS.
HTML voor de inhoud van een site....CSS voor de layout.

De cursus heeft in de inleiding een voorbeeld van een webpagina die je kunt maken op het eind van de cursus.

Overtuig jezelf van de combinatie van HTML en CSS. De enige juiste voorgeschreven weg.


link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

Jobe
Lid geworden op: 09 mar 2006, 19:43

08 dec 2006, 21:51

Beste,

Dankzij een aantal lezers zijn een aantal typfouten in de cursus verbeterd.
Mijn oprechte dank

Tevens krijg ik regelmatig vragen, van hoe je tekst kunt selecteren in een pdf bestand.
Als je tekst kunt selecteren, kun je ook eenvoudig kopiëren en plakken.

Een kleine tutorial is toegevoegd op de site die uitlegd hoe je dit kunt doen.

link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

Jobe
Lid geworden op: 09 mar 2006, 19:43

09 dec 2006, 20:15

Op de pagina "After Party" is er een tutorial toegevoegd, van hoe je een horizontaal menu maakt dmv HTML en CSS.

Gegroet

Johan
link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

Jobe
Lid geworden op: 09 mar 2006, 19:43

11 dec 2006, 23:06

Beste,

Er is op de pagina "After Party" een nieuwe tutorial toegevoegd betreffende het aanmaken van een e-mail formulier.

Dit veronderstelt wel dat je hosting bedrijf PHP ondersteunt.

Misschien een oefening voor de iets meer gevorderden :)

PS: bij deze wil ik de moderators oprecht danken voor de Sticky vermelding.
link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

gegroet

Johan

Jobe
Lid geworden op: 09 mar 2006, 19:43

14 dec 2006, 20:34

Het wordt hier een eenzaam schrijven :lol:

Ik heb op de cursus site een nieuwe tutroial toegevoegd.

Titel: Hoe voeg ik een foto-album toe aan mijn website

Ga naarlink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen , klik op de pagina 'After PArty' (rechts-boven).
Scroll naar beneden...en daar heb je hem.

Als je het resultaat van de tutorial wil zien...klik danlink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen
gegroet

Johan

Jobe
Lid geworden op: 09 mar 2006, 19:43

17 dec 2006, 22:16

@Montana

Hartelijk dank voor het compliment.
Als er verder suggesties, ideeen, opmerkingen,... zijn. Gelieve maar te laten weten.
Zou wordt er iedere webdsigner een stukje wijzer van (althans dat hoop ik)

gegroet

Johan

Jobe
Lid geworden op: 09 mar 2006, 19:43

17 dec 2006, 22:50

Beste,

Ik heb terug een aantal zaken toegevoegd op de site:

1)Hoe maak je een fotoalbum?

2)Ik heb een aantal gratis websites toegevoegd. Deze zijn legaal over te nemen, en te copieeren. Je kunt er ook de HTML en CSS code gratis downloaden.

Toetje:
Bij het maken van de webpagina 'Gratis Websites' heb ik gebruik gemaakt van Dreamweaver. Als je hier klikt, zie je hoe DReamwever de website weergeeft. Slaat nergens op. Dus ook het dure Dramweaver is geen magische oplossing voor het maken van websites. DE 'fond' blijft de kennis van HTML en CSS.

Jobe
Lid geworden op: 09 mar 2006, 19:43

23 dec 2006, 17:54

Vele mensen die websites maken, willen foto's toevoegen.
Dit betekent vaak dat foto's moeten aangepast worden om te passen in de webpagina.
De meest frequent gevraagde acties zijn:
a)Een stuk uit een foto snijden
b)Foto's verkleinen zonder verlies in kwaliteit.

Het meest bekende foto bewerkingsprogramma is PhotoShop. De basis versie van dit programma kost +/- 80 Euro (Idee voor een kerstgeschenk :):)).
Er bestaan echter ook gratis fotobewerkingsprogramma's. De meest bekende is The Gimp. Echter deze is behoorlijk complex en zwaar.

Een veel kleiner programma is PhotoFiltre. Tevens ook in het Nederlands beschikbaar.
Ik heb aan mijn site een tutorial toegevoegd die stap voor stap beschrijft hoe je dit programma installeert, alsook:
a)Het snijden van een stuk uit een afbeelding
b)Het verkleinen van foto's
c)Het toevoegen van een tekst aan je foto.

De tutorial is te vinden op de Pagina 'After Party' (Tutorial VI), op de
link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

Jobe
Lid geworden op: 09 mar 2006, 19:43

26 dec 2006, 14:05

Op de websitelink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen
kun je nu een aantal gratis Website templates vinden.

Maw je krijgt een volledige website gratis, incl. de HTML en CSS code.

Je kunt vervolgens ook zelf deze templates (websites) aanpassen volgesn jou behoefte.
Een ideale oefening als je de cursus HTML/CSS hebt doornomen.
:wink: :idea:

Jobe
Lid geworden op: 09 mar 2006, 19:43

01 jan 2007, 23:08

Beste,

Om je nog meer te overuigen van de mogelijkheden van HTML en CSS, heb ik delink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen gemaakt.

Als je met je muis over de foto's gaat...vergroten die automatisch.
Geen Javascript..geen flash...alleen HTML en CSS.

Voor iedere foto heb je maar 1 formaat nodig. De verkleinde versie maakt HTML automatisch aan.

Ik schrijf er later wel een tutorial over...mocht je de CSS code in je eigen site willen gebruiken.

gg...en een mega 2007 gewenst. Gezond en wel met leuke sites.

J

Jobe
Lid geworden op: 09 mar 2006, 19:43

07 jan 2007, 22:22

Beste,

Regelmatig wordt de vraag gesteld om foto-albums toe te voegen aan een website.
Ik heb reeds op delink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen de mogelijkheden van JAlbum besproken.

Nu heb ik zelf een foto-album toegevoegd op basis van JavaScript.

Het album kun jelink verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen zien

Voor de bijgaande tutorial: klik link verwijderd vanwege redirekt dorverbinding naar onveilige ..........
door verhaegen

Jobe
Lid geworden op: 09 mar 2006, 19:43

09 jan 2007, 22:08

Beste,

Ik wou al dat niemand die vraag stelde :):)

Ik vind het begot momenteel ook niet :)

gg
Johan

Jobe
Lid geworden op: 09 mar 2006, 19:43

10 jan 2007, 07:38

Beste,

Ik weet niet hoe bedreven je bent met CSS, maar afhankelijk van waar je foto komt op de website, moet je een class PZ3-l of PZ3-r toekennen aan de kleine afbeelding

In mijn voorbeeld zijn alle afbeeldingen uitgerust met PZ3-l (m.a.w een float:left).Probeer even een PZ3-r toe te kennen aan je afbeedling.

Code: Selecteer alles

.PZ3-l { float:left; margin-right:-10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
De positionnering van de vergrootte afbeelding wordt bepaald door de margin waarden in:

Code: Selecteer alles

.PZ3zoom a:hover { position:absolute;
  z-index:999; padding:0; background:#000000; 
	cursor:default; height:auto; width:auto;
	overflow:visible; border:1px solid #000;
	margin:-1px 0 0 -1px; }
 [class~=PZ3-r]>a:hover { margin:-1px -1px 0 0; }
Probeer maar eens met de margin waarden te "spelen"

PS: Bedankt voor het compliment. Ik ben ook begonnen van 0...maar met veel overgave, zweet, fustratie en studie...kom je toch ergens:)
Maar geloof me....er zijn er heel wat die mooiere juweeltjes afgeven :)

Ik kan alleen maar blijven herhalen, dat een goede kennis van HTML en CSS onontbeerlijk is om uiteindelijk te weten en te begrijpen wat je aan het doen bent.

Het is pas als je weet wat je doet...dat je iets kunt maken naar je zin.

montana
Lid geworden op: 01 nov 2005, 10:31
Locatie: Westland

10 jan 2007, 10:00

Goedemorgen Jobe,
ik mag wel zeggen dat ik er aardig in thuis ben :)
Ik heb zelf een website in HTML en ik maak gebruik van CSS.

In het head gedeelte (zie onderstaande) waar jij van spreekt ben ik ook geweest maar daar kwam ik niet verder;
.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
[class~=PZ3-r] { position:relative; }

In onderstaand gedeelte kwam ik ook niet veel verder;
------------------------------------
.PZ3zoom { border:1px solid #000000; }
.PZ3zoom a,.PZ3zoom a:visited { display:block;
padding:0; overflow:hidden; text-decoration:none;
height:100%; width:100%; }
[class~=PZ3-r]>a { right:0; }
.PZ3zoom a:hover { position:absolute;
z-index:999; padding:0; background:none;
cursor:default; height:auto; width:auto;
overflow:visible; border:1px solid #000000;
margin:-1px 0 0 -1px; }
[class~=PZ3-r]>a:hover { margin:-1px -1px 0 0; }
--------------------------------
Het probleem verschoof zich eigenlijk van rechts naar links :D
Ik ben toen in het body-gedeelte gaan zoeken en daar heb ik het volgende ontdekt.
Ik heb 6 foto's.
Als ik in het class-gedeelte de afbeeldingen zet in 2 x PZ3-l, dan 2 x PZ3-r, dan weer 2 x PZ3-l, dan valt er geen enkele afbeeldingen buiten het scherm :D
mvg montana

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

10 jan 2007, 23:01

Hallo,

.PZ3zoom a:hover { position:absolute;
z-index:999; padding:0; background:#000000;
cursor:default; height:auto; width:auto;
overflow:visible; border:1px solid #000;
margin:-1px 0 0 -1px;
top:100px; left:200px;}
[class~=PZ3-r]>a:hover { margin:-1px -1px 0 0; }

Je moet de vergrootte afbeelding/foto vastzetten d.m.v. top en left aan toe te voegen en een waarde te geven (zie vb. de toegevoegde rode tekst hierboven)

mvg,
Coderunner