Tilføjer et billede til et html-dokument. Vi tilføjer billeder til WEB-siden, samt video og lyd

<тег style="background:url("адрес картинки")">...

Sørg for at angive billedadressen i enkelte anførselstegn som vist. Og hvis du vil gøre baggrundsbillede for hele siden, og brug derefter stil inde i tagget .

<тег style="background:#цвет url("адрес картинки")">...

Bemærk venligst, at der ikke er behov for at sætte et semikolon i midten, da begge værdier er relateret til baggrunden. Når du optager på denne måde, viser browseren først baggrundsbilledet, ikke farven. Forestil dig nu, at dit baggrundsbillede er en tegning i mørke farver, og du har sat tekstfarven på siden til hvid. Og alt ser godt ud... Indtil brugeren deaktiverer visning af billeder i browseren. Så bliver dens baggrund højst sandsynligt hvid, ligesom din tekstfarve.

Eksempel på at lave baggrundsbilleder i HTML

Stjernebilleder i den himmelhøje afstand
Mange er blevet dømt til forgæves tanker.
Tænk om igen, red din fornuft -
De klogeste er nået til en blindgyde.
Omar Khayyam.

Tabeller

Oftest bruges tabeller i HTML ikke til deres tilsigtede formål - at vise tabeldata, men til at skabe en global sideramme. Det vil sige, at der oprettes en tabel, der strækkes til sidens fulde bredde, og så laves en menu i dens venstre kolonne, en anden i højre spalte, basisoplysninger placeres i gennemsnit og så videre.

Der er tre typer layout: tabelform, som jeg fortalte dig om ovenfor; lag (blok), der kræver et gennemsnitligt niveau af kendskab til stilarter (CSS) og kombineret. I mange henseender er bloklayout stadig at foretrække, derfor, hvis layoutdesigneren kan udføre opgaven ved hjælp af både tabeller og blokke, så vælges som regel sidstnævnte.

Tagget er ansvarligt for at indsætte billeder i et HTML-dokument. og dets egenskaber, hvoraf de vigtigste kan overvejes src, som angiver adressen på billedet. Det er påkrævet, fordi hvis du ikke angiver, hvor billedet skal hentes, vil browseren ikke være i stand til at vide, hvad den skal tilføje til siden.

Det enkleste tilfælde med at indsætte et billede vil se sådan ud (billedet hedder image.png og er placeret i samme mappe som HTML-dokumentet):

Tidligere ved mærket der var en mere påkrævet egenskab - alt, men med fremkomsten af ​​HTML 5 blev det henvist til kategorien af ​​ønskværdige. alt indstiller den tekst, som brugeren vil se i stedet for billedet, hvis det pludselig ikke indlæses. Nogle optimeringsværktøjer anbefaler også at tilføje denne egenskab, fordi det menes, at det har en positiv effekt på promovering i søgemaskiner.

Hvis du ikke angiver yderligere attributter til billedet, vil det blive vist i fuld størrelse, men det er ikke altid nødvendigt. Heldigvis kan den ønskede størrelse på billedet indstilles ved hjælp af attributter bredde(angiver bredden) og højde(bestemmer højden). Dimensioner kan registreres enten i pixels eller procenter. I det andet tilfælde vil browseren beregne procentdelen fra det overordnede element (for eksempel det afsnit, hvori billedet er indsat).

Lad os sige, at vi skal tilføje et billede til siden image.png med den alternative tekst "Bare et billede", 420 pixels bred og 280 pixels lang. Koden i dette tilfælde vil være som følger:

Navigations kort

Vi talte om, hvordan man laver et billede til et link i den forrige artikel. Men HTML giver dig mulighed for at sætte ikke kun et link på et billede, men flere på én gang. Som et resultat, brugeren klikker på forskellige stederét billede vil gå til forskellige internetadresser. Denne funktion kan f.eks. bruges til at skabe en imponerende menu, interaktive tests eller visuelle grafiske modeller.

For at oprette et billedkort (dette er navnet på den beskrevne funktion), skal du bruge følgende tags og attributter:

