Spójrz na dowolną stronę internetową, a zobaczysz połączenie treści tekstowej i zdjęć. Oba te elementy są niezbędnymi składnikami sukcesu witryny internetowej. Treści tekstowe są tym, co czytają użytkownicy witryny i jakie wyszukiwarki wykorzystają jako część swoich algorytmów rankingowych. Obrazy dodadzą wizualne zainteresowanie witrynie i pomogą zaakcentować treść tekstu.
Dodawanie tekstu i obrazów do stron internetowych jest łatwe. Tekst jest dodawany za pomocą standardowych znaczników HTML, takich jak akapity, nagłówki i listy, a obrazy są umieszczane na stronie z element. Po dodaniu obrazu do strony internetowej możesz jednak chcieć, aby tekst był wyświetlany obok obrazu, zamiast dopasowywać go poniżej (jest to domyślny sposób renderowania obrazu dodanego do kodu HTML w przeglądarce). Z technicznego punktu widzenia są dwa sposoby osiągnięcia tego wyglądu, albo za pomocą CSS (zalecane), albo poprzez dodanie instrukcji wizualnych bezpośrednio do HTML (niezalecane, ponieważ chcesz zachować separację stylu i struktury witryny).
Używanie CSS
Prawidłowy sposób zmiany układu strony tekstu i obrazów oraz sposobu, w jaki ich style wizualne pojawiają się w przeglądarce, jest zgodny z CSS. Pamiętaj tylko, że ponieważ mówimy o wizualnej zmianie na stronie (przepływie tekstu wokół obrazu), oznacza to, że jest to domena Cascading Style Sheets.
-
Najpierw dodaj swój obraz do swojej strony internetowej. Pamiętaj, aby wykluczyć wszelkie cechy wizualne (takie jak szerokość i wysokość) z tego kodu HTML. Jest to ważne, szczególnie w przypadku elastycznej strony internetowej, na której rozmiar obrazu zależy od przeglądarki. Niektóre programy, takie jak Adobe Dreamweaver, dodają informacje o szerokości i wysokości do obrazów, które są wstawiane za pomocą tego narzędzia, więc pamiętaj, aby usunąć te informacje z kodu HTML! Pamiętaj jednak, aby dołączyć odpowiedni tekst alternatywny. Oto przykład tego, jak może wyglądać Twój kod HTML:
-
Do celów stylizacji możesz także dodać klasę do obrazu. Ta wartość klasy jest tym, czego użyjemy w naszym pliku CSS. Zauważ, że wartość, której tutaj używamy, jest arbitralna, chociaż dla tego konkretnego stylu używamy wartości "left" lub "right", w zależności od tego, w jaki sposób chcemy, aby nasz obraz był wyrównany. Ta prosta składnia działa dobrze i jest łatwa dla innych, którzy mogą potrzebować zarządzać witryną w przyszłości, aby ją zrozumieć, ale możesz dać jej dowolną wartość klasy.
Sama ta wartość klasy nic nie da. Obraz nie zostanie automatycznie wyrównany do lewej strony tekstu. W tym celu musimy teraz przejść do naszego pliku CSS.
-
W swoim arkuszu stylów możesz teraz dodać następujący styl:
.lewo {
float: left;
wypełnienie: 0 20px 20px 0;
}
To, co tu zrobiliście, to wykorzystanie własności "float" CSS, która spowoduje przyciągnięcie obrazu z normalnego obiegu dokumentów (sposób, w jaki obraz normalnie się wyświetla, z wyrównanym tekstem pod nim) i dopasuje go do lewej strony kontenera . Tekst, który pojawia się po nim w znacznikach HTML, teraz owija się wokół niego. Dodaliśmy również pewne wartości dopełnienia, aby tekst ten nie był bezpośrednio skierowany przeciwko obrazowi. Zamiast tego będzie miał ładne odstępy, które będą atrakcyjne wizualnie w projekcie strony. W skróconym skresce CSS dla dopełnienia, dodaliśmy 0 wartości do górnej i lewej strony obrazu, a 20 pikseli do lewej i dolnej. Pamiętaj, że musisz dodać dopełnienie po prawej stronie lewego wyrównanego obrazu. Obraz wyrównany do prawej (na który spojrzymy za chwilę) miałby wypełnienie po lewej stronie.
-
Jeśli przeglądasz swoją stronę w przeglądarce, powinieneś zobaczyć, że obraz jest wyrównany do lewej strony, a tekst ładnie się otacza. Innym sposobem na powiedzenie tego jest to, że obraz jest "płynie w lewo".
-
Jeśli chcesz zmienić ten obraz, aby był wyrównany w prawo (jak na przykładowym zdjęciu, który towarzyszy temu artykułowi), byłoby to proste. Po pierwsze, musisz upewnić się, że oprócz stylu, który właśnie dodaliśmy do naszego CSS dla wartości klasy "left", mamy również jeden dla wyrównania do prawej. Wyglądałoby to tak:
.dobrze {
float: right;
wypełnienie: 0 0 20px 20px;
}
Widać, że jest to prawie identyczne z pierwszym CSS, który napisaliśmy. Jedyną różnicą jest wartość, której używamy dla właściwości "float" i wartości dopełnienia, których używamy (dodając trochę do lewej strony naszego obrazu zamiast prawej).
-
Na koniec zmieniłbyś wartość klasy obrazu z "lewej" na "prawą" w HTML:
-
Spójrz na swoją stronę w przeglądarce teraz, a obraz powinien być wyrównany w prawo, z tekstem starannie owijającym wokół niego. Mamy tendencję do dodawania obu tych stylów "lewo" i "prawo" do wszystkich naszych arkuszy stylów, abyśmy mogli używać tych stylów wizualnych w razie potrzeby podczas tworzenia stron internetowych. Te dwa style stają się przyjemnymi, wielokrotnego użytku funkcjami, do których możemy się zwrócić, gdy tylko chcemy nadać zdjęciom styl zawijania wokół nich.
Używanie HTML zamiast CSS (i dlaczego tego nie robić)
Mimo że możliwe jest zawijanie tekstu wokół obrazu za pomocą HTML, standardy sieciowe nakazują, że CSS (i powyższe kroki) jest drogą do tego, abyśmy mogli zachować separację struktury (HTML) i stylu (CSS). Jest to szczególnie ważne, gdy weźmiesz pod uwagę, że dla niektórych urządzeń i układów ten tekst może nie trzeba przepłynąć wokół obrazu. W przypadku mniejszych ekranów układ strony responsywnej może wymagać wyrównania tekstu pod obrazem i rozciągnięcia obrazu na całą szerokość ekranu. Można to łatwo zrobić za pomocą zapytań o media, jeśli style są oddzielone od znaczników HTML.W dzisiejszym świecie wielu urządzeń, gdzie obrazy i tekst będą wyglądać inaczej dla różnych użytkowników i na różnych ekranach, separacja jest niezbędna do długoterminowego sukcesu i zarządzania stroną internetową.
