Õige näide pildi lisamisest html-dokumenti. Kuidas lisada pilti HTML-i - redigeerimine, joondamine, atribuudid. Tasuta fotopankade loend
HTML-märgend vastutab pildi väljundi eest
- HTML-pilt m Võib olla mis tahes pilt PNG-, JPEG- ja GIF-vormingus.
- Pildi HTML-kood määratletud sildi järgi
.
- HTML-pilt võib olla veebilehe taustaks.
- HTML-pilt saab määratleda hüperlingina.
Asetage kausta D\Minu_esimene_sait\ või mis tahes muusse kausta, kus teil on fail index.html, pilt laiendiga, näiteks .jpg, andke sellele soovitud nimi, näiteks xxx.
Pildi lisamine lehe HTML-koodi:
Tag - paaritu. Pöörake tähelepanu selle sulgemisviisile.
Atribuudid ja väärtused
- - nõutav, see näitab pildi allikat.
- alt="" – määratleb alternatiivse teksti, loetava kommentaari otsingurobot veebilehe sisu analüüsimisel. Samuti tuleb see määrata.
- width="" – määrab pildi laiuse pikslites.
- height="" – määrab pildi kõrguse pikslites.
Märkige tegelikud mõõtmed – nii säilitate pildi esialgse kvaliteedi.
Sest Veebiarendus Kasutada saab kolme pildivormingut: PNG (.png), JPEG (.jpg) ja GIF (.gif). Adobe Photoshop on spetsiaalne tööriist veebisaitide graafika loomiseks. Seda saab kasutada ühe pildivormingu teisendamiseks teiseks.
HTML-pilt | Horisontaalsed ja vertikaalsed veerised
või horisontaalne ja vertikaalne vahemaa pilt ja tekst
Tulemus:
Atribuudid ja väärtused
- hspace="" – määrab horisontaalne kaugus pildi ja teksti vahel.
- vspace="" – määrab vertikaalne kaugus pildi ja teksti vahel.
HTML taustapilt
või pildiga määratletud lehe taust
Meil on järgmine pilt:
Kirjutame koodi eraldi leht:
Tausta ja taustapildi atribuute käsitletakse artiklis .
Pildi sisestamine ja selle järjestus → ../images/primer-img.jpg → vt.
HTML pilt – link
Näidiskood:
border="0" – tühistab graafilise lingi äärise.
või kõik võimalikud viisid tsentreerivad pildid
Näidiskood:
|
 |