• - en beholder, hvori billedkortet er beskrevet.
• - tag indeni , der beskriver et område af billedet. Hvor mange aktive områder planlægger du at opdele billedet i, så mange elementer og skal levere. Flok - fungerer nøjagtigt det samme som bundter
  -
  1. Og
     -
     • , oprettelse af lister.
     • form- tag attribut , som angiver linkets form. Det aktive område kan være i form af et rektangel, en polygon eller en cirkel.
     • ledninger- en egenskab, der definerer koordinaterne for et område. Hører også til mærket . For et rektangel er koordinaterne for det øverste venstre og nederste højre hjørne angivet, for en polygon - koordinaterne for hjørnerne; når du definerer en cirkel, skal du angive koordinaterne for dens centrum og radius.
     • brugskort- tag attribut img, som forbinder billedet med kortet. Takket være det forstår browseren, hvad der er i beholderen kortet over denne særlige tegning er beskrevet.

     Eksempel på billedkort

     For at gøre det klart, hvordan man bruger alt ovenstående, vil jeg give et grundlæggende eksempel. Der er en tegning map.jpg. Det skal opdeles i to aktive områder. Klik på toppen ( grøn farve) vil åbne Odnoklassniki-webstedet, mens den nederste del ( Blå farve) vil være vært på VKontakte. Links skal åbne i en ny fane. Følg nedenstående trin for at oprette et kort.

     1. Indsæt billedet på siden og link det til det fremtidige kort (det vil blive kaldt socialt), hvortil vi skriver følgende kode:

     

     2. Vi bestemmer fremtidige aktive områder i billedet og deres tilsvarende koordinater. Dette kan gøres i Paint, Photoshop eller en hvilken som helst anden grafisk redaktør. I vores tilfælde er alt elementært: rektanglerne er lige høje (114 pixels) og bredde (384 pixels).

     3. Lad os begynde at oprette et kort: Åbn tagget og skriv dets navn i name-attributten, som skal matche værdien af ​​usemap-egenskaben for selve billedet:

     4. Ved hjælp af områdemærker definerer vi aktive områder:

     5. Luk kortet:

     Resultatet af arbejdet blev et billede, klik videre forskellige dele som fører til opdagelsen af ​​forskellige sociale netværk, og dette er HTML-koden:

     

     På trods af at den enkleste sag, man kan tænke på, blev betragtet som et eksempel, demonstrerer den klart princippet om at skabe navigationskort. Så er det et spørgsmål om teknik og at bestemme koordinater; fra et HTML-synspunkt er intet kompliceret.

     God dag til alle, mine kære venner, læsere og gæster på min blog. Det er som om du er på ferie, men du har ikke tid nok til noget. Alt har på en eller anden måde travlt. Men dette fænomen er midlertidigt, alt vil snart falde til ro. Og i dag vil vi fortsætte med at lære det grundlæggende i html. Venner, hvad tror du, uden hvilken enhver internetside vil være ansigtsløs, grå og kedelig? Det er rigtigt, uden grafisk indhold, det være sig fotografier, logoer eller baggrunde.

     Så indsættelse af et billede i html er også en af ​​de vigtigste komponenter, så enhver, der skal lave hjemmesider på egen hånd, bør helt sikkert vide det. Det er præcis, hvad vi vil gøre i dag med al denne bacchanalia)))

     Nå, lad os komme i gang. Som du allerede har forstået ud fra titlen, er tagget ansvarlig for at indsætte billedet , men det har to nuancer:

     1. Tagget er enkelt, så det er ikke nødvendigt at lukke det
     2. Tagget fungerer altid sammen med attributten, som angiver stien til billedet.

     Lad os generelt se på et eksempel for at konsolidere al denne handling. Har jeg ret? Download lektionsmaterialet og åbn html-fil i en notesblok. Og nu før hovedteksten skriv følgende:

     

     Alle. Denne korte post vil give os et billede på vores hjemmeside. Prøv at skrive det i et dokument.

     Gem nu filen og kør den i din browser. Lad os se, hvad vi kan gøre. Jeg gjorde det sådan her.

     Egenskaber

     Som jeg sagde ovenfor, kommer img-tagget straks komplet med src-attributten. Nå, jeg tror, ​​du allerede forstår dette, så lad os studere resten. Her er der plads til at udvide. Der er bare et væld af egenskaber her. Undskyld mit franske).

     Alt

     Hvis billedet pludselig af en eller anden grund ikke er indlæst eller er utilgængeligt, vil du se den tekst, der er skrevet i værdien af ​​Alt-attributten. Normalt er det, der står her, det, der er vist på billedet, dvs. hvis der er afbildet noget om nationaliteter, så er det bedst i alt at skrive "Mænd og kvinder af forskellige nationaliteter." I et eksempel ser det sådan ud:

     

     Som et resultat, hvis billedet af en eller anden grund ikke kan vises, vises vores inskription.

     

     I princippet skal du ikke indtaste noget som helst som en alternativ tekst, men det er bedre at lade selve attributten stå, selvom den er tom.

     Bredde og Højde

     For dem der ved engelsk sprog Det er let at gætte, at disse to attributter er ansvarlige for billedets bredde og højde. Jeg besluttede at kombinere disse to ting i en genstand, da de udfører lignende funktioner, kan man sige - brødre (eller søstre).

     Bredde er ansvarlig for bredden af ​​billedet, og dets værdier inkluderer selve størrelsen. Generelt, hvis du har et billede, for eksempel 640*480 pixels, og du skal vise det på et 320*240 websted, så skal du blot gøre følgende:

     

     Alle. Nu, når du gemmer dokumentet og åbner det ved hjælp af en browser, vil du se et miniaturebillede. Bemærk, at vi kun ændrede breddeparameteren, og billedet blev reduceret proportionalt, dvs. højden faldt automatisk.

     

     Højde , som du måske kan gætte, er ansvarlig for billedets højde. Her fungerer alt præcis ens, men lodret. Lad os tage det samme billede, men vi indstiller ikke bredden, men indstiller kun højden.

     

     Gem og gå til dokumentet. Som du kan se, er billedet reduceret til samme størrelse som i det foregående eksempel, selvom vi denne gang kun indstiller højden. Du forstår allerede, at alt her fungerer inden for rammerne af proportioner, så i princippet nytter det ikke at indstille begge parametre.

     Lad os prøve, bare for sjov, at indstille egenskaberne for både bredde og højde på samme tid, men vi vil bare give dem uforholdsmæssige parametre. Nå, så må vi se, hvad vi kan gøre.

     

     Vi sparer og ser nu på, hvad der blev givet os. Hmm, det er noget uforholdsmæssigt). Generelt tror jeg, du forstår kernen af ​​det. Øv dig selv lidt for at konsolidere arbejdet med dimensioner, og gå så videre til næste egenskab.

     

     Juster

     Nå, du er allerede bekendt med denne egenskab fra den artikel, da vi rent faktisk gik igennem den. Og du har sikkert allerede gættet, at han er ansvarlig for placeringen af ​​billedet.

     Der er i alt fem parametre til align:

     • venstre — venstrejustering
     • højre — højre justering
     • midt - juster billedet til linjens grundlinje (du kan se, hvad det betyder i eksemplet)
     • top — øvre kant af dette billede justeret i højden med de fleste højt element i denne linje
     • bund — juster den nederste kant af billedet til teksten

     Nå, lad os ikke liste dem her, men ifølge traditionen vil jeg vise alt med et eksempel. Download den færdige herfra html dokument og åbne den. Der vil du se 5 identiske afsnit. Indsæt billeder med de beskrevne attributter der:

     

     Nå, nu gemmer vi vores dokument som normalt og ser, hvad vi har fået. Godt? Kan du se forskellen? Nu ved du, hvordan disse parametre adskiller sig).

     

     Grænse

     Border-attributten er indstillet til at angive tykkelsen af ​​rammen på billedet. Og jo større den er, jo tykkere er rammen tilsvarende. Prøv at tilføje denne egenskab til et billede, men skift konstant dets værdi, og du vil selv se, hvor meget tykkere rammen bliver.

     

     

     Hspace og Vspace

     Nå, lad os se på de seneste attributter for img-tagget for i dag. Rum (engelsk) er oversat til rum, rum, mellemrum (nøgle) osv. Præfikserne H og V betyder vandret og lodret. Der burde ikke være nogen spørgsmål her.

     Så hvad gør disse egenskaber? De indstiller de lodrette og vandrette marginer fra billedet til den omgivende tekst (eller andet indhold). Det vil sige, at hvis du ikke kan lide, at billedet er for tæt på teksten, så kan du øge afstanden mellem dem. Lad os se, hvordan det ser ud med et eksempel.

     

     Ser du? Marginerne er steget både vertikalt og horisontalt. Det er, hvad vi ønskede.

     

     Du kan i øvrigt også indsætte disse billeder som header til hjemmesider, lave billeder som links mv. Jeg talte om alt det her.

     Nå, generelt ser jeg ud til at have alt. Jeg har fortalt dig det grundlæggende i at indsætte billeder, men hvis du vil lære HTML og CSS som en professionel, anbefaler jeg stærkt, at du downloader fantastisk kursus om dette emne, hvor du takket være dette markup-sprog og cascading style sheets nemt kan oprette tre typer websteder: visitkort, blogs, onlinebutikker. Alt er fortalt på en enkel og i klart sprog. Det er bare en bombe!

     Nå, jeg siger farvel til dig for i dag. Om blot et par lektioner planlægger jeg at give dig den sidste lektion om HTML grundlæggende, hvorefter vi vil konsolidere al den viden, der er opnået i praksis, og skabe en simpel tre-siders hjemmeside. Generelt vil alt være cool)

     Nå, for ikke at gå glip af alle de mest interessante ting på min blog, skal du sørge for at abonnere på artikelopdateringer. Og selvfølgelig se andre artikler. Jeg er sikker på, at du vil finde meget for dig selv brugbar information. Held og lykke. Vi ses i andre artikler. Hej hej!

     Med venlig hilsen, Dmitry Kostin

     I dette materiale Jeg vil fortælle dig om en meget vigtige tags HTML, til at indsætte billeder og grafik på siden, for uden dette er det svært at skabe en smuk og god hjemmeside.

     Billeder vil gøre din hjemmeside unik og få den til at skille sig ud fra mængden. Husk dog, at overdreven brug af grafik på en hjemmeside kan være en dårlig ting.

     Overbelast ikke din HTML-side med billeder; siden skal være lys og ikke skræmme besøgende væk. Den besøgende skal altid forstå hovedoplysninger og bliv ikke distraheret, indsæt kun billeder i HTML, hvor det er nødvendigt.

     på siden Attributter for BODY-tagget har jeg allerede sagt, at billeder kan være baggrunden for en html-side, og nu vil jeg fortælle dig, hvordan de samme billeder kan bruges på flere højt niveau i stedet for baggrunden.

     Og så, for at indsætte et billede på en HTML-side, skal du bruge et tag hvem har mest hovedegenskab SRC. Denne attribut er påkrævet for at angive adressen på billedet. Lad os sige, at du skal placere et billede image.jpg et eller andet sted på en html-side, og vores billede vil være placeret i samme mappe (mappe) med siden, så skal du skrive følgende html-kode:

     

     Hvis billedet og html-siden er inde forskellige mapper eller mapper, så skal du skrive stien til billedet i forhold til siden. For eksempel er vores html-side placeret i mappen eller mappenyheder, i samme mappe eller mappe er der en undermappe (mappe) pop, hvori vores billede image.jpg er placeret, så for at indsætte det skal du skrive sådan her :

     

     Ud over taggets src-attribut Der er et par flere valgfrie, men vigtige egenskaber:

     • width — billedbredde (du kan angive pixels eller procenter);
     • højde — billedhøjde (du kan angive pixels eller procenter).

     Hvis du ikke angiver disse attributter, indlæses browseren faktiske størrelser Billeder. Du bør dog ikke overdrive det med værdierne af disse attributter, fordi en forøgelse af længden eller bredden af ​​billedet kan forvrænge det, hvilket vil ødelægge det, for eksempel et fotografi af en person, hvor proportionerne af personen vil lave om.

     Som jeg allerede skrev, kan billedets dimensioner angives både i pixels og i procenter. Lad mig bare give dig et eksempel:

     

     Et andet eksempel på html-kode:

     

     Der er tilfælde, hvor muligheden for at vise grafik, herunder billeder, er deaktiveret i browseren, og for at din side ikke mister sin mening, brug alt attribut, hvori vi skriver alternativ tekst, hvis billedet ikke indlæses på siden. html-kode som et eksempel:

     • venstre - billedet vil være placeret til venstre, og teksten ved siden af ​​det vil være til højre;
     • højre - billedet vil være placeret til højre, og teksten ved siden af ​​vil være til venstre.

     Her er HTML-koden:

     Tekst ved siden af ​​billedet.

     og browseren udsender følgende:

     Tekst ved siden af ​​billedet.

     HTML-kode for den rigtige værdi:

     Tekst ved siden af ​​billedet.

     html-siden vil se sådan ud:

     Tekst ved siden af ​​billedet.

     For at forhindre tekst i at ombryde billedet, kan du bruge det tidligere nævnte BR-tag på siden Formatering af tekst i HTML. BR-tagget har i øvrigt en klar egenskab med sine egne værdiværdier:

     • venstre - ombryd ikke tekst, som vil blive justeret til venstre;
     • højre - ombryd ikke tekst, som vil blive justeret til højre;
     • alle - ombryd ikke tekst, som vil blive justeret til venstre og højre kant.

     Ingen egenskab justere tekst Standardomslutningen er til højre for billedet og næsten flush. Hvis du ønsker, at teksten ikke skal pakkes tæt rundt om billedet, kan du bruge følgende egenskaber:

     • vspace - laver top- og bundmargener i pixels;
     • hspace - laver sidemargener (venstre og højre) i pixels.

     Jeg vil give en simpel html-kode som et eksempel:

     Det er så smukt et billede.

     Hvad vil der ske dette eksempel prøv at se selv.

     Du kan også oprette en ramme rundt om billedet ved at bruge kantattributten og angive dets størrelse i pixels. Jo højere værdien er, jo større er rammen omkring billedet. HTML-koden bliver sådan her:

     

     html-siden vil se sådan ud:

     Jeg skrev de vigtigste HTML tags, nødvendig for at indsætte billeder på en HTML-side. Dernæst vil jeg fortælle dig, hvordan du opretter links i HTML, samt hvordan du laver et billede til et link.

     Udgivelsesdato: 15. maj 2012