HTML-Kit Webontwerp

Labelhulp gebruiken

De labelhulp

HTML-kit Webdesigner Introductie De Kit downloaden Installatie Bestand openen Menu's Opties en Menu's Voorkeuren I Voorkeuren II Kit Kleuren Woord afbreken FTP Werkruimte FTP-werkruimte wijzigen Werkruimtevenster Bestandsextensies Afbeeldinggegevens invoegen Voorbeeldvenster wijzigen Fragmenten en modellen Kleuren instellen Berichtenvenster Labelhulp Plugins toevoegen 1 Plugins toevoegen 2 Plugins verwijderen 1 Plugins verwijderen 2 Sneltoetsen Werkruimte

Noot: De labelhulp (Tags Wizard) is een handig hulpmiddel om je te helpen bij het schrijven van webpagina's, speciaal als je het <img> label kiest. Wat is de labelhulp Eerlijk gezegd weet ik het niet precies, want ik heb het bij andere editors nog nooit gezien. Het is echt een handig hulpje. Misschien heb jij wel al eens een keer zoiets gezien, ik niet. Gebruik van de labelhulp Om te beginnen zal ik je eerst vertellen waar je de labelhulp kan vinden. Persoonlijk vind ik dat het een van die dingen is die thuis horen in de selectielijst als je op de rechtermuistoets klikt, maar ja daar zit het op het ogenblik niet. Het naar voren halen van de labelhulp Er zijn twee amnieren om de labelhulp naar voren te halen. De eerste manier: Klik op de Actiebalk op Tools (Gereedschap) (plugin) > klik op het HTML TagsWizard pictogram pijltje > en kies een HTML label (zie afbeelding 1). Afbeelding 1 Tweede manier: Klik in het hoofdmenu op Actie > Tools > HTML Tags Wizard > en kies een label (zie afbeelding 2). Noot: Je hoeft niet op een pijltje te drukken om de lijst door de te lopen, zet je cursor op het pijltje en alles gaat vanzelf. Mooi hè? Afbeelding 2 Als je de eerste manier kiest en je hebt alleen maar op het pictogram geklikt zonder gebruik te maken van het pijltje dan krijg je een foutmelding dat er geen label gekozen is. Binnen de labelhulp Eenmaal een label aangeklikt krijg je het volgende venster. Afbeelding 3 Zoals je kan zien is er voorbeeldvenster, en eronder is een venster Content waarin de inhoud van het label staat. Klik in dit venster en typ er iets in. Als je niets weet te bedenken schrijf je gewoon Mijn webpagina. Wacht een seconde en je ziet de tekst in het voorbeeldvenster. Te gek hè. Attributen toevoegen Aan de linkerzijde vind je alle huidige en verouderde attributen tesamen met de gebeurtenissen zoals onclick, onmouseover, enzovoort die gepaard gaan met het label dat je gekozen hebt (in dit geval <h1>). Een verouderd attribuut betekent dat het bij de volgende versie van HTML eruit gaat. De browsers zullen overigens nog vele jaren deze attributen herkennen, tenzij ze willen dat een groot aantal webpagina's niet meer correct werken. Maar dan zal ik het wel mis hebben. Noot: Maak er een gewoonte van om verouderde attributen niet meer te gebruiken als het enigszins mogelijk is. Op die manier hoef je je geen zorgen te maken of je pagina's leesbaar blijven of niet. Ik zal een beetje laten zien hoe teksten tegenwoordig worden opgemaakt. Klik op het align attribuut en type in center of klik op het pijltje en kies center. Wacht een tel en je ziet dat de labelhulp je tekst in het midden zet in het voorbeeldvenster. Als je klaar bent klik je op OK en je gaat terug naar de Kit en je kan zien wat deze grote jongen heeft gedaan. Klaar is Kees! Afbeelding 4 Opmaak met stijl Laten we verder gaan en verwijder de regel die de labelhulp zojuist heeft neergezet door te klikken op het: Ongedaan maken pictogram ==> Klik dan weer op Gereedschap (Tools) > Tags Wizard > H1. Typ nog een keer Mijn Webpagina. Dit keer in plaats van te klikken op het verouderde align attribuut klik je op het style attribuut. Noot: #ff0000 in de volgende code = de kleur rood. Type in de regel style text-align: center; color: #ff0000; font-family: sans-serif, (zie de volgende afbeelding). Klik dan op OK. In de onderstaande afbeelding kan je zien hoe ik het woord red (rood) heb gebruikt terwijl ik eigenlijk de hexadecimale waarde fad moeten toepassen om het bij de meeste browsers goed te laten werken. Sommige browsers, zoals Opera, houden er niet van om kleurennamen te gebruiken. Noot: Je kan ook Copy (Kopieer) en Paste (Plakken) gebruiken in de style regel. Gebruik GEEN aanhalingstekens of iets dergelijks. De labelhulp houdt daar niet van. Afbeelding 5 Nog een keer: Klaar is Kees! Wederom heeft de labelhulp en de Kit de code in ons tekstvenster gezet. Afbeelding 6 Wat je zojuist deed is het schrijven van een paar CSS (Cascading Style Sheet) regels. Dit is de manier hoe men wil dat je opmaakcode gebruikt in plaats van dat verouderde align attribuut! Hoe ziet het er uit Afbeelding 6 en een half Een ander voorbeeld Laten we nu eens het <img> label nemen. Als je dacht de <h1> label iets voorstelde let dan op deze. Klik op de Gereedschap (Tools) > Tags Wizard > IMG label, (zie de volgende afbeelding). Afbeelding 7 Op zoek naar plaatjes Het eerste wat je moet doen is op de Add knop klikken. Nadat je dat hebt gedaan verschijnt er zoekvenster. Ga naar de map waarin je de afbeeldingen hebt staan. Nadat je de map hebt gevonden klik erop en klik vervolgens op OK. Noot: Je kan niet dubbelklikken op de map om hem op te halen, je moet op de map klikken en daarna op OK. Afbeelding 8 Herhaal deze handeling zo vaak als je nodig vindt om de afbeeldingen die je wilt gaan gebruiken in je HTML codes. Noot:Denk er wel aan om de afbeeldingen op je website te zetten (uploaden). Een van de meest gemaakte fouten is dat de afbeeldingen prima op de eigen computer te zien zijn maar niet op het net. Meestal ligt het daaraan dat men vergeten is om die afbeelingen ook op de server te zetten tenzij: Ze gekopieerd zijn naar je website, Dat je HTML code het juiste pad heeft naar de afbeeldingen. En als je niets vreemds hebt gedaan zoals de afbeelding opgeslagen als : bluelake.gif en weggeschreven in je code als: <img src="Biglake.gif.">. Biglake.gif en biglake.gif zijn NIET hetzelfde omdat de een met een kleine letter en de ander met een hoofdletter is geschreven. En de afbeelding zal dan NIET te zien zijn! Een map verwijderen De map zal nu te zien zijn in het kleine venster rechtsboven. Zo niet, klik dan op de pijl en keis de map die je zojuis hebt toegevoegd. Als je de verkeerde map hebt genomen of je wilt er een map uithalen, klik dan gewoon op die map en klik op Remove (verwijderen). Afbeelding 8.2 Weg met het voorbeeld Als je geen voorbeeld venster wil hebben om een afbeelding vooraf te bekijken dan haal je het vinkje weg bij Preview, en foetsie is het venster. Dit geldt ook voor het <h1> label en alle andere labels (Tenminste dat denk ik, want ik heb ze niet allemaal geprobeerd). Afbeeldingen opsporen Nu je de juiste afbeeldingenmap hebt gevonden kan je daarin zoeken naar het juiste plaatje dat je wilt gebruiken in je code. Klik erop en de afbeeling wordt getoond in het voorbeeld venster. Het hangt ook een beetje af van wat voor label je gebruikt in de labelhulp hoe het getoond wordt. Te gek hè! Afbeelding 9 Man o man! De labelhulp laat niet alleen de afbeelding zien, maar ook de bijbehorende code. Als het plaaatje groter is dan het venster dan kan je op en neer scrollen. Attributen bij afbeeldingen Vervolgens kan alle benodigde attributen toevoegen door te kiezen uit het linkervenster bijvoorbeeld alt, width en height, een naam bij een plaatje, de breedte en hoogte. De naam van een plaatje wordt getoond als je met de cursos over een afbeelding heen gaat en daar een moment blijft staan. Je ziet dan in het bovenstaande plaatje: Afbeelding 9: Tags Wizard waarschijnlijk in een geel venstertje. Alle afbeeldingen op deze pagina op deze manier behandelt en het is uiterst makkelijk om het zo toe te passen. ga voor de lol maar eens met de cursor over de smileys met de zonnebrilletjes op die hierboven staan afgebeeld. Terug naar de les Wederom moeten we klikken op een verouderd attribuut als we er zeker van willen zijn dat er geen rand om de afbeelding wordt geplaatst. Dus klik op border en type daar een 0 (nul) in, aanhalingtekens zijn niet nodig. Om het 'border ding' helemaal correct te doen zou je eigenlijk het style attribuut inplaats van het border attribuut moeten keizen en dan het volgende moeten kiezen: border: none. De style=" " zal dan worden toegevoegd door de labelhulp. Maar er is een goede kans dat dat niet werkt in Netscape 4.+ browsers, of oudere Opera browsers (tenminste tot aan versie 3.6) en je krijgt een rand om de afbeelding. Als dat het geval is keer je terug naar het verouderde border="0" attribuut. Klik op OK en kijk wat er is aangericht. Afbeelding 10 Let er wel op dat het correcte PATH (pad) naar de afbeeldingen wordt gebruikt. Noot: Als je een bestaand HTML document opent, of sla het op z'n minst een keer op voordat je de labelhulp gebruikt, dan wordt automatisch het juiste relatieve pad gebruikt naar de afbeelding of als je de labelhulp gebruikt voor een hyperlink <a> label dan hoef je dat niet met de hand aan te passen. Oké, zo gaan we te werk. Je maakt een afbeelding en slaat die op in je afbeeldingenmap. Dan schrijf je je webpagina met behulp van de Kit. Voordat je de labels IMG of A gaat gebruiken sla je eerst je document op. Dan pas gebruik je de labelhulp. Als de mappen op je PC overeenkomen met die op je website dan hoef je niets te veranderen omdat de labelhulp alles correct voor je zal doen. Als je nu op de Preview in de Kit klikt dan krijg je het resultaat van de <h1>en <img> labels te zien. Afbeelding 11 In het venster van de labelhulp bevindt zich aan de onderzijde een Reset (herstel) knop die de hulp weer terugzet in de beginpositie (zie de volgend afbeelding). De Save (opslaan) knop zorgt ervoor dat de instelling wordt opgeslagen als een soort labelfragment. Afbeelding 12 Hoe verrassend Het volgende gedeelte is ook geschreven door Chami. Noot over de Refresh (opnieuw) knop: Deze knop kan zichtbaar zijn bovenin het venster. Zo niet, dan klik je de Mode knop (linksboven) voor heel veel attributen. Afbeelding 13 Open bijvoorbeeld een document met een paar links (zoals deze pagina kithow10.html). Haal het A label eens op of doet dat via de labelhulp. Klik op de Mode knop als je de Refresh (opnieuw) knop nog niet ziet voor het href attribuut. Klik op Refresh en je krijgt meteen een lijst van links die je al hebt gebruikt. Je kan op zo'n link dubbelklikken om hem weer te gebruiken zonder dat je link opnieuw hoeft in te typen. Je kan dat bijkans met elk ander attribuut doen. Als je een stijl wilt hergebruiken dan klik je op style en daarna op Refresh om de lijst van stijlattributen, classes, waarden etc. te krijgen. Heb je een CSS editor geïnstalleerd bij de programmavoorkeuren (opties) zoals TopStyle, klik dan op ... knop naast de stijlattributen. Hetzelfde geldt voor alt/title/summary/text, colors, font names, width/height numbers, targets, etc. en kan echt handig zijn bij het invullen van onclick gebeurtenissen. Nu kan je springen van vreugde.