Definitie 1
Webpagina is tekstbestand, gemaakt op HTML-taal en gelegen in Wereldwijd Web (WWW). Naast tekst kan een webpagina hyperlinks bevatten waarmee u naar andere webpagina's kunt navigeren en deze kunt bekijken, evenals invoegingen in de vorm van afbeeldingen, animaties, videoclips en muziek.
Met HTML kunt u:
- Webpagina's maken en bewerken.
- Bewerk HTML-documenten van internet, rekening houdend met de werking van alle objecten die in het document zijn ingebed (afbeeldingen, animaties, enz.).
- Met behulp van hypertextlinks en de mogelijkheid om tekeningen, diagrammen, animaties, videoclips, muziek- en spraakbegeleiding en speciale teksteffecten in een HTML-document in te sluiten, kunt u multimediapresentaties, diavoorstellingen, demoprojecten.
Opmerking 1
Grafische afbeeldingen worden meestal in aparte bestanden opgeslagen. De HTML-taal heeft speciale tags waarmee links in de codes van webpagina's worden geschreven, wat de feitelijke adressen van deze bestanden op internet zijn. Wanneer dergelijke tags worden aangetroffen, doet de webbrowser een verzoek aan de webserver om het bijbehorende bestand met een afbeelding, audio of video en geeft dit weer op de webpagina op de locatie van deze tag. Alle gegevens (afbeeldingen, audio en video's, enz.) die zijn opgeslagen in bestanden die los staan van de webpagina, worden ingebedde elementen van webpagina's genoemd. Laten we het proces van het toevoegen van een afbeelding aan een webpagina eens nader bekijken.
Afbeeldingen toevoegen aan een webpagina
De aantrekkelijkheid van webpagina's ligt juist in de grafische afbeeldingen en andere verschillende objecten die erop worden gebruikt. Een afbeelding aan een pagina toevoegen is niet moeilijk. En voeg afbeeldingen toe die dat kunnen verschijning Webpagina's zijn representatiever en professioneler, veel complexer en vereisen speciale kennis.
U kunt een afbeelding aan een pagina toevoegen met behulp van de afbeeldingsbrontag, die er als volgt uitziet:
waar is de tag zelf, en scr is het attribuut ervan. Omdat het scr-attribuut vereist is, kunnen we zeggen dat dit hele item één gemeenschappelijke tag is. De afbeeldingsbrontag gebruikt geen overeenkomstige slottag omdat de brontag op zichzelf staat en daarom een schuine streep aan het einde vereist wanneer deze wordt gebruikt: .
Alternatieve ondertiteling toevoegen
Vaak te vinden op internet diverse inscripties, die worden weergegeven als u met de muisaanwijzer over een willekeurig bestand beweegt grafisch object Webpagina's. Deze bijschriften bevatten meestal aanvullende informatie over de afbeelding zelf of over het gedeelte van de pagina waarop deze zich bevindt.
Hieronder staat de HTML-code met het alt-attribuut toegevoegd in de tag. Dit attribuut vergelijkbaar met het src-attribuut, vertelt het de browser een bepaald gegeven aanvullende informatie over de afbeelding en deze kan ook altijd samen met een tag gebruikt worden.
alt="Dit is een foto!" />!}
De functie van het alt-attribuut is het definiëren van alternatieve tekst voor een grafisch element dat aan een webpagina wordt toegevoegd. Het wordt alternatief genoemd omdat het op het scherm wordt weergegeven als alternatief voor het beeld zelf. alt-attribuut voert er nog één uit belangrijke functie. Hiermee kan de webdesigner er zeker van zijn dat als de paginabezoeker de afbeelding niet op zijn scherm ziet, hij in ieder geval de tekstinformatie kan zien die aan deze afbeelding is toegevoegd.
Wanneer u het alt-attribuut voor elke tag gebruikt, is het belangrijk ervoor te zorgen dat u geen ongepaste tekstberichten aan grafische elementen toewijst. Het heeft bijvoorbeeld geen zin om alternatieve tekstlabels aan elementen toe te voegen extern ontwerp pagina's. Om dergelijke fouten te voorkomen, kunt u het alt-attribuut van deze elementen toewijzen lege waarde(alt = " "). Als u geen waarden instelt voor andere attributen, zal de browser de afbeelding weergeven originele maat, waarmee de bovenrand van de afbeelding wordt uitgelijnd met de bovenrand van de aangrenzende afbeelding tekstreeks. U kunt beide instellingen echter wijzigen met behulp van stylesheet-tags.
Afbeeldingsattributen
De tag heeft attributen waarmee u het formaat van afbeeldingen kunt wijzigen. Hier zijn er enkele:
- hoogte – het wordt gebruikt om de hoogte van de afbeelding in pixels of percentages te bepalen;
- breedte – het wordt gebruikt om de breedte van de afbeelding in pixels of percentages te bepalen.
Afbeeldingshoogte en -breedte aanpassen
De afmetingen van afbeeldingen die op webpagina's worden geplaatst, kunnen worden ingesteld met behulp van de bovenstaande kenmerken. Bovendien worden hun waarden gespecificeerd als vaste hoeveelheid pixels, of als percentage ten opzichte van het paginaformaat. In de onderstaande HTML-code bevat de eerste tag de afmetingen van de originele afbeelding in pixels (60 pixels verticaal en 60 pixels horizontaal), de tweede tag stelt de breedte van dezelfde afbeelding in op 6% van de paginabreedte en de hoogte op 10% van de paginahoogte.
alt="Dit is een foto!" hoogte = "60" breedte = "60" />
alt="Dit is een foto!" hoogte = "10%" breedte = "6%" />
Opmerking 2
Bij het weergeven van afbeeldingen in een eigen venster verwerkt de browser beide typen waarden even goed. Houd er echter rekening mee dat bezoekers van webpagina's op hun computers een andere schermresolutie kunnen hebben dan de uwe. Daarom moet u bij het wijzigen van het formaat van een afbeelding beide afbeeldingswaarden (hoogte en breedte) opgeven. Als u slechts één van deze waarden wijzigt, kan het beeld op het scherm verticaal of horizontaal uitgerekt lijken.
Kan worden gebruikt om meer een illusie te creëren snel laden afbeeldingen. Om dit te doen, moet u altijd de waarden van de attributen height en width opgeven, ongeacht of het formaat van de afbeelding is gewijzigd of niet. Omdat ze de browser belangrijke informatie vertellen over de hoeveelheid ruimte die nodig is om een afbeelding op een pagina te plaatsen. Als reactie wijst de browser de ruimte toe die nodig is voor de afbeelding en gaat door met het bouwen van andere elementen van de pagina zonder te stoppen met het laden van de afbeelding zelf. Hierdoor lijkt het alsof de pagina sneller laadt, omdat bezoekers niet hoeven te wachten volle belasting afbeeldingen om andere informatie op de pagina te zien.
Om ervoor te zorgen dat de afbeelding op elk scherm, ongeacht de resolutie, precies een bepaalde hoeveelheid ruimte over de breedte van de pagina in beslag neemt, is het noodzakelijk om percentagewaarden te gebruiken. Als je wilt dat de resolutie van de afbeelding zelf constant is (de grootte in pixels), moet je waarden in pixels gebruiken.
Tekst en afbeeldingen uitlijnen
Om een afbeelding uit te lijnen op de rechter- of linkerrand van een tekstregel, gebruikt u het uitlijningskenmerk van de tag. Bijvoorbeeld:
alt="Dit is een foto!" hoogte = "60" breedte = "60" uitlijnen = "rechts" />
Om een afbeelding verticaal uit te lijnen ten opzichte van een tekstreeks, kunt u ook dit attribuut gebruiken, dat de waarden boven, onder en midden kan aannemen. De waarde top geeft aan dat de bovenrand van de afbeelding moet worden uitgelijnd met de bovenrand van de omringende tekst. De waarde bottom geeft aan dat de onderrand van de afbeelding moet worden uitgelijnd met de onderrand van de omringende tekst. De middenwaarde geeft aan dat het midden van de afbeelding moet worden uitgelijnd met het midden van de tekstregel.
Afbeeldingen gebruiken als links
Afbeeldingen worden ook gebruikt om hyperlinks naar andere documenten te maken. In HTML wordt een afbeelding op dezelfde manier een hyperlink als een tekstvak. Hiervoor wordt een tag gebruikt die een pagina-element omsluit (in ons geval een afbeelding) dat een link moet worden. De link wordt gevolgd door op te klikken dit beeld.
Miniatuurafbeeldingen
Naast de bovenstaande methode, waarbij een afbeelding als hyperlink fungeert, kan deze ook worden gebruikt als hyperlink die van de ene afbeelding naar de andere overgaat. Dit is nodig in gevallen waarin de grootte van de afbeelding die u op een webpagina wilt publiceren vrij groot is en het laden erg lang duurt, wat voor veel bezoekers onaanvaardbaar is. Daarom maken ze een verkleinde kopie van deze afbeelding (miniatuur) en geven deze weer met een hyperlink. Als een paginabezoeker geïnteresseerd is in deze afbeelding, kan hij op de miniatuur klikken om de volledige afbeelding te bekijken. Hier is een codevoorbeeld:
alt="Klik om de normale afbeelding te zien."
hoogte = "60" breedte = "60" />
Geheimen voor het succesvol gebruiken van afbeeldingen
Afbeeldingen bieden veel visuele informatie voor bezoekers, en dit maakt ze aantrekkelijk, en ze zijn ook vrij eenvoudig toe te voegen aan een webpagina, maar er zijn bepaalde regels voor het maken van een site die moeten worden gevolgd als we willen dat deze populair wordt op internet. het internet.
Wanneer u pagina's maakt, moet u proberen er afbeeldingen op te plaatsen Niet grote maten, omdat het lang duurt voordat grote afbeeldingen zijn geladen en sommige gebruikers nog steeds verbindingen met een lage bandbreedte gebruiken om toegang te krijgen tot het netwerk. doorvoer, en daarom is de grootte van de gedownloade bestanden voor hen van fundamenteel belang.
Opmerking 3
Het is ook belangrijk totale grootte bestand van het gehele HTML-document, dat op zijn beurt niet alleen afhangt van de grootte van de afbeeldingen die het bevat, maar ook van hun aantal. U moet voorzichtig zijn bij het gebruik van het alt-attribuut, zodat de content sms-bericht kwam altijd overeen met het beeld zelf. En in het tegenovergestelde geval: het is noodzakelijk om ervoor te zorgen dat de afbeelding overeenkomt met de tekstinformatie die op de pagina wordt gepresenteerd.
Wanneer u afbeeldingen gebruikt die u van internet hebt geleend, de pagina die wordt gemaakt, moet u controleren of deze afbeeldingen auteursrechtelijk beschermd zijn.
Een enkele tag wordt gebruikt om een afbeelding in de tekst van een webpagina in te voegen. (Tabel P1). De attributen van deze tag stellen alle parameters in van de afbeelding die op de pagina wordt geplaatst. Het SRC-attribuut is vereist, waarmee het adres en de naam worden gedefinieerd grafisch bestand. Als het SRC-attribuut niet is ingesteld, wordt alleen het lege afbeeldingspictogram weergegeven.
Tagstructuur met het SRC-attribuut ziet er als volgt uit:
.
Als een grafisch bestand met de naam Institute zich in dezelfde map bevindt als de webpagina, moet u om het te plaatsen het volgende schrijven:
.
Bestandsnaam Formaat
Om een grafisch bestand met de naam MINSK, gelegen op D:\Collection\Cities\MINSK.GIF, te plaatsen, schrijft u .
Een label gebruiken een webpagina bevat een grafisch bestand dat zich op een andere computer bevindt mondiaal netwerk"Internet".
Om een webpagina te maken met een foto van ons instituut, zoals weergegeven in Fig. 4.1, moet u de volgende HTML-code invoeren:
Ons Instituut
Rijst. 4.1. Webpagina met foto van het instituut
In het bovenstaande voorbeeld is de hoogte van de foto (HEIGHT) 200 pixels en de breedte (WIDTH) 300 pixels. Om de foto te plaatsen, wordt een alinea gemaakt met centrale uitlijning.
Horizontale lijnen
Horizontale lijnen worden op een webpagina geplaatst met behulp van een enkele tag
. De attributen SIZE, WIDTH, COLOR en ALIGN wijzigen respectievelijk de dikte, breedte, kleur en uitlijning van de lijnen.
Laten we een paar voorbeelden bekijken om de plaatsing van horizontale lijnen uit te leggen:
1.
- horizontale lijn op de hele pagina, 2 pixels dik.
2.
WIDTH = "200" ALIGN="RIGHT"> – een horizontale groene lijn, 15 pixels dik, 200 pixels breed en rechts uitgelijnd.
3.
– horizontale lijn blauw op de hele pagina, 25 pixels dik.
4.
WIDTH = "300" ALIGN = "LINKS"> – een horizontale rode lijn, 20 pixels dik, 300 pixels breed en links uitgelijnd.
De lijnweergave voor de vier opgenomen voorbeelden wordt getoond in Fig. 4.2.
Rijst. 4.2. Lijnen op een webpagina
TAFELS
Tabellen maken
De tabel is gemaakt met behulp van een gepaarde tag
in HTML-code.
Elke tabel bestaat uit rijen en rijen uit cellen. De volgende tags worden gebruikt om tabelrijen en cellen te vormen:
Deze tags zijn geschreven in een gepaarde tag
De tabel wordt rij voor rij gevormd - eerst wordt één rij gespecificeerd en daarin wordt het vereiste aantal cellen aangegeven, vervolgens de tweede rij, enz.
Om de tabel uit Fig. 5.1, moet u de volgende HTML-code typen:
| Auto's | Prijs | Ford | 5000 | Golf | 6000 |
|---|
dan is de dikte van de buitenrand 6 pixels. Om te voorkomen dat tabelranden worden weergegeven, moet u het BORDER-attribuut op 0 instellen, of dit attribuut eenvoudigweg weglaten.
Er zijn honderden grafische formaten, maar slechts enkele daarvan worden ondersteund door webbrowsers. In dit artikel beschrijven we de verschillende grafische bestandsformaten die beschikbaar zijn voor webontwerpers en wanneer deze gebruikt moeten worden.
Grafische bestandsformaten die door de meeste worden ondersteund populaire webbrowsers zijn: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) en vectorafbeeldingen. Enkele eigenschappen van grafische bestanden:
- Transparantie - deze eigenschap zorgt ervoor dat de afbeelding zichtbaar is in verschillende mate transparantie van effen tot volledig transparant.
- Compressie - met deze eigenschap kan de afbeelding in grote hoeveelheden worden opgeslagen kleiner bestand, door te gebruiken wiskundige algoritmen om een groep pixels als één enkel element te behandelen.
- Interlace - Hiermee kan de afbeelding eerst op de oneven lijnen worden geladen en vervolgens op de even lijnen. Hierdoor kan de bezoeker het beeld sneller zien.
- Animatie - creëert de schijn van beweging met behulp van een reeks opeenvolgende opnamen. Voor geanimeerde GIF geen browserplug-in vereist en werkt op vrijwel alle apparaten.
- Progressief laden - Vergelijkbaar met weven, waarbij aanvankelijk slechts een deel van de afbeelding wordt geladen, maar niet op afwisselende rijbasis.
GIF werd in 1980 opgericht en begin jaren negentig door webontwerpers als basisproduct overgenomen grafisch formaat voor webpagina's. GIF-bestanden gebruiken een compressie-algoritme dat de bestandsgrootte klein maakt voor snel laden. GIF is beperkt tot 256 kleuren (8-bit), transparantie en ondersteuning voor interlacing. Met dit formaat is het ook mogelijk om geanimeerde afbeeldingen te maken. Alle browsers kunnen zonder problemen GIF-bestanden weergeven.
Voordelen van GIF:
- Meest ondersteunde grafische indeling
- Schema's zien er beter uit in dit formaat
- Ondersteuning van transparantie
De bestanden zijn gecomprimeerd maar ondersteunen “ echte kleuren” (24 bit) en zijn het voorkeursformaat voor foto's waarbij kwaliteit erg belangrijk is. JPEG ondersteunt een progressief formaat waarmee u de afbeelding vrijwel onmiddellijk kunt zien, wat in kwaliteit zal verbeteren zodra het downloaden is voltooid.
In tegenstelling tot GIF-bestanden kunnen webontwerpers de controle uitoefenen gecomprimeerde bestanden JPEG, waarmee verschillende niveaus van beeldkwaliteit en bestandsgroottes mogelijk zijn.
Voordelen van JPEG:
- Grote compressie betekent meer hoge snelheid downloads.
- Produceert uitstekende kwaliteit voor foto's en complexe tekeningen.
- 24-bits kleurondersteuning.
PNG is een relatief recent formaat dat werd geïntroduceerd als alternatief voor GIF-bestanden. PNG ondersteunt maximaal 24-bit kleur, transparantie en interliniëring en kan een korte tekstbeschrijving van de afbeelding bevatten, die in zoekmachines wordt gebruikt.
Voordelen van PNG:
- Overwint 8-bit kleurbeperkingen in GIF
- Maakt tekstbeschrijving van afbeeldingen voor zoekmachines mogelijk
- Ondersteunt transparantie
- Schema's zien er beter uit dan in JPEG
De meeste webafbeeldingen zijn dat wel rasterafbeelding of een patroon dat bestaat uit een raster van gekleurde pixels. Illustraties moeten worden gemaakt in vectorafbeeldingen, die bestaan uit een wiskundige beschrijving van elk element waaruit de lijnvormen en kleuren van de afbeelding bestaan. Vectorafbeeldingen worden gemaakt met behulp van programma's zoals Adobe Illustrator of CorelDRAW. Vectorafbeeldingen moeten worden geconverteerd naar elk GIF-, JPEG- of PNG-formaat voor gebruik op webpagina's.
Welk formaat moet je gebruiken?
Een webontwerper kan voor de meeste toepassingen kiezen uit het GIF- of JPEG-formaat. Maar sinds de maat GIF-bestanden meestal klein in vergelijking met de grootte JPEG-bestand, zullen de meeste webontwerpers gebruiken GIF-formaat voor achtergronden, dozen, frames en andere grafische elementen, die er geweldig uitzien met 8-bits kleuren.
De meeste ontwerpers zullen voor foto's en illustraties het JPEG-formaat kiezen, waarbij compressie de visuele kwaliteit van de afbeelding niet in gevaar brengt.
Hallo lieve lezers bloggen! In dit artikel leer je er alles over hoe u een afbeelding invoegt html-pagina
. Heeft u meerdere afbeeldingen die u op uw pagina wilt plaatsen of wilt u een logo op uw site plaatsen? Dit alles is eenvoudig. Na het lezen van dit artikel kunt u zonder problemen afbeeldingen in uw HTML-pagina's invoegen. Om dit te doen, zullen we er in detail over praten label
en de kenmerken ervan, gaan we kort in op grafische bestandsformaten zoals gif, jpeg en png, en kijken we ook naar nieuwe HTML5-functies die het gemakkelijker maken om video en audio in uw site in te voegen.
Vanwege het feit dat grafische gegevens en html-tekst kunnen niet in één bestand worden gecombineerd; er wordt een andere aanpak gebruikt om ze op de site weer te geven dan bij andere elementen van html-pagina's. Allereerst worden grafische afbeeldingen en andere multimediagegevens in afzonderlijke bestanden opgeslagen. En om ze in een webpagina te implementeren, gebruiken ze speciale tags die links ernaar bevatten aparte bestanden. In het bijzonder is zo'n tag label
. Als de browser zo'n tag met een adres tegenkomt, vraagt de browser eerst het bijbehorende bestand met een afbeelding, audio of video op bij de webserver en geeft dit pas daarna weer op de webpagina.
Alle grafische afbeeldingen en in het algemeen alle gegevens die zijn opgeslagen in bestanden die los staan van de webpagina, worden opgeroepen geïmplementeerd pagina-elementen.
Voordat u afbeeldingen invoegt en de tag in detail bekijkt , is het de moeite waard om iets over grafische formaten te leren.
Grafische beeldformaten.
Er zijn veel verschillende grafische formaten, maar browsers ondersteunen er maar een paar. Laten we er drie bekijken.
1. JPEG-formaat(Gezamenlijke groep fotografische experts). Een behoorlijk populair formaat dat wordt gebruikt voor het opslaan van afbeeldingen. Ondersteunt 24-bits kleuren en houdt alle halftonen in foto's ongewijzigd. Maar jpeg ondersteunt geen transparantie en vervormt kleine details en tekst in afbeeldingen. JPEG wordt voornamelijk gebruikt voor het opslaan van foto's. Bestanden van dit formaat hebben jpg-extensies, jpe, jpeg.
2. GIF-formaat(Grafisch uitwisselingsformaat). Het belangrijkste voordeel van dit formaat is de mogelijkheid om meerdere afbeeldingen tegelijk in één bestand op te slaan. Hiermee kunt u volledige animatievideo's maken. Ten tweede ondersteunt het de transparantie. Het grootste nadeel is dat het slechts 256 kleuren ondersteunt, wat niet geschikt is voor het opslaan van foto's. GIF wordt voornamelijk gebruikt om logo's, banners, afbeeldingen met transparante gebieden en tekst op te slaan. Bestanden in dit formaat hebben de extensie gif.
3. PNG-formaat(Draagbare netwerkafbeeldingen). Dit formaat is ontwikkeld als vervanging voor de oudere GIF en, tot op zekere hoogte, JPEG. Ondersteunt transparantie, maar staat geen animatie toe. Dit formaat heeft een png-extensie.
Bij het maken van websites wordt meestal gebruik gemaakt van afbeeldingen JPEG-formaat of GIF, maar soms wordt PNG gebruikt. Het belangrijkste is om te begrijpen in welke gevallen welk formaat beter te gebruiken is. In het kort:
- GIF wordt voornamelijk gebruikt voor animatie;
- PNG is het formaat voor al het andere (pictogrammen, knoppen, enz.).
JPEG wordt het best gebruikt voor het opslaan van foto's of grijswaardenafbeeldingen die geen tekst bevatten;
Afbeeldingen invoegen in HTML-pagina's
Dus, hoe voeg je een afbeelding in op een webpagina? U kunt een afbeelding invoegen met behulp van een enkele label
. De browser plaatst de afbeelding op de locatie op de webpagina waar hij de tag tegenkomt
.
Code voor het invoegen van afbeeldingen in HTML de pagina ziet er als volgt uit:
Deze html-code plaatst een afbeelding op de webpagina die is opgeslagen in het bestand image.jpg, dat zich in dezelfde map als de webpagina bevindt. Zoals je misschien hebt gemerkt, staat het adres van de foto aangegeven in src-attribuut. Ik heb je al verteld wat het is. Het src-attribuut is dus een vereist attribuut dat dient om het adres van het bestand met de afbeelding aan te geven. Zonder het src-attribuut is de img-tag zinloos.
Hier volgen nog enkele voorbeelden van het opgeven van het adres van een bestand met een afbeelding:
- deze html-code voegt een afbeelding met de naam image.jpg in op de pagina, die is opgeslagen in de map afbeeldingen in de hoofdmap van de website.
Het src-attribuut kan niet alleen relatieve koppelingen naar de afbeeldingen. Omdat afbeeldingen samen met HTML-pagina's online worden opgeslagen, heeft elk afbeeldingsbestand zijn eigen URL. Daarom kunt u de afbeeldings-URL in het src-attribuut invoegen. Bijvoorbeeld:
Deze code voegt een afbeelding van de site mysite.ru in op de pagina. Een URL wordt doorgaans gebruikt wanneer u naar een afbeelding op een andere site verwijst. Voor afbeeldingen die op uw site zijn opgeslagen, kunt u beter relatieve links gebruiken.
Label is een inline-element, dus het is beter om het in een blokelement te plaatsen, bijvoorbeeld in een tag
- paragraaf:
Laten we oefenen en in onze pagina plakken van eerdere artikelen over html-afbeelding. Ik zal een map "images" maken naast het html-bestand van mijn pagina en daar een "bmw.jpg"-afbeeldingsbestand plaatsen, dat er als volgt uitziet:
Dan ziet de html-code van de pagina met de ingevoegde afbeelding er als volgt uit:
Website over auto's.
Welkom op onze autowebsite. Hier vindt u veel interessante en nuttige artikelen over auto's, over hen technische specificaties en kenmerken.
Wetenschappelijke taal auto Dit:
Mechanische motor ongebaande weg voertuig met minimaal 4 wielen.
Auto classificatie
Auto's zijn van de volgende typen:
- Personenwagen;
- Lading;
- SUV;
- Buggy;
- Ophalen;
- Sport;
- Racen.
Alle rechten voorbehouden. 2010
Website over auto's.
En kijk naar het weergaveresultaat in de browser:
Zoals we zien, is er niets ingewikkelds aan het plaatsen van afbeeldingen op webpagina's. Laten we vervolgens eens kijken naar enkele andere belangrijke tagkenmerken. .
Het alt-attribuut is een fallback-optie
Omdat afbeeldingsbestanden afzonderlijk van webpagina's worden opgeslagen, moet de browser afzonderlijke verzoeken indienen om deze op te halen. Maar wat als er veel afbeeldingen op de pagina staan en de netwerkverbindingssnelheid laag is, en dan wordt geladen? extra bestanden het zal geruime tijd duren. En het is nog erger als de afbeelding zonder uw medeweten van de server is verwijderd.
In deze gevallen wordt de webpagina zelf succesvol geladen en worden alleen witte rechthoeken weergegeven in plaats van afbeeldingen. Om de gebruiker daarom te vertellen wat de afbeelding is, . Met dit attribuut specificeer je de zogenaamde vervangende tekst, die in een lege rechthoek wordt weergegeven totdat de afbeelding wordt geladen:
En zo ziet het er ongeveer uit:
Stel de afmetingen van de afbeelding in
Er zijn nog een aantal img-tagattributen die u moet kennen. Dit zijn een paar attributen breedte En hoogte. U kunt deze gebruiken om de afmetingen van de afbeelding op te geven:
breedte = "300" hoogte = "200">
Beide attributen geven de maat aan pixels. Het breedte-attribuut vertelt de browser hoe breed de afbeelding moet zijn, en het height-attribuut hoe hoog deze moet zijn. Deze twee attributen kunnen samen of afzonderlijk worden gebruikt. Als u bijvoorbeeld alleen het breedte-attribuut opgeeft, selecteert de browser automatisch de hoogte in verhouding tot de opgegeven breedte en ook als alleen het height-attribuut wordt gebruikt. Als u deze kenmerken helemaal niet opgeeft, bepaalt de browser automatisch de grootte van de afbeelding voordat deze op het scherm wordt weergegeven. Het is alleen vermeldenswaard dat het specificeren van de afbeeldingsformaten de browser enigszins zal versnellen bij het weergeven van de pagina.
Dat gaat voorlopig alleen over het invoegen van afbeeldingen op pagina's. Vervolgens bekijken we hoe u audio of video op een website kunt invoegen...
Video en audio invoegen met HTML 5
IN nieuwe specificatie html5 heeft verschillende nieuwe tags die het heel gemakkelijk maken om multimediabestanden in te voegen. Dit geldt vooral voor video en audio.
Invoegen geluid HTML5 biedt gepaarde label Het adres van het bestand waarin de audioclip is opgeslagen, wordt aangegeven met het ons al bekende src-attribuut:
Label
Standaard wordt de audioclip niet weergegeven op de webpagina. Maar als het in de tag staat
Een gepaarde tag wordt gebruikt om een video op een webpagina in te voegen . Bij deze tag is alles hetzelfde als bij de tag
Er valt niet veel meer te zeggen over het invoegen van afbeeldingen en multimedia in HTML-pagina's. Ik hoop dat de vraag “Hoe voeg ik een afbeelding in een HTML-pagina in?” Ik heb je geantwoord. dus ik zal het even samenvatten:
- door te gebruiken alt-attribuut label
u kunt vervangende tekst instellen voor het geval de afbeelding niet wordt geladen;
- gebruik maken van attributen breedte En hoogte u kunt afbeeldingsformaten op een webpagina instellen;
- er zijn gepaarde tags voor het invoegen van audio en video in html5
Voor afbeeldingen invoegen in html pagina met één enkele tag
en geef het adres aan van het bestand met de afbeelding in het attribuut src:
Als er iets niet duidelijk is, vraag het dan in de reacties en vergeet je niet te abonneren op mijn blogupdates. Tot ziens in de volgende berichten!
De meeste webpagina's bevatten afbeeldingen. Hiermee kunt u informatie kleurrijk en duidelijk presenteren. In veel gevallen is het beter om een foto te laten zien dan een lange tekstbeschrijving te geven.
Er zijn twee manieren om afbeeldingen op een pagina te plaatsen:
- invoegen van individuele afbeeldingen;
- de achtergrond vullen met een afbeelding.
In ieder geval wordt de grafische afbeelding uit het bestand gehaald.
Afbeeldingen invoegen
Invoegen op een pagina grafisch beeld van een grafisch formaatbestand wordt geproduceerd met behulp van de tag
(uit het Engels, afbeelding - afbeelding) waarbij het bestandsadres wordt aangegeven als argument voor het SRC-attribuut:
< IMG SRC = "адрес_графического_файла" >
Het grafische bestandsadres is een URL of een bestandsnaam, eventueel met een pad. Om bijvoorbeeld een grafisch bestand logotip.jpg weer te geven, moet u de tag schrijven:
< IMG SRC = "logotip.jpg" >
Om de overdrachtsnelheid van een grafische afbeelding in een tag te verhogen
je kunt het attribuut ( extra parameter) LOWSRC, dat het adres van een grafisch bestand als argument gebruikt. U kunt twee grafische bestanden maken: één (laten we zeggen dat dit het logotip.jpg-bestand is) bevat de afbeelding verkregen van hoge resolutie, en de andere (bijvoorbeeld logotip.gif) is een afbeelding met een lage resolutie. Dan het label:
< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >
...instrueert de browser om eerst het logotip.gif-bestand te downloaden en het vervolgens te vervangen door het logotip.jpg-bestand zodra het wordt ontvangen.
Een andere manier om het laden van afbeeldingen te versnellen is door de grootte van het rechthoekige gebied waarin de afbeelding wordt geplaatst in te stellen met behulp van attributen BREEDTE(breedte) en HOOGTE(hoogte), gemeten in pixels. Als u deze kenmerken opgeeft, wijst de browser eerst ruimte toe voor de afbeeldingen, bereidt de documentlay-out voor, geeft de tekst weer en laadt pas daarna de afbeeldingen. Houd er rekening mee dat de browser de afbeelding comprimeert of uitrekt en deze in frames insluit gespecificeerde maat. Een voorbeeld van het opgeven van afbeeldingsafmetingen:
< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >
Afbeeldingen worden meestal in combinatie met tekst gebruikt, waardoor de uitdaging ontstaat om tekst en afbeeldingen op één lijn te brengen. Dit probleem wordt opgelost met behulp van het attribuut UITLIJNEN label
met behulp van verschillende argumenten. We willen bijvoorbeeld dat tekst naar rechts of links rond een afbeelding loopt. Meestal is de afbeelding nauw met de tekst ingebed, wat lelijk kan zijn. Om dit te voorkomen, kunt u lege marges rond de illustratie instellen. Velden worden gemaakt met behulp van attributen VSPACE voor boven- en ondermarges en RUIMTE voor zijmarges in een tag
. De argumenten voor deze attributen worden gespecificeerd als getallen die de grootte van de velden in pixels specificeren. Gebruik de tag om tekstomloop rond afbeeldingen te annuleren
.
De volgende tag zorgt ervoor dat de afbeeldingen uit het logotip.jpg-bestand naar rechts lopen (de afbeelding wordt links van de tekst geplaatst):
< IMG SRC = "logotip.jpg" ALIGN = LEFT >
Als je een afbeelding rechts van de tekst wilt plaatsen, dan heb je het attribuut nodig UITLIJNEN argument toewijzen RECHTS:
< IMG SRC = "logotip.jpg" ALIGN = RIGHT >
Om de marges rond de afbeelding in te stellen, moet je een tag schrijven zoals:
< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >
Hier bepalen de getallen 20 en 10 de grootte van de velden.
Laten we eens kijken naar een voorbeeld delen afbeeldingen en teksten. Kladblok openen ( teksteditor Kladblok) Windows. Schrijf er HTML-code in met behulp van de hierboven besproken tags. Hieronder staat een programma dat wat tekst en afbeeldingen uitvoert. U kunt elk van de bestanden die u heeft als grafisch bestand gebruiken. Het hier gebruikte bestand is logotip.gif.
< HTML >
< HEAD >
< TITLE >Oefening 1< / TITLE >
< / HEAD >
< BODY BGCOLOR = "YELLOW" >
< IMG SRC = "logotip.gif " ALIGN = LEFT >
< H1 >Tekst loopt rond afbeeldingen aan de rechterkant< / H1 >
Rijst. 657. De tekst loopt rond de afbeelding aan de rechterkantBrede mogelijkheden voor nauwkeurige positionering van afbeeldingen (en andere elementen) op de pagina bieden tafels En stijlen. Deze HTML-elementen zal later worden besproken. U kunt bijvoorbeeld een tabel definiëren zonder zichtbare kaders en afbeeldingen, teksten en andere elementen in de cellen van deze tabel plaatsen.
