To jest zwykły tekst, a to jest italski tekst.

Tak będzie wyglądał kod w przeglądarce:

Blok . Listy

Oprócz akapitów i nagłówków jest jeszcze jeden ważny element strony – ten listy. Takie elementy są chyba znane wszystkim internautom. Stanowią wyliczenie czegoś (listy) punkt po punkcie. Obok każdej pozycji na liście znajduje się zwykle wypełnione kółko (nazywa się to znacznik lista).

Listy są tworzone z tagiem

, który musi zawierać tagi
• . Etykietka ul ustawia samą listę, a w tagach Li pozycje listy powinny być określone (tzn. jeden li odpowiada jednemu znacznikowi listy). Należy pamiętać, że znaczników li nie można używać samodzielnie. Zobacz przykład:
  • Pierwsza pozycja na liście.
  • Druga pozycja na liście.
  • Trzecia pozycja na liście.

  Tak będzie wyglądał kod w przeglądarce:

  • Pierwsza pozycja na liście.
  • Druga pozycja na liście.
  • Trzecia pozycja na liście.

  Listy utworzone za pomocą tagu ul, są nazywane nieuporządkowany listy. To imię zostało im nadane, ponieważ są też zamówiony listy, które będą miały znaczniki cyfrowe zamiast znaczników kropkowych. Takie listy zamiast znacznika ul mają znacznik

  , a elementy takich list są również tworzone za pomocą tagów Li.

  Zróbmy uporządkowaną listę za pomocą tagu stary:

  1. Pierwsza pozycja na liście.
  2. Druga pozycja na liście.
  3. Trzecia pozycja na liście.

  Tak będzie wyglądał kod w przeglądarce:

  1. Pierwsza pozycja na liście.
  2. Druga pozycja na liście.
  3. Trzecia pozycja na liście.

  Wygoda uporządkowanych list polega na tym, że mogę wstawić nowy element listy w dowolnym miejscu - a numeracja sama się odbuduje (to znaczy nie muszę jej śledzić w przypadku jakichkolwiek zmian, jak gdybym ułożył to ręcznie).

  Blok . Spinki do mankietów

  Spinki do mankietów to elementy, które czynią Internet Internetem. Klikając w linki, możemy przechodzić z jednej strony serwisu na drugą. Gdyby nie istniały, Internet byłby tylko zbiorem stron, które nie mają ze sobą nic wspólnego.

  Link do strony phphtml.net.

  Tak będzie wyglądał kod w przeglądarce:

  Linki są absolutny oraz względny, ponadto mogą prowadzić zarówno do Twojej witryny, jak i do cudzej witryny. Lepiej pokazać te trudne chwile, niż opisywać je w tekście, dlatego zrobiłem dla Was poniższy film. Obejrzyj i dopiero wtedy przejdź do dalszej lektury:

  Blok . Kino

  Zastanówmy się teraz, jak umieścić obraz na stronie w Twojej witrynie. Po to jest tag. , który ma wymagany atrybut src, który przechowuje ścieżkę do pliku obrazu.

  Jak to działa, spójrzmy na następujący przykład:

  

  Tak będzie wyglądał kod w przeglądarce:

  Należy pamiętać, że tag nie wymaga tagu zamykającego.

  Blok . Linki w postaci zdjęć

  Połączyć może być nie tylko tekstem, ale także obrazek- do tego wystarczy tag umieść tag , jak to zrobiono w poniższym przykładzie. Kliknij na obrazek - a przejdziesz w link do strony phphtml.net (aby wrócić do książki później - kliknij przycisk "wstecz" w przeglądarce):

  

  Tak będzie wyglądał kod w przeglądarce:

  Blok . Przerwanie linii

  Pamiętaj, co się stanie, jeśli ułożysz np. dwa akapity obok siebie – w tym przypadku tekst, który leży w każdym z nich, zacznie się od Nowy linie.

  Zobaczmy to na poniższym przykładzie:

  To jest pierwszy akapit.

  To jest drugi akapit.

  Tak będzie wyglądał kod w przeglądarce:

  To jest pierwszy akapit.

  To jest drugi akapit.

  Zdarzają się jednak sytuacje, w których chcielibyśmy mieć jeden akapit, ale część zawartego w nim tekstu zaczyna się od nowej linii. Dlaczego może to być potrzebne? Na przykład chcę napisać wiersz, ale nie chcę dzielić każdego wiersza na osobny akapit, ponieważ nie byłoby to zbyt logiczne.

  Aby to zrobić, w miejscu, w którym powinien znajdować się podział wiersza, napisz tag
  . Zauważ, że ten tag jest specjalny i nie ma tagu zamykającego.

  Zobaczmy, jak to działa na poniższym przykładzie:

  To jest pierwsza linijka tekstu
  a to jest drugi.

  Tak będzie wyglądał kod w przeglądarce:

  To jest pierwsza linijka tekstu
  a to jest drugi.

  Blok . Komentarze HTML

  Prawie wszystkie języki programowania mają coś takiego jak „komentarze”.

  Aby nasza strona internetowa wyglądała bardziej reprezentacyjnie, dzielimy tekst na akapity i wyróżniamy nagłówek. HTML ma 6 poziomów nagłówków sekcji dokumentu, ponumerowanych od 1 do 6. Nagłówki są deklarowane przez parę znaczników z numerami odpowiadającymi poziomowi, na przykład

  - nagłówek sekcji pierwszego poziomu, oraz
  - nagłówek sekcji szóstego poziomu. Nagłówki różnią się od zwykłego tekstu wielkością i szerokością liter. Nagłówek pierwszego poziomu h1 jest zwykle wyświetlany bardzo dużą czcionką, podczas gdy nagłówek szóstego poziomu h6 jest wyświetlany bardzo małą czcionką.

  Tytuły

  Nie myl tytułów sekcji dokumentu z wcześniej omawianym tytułem dokumentu, zdefiniowanym przez element .

  Jako tytuł tekstu używamy pierwszego zdania – w tym celu wystarczy ograniczyć go tagami

  oraz

  .

  Wstaw tagi do tekstu innego pliku.html

  oraz

  tak, że ograniczają pierwsze zdanie tekstu, a ten fragment kodu ma następującą postać:

  Witamy na stronie firmy SD!

  Spójrzmy na uzyskany wynik.

  Zapisz plik, wybierając polecenie menu programu Notatnik Plik - Zapisz (Plik - Zapisz).

  Operację zapisywania należy zawsze wykonać przed przeglądaniem dokumentu, ponieważ otwiera ona plik do przeglądania, ładując go z dysku do pamięci RAM komputera. Jeśli nie zapiszesz pliku po edycji kodu HTML, nie zobaczysz żadnej konfiguracji w przeglądarce.

  Przywróć okno przeglądarki, klikając jego przycisk na pasku zadań.

  Naciśnij przycisk F5 lub przycisk Odśwież na pasku narzędzi okna roboczego programu. Plik other.html zostanie ponownie załadowany i zobaczysz w oknie przeglądarki, jak wygląda nagłówek pierwszego poziomu.

  Zobacz jak będą wyglądały tytuły pozostałych 5 poziomów zmieniając numery w tagach: h2, h3 itd. Po każdej konfiguracji nie zapomnij zapisać pliku i odświeżyć obraz w oknie przeglądarki.

  Po zakończeniu eksperymentów ponownie przywróć tagi z pliku other.html

  .

  Korzystanie z 6 poziomów nagłówków, które oddaje do Twojej dyspozycji język HTML, możesz stworzyć czytelny dokument o intuicyjnej strukturze. Pamiętaj, że Twój dokument zawsze będzie czytał się znacznie lepiej, jeśli będzie miał precyzyjny podział na sekcje i podsekcje.

  Wyrównanie kursu

  Domyślnie tytuł jest wyrównany do lewej strony strony. Ale może być również wyrównany do prawej lub wyśrodkowany. Do wyrównania do prawej w tagu

  używany jest atrybut align="right" i align="center" do centrowania. Dozwolone jest również oczywiste wskazanie wyrównania do lewej strony - align="left".

  Dodaj do tagu

  atrybut align="center", aby wyśrodkować nagłówek. Ten element powinien mieć następującą postać:

  Witamy na stronie firmy SD!

  W przyszłości nie będziemy przypominać o konieczności zapisania pliku z początkowym kodem i aktualizacji obrazu w przeglądarce przed wyświetleniem.

  Jak pogrubić tekst w HTML

  Przejdźmy teraz do reszty tekstu. Zwiększ jego rozmiar i pogrubiaj tekst kursywą. Sparowane tagi służą do pogrubienia stylu .

  Wklej w pliku otwieranie other.html i zamykanie tagi tak, aby ograniczały tekst Tutaj się dowiesz... Ten element powinien mieć następującą postać:

  Jak zrobić kursywę w HTML

  Styl kursywy jest ustawiany za pomocą tagów .

  Wstaw tag HTML do początkowego kodu oraz aby edytowany element przybrał postać:

  Tutaj dowiesz się o naszych działaniach, o produkty oprogramowania o naszej firmie i produkowanym przez nas sprzęcie

  Elementy znaczników mogą być zagnieżdżone, tak jak w tej strukturze, gdzie element … zagnieżdżone w elemencie …. Nowoczesne przeglądarki potrafi prawidłowo obsługiwać zagnieżdżone tagi. Dlatego musisz upewnić się, że kolejność zagnieżdżania nie jest naruszona. Przeglądarka będzie utrudniona, jeśli zagnieżdżenie jest zepsute. Na przykład poniższy byłby niepoprawny: …. Zagnieżdżanie jest bardzo podstawową częścią kultury pisania kodu HTML.

  Jak sprawić, by tekst był podkreślony w HTML

  Z kilkoma tagami możesz ustawić podkreślony styl fragmentu tekstu ograniczonego tymi znacznikami i używając pary znaczników - pokaż tekst czcionką dalekopisu.

  Należy zauważyć, że ostatnio tag uproszczenie i podkreślenie odbywa się za pomocą stylów. równowartość . Tak, nowy analog wygląda bardziej nieporęcznie, ale niestety jest bardziej prawdziwy. Najważniejsze jest to, że obszerny wariant jest dostępny w różnych przeglądarkach, innymi słowy jest odpowiedni dla wszystkich przeglądarek, gdy obie Nie wszystkie przeglądarki obsługują.

  Jak zwiększyć tekst w HTML

  Teraz zwiększmy rozmiar czcionki tekstu. Można to zrobić na różne sposoby.

  tagi zwiększyć rozmiar czcionki tekstu zawartego między nimi.

  Dodaj tagi odpowiednio na początku i na końcu powyższego fragmentu kodu oraz aby element przybrał postać:

  Tutaj dowiesz się o naszej działalności, o oprogramowaniu naszej firmy oraz o sprzęcie, który produkujemy.

  Korzystanie z tagów możesz zmniejszyć rozmiar czcionki tekstu w porównaniu do początkowego.

  Inną metodą określania rozmiaru czcionki są znaczniki. z atrybutem rozmiaru. Jako wartości tego atrybutu stosuje się liczby całkowite od 1 do 7. W tym przypadku wartość 1 odpowiada najmniejszy rozmiar czcionka, a wartość 7 jest największa.

  Używanie zamiast tagów zobacz tagi , zobacz jak zmienia się rozmiar czcionki tekstu przy różnych wartościach atrybutu size - od 1 do 7.

  Możesz również użyć liczb od 1 do 7 ze znakiem + (plus) lub - (minus) jako wartość atrybutu rozmiaru. W takim przypadku rozmiar czcionki odpowiednio się zwiększa lub zmniejsza w stosunku do początkowego, np. tagów zwiększy rozmiar czcionki w stosunku do obecnego o jeden poziom. Sprawdzać.

  Ustaw 5 jako wartość atrybutu rozmiaru dla danego fragmentu tekstu: . Kod HTML tego kawałka powinien wyglądać tak:

  Tutaj dowiesz się o naszej działalności, o oprogramowaniu naszej firmy oraz o sprzęcie, który produkujemy..

  W tagach atrybut color może być również użyty do określenia koloru czcionki oddzielonego znacznikami tekstowymi. Wartości tego atrybutu są takie same jak dla omówionych wcześniej atrybutów opisujących kolor tła i tekstu dokumentu.

  Domyślnie akapit z tekstem Tutaj będziesz wiedzieć... jest wyrównany do lewej. Wyśrodkuj go poziomo za pomocą tagów

  . Możesz także wyrównać akapit do prawej strony strony za pomocą tagów. lub po lewej - za pomocą tagów .

  Przyklej tagi

  ograniczając je do wyznaczonego ustępu.

  Zauważ, że użyliśmy znaczników do wyśrodkowania akapitu

  , w przeciwieństwie do atrybutu align="center", który zastosowaliśmy w tagach
  .

  Uwaga! Dla tagów 2010 ,

  , , są uważane za przestarzałe i dlatego wymagane jest stosowanie analogów ze stylów. Nie oznacza to, że nie możesz ich używać, ale jeśli możesz, postaraj się ich pozbyć.

  =

  =

  =

  =

  =duża ilość rozszerzone funkcje;">

  Istnieje również ogromna liczba innych przestarzałych tagów, których nie można opisać w tym artykule, dlatego lepiej od razu zapoznać się ze specjalistycznymi witrynami WWW dotyczącymi tego problemu. Ale główne zamieściłem tutaj trochę wyżej

  Kody wyboru

  Język HTML pozwala na dwa podejścia do wyboru czcionki fragmentów tekstu. Z jednej strony możesz bezpośrednio wskazać, że czcionka w określonej sekcji tekstu może być pogrubiona lub kursywa, innymi słowy, oczywiste jest wskazanie stylu czcionki tekstu, tak jak zrobiliśmy to w tym eksperymencie. Z drugiej strony można oznaczyć dowolny fragment tekstu jako mający jakiś styl logiczny, który jest ładniejszy niż zwykle, pozostawiając ten styl do interpretacji przez przeglądarkę. W ten sposób styl logiczny pokazuje rolę utworu tekstowego, na przykład jego duże znaczenie w porównaniu ze zwykłym tekstem, czy fakt, że ten utwór jest cytatem. We własnej pracy możesz korzystać z kolejnych tagów, które definiują style logiczne. Sprawdź jak działają różne przeglądarki.

  - służy do definiowania słowa. Tekst jest domyślnie wyświetlany kursywą.

  - podkreślanie słów i wzmacnianie. Tekst jest domyślnie wyświetlany kursywą.

  - aby wyróżnić tytuły książek, filmów, przedstawień itd., domyślnie wyświetlane kursywą.

  - dla fragmentów kodu programu. Wyświetlane na wyświetlaczu czcionką o stałej szerokości.

  - używane dla tekstu, który użytkownik wprowadza z klawiatury. Może być wyświetlany w różnych czcionkach w różnych przeglądarkach. Tag przestarzały.

  - służy do wyświetlania komunikatów programu. Wyświetlane czcionką o stałej szerokości. Tag przestarzały.

  - dla szczególnie ważnych fragmentów. Zwykle wyróżnione pogrubioną czcionką.

  - służy do wskazania, że ​​fragment tekstu lub słowo jest zmienną znakową, czyli tekstem, który można zastąpić różnymi wyrażeniami. Domyślnie wyświetlane kursywą. Tag przestarzały.

  Specyfikacja HTML 4.0 oferuje bardziej zaawansowaną metodę określania stylów tekstu i innych części przy użyciu języka CSS Cascading Style Sheets. Arkusze stylów to ogromne osiągnięcie w dziedzinie projektowania stron internetowych, rozszerzające możliwości poprawy wyglądu stron. Arkusze stylów ułatwiają definiowanie odstępów między wierszami, wcięć, kolorów tekstu i tła, rozmiarów i stylów czcionek itd. Jako wartość atrybutu stylu używane są pary postaci „właściwość: wartość”. Na przykład w fragmencie kodu opisującym nagłówek sekcji,

  atrybut style="color: blue" określa, że ​​właściwość color jest ustawiona na niebieski, tzn. tekst nagłówka pierwszego poziomu powinien być wyświetlany w kolorze niebieskim.

  Wyrównanie stylu

  Zobaczmy, jak używać języka kaskadowego arkusza stylów, aby określić styl fragmentu tekstu, który zaczyna się od słów Tutaj dowiesz się ...

  Aby określić grubość czcionki, użyj właściwości font-weight z wartościami jaśniejszy (wąski), bold (bold), bolder (bold), na przykład style="font-weight: bold".

  Aby zdefiniować styl kursywy, użyj właściwości font-style z wartością kursywa. Dlatego, aby tekst był pogrubiony kursywą, należy znaleźć atrybut stylu w następujący sposób: style="font-weight: bold; font-style: italic". Uwaga: cechy mogą być umieszczone w dowolnej kolejności i muszą być oddzielone średnikiem.

  Jeśli chcesz określić rozmiar czcionki, powinieneś użyć właściwości font-size, której wartości można określić w wartościach względnych lub bezwzględnych. Wartości względne to procenty, a wartości bezwzględne to punkty (pt), piksele (px), centymetry (cm), milimetry (mm). Na przykład:

  style="rozmiar-czcionki: 200%"

  style="rozmiar czcionki: 16pt"

  style="rozmiar czcionki: 100px"

  Określając rozmiary bezwzględne, a nie względne, pozbawiasz użytkowników przeglądających Twoje strony możliwości zwiększania lub zmniejszania rozmiaru czcionki za pomocą polecenia menu przeglądarki, zgodnie z ich wizją i rozdzielczością monitora. Czcionki będą wyświetlane tylko w określonym przez Ciebie rozmiarze. Dlatego lepiej określić rozmiar czcionki w procentach. W takim przypadku rozmiar czcionki będzie mniejszy lub większy o wskazany procent niż wtedy, gdy został zaprojektowany z Pomoc HTML tag domyślny.

  Aby określić metodę wyrównania tekstu w poziomie, użyj właściwość text-align z wartościami po lewej (po lewej), po prawej (po prawej), pośrodku (w środku), justuj (na szerokość). W ten sposób, aby wskazać, że tekst Tu się dowiesz... powinien być sformatowany pogrubioną kursywą o wielkości 150% początkowej i wyrównany do środka, jego styl powinien wyglądać następująco:

  style="font-weight: bold; font-style: kursywa; font-size: 150%; text-align: center"

  Zastosujemy ten atrybut w tagach<р>, które pozwalają przedstawić tekst jako osobny akapit.

  Edytować element HTML, w tym tekst Tutaj dowiesz się ... usuwając tagi

  , , , i wstawianie tagów<р>orazz atrybutem style, aby ten element przybrał następującą postać:

  <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Tutaj dowiesz się o naszej działalności, o oprogramowaniu naszej firmy oraz o sprzęcie, który produkujemy.

  Widzisz, język HTML pozwala ci używać różne metody styl projektowania. Jednocześnie użycie języka stołów kaskadowych style css jest bardziej pożądane.

  Inne opcje wyrównania i stylu

  Widzieliśmy tylko jedno użycie języka arkuszy stylów, w którym definicja stylu jest umieszczona konkretnie w tagu elementu, który opisujesz.

  Odbywa się to za pomocą atrybutu stylu, który jest używany w większości standardowych Tagi HTML. Ale istnieją inne zastosowania CSS.

  W standardowym HTML, bez wprowadzania arkuszy stylów, aby przypisać określone parametry do dowolnego elementu, takie jak kolor, rozmiar, pozycja na stronie itp., musisz za każdym razem nakreślić te cechy dla każdego elementu, nawet jeśli Na jednej stronie należy umieścić 10 stron.ki takie części, które nie różnią się od siebie. Musisz wstawić ten sam fragment kodu HTML na stronę 10 razy, zwiększając rozmiar pliku i czas pobierania z sieci.

  Arkusze stylów działają w inny, bardziej komfortowy i oszczędny sposób. Aby przypisać określone cechy jakiemukolwiek elementowi, musisz najpierw nakreślić ten element i znaleźć ten opis jako styl, a w przyszłości po prostu wskazać, że element, który chcesz odpowiednio wystylizować, powinien nabrać cech stylu, który opisałeś . Wygodne, prawda?

  Co więcej, możesz zapisać opis stylu nie w tekście swojej strony WWW, ale w osobnym pliku - pozwoli to na użycie opisu stylu na dowolnej liczbie stron WWW. Kolejną związaną z tym zaletą jest możliwość zmiany projektu dowolnej liczby stron, poprawiając tylko opis stylu w jednym osobnym pliku.

  Ponadto język arkuszy stylów pozwala jeszcze bardziej pracować z projektowaniem czcionek stron najwyższy poziom niż standardowy HTML.

  W Obecny czas Język CSS ma dość dużą liczbę opcji dla części HTML, którymi może sterować. Stosując „bezpieczne”, czyli kompatybilne z największą liczbą przeglądarek elementy css- charakterystyka czcionki, kolorystyka części i tła, charakterystyka tekstu i obramowania - możesz znacznie ułatwić sobie pracę i uatrakcyjnić strony WWW pod względem projektu tekstu.

  Etykietka w HTML zaznacza fragment tekstu kursywą.

  Znacznik HTML odnosi się do fizycznych znaczników formatowania. Zmień styl czcionki za pomocą tagu jest stylistyczny.

  Robić tekst HTML kursywę można również wykonać za pomocą znacznika. W takim przypadku tekst zostanie uznany za logicznie wybrany (w znaczeniu), „podkreślony”.

  Specyfikacja HTML5 zaleca nadanie priorytetu logicznym znacznikom formatowania: ważne fragmenty tekstu — znacznik, akcenty — znacznik, podtytuły — znaczniki, wyróżnienie tekstu — znacznik. Kursywa tekst z tagiem następuje tylko wtedy, gdy znak zaznaczenia nie pasuje do żadnego logicznego znacznika formatowania.

  Wszystkie rodzaje zaznaczania tekstu zostały opisane w artykule:.

  Składnia

  tekst kursywą

  Wyświetl w przeglądarce

  Przykład użycia w kodzie HTML

  
  
  
  
  
  
  

  Zwykły tekst, który można umieścić w dowolnej witrynie. Oto tekst pisany kursywą