Cum să înfășurați textul în jurul unei imagini

Uită-te la orice pagină web și veți vedea o combinație de conținut text și imagini. Ambele elemente sunt ingrediente esențiale în succesul unui site web. Conținutul de text este ceea ce vizitatorii site-ului vor citi și ce motoare de căutare vor folosi ca parte a algoritmilor lor de clasificare. Imaginile vor adăuga interes vizual pentru site și vor ajuta la accentuarea conținutului textului.

Adăugarea de texte și imagini pe site-uri web este ușor. Textul este adăugat cu etichete HTML standard precum paragrafe, titluri și liste, în timp ce imaginile sunt plasate pe o pagină cu elementul . Odată ce ați adăugat o imagine la pagina dvs. Web, cu toate acestea, ați putea dori să aveți fluxul de text lângă imagine, mai degrabă decât să aliniați sub ea (ceea ce este modul implicit pe care o imagine adăugată în cod HTML va afișa în browser). Din punct de vedere tehnic, există două modalități prin care puteți obține acest aspect, fie prin utilizarea CSS (recomandată), fie adăugând instrucțiunile vizuale direct în HTML (nu se recomandă, deoarece doriți să păstrați separarea stilului și a structurii pentru site-ul dvs.).

Utilizarea CSS

Modul corect de a schimba modul în care textul și imaginea unei pagini și modul în care stilurile vizuale apar în browser sunt cu CSS . Doar amintiți-vă, deoarece vorbim despre o schimbare vizuală a paginii (făcând fluxul de text în jurul unei imagini), aceasta înseamnă că este domeniul caselor de stil cascadă.

1. Mai întâi, adăugați imaginea la pagina dvs. Web. Amintiți-vă să excludeți orice caracteristică vizuală (cum ar fi valori de lățime și înălțime) de acel HTML. Acest lucru este important, mai ales pentru un site web receptiv în care dimensiunea imaginii va varia în funcție de browser. Anumite programe, cum ar fi Adobe Dreamweaver, vor adăuga informații despre lățimea și înălțimea imaginilor inserate cu acel instrument, prin urmare eliminați aceste informații din codul HTML! Fiți sigur, totuși, să includeți alt text corespunzător . Iată un exemplu despre cum poate arăta codul dvs. HTML:
2. Pentru scopuri de stil, puteți adăuga, de asemenea, o clasă la o imagine. Această valoare a clasei este cea pe care o vom folosi în fișierul CSS. Rețineți că valoarea pe care o folosim aici este arbitrară, deși, pentru acest stil particular, avem tendința să folosim valorile "stânga" sau "dreapta", în funcție de modul în care dorim să ne aliniem imaginea. Considerăm că această sintaxă simplă funcționează bine și este ușor pentru alții care ar putea avea de a gestiona un site în viitor pentru a înțelege, dar ați putea da această valoare de clasă pe care o doriți.
   2. În sine, această valoare a clasei nu va face nimic. Imaginea nu va fi aliniată automat la stânga textului. Pentru aceasta, acum trebuie să ne întoarcem la fișierul CSS.

1. În stilul dvs. de stil, puteți adăuga acum următorul stil:
   1. .stânga {
   2. plutește la stânga;
   3. umplutura: 0 20px 20px 0;
   4. }
   5. Ce ați făcut aici este utilizarea proprietății CSS "float" , care va trage imaginea din fluxul obișnuit de documente (așa cum ar fi afișat în mod normal imaginea, cu textul aliniat sub ea) și îl va alinia la partea stângă a containerului . Textul care apare după acesta în marcajul HTML se înfășoară în jurul acestuia. Am adăugat, de asemenea, niște valori de umplutură, astfel încât acest text să nu fie direct față de imagine. În schimb, va avea niște distanțe frumoase care vor fi atractive în designul paginii. În scurta descriere a CSS, am adăugat 0 valori în partea superioară și stângă a imaginii și 20 pixeli la stânga și la partea inferioară. Amintiți-vă, trebuie să adăugați unele elemente de umplutură în partea dreaptă a unei imagini aliniate la stânga. O imagine aliniată la dreapta (la care ne vom uita într-o clipă) ar avea aplicat cearceaf pe partea stângă.
2. Dacă vizualizați pagina dvs. web într-un browser, acum ar trebui să vedeți că imaginea dvs. este aliniată la partea stângă a paginii și textul se înfășoară frumos în jurul acesteia. Un alt mod de a spune este că imaginea este "plutită spre stânga".

1. Dacă doriți să schimbați această imagine pentru a fi aliniată la dreapta (ca în exemplul fotografie care însoțește acest articol), ar fi simplu. În primul rând, trebuie să vă asigurați că, pe lângă stilul pe care tocmai l-am adăugat în CSS pentru valoarea de clasă a "stângii", avem și unul pentru alinierea la dreapta. Ar arata astfel:
   1. .dreapta {
   2. float: dreapta;
   3. umplutura: 0 0 20px 20px;
   4. }
   5. Puteți vedea că acest lucru este aproape identic cu primul CSS pe care l-am scris. Singura diferență este valoarea pe care o folosim pentru proprietatea "float" și valorile de umplutură pe care le folosim (adăugând unele în partea stângă a imaginii noastre în loc de dreapta).
2. În cele din urmă, ați schimba valoarea clasei imaginii de la "stânga" la "dreapta" în HTML:
3. Uitați-vă acum la pagina dvs. din browser și imaginea dvs. ar trebui aliniată spre dreapta, cu textul care se înfășoară în jurul acesteia. Tindem să adăugăm ambele aceste stiluri, "stânga" și "dreapta", la toate foile de stil, astfel încât să putem folosi aceste stiluri vizuale atunci când creăm pagini web. Aceste două stiluri devin elemente frumoase, reutilizabile la care ne putem întoarce ori de câte ori avem nevoie pentru a modela imagini cu text în jurul lor.

Utilizarea codului HTML în loc de CSS (și de ce nu trebuie făcut acest lucru)

Chiar dacă este posibil să faceți textul în jurul unei imagini cu HTML, standardele web dictează că CSS (și pașii prezentați mai sus) este calea de parcurs pentru a putea păstra o separare a structurii (HTML) și a stilului (CSS). Acest lucru este deosebit de important atunci când considerați că, pentru anumite dispozitive și machete, este posibil ca textul să nu fie necesar să curgă în jurul imaginii. Pentru ecrane mai mici, aspectul site-ului receptiv poate necesita ca textul să se alinie într-adevăr sub imagine și imaginea să se întindă pe întreaga lățime a ecranului. Acest lucru se face cu ușurință cu interogările media dacă stilurile dvs. sunt separate de marcajele dvs. HTML. În lumea de astăzi cu mai multe dispozitive, în care imaginile și textul vor apărea diferit pentru diferiți vizitatori și pentru diferite ecrane, această separare este esențială pentru succesul pe termen lung și gestionarea unei pagini web.