Każdy tekst ma swoją unikalną strukturę: książki są podzielone na części, sekcje i rozdziały, gazety i czasopisma mają osobne nagłówki i podtytuły, które z kolei zawierają fragmenty tekstu, które również mają własną strukturę: akapity, wcięcia itp.
Tekst umieszczany na stronach internetowych nie jest wyjątkiem, musi też mieć logiczną strukturę, zrozumiałą dla każdego użytkownika. W końcu wiele zależy od tego, jak wygodny i prosty będzie postrzegany tekst na stronie: przede wszystkim, jakie wrażenie będzie miał odwiedzający na temat Twojej witryny.
Aby utworzyć strukturalne jednostki tekstu, takie jak akapity, dokumenty HTML używają znacznika
, który oddziela fragmenty tekstu za pomocą pionowego wcięcia (przed i po akapicie dodawana jest pusta linia).
Uwaga: domyślnie odstępy między akapitami to 1em (em to jednostka miary równa wysokości czcionki), co oznacza, że odstępy między akapitami zależą bezpośrednio od rozmiaru czcionki.
Aby zmienić wcięcia między akapitami bez zmiany rozmiaru czcionki, możesz użyć właściwości marginesu CSS.
Nie zapomnij o końcowym tagu
Większość przeglądarek poprawnie wyrenderuje dokument HTML, nawet jeśli zapomnisz o tagu końcowym.
Ustęp
Kolejny akapit
Ten kod będzie działał w większości przeglądarek, ale nie polegaj na nim. Zapomniany tag końcowy może prowadzić do nieoczekiwanych wyników lub błędów.
czerwona linia
Jaka jest czerwona linia? Z definicji jest to pierwszy wiersz akapitu, który był wcześniej podświetlony na czerwono (stąd tytuł). Zanim wynaleziono typografię, książki pisano ręcznie – rozdział lub fragment tekstu, pierwsze słowo lub literę pisano czerwoną farbą. Tak powstało pojęcie „pisania od czerwonej linii” – oznacza ono początek nowej myśli, rozdziału lub części.
Jednak przy tworzeniu stron internetowych projekt czerwonej linii jest rzadko stosowany, mimo że pozwala na wizualną percepcję tekstu ze znacznie większą wygodą, co jest dość istotne dla tradycyjnego czytelnika – nie każdy czuje się komfortowo czytając elektronikę wersja tekstu.
Aby dodać czerwoną linię do swoich akapitów, musisz użyć właściwości CSS text-indent, która umożliwia wcięcie pierwszego zdania:
Próbować "
W powyższym przykładzie pierwszy wiersz każdego akapitu na stronie zaczyna się od wcięcia 25px. Poniższy przykład pokazuje, jak ustawić czerwoną linię tylko dla określonego akapitu na stronie.
Jak w każdej prawdziwej sztuce, w dobre teksty nie ma drobiazgów, którym niektórzy przypisują czerwoną linię, biorąc pod uwagę, że jej użycie nie jest tak ważne. Trzeba jednak zrozumieć, że każdy przecinek niesie ze sobą zarówno ładunek estetyczny, jak i semantyczny, a nie tylko jest hołdem dla zasad gramatyki - dotyczy to również formatowania.
Próbować "Uwaga: nie trzeba ustawiać wcięcia na 25px, możesz sam wybrać optymalny rozmiar wcięcia, również za pomocą właściwości text-indent można zrobić linię wystającą ponad resztę tekstu, w tym celu należy ustawić ujemna wartość właściwości (na przykład: -30px).
Przechodzimy więc bezpośrednio do badania język HTML... Na koniec jeszcze kilka słów nie na temat.
W trakcie prezentacji materiału będzie wiele przykładów, które radzę zrobić samemu. Po wpisaniu przykładowego tekstu koniecznie zobacz, co masz (myślę, że sam będziesz tym zainteresowany). Jeśli korzystasz ze specjalistycznego edytora HTML, z reguły taki program ma własną wbudowaną przeglądarkę, za pomocą której możesz zobaczyć wyniki swojej pracy.
Jeśli jest bardzo ciasno i używasz zwykłego notatnika, to aby go wyświetlić, musisz zapisać tekst źródłowy z rozszerzeniem .htm lub .html, a następnie przejrzeć zapisany plik w przeglądarce. Jeśli masz system Windows, to przeglądarka Internet Explorer jest wbudowany automatycznie podczas instalacji systemu.
Cóż, wydaje się, że to wszystko.
Przejdźmy do interesów.
Tagi obowiązkowe (tagi)
Istnieje kilka podstawowych znaczników HTML, które muszą pojawić się w treści każdej strony internetowej. Każda strona internetowa musi zawierać tag (tag) położony na samym początku. Ten tag (tag) opisuje Twój dokument jako stronę internetową wykonaną w format HTML... Bezpośrednio za deskryptorem zwykle po którym następuje tag (tag) , co wskazuje na obecność tekstu zawierającego tytuł strony oraz Dodatkowe informacje o niej.
Sekcja HEAD zwykle zawiera tag (tag)
Zwykły edytor HTML ma już zestaw powyższych tagów (tagów) podczas tworzenia nowej strony. Należy powiedzieć, że wybór nazw stron internetowych należy traktować z najwyższą powagą. są używane przez wyszukiwarki do tworzenia katalogów stron internetowych. Wyszukiwarka to witryna, która pomaga użytkownikom szybko znaleźć interesujące ich informacje. Twoja strona z większym prawdopodobieństwem zostanie znaleziona przez wyszukiwarkę z określonym zestawem słów kluczowych, jeśli te słowa pojawią się w tytule strony. Wśród najpopularniejszych Wyszukiwarki powinien nazywać się Yandex, Google, Aport, Yahoo, Rambler.
Utwórz akapit, spacje, nagłówek
Przeglądarki internetowe zazwyczaj nie uwzględniają tych znaków nowej linii, które są wprowadzane do tekstu przez użytkownika na etapie jego tworzenia. Aby rozpocząć nowy akapit, użyj tagu (tag)
.
Po otwarciu strony w oknie przeglądarki internetowej wszystkie akapity jej tekstu są oznaczone znacznikiem (tagiem)
, są oddzielone pustymi liniami, aby poprawić układ i wygląd.
Domyślnie przeglądarka zwykle formatuje akapit z wyrównaniem do lewej. Atrybut align jest używany do wymuszonego wyrównania. Dzięki niemu akapity można wyrównać do lewej, prawej, do środka i na szerokość.
Przykład:
|
Kod HTML: akapit jest wyrównany do lewej... akapit jest wyjustowany do prawej... akapit jest wyśrodkowany ... akapit jest uzasadniony... |
Wyświetlacz przeglądarki: akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit wyrównany do lewej akapit akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit wyrównany do prawej akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit jest wyśrodkowany akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości akapit wyrównany do szerokości |
Przeglądarki internetowe automatycznie zawijają tekst w akapitach w nowej linii. Jeżeli zadaniem jest umieszczenie dowolnej kombinacji słów w jednym wierszu, to służy do tego znacznik (tag)
Iść do Nowa linia używany tag (tag)
... Nakazuje przeglądarce zaprzestanie umieszczania tekstu i innych elementów strony w bieżącym wierszu i przejście do nowego wiersza. Ten tag (tag) nie ma własnego odpowiednika w postaci ukośnika, tzw. tagu zamykającego (tag).
Głównym zastosowaniem tego tagu jest wymuszenie umieszczenia elementów wbudowanych w określonym miejscu na stronie. Jest to również przydatne, gdy chcesz powiększyć puste obszary między poszczególnymi elementami strony.
Cześć! Przyjrzyjmy się dalej podstawom programowania stron internetowych. Trudno wyobrazić sobie którekolwiek z nich bez znacznika akapitu w kodzie. Dzisiaj zastanowimy się, jak to poprawnie napisać oraz opis kilku dodatkowych czynności z tekstem.
Przykład
Weźmy przykład, jak zrobić akapit w kodzie HTML.
Jedno lub więcej zdań.
Warunek wstępny jest obecność tagu otwierającego i zamykającego. Przy okazji wszystko można zrobić bezpośrednio w notatniku, dopiero wtedy trzeba będzie zapisać plik w odpowiednim formacie.
Formatowanie
Dość często zauważam, że ludzie są zainteresowani tym, jak zrobić czerwoną linię. Dla konkretnego akapitu jest to bardzo proste.
Włączenie tych opcji spowoduje wcięcie pierwszego wiersza o 15 pikseli od lewej. Jeśli takie zmiany mają zostać zastosowane do wszystkich tagów P, to poniższy kod można zapisać w pliku CSS, który łączy się ze stronami serwisu.
Osobiście zazwyczaj nie robię czerwonych linii podczas edycji kodu w notatniku lub innym edytorze.
Po prostu włączam dopełnienie między blokami tekstu. Aby to zrobić, musisz napisać specjalne parametry w CSS.
p (margin-dolny: 25px;)
Jeśli użyjesz tej konstrukcji, to po każdym akapicie pojawi się wcięcie o wielkości 25 pikseli.
W rzeczywistości istnieje wiele opcji pracy z HTML i różnymi stylami. Opisałem tylko kilka z nich, bardzo trudno ogarnąć wszystko w jednym artykule.
Chcieć wiedzieć więcej? Być może pomocne będą moje wcześniejsze posty na następujące tematy:
Na tym skończę artykuł i myślę, że teraz nie będzie trudno tworzyć akapity w HTML i pięknie je stylizować za pomocą specjalnych tagów.
Życzę sukcesów w opanowaniu programowania. A propos, czy kiedykolwiek myślałeś o zarabianiu na informacyjnych, niekomercyjnych witrynach? Po prostu wspaniałe informacje dostarczone specjalnie dla swoich czytelników.
Normalna praca i finanse online to kluczowe tematy tego bloga. Już teraz możesz zapoznać się z poszczególnymi prospektami w sieci z opublikowanych materiałów. Ciągle przygotowuję i publikuję nowe, a co najważniejsze, naprawdę przydatne treści. Subskrybuj aktualizacje Workipa na swoim e-mail... Do następnego razu.
Aby nadać mu określony styl, musisz umieścić tekst w odpowiednim pojemniku.
Wszystkie tagi formatujące można podzielić na trzy grupy:
1. Tagi nagłówka ( h1-h6).
2. Tagi do projektowania tekstu głównego (
,
,
, ,
itp.).
3. Grupowanie tagów (
,
,
)
Tagi nagłówka
Zamienia zwykły tekst w nagłówek określonego poziomu. Etykietka
tworzy nagłówek pierwszego poziomu - największy i najważniejszy (zazwyczaj tytuł artykułu na stronie),
odpowiedzialny za pozycję szóstego poziomu - najmniejszy i najbardziej niepozorny. Te tagi są ważne zarówno dla użytkowników, jak i dla wyszukiwarek – obie strony uwielbiają podtytuły. Należy przestrzegać hierarchii poziomów, to znaczy dla
muszę iść
, a nie odwrotnie.
Aby zrozumieć, jak to działa, wprowadź następujący kod w pliku html:
Nagłówek pierwszego poziomu
Nagłówek drugiego poziomu
Nagłówek trzeciego poziomu
Nagłówek czwartego poziomu
Nagłówek poziomu 5
Nagłówek szóstego poziomu
W przeglądarce będzie to wyglądać tak:
Tagi stylizacji tekstu ciała
Umożliwia formatowanie na poziomie postaci. Zastanówmy się, co możesz z nimi zrobić.
Pogrubiona czcionka
Potrzebny do skupienia się na tekście. Jest to również ważne dla wyszukiwarek, potrafią wyróżnić słowa kluczowe.
Odpowiedzialny za pogrubienie typu tagów oraz .
Indeks górny i dolny
Można je stosować we wzorach, równaniach, wyznaczaniu niektórych wielkości.
Tag odpowiada za tworzenie indeksów dolnych. , dla górnych stosuje się tag .
x 1= 32 m 2
Zmniejszenie rozmiaru
Jeśli chcesz, aby tekst był o jeden mniejszy niż zestaw na całej stronie, musisz użyć tagu
Zwykły tekst. Zredukowany tekst.
Podkreślać
Tego typu wyróżnienia można użyć do wskazania zmian wprowadzonych w dokumencie lub po prostu do zwrócenia uwagi na tekst.
Zwykły tekst. Podkreślony tekst.
Przekreślenie
Możesz skreślić informacje, jeśli już straciły na aktualności. Tag jest do tego przeznaczony
.
Kursywa
Jest potrzebny do skupienia uwagi na tekście i można go utworzyć za pomocą tagu lub .
Wprowadzanie tekstu komputerowego
Zdarza się, że trzeba dodać kod źródłowy programu i wyniki jego pracy do strony WWW. Aby ułatwić rozróżnianie wizualnie różnych części tekstu od siebie, twórcy HTML zaimplementowali tagi tej grupy.
Do pojemnika
kod programu jest załączony, a jego zmienne są wyróżnione tagiem
a wynikiem wykonania jest
... Pojemnik
zawiera tekst, który podczas pracy z programem użytkownik musi wprowadzić z klawiatury, oraz wszystko, co jest zawarte w tagach , zachowuje oryginalny format, w tym dodatkowe spacje i podziały wierszy.
zatem a, b, c, tutaj wynik wykonania programu , a to jest tekst wprowadzony przez użytkownika wyświetlane w ten sposób
.
Cytaty i definicje
Kod programu będzie wyglądał jak
zatem
, zmienne oznaczono w następujący sposób:
a, b, c
, tutaj
wynik wykonania programu
, a to jest
tekst wprowadzony przez użytkownika
... Zachowaj oryginalne formatowanie wyświetlane w ten sposób
.
Cytat w tagu cytatu blokowego.Cytat wewnątrz kontenera cytowania.
Krótki cytat z tagiem q.
Ogólny przykład
Aby lepiej zrozumieć, za co odpowiada tag i jak działa, spójrz na poniższy kod i wynik jego wykonania.
Tłuszczowy tekst można tworzyć za pomocą tagów silny oraz b... Za kursywa odpowiedź em oraz i.
Tagi: pod oraz łyk są używane do tworzenia niżej(x 1... x n) oraz górny (42= 16) indeksy. Del przekreśla, ins - podkreśla.
Tagi: kod, kbd, var oraz kukurydzianka rzadko używane i potrzebne do wyświetlania listy programów
skrót potrzebne do oznaczenia skrótów ( HTML). Znaczniki blockquote, cite i q służą do stylizowania cytatów ( Już jesienią niebo oddychało
)
Znacznik pre zachowuje oryginalne formatowanie tekstu bez usuwania spacji i łamania wierszy.
Przeglądarka interpretuje ten kod w następujący sposób:
Grupowanie tagów
Potrzebujemy, aby tekst nie szedł w jednej, ciągłej linii, ale był rozbity na logiczne składniki.
- Tagi zawierają akapit.
Pierwszy paragraf
Akapit drugi
- Etykietka
przechodzi do następnego wiersza w akapicie (nie będzie wcięcia przed wierszem).
pozwala narysować linię poziomą. Możesz go użyć do bardziej wizualnego oddzielenia tekstu. Atrybuty szerokość, rozmiar, kolor, wyrównywać oraz noshade ustaw odpowiednio szerokość, grubość, kolor, wyrównanie i brak efektu 3D linii.
Linia nad linią.
Linia pod linią. obrazek lista odnośników tabele wideo audio Odniesienie HTML Odniesienie CSS Układ strony
Częściowo spotkaliśmy się z tytułem strony H1 i akapitem P w pierwszej lekcji na temat struktury dokumentu html. Przyjrzyjmy się teraz bardziej szczegółowo logicznym znacznikom znaczników: nagłówkom, akapitom, listom, widocznym elementom elementu Body oraz znacznikom formatowania fizycznego. Aby to zrobić, nieznacznie zmienimy naszą przykładową stronę lub wpiszemy ją ponownie:
Na naszej szkoleniowej stronie html dodaliśmy (jednokrotnie oznaczone strzałkami): nagłówek drugiego poziomu - tag H2, dwa nagłówki trzeciego poziomu - tag H3, jeszcze jeden akapit - tag P, listę punktowaną - Ul oraz kilka tagów formatowania fizycznego. Otwórzmy stronę w przeglądarce:
Tagi H1-H3 wyznaczają nagłówki różnych poziomów - jest ich sześć. Odpowiednio nagłówek najniższego poziomu to H6. Konieczne jest logiczne użycie nagłówków, a nagłówek Najwyższy poziom H1 musi pojawić się raz na stronie. Nagłówek H1 jest wyświetlany przez przeglądarki dużą czcionką, a rozmiar czcionki w nagłówkach kolejnych poziomów jest odpowiednio zmniejszany.
Boty wyszukiwania przywiązują dużą wagę do treści nagłówków najwyższego poziomu. A użytkownikom łatwiej jest poruszać się po stronie z logicznie poprawnymi nagłówkami.
Fizyczne znaczniki formatowania
Na stronie widoczny jest poziomy pasek, po drugim akapicie - tworzy go element Hr, który nie posiada znacznika końcowego. Znacznik Br oznacza nową linię, nie jest też sparowany - bez znacznika zamykającego. Podczas formatowania tekstu możesz użyć kilku kolejnych elementów Br - każdy następny doda nową pustą linię.
Zwróćmy teraz uwagę na słowo „body” w drugim akapicie, zawarte w sparowanym tagu B, który pogrubia to słowo. A fraza "stylizuj tekst" jest wyświetlana kursywą - osiąga się to za pomocą znacznika I. Znacznik U ustawia podkreślenie (nie ma go w naszym przykładzie).
Oprócz tych znaczników, które wyróżniają fragmenty tekstu, w HTML jest również znacznik Strong - podświetla on ważny fragment (pogrubiony). A tag Em jest trochę mniej ważny (kursywa). Boty wyszukiwania zwracają większą uwagę na te dwa tagi, które wskazują ważne frazy w ich logicznym znaczeniu. Wskazane jest umieszczenie w nich słów kluczowych, ale nie należy przesadzać. To samo dotyczy nagłówków.
Oto kilka dodatkowych znaczników fizycznego formatowania tekstu: Q — Podświetla cytat w wierszu. Blokuj element Cytat blokowy — w tym znaczniku można umieścić wiele akapitów.
Znacznik Code służy do oznaczania fragmentów kodu, musi być używany z podziałami wierszy Br i nierozdzielającymi spacjami: do ich oznaczenia używane są znaki specjalne. znak (pierwszy znak to ampersand: klawisz 7 trzymając Shift w układzie angielskim). Ale znacznik Pre wyświetla kod programu bez zmian, ze spacjami i tyloma wierszami, ile jest w kodzie.
Są to najczęściej używane elementy projektowania tekstu, pozostałe znaczniki formatowania i znaki specjalne można znaleźć w odnośniku HTML znajdującym się w tej samej witrynie - ma wygodną nawigację alfabetem.
Tworzenie list html
Pozostaje rozważyć tworzenie list, oznaczyliśmy je i ustawiliśmy za pomocą sparowanego tagu Ul, a jego elementy lub elementy za pomocą tagu Li (pierwszy zrzut ekranu). Używając atrybutu type dla znaczników Ul i Li, możemy zmienić typ znacznika. Domyślnie tj. jeśli atrybut nie jest określony, jego wartość to „dysk” – okrąg. Możesz ustawić atrybut typu o wartości "koło" - okrąg. Lub tak:
- - otrzymujemy listę z kwadratowymi znacznikami.
Właściwie nie będę się rozwodził nad atrybutami tagów, z wyjątkiem tych obowiązkowych i kilku przykładów do ogólnego zrozumienia. Lepiej używać właściwości CSS do ustawiania stylów - przejdźmy do nich, a atrybuty znajdziesz w odnośniku.
Oprócz list punktowanych istnieją listy numerowane, które są określane przez znacznik Ol, a elementy listy, takie jak wypunktowane, przez znacznik Li. Ponadto dla obu typów list można tworzyć listy zagnieżdżone... Skomplikujmy zadanie i zmieńmy naszą listę na przykładowej stronie na następującą:
Otwórzmy stronę w przeglądarce, widać wyraźnie: listę numerowaną z zagnieżdżoną listą wypunktowaną, dla której wartość „kwadrat” atrybutu typu ustawia znaczniki-kwadraty.
