Si të Përfundo Tekstin rreth një Imazhi

Shikoni në çdo faqe interneti dhe do të shihni një kombinim të përmbajtjes së tekstit dhe imazheve. Të dyja këto elemente janë përbërës thelbësorë në suksesin e një faqe interneti. Përmbajtja e tekstit është ajo që vizitorët e faqes do të lexojnë dhe cilat motorë kërkimi do të përdorin si pjesë e algoritmeve të tyre të renditjes. Imazhet do të shtojnë interes vizual në këtë faqe interneti dhe do të ndihmojnë në nxjerrjen në pah të përmbajtjes së tekstit.

Shtimi i tekstit dhe imazheve në faqet e internetit është e lehtë. Teksti shtohet me etiketat HTML standarde si paragrafët, titujt dhe listat, ndërsa imazhet vendosen në një faqe me elementin . Pasi të keni shtuar një imazh në faqen tuaj të internetit, megjithatë, mund të dëshironi të keni rrjedhën e tekstit pranë imazhit, në vend që të rreshtoni poshtë saj (që është mënyra parazgjedhje që një shëmbëlltyrë e shtuar në kodin HTML do të bëjë në shfletuesin). Teknikisht, ka dy mënyra për të arritur këtë vështrim, ose duke përdorur CSS (të rekomanduar) ose duke shtuar udhëzimet vizuale drejtpërdrejt në HTML (nuk rekomandohet, pasi ju doni të mbani ndarjen e stilit dhe strukturës për faqen tuaj).

Përdorimi i CSS

Mënyra e saktë për të ndryshuar mënyrën e paraqitjes së tekstit dhe pamjes së një faqeje dhe si shfaqen stilet e tyre vizuale në shfletues është me CSS . Vetëm mos harroni, pasi ne po flasim për një ndryshim vizual në faqe (duke e bërë rrjedhjen e tekstit rreth një imazhi), kjo do të thotë se është fushë e Cascading Style Sheets.

1. Së pari, shtoni imazhin tuaj në faqen tuaj të internetit. Mos harroni të përjashtoni çdo karakteristikë vizuale (si gjerësia dhe lartësia e vlerave) nga ai HTML. Kjo është e rëndësishme, veçanërisht për një faqe interneti të përgjegjshme ku madhësia e imazhit do të ndryshojë në bazë të shfletuesit. Disa softuerë, si Adobe Dreamweaver, do të shtojnë informacionin e gjerësisë dhe lartësisë për imazhet që futen me atë mjet, prandaj sigurohuni që të hiqni këtë informacion nga kodi HTML! Megjithatë, duhet të jeni të sigurtë që të përfshini tekstin e duhur të alt . Këtu është një shembull se si mund të duket kodi juaj HTML:
2. Për qëllime styling, ju gjithashtu mund të shtoni një klasë në një imazh. Kjo vlerë e klasës është ajo që ne do të përdorim në skedarin tonë CSS. Vini re se vlera që ne përdorim këtu është arbitrare, edhe pse për këtë stil të veçantë ne tentojmë të përdorim vlerat e "majtës" ose "të djathtë", në varësi se në cilën mënyrë duam që imazhi ynë të përafrohet. Ne kemi gjetur se sintaksë e thjeshtë për të punuar mirë dhe të jetë e lehtë për të tjerët që mund të kenë për të menaxhuar një faqe në të ardhmen për të kuptuar, por ju mund të jepni këtë ndonjë vlerë të klasës që dëshironi.
   2. Në vetvete, kjo vlerë e klasës nuk do të bëjë asgjë. Imazhi nuk do të ndahet automatikisht në të majtë të tekstit. Për këtë, ne tani duhet të kthehemi në skedarin tonë CSS.

