HTML-grundlæggende elementer - Visning af billeder

• Kan 20, 2024

Når du har sendt din websteds tekst og formateret til din smag, er det tid til at krydre siden med et par billeder. Ikke kun kan billeder tilføje farver og liv til dine sider, du kan også bruge dem til at generere teksteffekter, der ville være vanskelige eller umulige at gøre med almindelig tekst og formatering. For eksempel vil dine fontvalg typisk være begrænset til det lille antal skrifttyper, som du kan være sikker på, er installeret på besøgende 'computere, da hvis de ikke har skrifttypen installeret, kan de ikke se den på dit websted! Hver gang du lægger tekst i en ikke tilgængelig skrifttype, vil de besøgende 'computere gengive den i uanset tilgængelig skrifttype, der er tættest på stil, hvilket ofte kan ødelægge ødelæggelse på dit webstedsdesign.

På den anden side, hvis du bruger et billedredigeringsprogram til at fange tekst i en fancy font og lægge den som en GIF eller JPEG på dit websted, vil enhver besøgende se den nøjagtigt som du havde til hensigt - da det nu er et billede af tekst snarere end selve teksten. Dette kan frigøre dig til at bruge fantasifulde skrifttyper i dine overskrifter og gruppere dem på usædvanlige måder.

Det grundlæggende tag, der bruges til at vise billeder, er følgende:



Ovenstående kode fungerer perfekt i HTML. Hvis du bruger XHTML eller vil være sikker på, at dit websted er XHTML-klar, skal du tilføje en skråstreg for at lukke tagget, da du i XHTML ikke kan bruge åbne tags:



'Src' er en kilde til kilde, og du vil bruge den til at specificere filstien til dit billede - med andre ord for at fortælle din browser, hvor billedet kan findes på dit websted. Hvis du opbevarer dine billeder i den samme mappe som dine websider, behøver du ikke at liste mappen i 'src'-teksten - du kan bare indtaste billedfilnavnet.

Når du har angivet din billedkilde, kan du forbedre denne grundlæggende ramme med forskellige valgfri attributter for at få mest muligt ud af dine billeder. En attribut, du næsten altid skal bruge, er "alt" -attributten. Dette giver dig mulighed for at specificere, hvilken tekst browseren skal vise, hvis det af en eller anden grund ikke er i stand til at vise dit billede. Teksten 'alt' er forberedt som følger:



Et andet nyttigt sæt attributter er tags 'bredde' og 'højde'. Disse giver dig mulighed for at vise billeder i en anden størrelse end den faktiske billedstørrelse. Du kan bruge dem til at finpusse dit billede, så det passer perfekt til dit overordnede sidedesign. Imidlertid foretrækkes det generelt at ændre den faktiske billedstørrelse ved hjælp af billedredigeringsprogrammer og derefter placere billedet online, af to grunde. For det første vil billedredigeringssoftwaren næsten altid give dig et bedre resultat end at justere størrelsen for hånd. For det andet ændrer du ikke tags 'bredde' og 'højde' ikke det faktiske billedets filstørrelse, så hvis du har et enormt billede, som du viser som en miniature, vil billedet tage lige så lang tid at indlæse og tygge op lige som meget båndbredde, som om du havde vist den i fuld størrelse.

Når du specificerer et billedstørrelse, kan du liste højden, bredden eller begge dele. Størrelser er specificeret af pixlen, som du kan se nedenfor:



Du kan også 'justere' dine billeder for at arbejde dem jævnt med strømmen af ​​din tekst. Hvis du vælger venstre justering, vil teksten starte til højre for billedet. Hvis du vælger højre justering, vises billedet på højre side af siden, og din tekst kommer op til venstre side af billedet og bryder derefter til en ny linje.

Billedjustering indstilles som følger:



Du kan også indstille justeringen til "top", "bund" eller "midten" for at gøre billedlinjen op med enten toppen eller bunden af ​​tekstlinjen. Hvis du ikke angiver justering, vil billedet som standard være "bund".

Som en sidebemærkning kan du inkludere dine billedattributter (src, align, alt osv.) I enhver rækkefølge i billedkoder. Min personlige præference er at liste 'src'-attributten først, da det er den mest basale attribut og skal inkluderes i ethvert billedtag, men du kan bruge den rækkefølge, der føles mest naturlig for dig.

Video Instruktioner: Photoshop tutorial for begyndere #8 | Fritlægning af billeder (Kan 2024).