Beginner web ontwerpers: hoe om teks vloei rondom beelde maak

In hierdie artikel, sal ons jou vertel van die kenmerke van HTML en CSS, wat verband hou met die beelde. Jy sal leer hoe om hulle te voeg in HTML-dokument. Die artikel bevat ook inligting oor hoe om die beeld te verander, en organiseer teks vloei rondom die beeld.

Eerste - hoe om beeld te voeg. Want dit is daar die etiket "img", wat 'n paar eienskappe het. Die belangrikste van hulle - "src". In dit stoor die adres waaruit die leser 'n foto kan plaas. Jy kan die pad spesifiseer om 'n reeds in die rekenaar gestoor beeld, of gee 'n skakel na 'n web hulpbron.

Nietemin belangrikste eienskappe van 'n paar - "width" (breedte) en "hoogte" (hoogte). Hulle word gebruik om die beelde (nuttige opsie vir strek en comprimeren beelde) met die hand te verander.

Gevolg parameters "hspace" en "vspace" (afstand vanaf die beeld van die omliggende teks). Dit is duidelik dat, "hspace" - horisontale padding en "vspace" - vertikale.

Ons tag het eienskappe soos "alt" en "title". Dit is soortgelyk aan mekaar, want hulle doel is om die beeld te beskryf. Maar in die "titel" voorgeskrewe teks wat vertoon word wanneer jy die muis hover oor die beeld, en die letterlike waarde van "alt" kenmerk vertoon in die geval dat dit nie moontlik was om 'n beeld op te laai.

Daar is 'n paar spesifieke eienskappe wat teenwoordig is in die meerderheid van etikette is. Hierdie "accesskey", "klas", "id" en "styl". "Accesskey" definieer 'n kombinasie van sleutels, waardeur die toegang tot die voorwerp. "Klas" en "id" - parameters wat verband hou met CSS. Hulle beskryf die klas aan wat deel uitmaak van die prentjie (of sy identifisering). "Styl" - die kenmerk teks, sodat jy 'n ingeboude beeld CSS-styl stel.

Een van die parameters wat die voorkoms van die beeld te definieer is "grens". Dit bepaal die dikte van die raam rondom die voorwerp en kan ingestel word om enige positiewe heelgetal (in pixels).

Die volgende kenmerk - "align". Hy beskryf die teks vloei rondom die beeld. Hierdie opsie kan ingestel word om "onderkant", "middel", "links", "regs" en "top". Elkeen van die waardes bepaal waar om die beeld te plaas op die teks. Byvoorbeeld, is 'n waarde van middel beeld "middel" in lyn met die onderste grens van die teks, terwyl "left" - die voorwerp sal wees aan die linkerkant van die teks. Maar dit is net een manier om die teks vloei rondom die beeld stel - HTML.

Daar is nog 'n kragtige instrument - CSS (veel meer veelsydig). Dit kan gebruik word veel meer doeltreffend te stel die etiket eienskappe, insluitend teks vloei rondom die beeld. CSS laat jou toe om die parameters, nie net die spesifieke voorwerp, en almal wat soos hy definieer. Byvoorbeeld, as jy wil hê dat die inkeping van al die foto's in die dokument spesifiseer is tien pixels, is dit voldoende om aan te sluit op die CSS-lêer met 'n enkele steek: "img {margin: 10px 10px 10px 10px;}" (in die praktyk, die aanhalings is nie nodig!).

A teks vloei rondom beelde, byvoorbeeld, op die linkerkant word gedefinieer as: "img {align: left;}".

By the way, toe te voeg die CSS-kode hoef nie om dit te skryf in 'n lêer. Vir hierdie merker "styl" is voorsien in HTML, wat jy CSS-kode kan voeg. Maar dit sal net werk vir die dokument (as jy wil dieselfde kode in verskeie HTML-lêers byvoeg, moet jy 'n aparte stylblad skep).

Nou kan jy "verdun" beelde van die webwerf, die gebruik van die voordelige eienskappe van die etiket, wat verantwoordelik is vir hierdie. Voel vry om die grootte te gebruik of toe te draai teks foto's. Webblaaie sonder grafiese komponente - nogal hartseer oë, is dit nie?