Websites er i modsætning til ethvert kommunikationsmedium, der kom foran dem. En af de vigtigste ting, der sætter websites bortset fra tidligere medieformater som print, radio og endda tv, er begrebet "hyperlink".
Hyperlinks, også almindeligt kendt som "links", er hvad der gør internettet så dynamisk. I modsætning til en trykt publikation, der kan henvise til en anden artikel eller anden ressource, kan websteder bruge disse links til faktisk at sende besøgende til de andre sider og ressourcer. Intet andet udsendemedium kan gøre dette. Du kan høre en annonce på radio eller se på tv, men der er ingen hyperlinks, der kan tage dig til virksomhederne i disse annoncer, som websitet nemt kan gøre. Links er virkelig et fantastisk kommunikations- og interaktionsværktøj!
Ofte er de links, der findes på et websted, tekstindhold, der leder besøgende til andre sider på samme websted. Et websteds navigation er et eksempel på tekstforbindelser i praksis, men links behøver ikke at være tekstbaserede. Du kan også nemt linke billeder på din hjemmeside. Lad os se på, hvordan dette gøres, efterfulgt af nogle tilfælde, hvor du vil bruge billedbaserede hyperlinks.
Sådan linker du et billede
Det første du skal gøre er at placere billedet selv i dit HTML-dokument. En almindelig brug af et billedbaseret link er webstedets logo-grafik, som derefter linkes tilbage til webstedets hjemmeside. I vores eksempelkode nedenfor er den fil, vi bruger, en SVG til vores logo. Dette er et godt valg, da det gør det muligt for vores billede at skalere til forskellige opløsninger, samtidig med at billedkvaliteten og en lille samlet filstørrelse opretholdes.
Sådan kan du placere dit billede i HTML-dokumentet:
Omkring billedetiketten vil du nu tilføje ankerlinket, åbne ankerelementet før billedet og lukke ankeret efter billedet. Dette ligner, hvordan du vil forbinde tekst, kun i stedet for at indpakke de ord, du vil være et link til ankeretiketterne, du indpakker billedet. I vores eksempel linker vi tilbage til vores hjemmeside hjemmeside, som er "index.html".
Når du tilføjer denne HTML til din side, må du ikke sætte mellemrum mellem ankeretiketten og billedmærket. Hvis du gør det, vil nogle browsere tilføje små flåter ved siden af billedet, hvilket vil se underligt ud.
Logo-billedet vil nu også fungere som en hjemmeside-knap, hvilket i dag er en webstandard. Bemærk, at vi ikke indeholder visuelle stilarter, som billedets bredde og højde, i vores HTML-markup. Vi vil forlade disse visuelle stilarter til CSS og opretholde en ren adskillelse af HTML-struktur og CSS-stilarter.
Når du først kommer til CSS, kan de stilarter, du skriver for at målrette dette logo, indeholde størrelsen på billedet, herunder lydhør stilarter til billeder med flere enheder, samt de billeder, du gerne vil føje til billedet / linket, som grænser eller CSS drop skygger. Du kan også give dit billede eller linke en klassetribue, hvis du havde brug for yderligere "kroge" til brug med dine CSS-stilarter.
Brug tilfælde til billede links
Så det er ret nemt at tilføje et billede link. Som vi lige har set, er alt du skal gøre, at pakke billedet sammen med de relevante ankermærker. Dit næste spørgsmål kan være "hvornår vil du rent faktisk gøre dette i praksis udover det ovennævnte logo / hjemmeside link eksempel?"
Her er nogle tanker:
- Miniaturebilleder i et galleri, der linker til større versioner af disse billeder.
- Billeder, der bruges alene til at repræsentere indhold, som produktbilleder til et e-handelswebsted.
- Teaser billeder, der er en del af andet indhold, som en blogartikel eller pressemeddelelse, som lokker folk til at lægge mærke til indholdet, giver dem et målområde, som du kan trykke på eller klikke for at læse hele artiklen.
- Ikonbilleder, der bruges som knapper til at forbinde til specifikke funktioner eller sider på webstedet.
- Sociale medier links, der bruger de genkendelige logoer på de forskellige sociale medier websteder, der er vigtige for det pågældende websted eller firma.
- Billeder, der bruges som knapper til bestemte funktioner, som formularer (bedste praksis note - fra et websted præstationsperspektiv, knapper stylet rent med CSS er et bedre valg end billedknapper).
En påmindelse, når du bruger billeder
Billeder kan spille en vigtig rolle i en hjemmesides succes. Et af ovenstående eksempler, der benyttes ved hjælp af billeder sammen med andet indhold, gør opmærksom på det indhold og får folk til at læse det.
Når du bruger billeder, skal du være opmærksom på at vælge det rigtige billede til dine behov, herunder det korrekte billedemne, format og også sikre, at billeder, du bruger på din hjemmeside, er korrekt optimeret til levering af websteder. Dette kan virke som en masse arbejde bare for at tilføje billeder, men udbetalingen er det værd! Billeder kan virkelig tilføje så meget til et websteds succes.
Tøv ikke med at bruge passende billeder på dit websted, og knyt disse billeder, når det er nødvendigt, for at tilføje nogle interaktivt til dit indhold, men også være opmærksomme på disse bedste billeder og bruge disse grafikker / links korrekt og ansvarligt i dit webdesign arbejde.
