Jak utworzyć zawijanie tekstu wokół tekstu html?

Obecność obrazów na stronach internetowych poprawia ich wygląd, przyciąga uwagę, a także przyczynia się do lepszego postrzegania tekstów. Zawijanie tekstu za pomocą html do tekstu pozwala łączyć treści z ilustracjami i efektywnie umieszczać materiał. Ciągłe rozwijanie nowych sposobów tworzenia obrazów, pozwalających na ucieleśnienie twórczych pomysłów. Jednocześnie nowe style układów oparte są na tych samych metodach, tworząc nieograniczony zakres wyobraźni.

Pozycjonowanie obrazów względem tekstu można wykonać w html lub używając właściwości CSS.

Tagi HTML: tekst zawijający tekst

Zdjęcia są umieszczane na stronie na trzy sposoby:

• pozycja centralna;
• zawijanie tekstu;
• wstawić w polu.

Przy dużym rozmiarze obraz jest umieszczany na środku strony, najpierw umieszczony w kontenerze <p> znacznika img, po którym ustawiany jest atrybut atrybut = = centrum. Jeśli często używasz obrazu, powinieneś zastosować styl CSS do znacznika <p>.

Gdy obraz jest mały, tekst jest umieszczany obok niego. Metoda jest najczęstsza. Zawijanie tekstu odbywa się na kilka sposobów. Ale najpierw musisz wyświetlić obraz na ekranie. Jeśli ścieżka do niego jest znana, na przykład "foto1.jpg", jest wstawiana na stronę html za pomocą następującego wpisu:

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

Przykład odpowiada przypadkowi, w którym pliki html i obraz znajdują się w tym samym folderze.

Jeśli po obrazie występuje tekst, zostanie on umieszczony poniżej. Nie zawsze jest to wygodne, ponieważ po bokach będą puste przestrzenie, dlatego strona zaprojektowana jest w celu utworzenia oblewania tekstem wokół html obrazu. W tym celu znacznik img ma atrybut wyrównania, który definiuje położenie zdjęcia lub obrazu względem tekstu. Ten parametr określa, od której krawędzi strony znajduje się materiał graficzny i jak wokół niego przepływa tekst. Atrybut może być ustawiony na następujące wartości:

• w lewo - przesuń obraz w lewo, gdy tekst jest zawijany po prawej;
• prawy - zawij obraz po lewej stronie, gdy jest umieszczony po prawej;
• bottom - domyślna wartość, gdy obraz znajduje się po lewej stronie, pierwszy wiersz tekstu zaczyna się od poziomu jego dolnej części;
• u góry - obraz jest umieszczony podobnie do poprzedniej wartości, ale pierwsza linia znajduje się na najwyższym poziomie;
• środkowy - początkowa linia tekstu biegnie przeciwnie do środka obrazu.

Tag img ma parametry, które można wykorzystać do ustawienia odległości od tekstu do obrazu (hspace i vspace). Bez ich zastosowania tekst zostanie umieszczony blisko obrazu. Ponadto wybrane są wymiary szerokości i wysokości. Jednocześnie należy przestrzegać proporcji między szerokością a wysokością. Jeśli wymiary nie są ustawione, domyślnie rysunek jest przenoszony wraz z rozmiarami kodu źródłowego, co nie zawsze jest wygodne.

Przesuwanie obrazu po lewej z zawijaniem tekstu wokół niego można wykonać, pisząc:

<p> <img src = "foto1.jpg" align = "left" width = 150 height = 100 hspace = 5 vspace = 5> Tekst </ p>

Tabele aplikacji

Zawijanie tekstu za pomocą tekstu html jest łatwe do zrobienia za pomocą tabeli z obrazem wewnątrz komórki. W tym przypadku właściwość align zostanie zastosowana do znacznika table. Tabele mają bardziej kontrolowane parametry, co tworzy dla nich korzyści:

<szerokość tablicy = 170 wysokość = 120 obramowanie = 0 wyrównaj = pozostawienie komórek = 0 odstępy między komórkami = 0>
<img src = "foto2.jpg" width = 150 height = 100>

</ table>

Granica stołu staje się niewidoczna i nie pozwala tekstowi zbliżyć się do obrazu. Wcięcia między komórkami i wewnątrz nich można regulować.

Używanie stylów

Z poprzednich przykładów widać, jak łatwo jest zawijać tekst wokół tekstu HTML. CSS pozwala osiągnąć podobne wyniki. Zawijanie jest tworzone przy użyciu właściwości float. Tutaj również wyrównanie jest zapewniane przez wartości lewe i prawe.

W tym celu tworzona jest klasa i przypisywane do niej style CSS:

<styl>

.fotoleft {

float: left;

marża: 5px 12px 3px 0px;

}

</ style>

Następnie właściwość stylu float zostanie dodana do selektora img:

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

Oprócz wyrównania obrazu za pomocą wartości lewej, ustawia także margines tekstu z obrazu za pomocą właściwości margin. Podobnie, zawijanie tekstu po lewej stronie następuje po zastosowaniu właściwej właściwości.

Style umożliwiają nakładanie tekstu bezpośrednio na obraz. Aby to zrobić, tekst jest wstawiany do bloku z półprzezroczystym tłem, które nakłada się na obraz.

Nie jest tak trudno dokonać dramatycznego zawijania tekstu i jego nałożenia na obrazy, ponieważ osiąga się to przez kolejne eksperymenty.

Zawijanie okrągłych obrazów z tekstem HTML

Strony internetowe składają się głównie z prostokątnych obszarów. Każdy wie, jak zrobić tekst zawijający tekst w html. Style są używane do tworzenia kształtów geometrycznych, ale nie są związane z układaniem zawartości wewnątrz lub na zewnątrz elementów. Możliwe jest podzielenie rysunku na 2 części i wstawienie bloków wcięć o różnych szerokościach po obu stronach. Za nimi jest tekst.

Proces tworzenia takiego przepływu jest czasochłonny i musi być wykonywany osobno dla każdego nowego wzoru.

Oblewanie tekstem wokół złożonych kształtów

Opracowując nową specyfikację CSS, Shapes był w stanie wpłynąć na istniejący projekt i zapewnić mu nowe perspektywy. Teraz treść może zawijać się wokół złożonych kształtów i zakrzywionych obszarów.

Specyfikacja jest obsługiwana przez przeglądarkę Chrome Canary, a teraz próbują ją zaimplementować w pozostałych. Pozwala tworzyć złożone projekty bez pomocy edytorów graficznych.

Owijanie html wokół okrągłego obrazu jest dostarczane z następującym wpisem:

#circle

{

kształt zewnętrzny: okrąg (-300px, -300px, 300px); / * (x, y, promień) * /

float: left;

}

<p> Przykładowy tekst </ p>

Kod tworzy okrąg, który jest doskonale zawijany w tekście.

Podobnie, powstanie dowolny nieregularny kształt, dzięki wsparciu Photoshopa, który pozwoli uzyskać kod CSS kształtu.

Wniosek

Podczas tworzenia układów stron za pomocą różnych sposobów umieszczania obrazów i tekstów na nich można stworzyć niepowtarzalny projekt. Aby to zrobić, musisz opanować podstawowe zasady układu, które zapewniają, że tekst jest owinięty wokół tekstu za pomocą html.