Do wkładki obrazy w HTML Dwa główne formaty to GIF i JPEG. Format GIF może przechowywać w środku proste animacje (dynamiczne banery), JPEG doskonale nadaje się do obrazów z dużą ilością kolorów, takich jak zdjęcia. Trzeci format grafiki internetowej to Format PNG, ale nie jest szeroko stosowany w projektowaniu stron internetowych. Każdy obraz w formacie GIF lub JPEG jest wstawiany na stronę internetową za pomocą tagu < img > , bez znacznika końcowego.
Atrybut SRC
Według atrybutu src ustawiony jest adres (URL) pliku z obrazem, tj. przeglądarka znajdzie żądany obraz w katalogu witryny wzdłuż ścieżki (adresu URL) określonej w tym atrybucie. Dla wygody wszystkie obrazy witryny znajdują się w osobnym folderze, zwykle o nazwie obraz. Na przykład weź dowolny obraz, najlepiej mały, i zapisz go w utworzonym folderze obrazów pod nazwą podkład.jpg. Następnie odniesiemy się do niego w celu szkolenia.
Cóż, spróbujmy wstawić obrazek na stronę? Piszemy kod (ścieżka jest adresem URL, jest zapisywana w zależności od lokalizacji folderu z obrazami):
< img src="image/primer.jpg">
Alternatywny tekst. Atrybut ALT
Do czego służy tekst alternatywny? Chodźmy w porządku. Każda przeglądarka posiada funkcję wyłączania obrazów, dzięki czemu użytkownik korzystający z takiej funkcji może zobaczyć po opisie określonym w tagu Alt, który jest obrazem. Może dzisiaj jest to nieistotne, ponieważ preferuje się nieograniczone taryfy, ale nadal uważana jest za zasadę dobrej formy. Spójrzmy na przykład kodu:
Możesz to zobaczyć tylko po wyłączeniu wyświetlania obrazów w przeglądarce.
Ustaw rozmiar. Atrybuty WIDTH i HEIGHT
Od razu zauważam, że szerokość i wysokość są bardzo ważne parametry więc nie należy ich ignorować. Oceń sam, przy nieokreślonych rozmiarach obrazów i wyłączonych obrazach w przeglądarce, gdy obrazy nie są ładowane, małe puste kwadraty mogą w ogóle nie znajdować się w miejscu, w którym planowałeś je umieścić. Nie doda urody stronie. Dlatego nie bądź leniwy i zawsze przepisuj wymiary w kodzie HTML.
Ustaw wymiary obrazu za pomocą tagów szerokość- szerokość i Wysokość- wysokość, wartości są ustawiane zarówno w pikselach, jak i jako procent szerokości ekranu (bardzo ostrożnie z procentami). Spójrzmy na kod:
Wniosek
Obrazy są atrakcyjne dla odwiedzających witrynę, dostarczają wielu informacji wizualnych, są łatwe w użyciu, ale nadal istnieją pewne wytyczne, których należy przestrzegać, jeśli chcesz stworzyć dobrą, popularną witrynę.
Nie jest konieczne używanie zbyt dużych rozmiarów plików graficznych, ponieważ wpływa to na szybkość ładowania strony. Uwierz mi, to nie ostatni wskaźnik.
Atrybut ALT jest bardzo ważny i musi być dodany dla każdego tagu IMG. Zawartość wiadomość tekstowa powinien opisywać obraz bardzo dokładnie i zwięźle.
Obrazy na stronie internetowej muszą być zgodne z treścią tekstu.
Po przestudiowaniu tej sekcji możesz już spróbować swoich sił jako webmaster i stworzyć pełnoprawną stronę HTML. Przejdźmy teraz do wstawiania multimediów.
W życiu każdego copywritera następuje etap poznawania tagów html. Zwykle dzieje się to spontanicznie i wygląda jak prośba klienta o „przygotowanie tekstu do publikacji”. Oznacza to, że w artykule musisz wyróżnić nagłówki, akapity, ważne miejsca i listy, ale nie za pomocą funkcji Worda, ale za pomocą specjalnych Kod HTML język. Pomóż z tym tagi dla copywritera. Lista potrzebna do pracy jest zwykle niewielka, ale wystarcza do formatowania tekstu ze standardowymi wymaganiami. Co zawierają niezbędne tagi html dla copywritera? (Jeśli jesteś zbyt leniwy, aby czytać, przewiń w dół - jest prosta i zrozumiała infografika tematyczna o tagach html!)
Pytania, które zadaje copywriter, są tradycyjne. I wszystkie zaczynają się od sformułowania "jaki tag jest podany...":
- tytuł;
- ustęp;
- Miniaturka;
- kursywa;
- lista zaznaczona/niezaznaczona/
Wszystko to nadaje TK pikanterii i stymuluje rozwój nowej wiedzy. Sytuację pogarsza, gdy zadaniem jest użycie pogrubionego znacznika tekstowego w celu zwiększenia atrakcyjności klucza w PS. Ale wszystko to jest rozwiązane bardzo prosto, czym zajmiemy się teraz.
Tagi do tworzenia nagłówków
Tagi nagłówków są reprezentowane przez elementy h1-h6. Dostali swój list z angielskiego Header (header). Aby ustawić wymagany typ nagłówka i podkreślić jego znaczenie dla PS, użyj następującego kodu:
Nagłówek h1
nagłówek h2
nagłówek h3
nagłówek h4
nagłówek h5
nagłówek h6
Na stronie będzie to wyglądać tak.
Nagłówek h1
nagłówek h2
nagłówek h3
nagłówek h4
nagłówek h5
nagłówek h6
Największe znaczenie – i widoczność – ma nagłówek h1. Jest używany jako tytuł posta i jest używany raz. W przypadku podtytułów w tekście zalecane są h2 i h3. Pomagają podkreślić wagę rozważanego materiału i podzielić artykuł na poziomy informacyjne.
Nagłówki h4-h6 praktycznie nie są używane, ale wymagają wyróżnienia bloków logicznych i ważnych fragmentów.
W przypadku dużych artykułów najlepiej używać nagłówków h1-h3, w przypadku małych h1 i h2.
Listy: oznaczone i nieoznaczone
Ustrukturyzowany dobry tekst zawsze zawiera jedną lub więcej list. Na mój własny sposób wygląd listy to:
- oznaczone - posiadają numerację;
- unmarked - elementy są oznaczone symbolami.
Ale cały projekt Worda nie nadaje się do publikowania w witrynie, więc powinieneś nauczyć się poprawnie formatować listy w znacznikach HTML.
Etykietka lista punktowana
na to wygląda:
Oznacz listę nieoznakowanych Więc:
Dodatkowo każdy element listy ma swoją własną ramkę HTML:
Okazuje się, że aby wyróżnić w tekście listę punktowaną za pomocą kodu html, trzeba będzie połączyć oba rodzaje użytych elementów. Będzie to wyglądać tak:
- Element listy
- Element listy
- Element listy
- Element listy
W przypadku listy nieoznaczonej, podobnie:
- Element listy
- Element listy
- Element listy
- Element listy
Uporządkowałem listy. Możesz iść dalej.
znaczniki akcentujące tekst: pogrubienie i kursywa
Rozumiejąc, który tag pozwala poprawnie sformatować tekst, prawie natychmiast natkniesz się na dwie opcje kodu dla każdego przypadku. Powoduje to dezorientację wśród nie-programistów i pytanie: jakiego rodzaju tagu potrzebuje klient.
Wszystko jest bardzo proste! Tagi oferują opcje formatowania fizycznego i logicznego. Te pierwsze są potrzebne użytkownikom, drugie wyszukiwarkom. „Wyszukiwarki”, widząc odpowiedni dla siebie kod html, biorą pod uwagę wybrany obszar i wykorzystują informacje otrzymane podczas rankingu, dzięki czemu wyróżnienie tekstu za pomocą logicznego formatowania nie będzie błędem.
Zastosowanie tagów html pozwala zadowolić wyszukiwarki i wizualnie wyróżnić tekst dla użytkownika. Zdecyduj, co jest ważniejsze:
Wyróżnienie frazy pogrubioną czcionką dla PS i użytkowników Pogrubienie frazy dla użytkowników Fraza pisana kursywą dla PS i użytkowników Kursywa fraza dla użytkowników
Mam duży i bardzo kontrowersyjny artykuł na temat pogrubionych tagów, który nazywa się .
Jeśli któryś z programistów nagle zainteresuje się tematem, to spieszę raz jeszcze zaznaczyć, że recenzja jest dla copywriterów: jak umieszczać tagi, czym one są i co należy wziąć pod uwagę przy wyborze. I na koniec wymagany jest jeszcze jeden popularny kod html podświetlić akapity. Ten
Znacznik otwierający umieszczany jest przed początkiem akapitu, znacznik zamykający umieszczany jest na końcu. Jeśli akapit kończy się listą, to
jest umieszczany po wszystkich tagach użytych w liście.
Na koniec kilka prostych tematycznych infografik:
Gdy w komentarzach rozpoczęła się dyskusja na dany temat, w Klubie Copywriterów Sukcesu, ciekawie się stało Opinia. Oto zrzut ekranu opinii autorytatywnego uczestnika dyskusji.
Przeczytaj: 6 687
Tagi HTML- Fundacja język HTML. Tagi służą do rozgraniczenia początku i końca elementów w znaczniku.
Każdy dokument HTML składa się z drzewa elementów HTML i tekstu. Każdy element HTML jest identyfikowany przez znacznik początkowy (otwierający) i końcowy (zamykający). Znaczniki początkowe i końcowe zawierają nazwę znacznika.
Wszystkie elementy HTML są podzielone na pięć typów:
- puste elementy — ,
,
,, - elementy zwykłego tekstu —
