LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij de geheimen van tabellen en u leert hoe u ze in uw vormgeving gebruikt. Tot slot geven we u enkele interessante websites waar u meer informatie over HTML aantreft. Hyperlinks In de vorige les hebt u een eerste pagina gemaakt. We hebben daar een korte tekst aan toegevoegd waarin enkele hyperlinks zullen moeten verschijnen. Een hyperlink is een verwijzing, zoals die ook in dit boek gebruikt worden. Als u leest dat een bepaald onderwerp al eerder behandeld is in bijvoorbeeld les 12, dan moet u daar in dit boek met de hand naartoe bladeren. Tenzij u eerst in de inhoudsopgave of het trefwoordenregister gaat kijken, kan het even kunnen duren voordat u de juiste pagina gevonden hebt. Op internet hoeft u alleen maar de link te volgen om op de desbetreffende pagina terecht te komen, op voorwaarde dat de link correct is en dat de desbetreffende pagina inmiddels niet verhuisd is. Want linkrot (zo wordt een link genoemd die nergens heen voert) komt helaas nogal eens voor. Er bestaan twee soorten hyperlinks: absolute hyperlinks, die naar een andere pagina verwijzen, en de relatieve hyperlinks, die naar een andere plaats op dezelfde pagina verwijzen. Vergelijk het een beetje met de verwijzingen in een boek. Verwijst de auteur naar een andere les, dan hebt u te maken met een absolute verwijzing. Verwijst hij naar een paragraaf in dezelfde les, dan is er sprake van een relatieve link.
236 Les 19 Een absolute hyperlink 1. Selecteer het woord of de woorden waarvan u een link wilt te maken. Hyperlinkterm selecteren Zeg nooit: als u meer informatie zoekt over Don Lawrence, klik dan hier. Beter is het de zin anders te formuleren, zodat u de naam Don Lawrence zelf als link kunt gebruiken. Bijvoorbeeld: Don Lawrence is de tekenaar van stripverhalen als Trigië, Storm en Cathy. AFBEELDING 19.1 Hier kunt u de link invoeren. 2. Klik in het menu Invoegen op Hyperlink. 3. U kunt nu de naam van een pagina invoeren als deze pagina zich in dezelfde map bevindt als de pagina waarop de link zich bevindt. U kunt ook een heel adres invoeren. Hyperlink Het is het veiligst om altijd een volledig adres op te geven, zelfs als het om een interne link gaat, dus om een pagina die zich op dezelfde site bevindt. 4. In het groepsvak Hyperlink type ziet u bovenaan drie mogelijkheden: internet, FTP en telnet. Dit zijn drie verschillende protocollen die een iets andere benadering vereisen. Internet spreekt voor zich:
HTML Editor: tabellen en hyperlinks 237 hiermee opent u een andere pagina. Bij FTP kunt u een loginnaam en wachtwoord opgeven, zodat gebruikers een programma kunnen downloaden dat bijvoorbeeld verborgen is achter een gebruikersnaam en wachtwoord. FTP U zult hier waarschijnlijk niet vaak gebruik van maken. U kunt namelijk ook gewoon een bestand via http laten downloaden. In plaats van de paginaverwijzing voert u dan de naam in van het bestand dat gedownload mag worden. In zo n geval is bijvoorbeeld bestand.zip voldoende om de gebruiker het bestand binnen te laten halen. 5. In het groepsvak Verdere instellingen ziet u onder meer Frame staan. Als u op het neerwaarts gerichte pijltje klikt, ziet u hier een aantal attributen verschijnen. Deze attributen kunt u gebruiken als u bijvoorbeeld een webpagina in een nieuw venster wilt openen (_blank) of als u een pagina die uit verschillende frames bestaat weer schermvullend wilt maken (_top). Laat dit leeg als u hier geen gebruik van wilt maken. Attributen Een attribuut is een eigenschap van een tag. Deze verfijnt de tag en geeft precies weer wat er moet gebeuren. Frames Frames maken het mogelijk meerdere pagina s in hetzelfde venster te openen. Dit is bijzonder handig als u een navigatiebalk beschikbaar wilt stellen zonder dat u deze op de verschillende pagina s afzonderlijk moet onderbrengen. Hoe u een frame maakt, valt echter buiten de opzet van dit boek.
238 Les 19 6. Om deze hyperlink te maken, is het voldoende om nu op Overnemen te klikken. Voordat u dit doet, willen we u echter nog enkele andere mogelijkheden laten zien. Klik in de linkerkolom eens op Mail & Nieuws. 7. U kunt hier een hyperlink maken die verwijst naar een e-mailadres. Achter Ontvanger plaatst u het e-mailadres van de persoon die het bericht moet ontvangen. Daaronder kunt u zelfs opgeven wat in de onderwerpregel moet verschijnen, bijvoorbeeld Uw Abonnement op Het E-Zine. AFBEELDING 19.2 mailto: plaatst het programma er zelf bij; u hoeft alleen het e-mailadres op te geven. 8. U kunt eveneens een document laten openen, bijvoorbeeld een PDFbestand dat rechtstreeks in een browser geopend kan worden. Dat doet u in het keuzevenster van Document. AFBEELDING 19.3 Ook een document kunt u openen.
HTML Editor: tabellen en hyperlinks 239 9. Klik nu op Overnemen en klik vervolgens op Sluiten. AFBEELDING 19.4 Hier zijn twee links toegevoegd. Een relatieve hyperlink Voordat we uitleggen hoe u een relatieve link maakt, willen we u eerst kennis laten maken met de Navigator, een onderdeel dat u in iedere toepassing tot uw beschikking hebt. U zult deze Navigator namelijk moeten gebruiken om een relatieve link te maken. 1. Open het dialoogvenster Navigator. U doet dit door in de balk van de Navigator op Openslaan te klikken. AFBEELDING 19.5 De Navigator is een handig hulpje. 2. Via deze navigator krijgt u een overzicht van alle elementen in uw (web)pagina. U kunt de Navigator zelfs meteen openen door op het desbetreffende onderdeel te klikken. 3. Als u een kruisje voor een bepaalde term ziet staan, betekent dit dat iets hiervan in het document zelf voorkomt. U kunt op het kruisje klikken om de verdere inhoud te bekijken.
240 Les 19 AFBEELDING 19.6 De Navigator mét inhoud. 4. De Navigator, een hulpmiddel dat in ieder onderdeel van OpenOffice.org opduikt, vormt een handige manier om tussen verschillende onderdelen van hetzelfde document te navigeren. 5. Klik op het kruisje voor Afbeeldingen. Selecteer daarna Afbeelding 1. Vervolgens kunt u het resultaat bekijken (zie afbeelding 19.7). AFBEELDING 19.7 De afbeelding wordt meteen geselecteerd. Op deze manier is het navigeren tussen de verschillende onderdelen van de pagina erg eenvoudig. Maar hoe moet u nu een relatieve link maken? Een relatieve link bevindt zich, zoals in de vorige paragraaf is uitgelegd, op dezelfde pagina. In de vorige paragraaf verwees u van pagina X naar pagina Y. Bij een relatieve link verwijst u bijvoorbeeld van pagina X, regel 2 naar pagina X, regel 45.
HTML Editor: tabellen en hyperlinks 241 Relatieve link Wat is het nut van een relatieve link? Uiteindelijk kan de gebruiker toch ook naar beneden scrollen? Mensen scrollen niet graag en wanneer een pagina langer is dan een scherm of over meerdere onderdelen beschikt, is het aan te raden een relatieve link te gebruiken. Zo komt de gebruiker meteen waar hij zijn wil zonder dat hij daarvoor hoeft te scrollen. Van regel 2 naar regel 45 springen lijkt gemakkelijk, maar het vergt toch nog wat extra code. Eigenlijk vindt u de oplossing al in de bovenstaande alinea: we hebben gesproken over pagina X regel y. Hetzelfde doet u ook op een internetpagina, alleen werkt u daar niet met regels, maar met namen. Zie het een beetje alsof u naar een nieuwe pagina verwijst: ook daar moet u een naam opgeven. 1. De naam bepaalt u via het invoeren van een bladwijzer. Selecteer daarom eerst de term waarnaar u een verwijzing wilt maken. 2. Klik nu in het menu Invoegen op de opdracht Bereik. AFBEELDING 19.8 Het nieuwe bereik. 3. Geef onder Nieuw bereik een naam op. Deze naam moet u later gebruiken om een link te maken; kies dus een niet te lange of te moeilijke naam. 4. Klik op Invoegen. De bladwijzer wordt gemaakt.
242 Les 19 AFBEELDING 19.9 Het bereik bestaat nu. 5. Selecteer de term van waaruit u naar dit bereik wilt verwijzen. In ons voorbeeld is dat Personages. 6. Klik in het menu Invoegen op de opdracht Hyperlink. 7. Selecteer het onderdeel Document. AFBEELDING 19.10 U wilt binnen hetzelfde document linken. 8. Klik vervolgens op Doel in document. 9. Klik nu op het kruisje voor Bereiken. Selecteer vervolgens de eerder opgegeven bladwijzer (Hertog) en klik onderaan op Overnemen.
HTML Editor: tabellen en hyperlinks 243 AFBEELDING 19.11 De bladwijzer waarnaar de link moet verwijzen. AFBEELDING 19.12 De relatieve link is klaar. 10. Klik vervolgens in het dialoogvenster Hyperlink op Overnemen en klik vervolgens op Sluiten. De relatieve link is klaar. Als u nu op Personages klikt, gaat u meteen naar de eerder opgegeven bladwijzer. Terug linken Als u gebruikmaakt van een interne hyperlink, is het gebruikelijk dat u van het aangeklikte onderwerp ook weer terug linkt naar het overzichtsmenu. Op die manier voorkomt u dat bezoekers veel moeten scrollen.
244 Les 19 Tabellen Als u aan tabellen denkt, denkt u ongetwijfeld aan kolommen en rijen die vol informatie staan. Een tabel bestaat inderdaad uit een aantal cellen, vergelijkbaar met wat u gezien hebt in de lessen over Calc. Toch hebben tabellen ook een andere functie: heel wat webmasters gebruiken tabellen namelijk om hun pagina in kolommen in te delen waarin ze tekstblokken of zelfs nieuwe tabellen kunnen plaatsen. Tabellen zijn geen eenvoudige materie, vooral doordat u gemakkelijk kunt verdwalen in de structuur. Gelukkig hoeft het werken met tabellen dankzij de HTML Editor van OpenOffice.org niet echt ingewikkeld te zijn. 1. Selecteer de plaats waar u de tabel wilt invoeren. 2. Klik in het menu Invoegen op de opdracht Tabel. AFBEELDING 19.13 Maak een tabel. 3. Zoals u ziet, moet u aangeven hoeveel kolommen en rijen de tabel moet bevatten. Nieuwe tabellen in tabellen In iedere cel kunt u een nieuwe tabel plaatsen. Houd er rekening mee dat de verschillende tabellen als u meerdere rijen hebt, uitgelijnd zullen worden aan de hand van die cellen. Anders gezegd: hebt u twee kolommen en twee rijen met de cellen A1, A2, B1 en B2, dan zullen de cellen A2 en B2 op dezelfde hoogte beginnen, zelfs als er in cel A1 een lange kolom staat en in cel B2 niets voorkomt. Dit betekent dat cel B1 helemaal leeg kan zijn. Let dus op als u tabellen in tabellen wilt plaatsen!
HTML Editor: tabellen en hyperlinks 245 4. In het groepsvak Opties kunt u het vinkje voor Kop verwijderen. Aangezien u deze tabel wilt gebruiken om de vormgeving te beïnvloeden, hebt u geen kop nodig. Verwijder ook het vinkje voor Omranding. 5. Ook het aantal kolommen kan tot drie beperkt worden. De Naam is in dit geval alleen belangrijk voor de Navigator. 6. Klik op OK. AFBEELDING 19.14 De tabel onderaan is nu nog wel zichtbaar, maar in werkelijkheid zult u er niets van zien. 7. U ziet nu onderaan de tabel verschijnen (zie afbeelding 19.14). Dit gebeurt alleen om het werken in de verschillende cellen wat eenvoudiger te maken. In werkelijkheid zult u deze indeling op internet niet aantreffen. Wilt u dat echter wel, dan moet u de omranding aangevinkt laten (zie afbeelding 19.13). 8. U kunt nu in de tabellen informatie kwijt, afbeeldingen plaatsen, hyperlinks invoeren en eventueel nieuwe tabellen invoegen. 9. In afbeelding 19.15 ziet u het resultaat van het werken met kolommen. Zoals al eerder aangegeven, zijn de grijze kaders rond de verschillende cellen in werkelijkheid niet zichtbaar zodra u deze publiceert.
246 Les 19 AFBEELDING 19.15 Hier ziet u wat er allemaal mogelijk is met tabellen. Eigenschappen U hebt zojuist met tabellen gewerkt. Daarmee hebt u misschien wel de vormgeving al enigszins kunnen bepalen, maar er is toch nog iets belangrijks dat u niet mag vergeten: de titel van uw website moet namelijk ook in de blauwe balk bovenaan verschijnen. Kijk maar eens wat er staat in afbeelding 19.14. Bovenaan in de blauwe balk ziet u nu nog HTML Editor.html staan. Daar kunt u beter de titel van de website plaatsen, bijvoorbeeld Dorodomanda. 1. Klik in het menu Bestand op de opdracht Eigenschappen. AFBEELDING 19.16 De naam van de webpagina.
HTML Editor: tabellen en hyperlinks 247 2. Op het tabblad Algemeen verschijnt de naam van de opgeslagen webpagina. Klik op de tab Beschrijving. 3. Bovenaan, achter Titel, kunt u de titel invoeren die later in de blauwe balk zal verschijnen. Geef eveneens het onderwerp, de sleutelwoorden en een korte omschrijving op. Sleutelwoorden De sleutelwoorden moet u scheiden met behulp van een komma. AFBEELDING 19.17 Deze informatie wordt verwerkt in de metatags. 4. Alle informatie op dit tabblad is belangrijk, omdat deze opgenomen zal worden in de metatags waarmee u in de vorige les al kennisgemaakt hebt. HTML ten voeten uit Wie graag meer weet over HTML, kan het best een bezoek brengen aan de website HTML Handleiding, op http://www.handleidinghtml.nl. Andere interessante sites Wie op zoek is naar bijvoorbeeld sites waar hij of zij gratis javascripts kan downloaden om deze op de eigen website te plaatsen, vindt een hele reeks
248 Les 19 op onze website. Klik op het onderdeel Webdesign om alle links te kunnen bekijken. Webdesign U vindt een hele reeks interessante links op http://home.pi.be/~tor-2453/links.html. AFBEELDING 19.18 Een overzicht van enkele interessante links voor mensen die op zoek zijn naar meer informatie over HTML. Conclusie Hiermee hebt u dit boek over OpenOffice bijna uit. In de laatste les bespreken we in het kort de setup en eindigen we met enkele handige tips en trucs die u vast verder kunnen helpen.