Pentru începători: cum să atragă text în jurul imaginii

În acest articol, vă vom spune despre caracteristicile HTML și CSS care sunt asociate cu imaginile. Veți învăța cum să le inserați într-un document HTML. De asemenea, în articol veți găsi informații despre cum să modificați parametrii imaginii și să organizați fluxul în jurul imaginii cu text.

În primul rând, despre introducerea unei imagini. Pentru a face acest lucru, există "img" tag care are mai multe atribute. Principala este "src". Stochează adresa de la care browserul poate introduce imaginea. Puteți specifica calea spre imaginea deja salvată în computer sau puteți da o legătură cu resursa web.

Următoarea pereche de atribute importante este "lățimea" și "înălțimea". Ele sunt folosite pentru redimensionarea manuală a imaginii (o opțiune utilă pentru întinderea și comprimarea imaginii).

Apoi, parametrii "hspace" și "vspace" (distanța de la imagine la textul înconjurător). În mod clar, "hspace" este un indent orizontal și "vspace" este vertical.

Eticheta are atribute precum "alt" și "titlu". Ele sunt similare cu celelalte, deoarece scopul lor este de a descrie imaginea. Dar în "titlu" există un text care se afișează când treceți mouse-ul peste imagine și valoarea literei atributului "alt" este afișată dacă imaginea nu a putut fi încărcată.

Există mai multe atribute specifice care sunt prezente în majoritatea etichetelor. Acestea sunt "accesskey", "class", "id" și "style". Setarea "Accesskey" combinație de taste, cu care este accesat obiectul. "Clasa" și "id" sunt parametrii legați de CSS. Ele descriu la ce clasă aparține imaginea (sau identificatorul acesteia). "Stil" este un atribut text care vă permite să specificați o imagine în stil CSS încorporată.

Unul dintre parametrii care specifică aspectul imaginii este "frontiera". Acesta determină grosimea cadrului în jurul obiectului și poate fi specificat de orice număr întreg (în pixeli).

Următorul atribut este "aliniați". El descrie fluxul din jurul imaginii cu text. Acest parametru poate lua valorile "jos", "mijloc", "stânga", "dreapta" și "de sus". Fiecare dintre valori determină locul în care imaginea va fi relativă la text. De exemplu, dacă valoarea este "mijlocie", mijlocul imaginii va fi aliniat în partea de jos a textului, iar când este "stânga" - obiectul va fi în partea stângă a textului. Dar aceasta este doar o modalitate de a seta fluxul de text în jurul textului - HTML.

Există un alt instrument puternic - CSS (mult mai versatil). Acesta poate fi utilizat mult mai eficient setat atributele tag, inclusiv fluxul de text în jurul imaginii. CSS vă permite să definiți parametrii, nu numai obiectul specific, și toți cei ca el. De exemplu, dacă doriți să specificați adâncitura tuturor imaginilor din document este de zece pixeli, este suficient să se conecteze la CSS-fișier cu un singur cusatura: „img {margin: 10px 10px 10px 10px;}“ (în practică, nu sunt necesare ghilimelele!).

Și fluxul din jurul imaginii cu text, de exemplu, în partea stângă este setat astfel: "img {align: left;}".

Apropo, pentru a adăuga codul CSS nu trebuie să-l scrieți în fișier. Pentru a face acest lucru, HTML oferă o etichetă "stil", în care puteți introduce codul CSS. Dar va funcționa numai pentru acest document (dacă doriți să adăugați același cod la mai multe fișiere HTML, atunci ar trebui să creați o foaie de stil separată).

Acum puteți "dilua" site-ul cu imagini, folosind proprietățile utile ale etichetei, care este responsabilă pentru acest lucru. Simțiți-vă liber să aplicați redimensionarea sau împachetarea textului în jurul imaginii. Paginile web fără componente grafice sunt o privire destul de plictisitoare, nu-i așa?