1. Në fletën tuaj të stilit, tani mund të shtoni stilin e mëposhtëm:
   1. .left {
   2. noton: majtas;
   3. mbushje: 0 20px 20px 0;
   4. }
   5. Ajo që keni bërë këtu është përdorimi i CSS "float" , i cili do të tërheqë imazhin nga rrjedha normale e dokumentit (mënyra se normalisht do të shfaqet imazhi, me tekstin e përafruar poshtë tij) dhe do ta vendosë atë në anën e majtë të kontejnerit të saj . Teksti që vjen pas tij në shenjën e HTML tani e mbyll atë. Ne gjithashtu shtuam disa vlera të mbushjes, në mënyrë që ky tekst të mos ngrihej drejt imazhit. Në vend të kësaj, do të ketë disa ndarje të këndshme që do të jenë tërheqëse vizuele në hartimin e faqes. Në stenografinë CSS për mbushje, ne kemi shtuar 0 vlera në anën e sipërme dhe të majtë të imazhit, dhe 20 piksele në të majtën dhe në fund. Mos harroni, ju duhet të shtoni disa mbushje në anën e djathtë të një imazhi të majtë të radhitur. Një imazh i shtrirë në të djathtë (që ne do të shikojmë në një moment) do të kishte zbukurim të aplikuar në anën e majtë.
2. Nëse e sheh faqen tënde në një shfletues, tani duhet të shohësh se imazhi yt është në linjë me anën e majtë të faqes dhe teksti e bën mirë rreth saj. Një tjetër mënyrë për të thënë këtë është se imazhi është "lundrues në të majtë".

1. Nëse dëshironi të ndryshoni këtë imazh për t'u renditur në të djathtë (si në shembullin foto që shoqëron këtë artikull), do të ishte e thjeshtë. Së pari, duhet të siguroheni që, përveç stilit që sapo kemi shtuar në CSS për vlerën e klasës "të majtë", ne gjithashtu kemi një për shtrirjen e djathtë. Do të dukej kështu:
   1. .mirë {
   2. noton: e drejtë;
   3. mbushje: 0 0 20px 20px;
   4. }
   5. Ju mund të shihni se kjo është gati identike me CSS-në e parë që kemi shkruar. E vetmja ndryshim është vlera që përdorim për pronën "float" dhe vlerat mbushëse që përdorim (duke shtuar disa në anën e majtë të imazhit tonë në vend të së drejtës).
2. Së fundi, do ta ndryshonit vlerën e klasës së imazhit nga "majtas" në "të djathtë" në HTML:
3. Shikoni faqen tuaj në shfletuesin tani dhe imazhi juaj duhet të jetë në linjë me të djathtën me tekstin e mbështjellë në mënyrë të butë rreth tij. Ne tentojmë të shtojmë të dyja këto stile, "të majta" dhe "të drejta" për të gjitha stilet e stilet tona, në mënyrë që t'i përdorim këto stilet vizuale sipas nevojës kur po krijojmë faqe interneti. Këto dy stile bëhen karakteristika të mira dhe të ripërdorshme që mund t'i drejtohemi sa herë që kemi nevojë të krijojmë imazhe me tekst të mbështjellur rreth tyre.

Përdorimi i HTML Në vend të CSS (dhe Pse nuk Duhet ta Bëni Këtë)

Edhe pse është e mundur të mbyllësh tekstin rreth një imazhi me HTML, standardet e web-it diktojnë që CSS (dhe hapat e paraqitur më sipër) është rruga për të shkuar në mënyrë që të ruajmë një ndarje të strukturës (HTML) dhe stilit (CSS). Kjo është veçanërisht e rëndësishme kur konsideroni se për disa pajisje dhe skica, ky tekst mund të mos ketë nevojë të rrjedhë rreth imazhit. Për ekranet më të vogla, faqosja e një webfaqeje të përgjegjshme mund të kërkojë që teksti të përputhet me të vërtetë nën imazhin dhe se imazhi shtrihet në gjerësinë e plotë të ekranit. Kjo bëhet lehtë me pyetjet e medias nëse stilet tuaja janë të ndara nga shenjat e HTML. Në botën e sotme multi-pajisje, ku imazhet dhe teksti do të shfaqen ndryshe për vizitorë të ndryshëm dhe në ekranet e ndryshëm, kjo ndarje është thelbësore për suksesin afatgjatë dhe menaxhimin e një faqeje interneti.