Nieuwe cursus HTML+ — Forum

Jobe Startte dit onderwerp 27 nov 2006, 19:12 62 berichten

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 Startte dit onderwerp 08 dec 2006, 21:51 62 berichten

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 Startte dit onderwerp 09 dec 2006, 20:15 62 berichten

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 Startte dit onderwerp 11 dec 2006, 23:06 62 berichten

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 Startte dit onderwerp 14 dec 2006, 20:34 62 berichten

Het wordt hier een eenzaam schrijven

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 Startte dit onderwerp 17 dec 2006, 22:16 62 berichten

@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 Startte dit onderwerp 17 dec 2006, 22:50 62 berichten

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 Startte dit onderwerp 23 dec 2006, 17:54 62 berichten

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 Startte dit onderwerp 26 dec 2006, 14:05 62 berichten

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.

Jobe Startte dit onderwerp 01 jan 2007, 23:08 62 berichten

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 Startte dit onderwerp 07 jan 2007, 22:22 62 berichten

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 Startte dit onderwerp 09 jan 2007, 22:08 62 berichten

Beste,

Ik wou al dat niemand die vraag stelde

:)

Ik vind het begot momenteel ook niet

gg
Johan

Jobe Startte dit onderwerp 10 jan 2007, 07:38 62 berichten

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 10 jan 2007, 10:00 Westland 18 berichten

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

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

mvg montana

coderunner 10 jan 2007, 23:01 Aubauke - Aentwaerepe 1.828 berichten

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