Millele peate siin tähelepanu pöörama? → Esiteks asjaolu, et mõõtmed on märgitud - see kiirendab pildi laadimist. Teiseks on määratud alt="" atribuudid, mida on samuti väga soovitav teha isegi siis, kui alternatiivset teksti pole. Esimesel juhul määrati tsentreerimine HTML parameeter ja teises - kasutades kaskaadlaadilehtede lineaarset kaasamist.
Laboritöö nr 5
Töö eesmärk:õppida kasutama staatilisi ja dünaamilisi graafilisi pilte www dokumentides; õppige rakendama seoseid hüpertekstifailide ja HTML-dokumendi punktide linkide vahel.
Töö lõpetamine
Linkide korraldamiseks HTML keel märgi vastused …, mis kasutab kõige sagedamini järgmist mustrit:
href sildi atribuut võib osutada lehe sees olevale kohamärgisele (siselingid), kohalikul kettal olevale failile või Interneti-ressursile.
1. Pildi loomiseks, millel klõpsates läheb lingile, tuleb määrata kood: , kus Lõpp tähendab lehe lõppu minekut.
Joonis 1.1 näitab täielik kood HTML.
Joonis 1.1. HTML dokument
Joonisel 1.2. dokument esitatakse brauseris.
Joonis 1.2. Dokument brauseris
Sisestage graafilised objektid HTML-failidele.
Piltide lisamiseks HTML-dokumenti kasutage järgmist konstruktsiooni (esitatakse täielik):
Selle disaini iga parameetri kirjeldus:
src- Graafilise faili nimi laiendiga (toetatud on *.jpg, *.gif, *.png). Kui fail asub teises kataloogis, sisestage selle tee.
Joonda – pildi joondamine dokumendis: vasak - piki vasakut serva paremale - piki paremat serva.
üleval või texttop- joondada pildi ülemine serv praeguse tekstirea ülemise reaga.
keskel- joondab praeguse tekstirea lähtejoone pildi keskkohaga.
kõhklema- joondab praeguse tekstirea keskkoha pildi keskpunktiga.
põhja või baasjoon- joondada pildi alumine serv praeguse tekstirea alusjoonega.
absolt- joondab pildi alumise serva praeguse tekstirea alumise servaga.
Piir- Raam pildi ümber. Vaikeväärtus on 0 (raam puudub).
laius- Pildi laius pikslites.
Kõrgus - Pildi kõrgus pikslites.
Hspace – Horisontaalne polsterdus graafiline pilt pikslites. Pole nõutav parameeter.
Vspace – Vertikaalne nihe pikslites. Pole nõutav parameeter.
Alt- See on teade, mis kuvatakse pildi asemel, kui seda ei kuvata (ei leitud või kasutaja on oma brauseri seadistanud nii, et see ei näita pilte). Lisaks näete seda teksti vihjena, kui hiirekursor on joonise kohal.
nimi - Määrab pildi nime. Tavalise pildi jaoks, mis pole millegagi seotud, pole see parameeter üldse vajalik.
lowsrc- Graafilise faili nimi laiendiga alternatiivse pildiga rohkem Madal kvaliteet(ja vastavalt ka väiksem maht) kui src parameetris määratud pilt. Arvustajad toetavad see parameeter, laadib esmalt pildi saidist lowsrc ja seejärel asendab selle pildiga src-st. Pole nõutav parameeter.
Sisestamiseks graafilised elemendid toimib sildina
.
Graafika tuleb mingil moel eelnevalt ette valmistada graafiline redaktor, või saadud digikaamera või skanneri abil või teha lihtsalt valmispildi.
Võimaluse korral tuleks kasutada graafilisi faile väikesed suurused, et vähendada brauseril lehe laadimiseks kuluvat aega. Vaevalt tasub ühel lehel kasutada graafilisi pilte, mille kogumaht ületab 100 kB. Sellise lehe laadimine võtab enamikul kasutajatel väga kaua aega ja kõik ei oota laadimise lõpuni.
Graafika tuleb esitada failidena laiendiga .jpg .gif.
Paljud kasutajad keelavad Interneti-sirvimise kiiruse suurendamiseks oma brauserites graafika toe. Atribuut Alt võimaldab luua teksti, mida tuleks vajadusel graafika asemel kuvada.
Graafika sisestamiseks html-lehe teksti tuleb määrata vastava faili nimi ja salvestuskoht. Kui fail asub lehega samas kaustas, siis piisab laiendiga failinime määramisest. Kui graafiline fail asub teises kaustas, peate lisaks faili nimele ja laiendile määrama ka selle faili tee. Pildi tsentreerimiseks kasutatakse silti
Näide:
|
HTML kood:  |
Brauseri ekraan: |
Tausta lisamine html-dokumendile
Kui Valge taust lehele, millega te rahul ei ole, siis kasutage märgendi atribuuti BACKGROUND
, saate lehele varustada mis tahes graafilise tausta. Sest Brauser paigutab automaatselt pildi koopiad nii, et see täidaks kogu lehe, seejärel saab tausta moodustamiseks kasutatud pildi väikeseks muuta.Lehe graafilise tausta kujundamisel kasutage pilte, mis võivad tekitada huvitavaid visuaalseid efekte ja teisalt ei segaks tajumist tekstiteave. Kena pilt mitu korda korrates näeb see välja "sile", ilma "õmblusteta". Võimalik, et pärast graafilise tausta kasutamist peate loetavuse saavutamiseks muutma fondi värvi.
Raam annab pildile selguse ja definitsiooni. Raami loomiseks kasutage märgendi BORDER atribuuti . Selle atribuudi abil saate määrata äärise joone paksuse pikslites. Kui määrate nullväärtuse, siis raami ei kuvata.
Näide:
|
HTML kood:
|
Brauseri ekraan: |
Teksti mähimine graafika ümber html-dokumendis
Kui soovite, et graafika sobituks orgaaniliselt teie veebilehe kujundusega, aitab teid selles sildi atribuut ALIGN.
.
See atribuut võimaldab määrata kaks väärtust - vasak parem.
Vasak väärtus paneb brauseri asetama pildi tekstist vasakule ja paremale sellest paremale. Kui soovite vormindada ainult teatud teksti fragmenti, peaksite kasutama BR-märgendit atribuudiga CLEAR, mis näitab positsiooni tekstis, millest alates teksti murdmise mehhanism tühistatakse. Atribuudi CLEAR väärtused vasak, parem, kõik võimaldavad teil määrata, kummal küljel - vasakul, paremal, mõlemal - tekst on siis graafikata.
Tuleb märkida, et kui olete juba kasutanud atribuuti ALIGN teksti ja graafika joondamiseks konkreetsel veebilehel, ei saa te määrata teksti ümber graafikat.
Atribuut ALIGN võimaldab paigutada teksti kahe graafika vahele. Sel juhul peaksid pilte kirjeldavad sildid asuma nende vahele jääva teksti kohal.
Näide:
|
HTML kood:
|
HTML-pildid lisatakse veebilehtedele märgendi abil . Graafika kasutamine muudab veebilehed visuaalselt atraktiivsemaks. Pildid aitavad paremini edasi anda veebidokumendi olemust ja sisu.
HTML-i siltide kasutamine
Piltide lisamine HTML-dokumenti
1. Märgi ![]()
Element tähistab pilti ja selle varu sisu, mis lisatakse atribuudi alt kasutades. Alates elemendist
on väiketähtedega, on soovitatav asetada see näiteks plokielemendi sisse,
Või
Tag sisaldab nõutavat src atribuuti, mille väärtus on pildi absoluutne või suhteline tee:
Sildi jaoks Saadaval on järgmised atribuudid:
| Atribuut | Kirjeldus, aktsepteeritud väärtus |
|---|---|
| alt | Atribuut alt lisab pildile alternatiivse teksti. Kuvatakse kohas, kus pilt kuvatakse enne selle laadimist või kui graafika on keelatud, ning kuvatakse ka tööriistaspikrina, kui hõljute kursorit pildi kohal. Süntaks: alt="pildi kirjeldus" . !} |
| ristpäritolu | Atribuut crossorigin võimaldab laadida pilte teise domeeni ressurssidest, kasutades CORS-i päringuid. CORS-i päringute abil lõuendile laaditud pilte saab uuesti kasutada. Lubatud väärtused: anonüümne – ristpäise päring tehakse HTTP-päise abil ja mandaate ei edastata. Kui server ei anna serverile, kust sisu küsitakse, mandaate, rikutakse pilt ja selle kasutamine on piiratud. use-credentials — ristpäritolu päring sooritatakse mandaatide edastamisega. Süntaks: crossorigin="anonymous" . |
| kõrgus | Kõrguse atribuut määrab pildi kõrguse. Saab määrata px või %. Süntaks: kõrgus: 300 pikslit. |
| ismap | Atribuut ismap näitab, et pilt on osa serveris asuvast kaardipildist (kaardipilt on klõpsatavate aladega pilt). Kui klõpsate kaardipildil, saadetakse koordinaadid serverisse URL-i päringu stringina. Atribuut ismap on lubatud ainult siis, kui element Süntaks: ismap. |
| longdesc | Laiendatud pildi kirjelduse URL, mis täiendab atribuuti alt. Süntaks: longdesc="http://www.example.com/description.txt" . |
| src | Atribuut src määrab pildi tee. Süntaks: src="lill.jpg" . |
| suurused | Määrab pildi suuruse sõltuvalt kuvamisvalikutest. Töötab ainult siis, kui atribuut srcset on määratud. Atribuudi väärtus on üks või mitu komadega eraldatud stringi. |
| srcset | Loob loendi pildiallikatest, mis valitakse ekraani eraldusvõime alusel. Saab kasutada koos atribuudiga src või selle asemel. Atribuudi väärtus on üks või mitu komadega eraldatud stringi. 
|
| kasutuskaart | Atribuut usemap määrab pildi pildikaardina. Väärtus peab algama sümboliga #. Väärtus on seotud märgendi nime või id atribuudi väärtusega |
| laius | Laiuse atribuut määrab pildi laiuse. Saab määrata px või %. Süntaks: laius: 100% . |
1.1. Pildi aadress
Pildi aadressi saab määrata täismahus (absoluutne URL), näiteks:
url (http://anysite.ru/images/anyphoto.png)
Või suhtelise tee kaudu dokument või juurkataloog veebisait:
url(../images/anyphoto.png) – suhteline tee dokumendist,
url(/images/anyphoto.png) – suhteline tee juurkataloogist.
Seda tõlgendatakse järgmisel viisil:
../ - tähendab ühe taseme võrra kõrgemale minemist juurkataloogi,
images/ - minge piltidega kausta,
anyphoto.png – osutab pildifailile.
1.2. Pildi mõõtmed
Pildi mõõtmeid määramata kuvatakse joonis lehel tegelikus suuruses. Pildi mõõtmeid saate redigeerida laiuse ja kõrguse atribuutide abil. Kui määratud on ainult üks atribuutidest, arvutatakse teine automaatselt, et säilitada pildi proportsioonid.
1.3. Graafilised failivormingud
JPEG-vormingus (Fotograafiaekspertide ühisrühm). JPEG-kujutised sobivad ideaalselt fotode jaoks ja võivad sisaldada miljoneid erinevaid värve. Pildid tihendatakse paremini kui GIF-id, kuid tekst ja suured ühevärvilised alad võivad muutuda laiguliseks.
GIF-vormingus (Graafika vahetamise vorming). Ideaalne ühevärviliste aladega piltide (nt logod) tihendamiseks. GIF-id võimaldavad teil määrata ühe värvi läbipaistvaks, võimaldades veebilehe taustal kuvada osa pildist. GIF-id võivad sisaldada ka lihtsat animatsiooni. GIF-pildid sisaldavad ainult 256 varjundit, mis muudab pildid laiguliste ja ebareaalsete värvidega nagu plakatid.
PNG-vormingus (Kaasaskantav võrgugraafika). Sisaldab GIF- ja JPEG-vormingute parimaid omadusi. Sisaldab 256 värvi ja võimaldab muuta ühe värvi läbipaistvaks, tihendades samal ajal pilte GIF-failist väiksemaks.
APNG-vormingus (Animeeritud kaasaskantav võrgugraafika). PNG-vormingul põhinev pildivorming. Võimaldab salvestada animatsioone ja toetab ka läbipaistvust.
SVG-vormingus (Skaleeritav vektorgraafika). SVG-kujutis koosneb komplektist geomeetrilised kujundid, kirjeldatud XML-vormingus: joon, ellips, hulknurk jne. Toetatakse nii staatilist kui ka animeeritud graafikat. Funktsioonide komplekt sisaldab mitmesugused transformatsioonid, alfamaskid, filtriefektid, võimalus kasutada malle. SVG-piltide suurust saab muuta kvaliteeti kaotamata.
BMP formaat (Bitmap pilt). Esindab tihendamata (originaal) rasterpilt, mille mall on ristkülikukujuline pikslite ruudustik. Bitmap fail koosneb päisest, paletist ja graafilistest andmetest. Päises on salvestatud teave graafilise pildi ja faili kohta (pikslite sügavus, kõrgus, laius ja värvide arv). Palett on näidatud ainult nendes bitmap-failides, mis sisaldavad paleti kujutisi (8 või vähem bitti) ja koosnevad kuni 256 elemendist. Graafilised andmed esindavad pilti ennast. Värvi sügavus sisse see formaat võib olla 1, 2, 4, 8, 16, 24, 32, 48 bitti piksli kohta.
ICO formaat (Windowsi ikoon). Failiikooni salvestusvormingus Microsoft Windows. Samuti kasutatakse Windowsi ikooni Interneti veebisaitidel ikoonina. See on selles vormingus pilt, mis kuvatakse brauseris veebisaidi aadressi või järjehoidja kõrval. Üks ICO fail sisaldab ühte või mitut ikooni, mille suurust ja värvi saab eraldi määrata. Ikooni suurus võib olla mis tahes suurus, kuid kõige levinumad on ruudukujulised ikoonid, mille küljed on 16, 32 ja 48 pikslit.
2. Märgi
Tag
Märgendil on saadaval atribuut name, mis määrab kaardi nime. Märgendi atribuudi nimi väärtus
Element
3. Märgi
Tag kirjeldab kliendipoolse pildikaardi osana ainult ühte aktiivset piirkonda. Elemendil ei ole sulgevat silti. Kui üks aktiivne ala kattub teisega, rakendatakse alade loendist esimene link.
| Atribuut | Lühike kirjeldus |
|---|---|
| alt | Määrab aktiivsele kaardialale alternatiivse teksti. |
| koordinaadid | Määrab ala asukoha ekraanil. Koordinaadid määratakse pikkusühikutes ja eraldatakse komadega: Sest ring— ringi keskpunkti ja raadiuse koordinaadid; Sest ristkülik— ülemise vasaku ja alumise parema nurga koordinaadid; Sest hulknurk— hulknurga tippude koordinaadid vajalikus järjekorras, joonise loogiliseks lõpetamiseks on soovitatav märkida ka viimased, esimesega võrdsed koordinaadid. |
| lae alla | Täidab atribuuti href ja ütleb brauserile, et ressurss tuleks laadida hetkel, kui kasutaja lingil klõpsab, selle asemel, et see näiteks kõigepealt avada (nagu PDF-fail). Atribuudile nime määramisega anname laaditud objektile nime. Atribuuti on lubatud kasutada ilma selle väärtust täpsustamata. |
| href | Määrab lingi URL-i. Määrata saab absoluutse või suhtelise lingi aadressi. |
| hreflang | Määrab seotud veebidokumendi keele. Kasutatakse ainult koos atribuudiga href. Aktsepteeritud väärtused on lühend, mis koosneb tähepaarist, mis näitab keelekoodi. |
| meedia | Määrab, millist tüüpi seadmetele fail optimeeritakse. Väärtus võib olla mis tahes meediumipäring. |
| rel | Laiendab atribuuti href teabega praeguse ja seotud dokumendi vahelise seose kohta. Aktsepteeritud väärtused: alternatiivne – link alternatiivne versioon dokument (näiteks trükitud lehevorm, tõlge või peegel). autor — link dokumendi autorile. järjehoidja – järjehoidjate jaoks kasutatav püsiv URL. abi – link abi saamiseks. litsents – link selle veebidokumendi autoriõiguste teabele. järgmine/eelmine – näitab seost üksikute URL-ide vahel. Tänu sellele märgistusele saab Google kindlaks teha, et nende lehtede sisu on loogilises järjestuses seotud. nofollow – keelab otsingumootor järgige sellel lehel olevaid linke või konkreetset linki. noreferrer - näitab, et lingi jälgimisel ei tohiks brauser saata HTTP päringu päist (Referrer), mis salvestab teabe selle kohta, milliselt lehelt saidi külastaja tuli. prefetch – näitab, et sihtdokument peaks olema vahemällu salvestatud, s.t. Taustal töötav brauser laadib lehe sisu alla oma vahemällu. otsing – näitab, et sihtdokument sisaldab otsingutööriista. silt – näitab märksõna praeguse dokumendi jaoks. |
| kuju | Määrab kaardil aktiivse ala kuju ja selle koordinaadid. Võib võtta järgmisi väärtusi: rect — ristkülikukujuline aktiivne ala; ring — ringikujuline aktiivne ala; polü — hulknurga kujuline aktiivne ala; vaikimisi – aktiivne ala hõivab kogu pildi ala. |
| sihtmärk | Määrab, kuhu dokument lingil klõpsamisel alla laaditakse. Aktsepteerib järgmisi väärtusi: _self — leht laaditakse aktiivsesse aknasse; _blank — leht avaneb uues brauseriaknas; _parent — leht laaditakse ülemraami; _top – leht laaditakse täisbrauseriaknas. |
| tüüp | Määrab lingifailide MIME tüübi, st. faililaiendit. |
4. Pildikaardi loomise näide
1) Märgi algne pilt aktiivseteks aladeks soovitud kuju. Alade koordinaate saab arvutada fototöötlusprogrammi abil, näiteks Adobe Photoshop või Värvige.
Riis. 1. Näide pildi märgistusest kaardi koostamiseks 2) Määrake kaardi nimi, lisades selle sildile
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Riis. 2. Näide pildikaardi loomisest, kui klõpsate hiirekursoriga lillel, lähete kirjeldusega lehele
1. Kaustas HTML luua kaust Õppetund 3, kuhu salvestame kõik meie tunni jooksul saadud veebilehed.
2. Graafilistele objektidele, mida saab kompositsiooni kaasata võrk-lehtedel on mitmesuguseid jooniseid, fotosid ja videoklippe. Sageli kasutatakse kuvaheli võrk- lehed. Kaalume ainult piltide sisestamist. Brauserid suudavad kuvada ainult kolme tüüpi graafilisi faile: failivorminguid GIF, JPEG Ja PNG. Failiformaat GIF võimaldab teil luua animeeritud pilte. JPEG- faile kasutatakse tavaliselt fotopiltide salvestamiseks. Äsja kasutusele võetud formaat PNG annab hea kvaliteet pildid ja väike kogus graafilisi faile.
Kujutise lisamiseks kompositsiooni võrk-lehe märgend on rakendatud
paljude atribuutidega. Sellel sildil ei ole sulgevat vastet. Sildi peamine ja kohustuslik atribuut
on atribuut SRC. Selle atribuudi väärtus on sisestatud graafilise faili aadress või täpsemalt selle aadress URL.
Tag
võib sisaldada ka atribuuti ALT = "[tekst]". Kui brauser leiab sellise sildi, kuvab see teksti ekraanil "Pilt" ja hakkab selle asemel pilti failist laadima pilt.gif. Atribuut ALT võib olla vajalik vanemate brauserite jaoks, mis ei toeta pilte, ja ka juhul, kui brauser on keelatud automaatne allalaadimine pilte. Juhul, kui brauser ikka graafilist pilti näitab, kuvatakse alternatiivse tekstiesituse tekst vihjena, lühikese tekstitööriista vihjena, kui kasutaja viib hiirekursori selle graafilise kujutise kohale.
3. Kausta Õppetund 3 kopeeri fail pilt.gif (\\tserver\õpilased\VKT\IS\Tarkvaraga töötamise tehnoloogia\Tööfailid).
4. Loo sisse Märkmik uus fail ja tippige sinna tekst HTML- dokument. Salvestage see fail nime all leht1.htm kaustas Õppetund 3 ja vaadake seda brauseriaknas.
5. Vaikimisi näidatakse graafilist pilti täpselt sellisena, nagu see loodi, säilitades selle vertikaalsed ja horisontaalsed mõõtmed. Küll aga on meil võimalus oma äranägemise järgi selgesõnaliselt määrata pildi mõõtmed. Selleks kasutatakse atribuute KÕRGUS Ja LAIUS. Nende väärtused on määratud pikslites või protsentides brauseriakna suurusest.
Tuleb märkida, et brauserid püüavad säilitada pildi proportsioone, nii et selgelt proportsioone muutvate mõõtmete määramist saab brauser ignoreerida ja valib need suurused, mis on võimalikult lähedased kasutaja määratud suurusele. kuid ärge rikkuge pildi proportsioone. Tavaliselt selleks võrk-lehed koostavad joonised suuruste kohta, mida kasutatakse nende osana kuvamisel võrk- lehed. Kui ühte pilti tuleb kuvada mitu korda erineva suurusega, siis on lihtsam ette valmistada mitu graafilist faili, kui anda oma pildid kontrollimatult brauserisse kuvamiseks, mis võib häirida kogu veebilehtede paigutust. Muutke sisestatud suurust HTML- dokument leht1.htm Pildid. Salvestage fail sama nime all ja vaadake seda oma brauseris.
6. On atribuute HSPACE Ja VSPACE, mis võimaldab teil määrata vaba ruumi, mis eraldab graafilise pildi teistest seda ümbritsevatest kujunduselementidest võrk-leht ehk teisisõnu määrake pildi taane. Atribuut HSPACE määrab horisontaalse nihke pikslites ja atribuudi VSPACE- vertikaalselt. Pange tähele, et neid atribuute saab määrata ainult arvväärtustena, mis näitavad kaugusi pikslites. Nende atribuutide jaoks ei ole nullväärtust ette nähtud, kuid tavaliselt kasutab iga brauser väikest nullväärtust. Muuda HTML- dokument leht1.htm järgmise koodilõigu lisamine:
7. Salvestage fail sama nime all ja vaadake seda oma brauseris. Muutke brauseriakna suurust, muutke see kitsaks, poole monitori ekraani laiusest. Nagu näeme, sisestatakse pilt kohe pärast esimest lauset, kuhu me sildi panime
. Kui vähendame brauseri vaateakna horisontaalset suurust nii, et esimene lause ja joonis ei mahu ühele reale, siis kuvatakse kõigepealt lause ja seejärel selle all olev joonis, vajutatuna vaateakna vasakusse serva. Sellest paremal hakkab kuvama sellele järgnev tekst, nii et joone alusjoon langeb kokku pildi alumise servaga.
8. Määra pildi taanded tekstist muutes HTML- dokument leht1.htm järgmisel viisil:
9. Salvestage fail sama nime all ja vaadake seda oma brauseris.
10. Joondamiseks graafiline objekt atribuuti kasutatakse selle ümber keerduva teksti suhtes JOONDA. Selle väärtus võib olla üks märksõna eelmääratletud komplektist. Väärtused ALUMINE, KESKMINE Ja TOP kasutatakse vertikaalselt ümber pildi jooksva teksti esimese rea paigutamiseks. Tähendus TOP liigutab seda üles ALUMINE- alla ja KESKMINE võimaldab joont vertikaalselt tsentreerida.
Graafilise pildi horisontaalseks joondamiseks kasutage väärtusi VASAKULE Ja ÕIGE. Esimene väärtus VASAKULE, nagu võite arvata, nihutab joonise selle ploki vasakusse serva, milles see kuvatakse, ja ÕIGE- paremale.
Lisa HTML- dokument leht1.htm sildis
atribuut JOONDA tähendusega VASAKULE ja vaadake, kuidas on muutunud pildi paigutus ja tekst selle ümber.
11. Sildi muutmine HTML- dokument leht1.htm atribuudi väärtus JOONDA peal KESKMINE ja vaadake, kuidas muutub pildi ja selle ümber oleva teksti paigutus.
Esimene tekstirida, mis järgneb pildisisestussildile, kuvatakse vertikaalselt pildist paremal asuva valge ruumi keskel. Ülejäänud tekst asub pildi all. Kui me määrasime atribuudi JOONDA tähenduses TOP, siis ilmuks esimene rida joonise ülemise serva kõrvale. Väärtuse kasutamisel ALUMINE Esimene tekstirida ilmub pildi alumise ääre lähedale.
Pange tähele, et brauser tuvastab ainult ühe atribuudi JOONDA st saame määrata kas vertikaalse või horisontaalse joonduse. Kui sisseehitatud tööriistadest pildi positsioneerimiseks ja joondamiseks ei piisa, saate tabelite abil küljendusprotsessi juurde pöörduda.
12. Atribuudi kasutamine PIIR saame määrata joonist ümbritseva piiri paksuse. Atribuudi väärtus on arv, mis näitab paksust pikslites. Vaikeväärtus on null, mis muudab äärise nähtamatuks. Andke oma joonisele 5 piksli suurune ääris.
13. Värvilahendus HTML-dokument määratakse sildi sisse pandud atribuutide järgi .
· bgcolor- määrab dokumendi taustavärvi.
· tekst- määrab dokumendi teksti värvi.
· link- määrab valitud tekstielemendi värvi, klõpsamisel järgneb hüperteksti link.
Tag võib sisaldada ka atribuuti background= "[faili nimi]", mis määrab pildi, mis toimib teksti ja muude piltide taustana. Nagu iga teine pilt, tuleb taust esitada vormingus GIF(laiendiga fail *.gif) või JPEG(laiendiga fail *.jpg või *.jpeg). Brauserid täidavad kogu akna ruumi, kus dokument on avatud, taustapildi mitme koopiaga, täpselt nagu ehitamise ajal kaetakse suured seinapinnad väikeste (ja identsete) plaatidega.