Sådan indsættes et billede i html?

Hvis du opretter et websted og ønsker at gøre detvirkelig interessant, livlig og visuel, skal du helt sikkert tilføje billeder til dine sider. I denne artikel vil vi se på, hvordan du indsætter et billede i html og xhtml.

Billedmærker

Tagget, der er ansvarligt for at vise billedet på webstedet, er universelt for alle versioner af html. Dette er <img> taggen. Det kan tage en lidt anden form, men essensen forbliver den samme.

For eksempel kan du i html blot bruge en enkelt <img> tag. I xhtml skal alle tags være private. Derfor skal du i slutningen af tagget sætte det rigtige skråstreg: <img />.

Image tag attributter

Når der indsættes billeder, anvendes flere attributter. Lad os overveje dem konsekvent.

Nøgleattributten er src. Det angiver adressen på det billede, du vil uploade til websiden. Et eksempel på html ville se sådan ud: <img src = "http://mysite.ru/picture.png"> Et eksempel på xhtml ville se sådan ud: <img src = "http://mysite.ru/picture.png" />
To attributter vedrører billedstørrelser. Navnlig angiver breddeattributten at definere bredden og højden henholdsvis højden af billedet. Eksempel på html: <img src = "/ images / picture.png" width = "300" height = "100"> For xhtml: <img src = "picture.png 'width =" 300 "height =" 100 "/ > Yderligere attributter bør foreskrives for et enkelt programmeringssprog, da der er en klar analogi overalt.
Alt attributten skal indeholde en kort beskrivelsebilleder. Denne tekst vises, hvis billedet ikke indlæses, eller hvis brugeren søger efter oplysninger via søgemaskinen i afsnittet "Billeder". Et eksempel på en kodekode: <img src = "/ images / picture.png" alt = "Interessant billede">
Titel giver titlen på billedet. Det er også vigtigt, når brugeren søger efter de nødvendige oplysninger. <img src = "/ images / picture.png" title = "Billede">
Vspace-attributten angiver det lodrette indryk mellem billedet og andre markeringselementer (for eksempel tekst). Værdien måles i pixels.
Hspace-attributten angiver samme indrykning, men vandret. Værdien måles også i pixels. Et eksempel på de to sidste attributter: <img src = "/ images / picture.png" vspace = "5" hspace = "5">
Ved hjælp af kantattributten er billedet skitseret af en kant. Hvis værdien ikke er specifikt indstillet, er standardværdien 0. Eksempel: <img src = "/ images / picture.png" border = "1">

Yderligere funktioner til billeder

Et billede kan ikke kun indsættes i tekstenwebside, men også gøre baggrunden. En billedbakgrund er en egenskab af et kropstegn eller en css-stil. Flere oplysninger om, hvordan du indsætter et billede i baggrunden for dit websted, vil du lære i artiklen Sådan laver du en baggrund i html.

Du kan indsætte et billede i tabellen. Så bliver billedet ikke baggrunden for hele siden, men kun for et bestemt område. Og dermed vil billedets sted blive løst uanset den omgivende tekst. For at gøre dette skal du oprette et html-bord. Husk at bordetiketten er bord, strengetiketten er tr (streng), kolonne tag er td.

Billedet indsættes efter td-taggen. Sådan ser det ud: