Kako stvoriti tekst omot oko teksta html?

Prisutnost slika na web stranicama poboljšava njihov izgled, privlači pažnju i pridonosi boljoj percepciji tekstova. Umetanje teksta s tekstom html omogućuje povezivanje sadržaja s ilustracijama i učinkovito postavljanje materijala. Stalno razvija nove načine stvaranja slika, omogućujući da utjelovimo kreativne ideje. U isto vrijeme, novi stilovi rasporeda temelje se na istim metodama, stvarajući neograničen opseg mašte.

Pozicioniranje slika u odnosu na tekst može se izvršiti u html ili pomoću CSS svojstava.

Html oznake: tekst omatanje teksta

Slike se stavljaju na stranicu na tri načina:

• središnji položaj;
• prelamanje teksta;
• umetnite u polje.

S velikom veličinom, slika se nalazi u sredini stranice, najprije se nalazi u spremniku <p> img oznake, nakon čega je atribut = = centar postavljen za njega. Ako često koristite sliku, trebate primijeniti CSS stil na oznaku <p>.

Kada je slika mala, tekst se postavlja pored nje. Metoda je najčešća. Obrada teksta vrši se na nekoliko načina. Ali najprije morate prikazati sliku na zaslonu. Ako je put do njega poznat, na primjer, "foto1.jpg", umeće se u html stranicu pomoću sljedećeg unosa:

<p> <img src = "foto1.jpg"> </ p>

Primjer odgovara slučaju kada su html datoteke i slika u istoj mapi.

Ako sliku slijedi tekst, ona će se nalaziti ispod. To nije uvijek zgodno, jer će na bočnim stranama biti praznih mjesta, stoga je stranica osmišljena tako da kreira tekstualni omotač oko html-a slike. Za to, img tag ima poravnanje atribut koji definira mjesto fotografije ili slike u odnosu na tekst. Ovaj parametar određuje s kojeg se ruba stranice nalazi grafički materijal i kako tekst teče oko njega. Atribut se može postaviti na sljedeće vrijednosti:

• lijevo - pomicanje slike ulijevo kada omatate tekst s desne strane;
• desna obloga slika s lijeve strane kada je postavljena desno;
• bottom - zadana vrijednost, kada je slika na lijevoj strani, prvi redak teksta počinje na razini njegovog donjeg dijela;
• vrh - slika je postavljena slično prethodnoj vrijednosti, ali se prvi redak nalazi na njegovoj najvišoj razini;
• sredina - početna crta teksta ide nasuprot sredini slike.

Img tag ima parametre koji se mogu koristiti za postavljanje udaljenosti od teksta do slike (hspace i vspace). Bez njihove primjene, tekst će se nalaziti blizu slike. Osim toga, odabrane su dimenzije širine i visine. U isto vrijeme treba poštivati ​​omjer širine i visine. Ako dimenzije nisu postavljene, crtež se prema zadanim postavkama prenosi s veličinama izvornog koda, što nije uvijek zgodno.

Pomicanje slike ulijevo s tekstualnim omatanjem može se obaviti pisanjem:

<p> <img src = "foto1.jpg" align = "lijevo" širina = 150 visina = 100 hspace = 5 vspace = 5> Tekst </ p>

Tablice primjene

Omotavanje teksta s html tekstom je jednostavno učiniti pomoću tablice sa slikom unutar ćelije. Ovdje se svojstvo poravnanja primjenjuje na oznaku tablice. Tablice imaju više kontroliranih parametara, što za njih stvara prednosti:

<table width = 170 height = 120 border = 0 align = lijevo cellpadding = 0 cellspacing = 0>
<img src = "foto2.jpg" širina = 150 visina = 100>

</ table>

Granica tablice je nevidljiva i ne dopušta da se tekst približi slici. Uvjeti između ćelija i unutar njih mogu se podesiti.

Korištenje stilova

Iz prethodnih primjera možete vidjeti kako je jednostavno učiniti tekst omotati oko html teksta. CSS omogućuje postizanje sličnih rezultata. Obrada se stvara pomoću svojstva float. I ovdje je poravnanje osigurano vrijednostima lijevo i desno.

Za to je stvorena klasa i dodijeljeni su CSS stilovi:

<Stil>

.fotoleft {

plutajući: lijevo;

margina: 5px 12px 3px 0px;

}

</ style>

Tada se svojstvo float stila dodaje img selektoru:

<img src = "foto1.jpg" class = "fotoleft">

Osim poravnavanja slike pomoću vrijednosti lijevo, ona također određuje marginu teksta s slike pomoću svojstva margine. Isto tako, omatanje teksta s lijeve strane vrši se ako se primjenjuje pravo svojstvo.

Stilovi vam omogućuju preklapanje teksta izravno na slici. Da biste to učinili, tekst se umeće u blok s poluprozirnom pozadinom, koja se nalazi na slici.

Nije tako teško napraviti dramatičnu tekstualnu foliju i njezino nametanje na slike, jer se to postiže uzastopnim eksperimentima.

Omotavanje slika u obliku okruglog oblika s HTML tekstom

Web stranice se uglavnom sastoje od pravokutnih područja. Svatko zna kako tekst prelomiti tekst u html. Stilovi se koriste za stvaranje geometrijskih oblika, ali nisu povezani s polaganjem sadržaja unutar ili izvan elemenata. Moguće je podijeliti crtež na 2 dijela i postaviti blokove udubljenja različitih širina na obje strane. Iza njih stoji tekst.

Proces stvaranja takvog toka je dugotrajan i mora se raditi zasebno za svaki novi uzorak.

Zaokružite složene oblike

Razvojem nove CSS specifikacije, Shapes je mogao utjecati na postojeći dizajn i pružiti mu nove perspektive. Sada se sadržaj može zamotati oko složenih oblika i zakrivljenih područja.

Specifikaciju podržava preglednik Chrome Canary, a sada ga pokušavaju implementirati na ostatak. To vam omogućuje stvaranje složenih dizajna bez pomoći grafičkih urednika.

HTML omotanje oko okruglog prikaza sadrži sljedeći unos:

#circle

{

vanjski oblik: krug (-300px, -300px, 300px); / * (x, y, radijus) * /

plutajući: lijevo;

}

<p> Primjer teksta </ ​​p>

Kôd stvara krug koji je savršeno omotan u tekst.

Slično tome, svaki nepravilni oblik će se stvoriti, zahvaljujući podršci Photoshopa, koja će omogućiti da dobijete CSS kod oblika.

zaključak

Prilikom izrade izgleda stranica pomoću različitih načina postavljanja slika i teksta na njih, možete stvoriti jedinstveni dizajn. Da biste to učinili, morate ovladati osnovnim pravilima izgleda, koji osiguravaju da se tekst omota oko teksta s HTML-om.