Jaki jest kod HTML strony? HTML: Podstawy dla początkujących Do czego służy HTML?

Z pewnością każdy bezrobotny internauta spotkał się z sytuacją, gdy wchodząc na piękną stronę internetową, zastanawiasz się, co by się stało, gdybyś taką stronę stworzył, bo posiadanie dobrej strony internetowej przyniesie ci pieniądze, a może nawet sławę. Masz na to ochotę i ochotę, od razu wpisujesz w wyszukiwarce „Jak stworzyć stronę internetową?” Prawie wszędzie powiedzą Ci, że aby stworzyć dobrą stronę internetową, musisz nauczyć się HTML. Jeśli jesteś nowy w tej branży, prawdopodobnie będziesz chciał wiedzieć, co to jest.

Pokrótce wyjaśnię Ci czym jest HTML moimi własnymi, bardziej zrozumiałymi słowami niż w Wikipedii.

HTML jest głównym językiem programowania stron internetowych, podstawą wszystkich podstaw tworzenia stron internetowych. Prawie wszystkie strony internetowe są napisane w tym języku. Rozmiar tekstu na stronie, rozmiar i lokalizacja obrazu, tło witryny itp. wszystko to jest napisane w tym języku. HTML jest tym, z czym narodziły się strony internetowe, co oznacza, że ​​jest to język ojczysty prawie wszystkich stron internetowych. Na przykład, jeśli jesteś Chińczykiem, to mówisz po chińsku, jeśli jesteś Ukraińcem, to mówisz po ukraińsku, ale jeśli jesteś stroną internetową, to mówisz w HTML. Każdy dobry programista stron internetowych zna HTML niemal na pamięć i radzi sobie z nim dobrze.
Język ten jest zrozumiały i łatwy do nauczenia, jednak jak wszystkie języki na tym świecie, aby dobrze nim posługiwać się, wymaga praktyki. Oznacza to, że nawet jeśli nauczysz się tego całkowicie, nie będziesz w stanie od razu stworzyć dobrej strony internetowej; potrzebujesz czasu, cierpliwości i praktyki. Zazwyczaj początkujący na początku swojej przygody z programowaniem stron internetowych po prostu nie mają cierpliwości, aby uczyć się wszystkiego i ćwiczyć krok po kroku. Na tych, którzy zdali egzamin, nauczyli się wszystkiego, zdobyli doświadczenie w praktyce ucząc się języka i nie poddali się – czeka dobra nagroda.
Istnieje kilka języków programowania stron internetowych. Do stworzenia prostej strony internetowej potrzebny jest tylko jeden język, główny, czyli HTML. Do zbudowania złożonej i dużej strony internetowej potrzebne będą, że tak powiem, języki pomocnicze, o których dowiesz się już w trakcie lub po nauce języka HTML. Jeśli zdecydujesz się rozpocząć ścieżkę programisty WWW, możesz rozpocząć naukę HTML już teraz. Pamiętaj o najważniejszym – jeśli się na to zdecydujesz, nie poddawaj się i nie poddawaj się, bo to właśnie rujnuje większość programistów.

Dekodowanie HTML

Te cztery litery HTML oznaczają kilka słów, a mianowicie Hyper Text Mark-up Language, który w języku rosyjskim brzmi jak hipertekstowy język znaczników.

Dlaczego HTML jest potrzebny?

Dlaczego ten język jest potrzebny? Po co go uczyć? Dlaczego nie jakiś inny? Albo po co się tego uczyć, skoro istnieje wiele innych programów do łatwego tworzenia strony internetowej?

Jak powiedziałem, HTML jest głównym językiem programowania stron internetowych. Nie jest to jedyny język używany do tworzenia stron internetowych, ale jest głównym narzędziem, którym kieruje się inne języki, dlatego konieczne jest jego poznanie. Nawet jeśli korzystasz z programu do tworzenia stron internetowych lub gotowych szablonów, HTML znacznie ułatwi Ci życie. Co więcej, jeśli chcesz w przyszłości stworzyć dobrą, dużą i profesjonalną stronę internetową, programy i szablony Ci nie pomogą, wszystko zacznie się od zera i pomoże Ci w tym Twoja znajomość tego języka.

Jak korzystać z HTMLa

Używanie tego języka jest bardzo łatwe i dostępne dla każdego. Można go nawet używać w zwykłym notatniku (.txt). Aby było wygodniej w użyciu, istnieją specjalne programy, na przykład Notepad++. Więcej szczegółów na temat korzystania z tego języka zostanie opisanych w lekcjach HTML.

Jak nauczyć się HTML-a

Aby nauczyć się HTML, musisz mieć dużo cierpliwości, aby oswoić się z tym językiem. Łatwo się tego nauczyć, ale najważniejsze to zdobyć doświadczenie, praktykę, im więcej masz praktyki, tym lepszym jesteś programistą WWW.

Każda witryna ma inny wygląd i funkcjonalność, ale z czym to się wiąże i w jakim języku jest napisana strona? Do tego wszystkiego wykorzystywane są kaskadowe arkusze stylów i HTML. Możesz sam sprawdzić kod tego języka, jeśli sprawdzisz obiekty w przeglądarce. W tym artykule porozmawiamy konkretnie o tym, czym jest HTML.

Nasz artykuł skierowany jest głównie do początkujących, dlatego mamy nadzieję, że stali czytelnicy bloga zrozumieją!

Post zostanie podzielony na następujące punkty:

Co to jest strona HTML

Do projektowania wszystkich elementów strony, w tym tabel, obrazów i tekstu, używany jest język znaczników zwany HTML. Możesz zapoznać się z kodem i spróbować go zrozumieć, jeśli korzystasz z dowolnej nowoczesnej przeglądarki, wystarczy kliknąć stronę prawym przyciskiem myszy i w menu kliknąć wiersz „kod źródłowy strony” lub „kod HTML”. Następnie zobaczysz coś w rodzaju edytora, w którym znajduje się wiele niezrozumiałych napisów i symboli, jest to kod języka HTML.

Każdy dokument WWW zawiera sformatowany i pięknie zaprojektowany tekst, a także hiperłącza i obrazy wybrane przez właściciela witryny. Aby pracować z tymi elementami, programiści stworzyli język nazwany HTML (Hyper Text Markup Language), co w tłumaczeniu oznacza hipertekstowy język znaczników. Każda przeglądarka działa i wyświetla kod HTML inaczej, dlatego wygląda on inaczej w różnych przeglądarkach, szczególnie w starszych wersjach Internet Explorera.

Wszystkie dokumenty HTML są podobne - jest to standardowy plik tekstowy, który zawiera znaczniki danego języka wraz z tekstami, które będą czytać odwiedzający witrynę. Strona tworzona jest za pomocą tagów i to właśnie z nich przeglądarka odczytuje ją podczas jej ładowania. Definiując tagi i ich wygląd, możesz umieścić artykuł lub inny materiał w określonym miejscu na stronie, dodać pliki graficzne i zdjęcia, a także hiperłącza do innych stron serwisu. Początkowo plik HTML nie jest dokumentem internetowym; staje się nim dopiero po jego odczytaniu przez przeglądarkę.

Oczywiście standardowy kod HTML ma swoje wady i wady. Będziesz musiał bardzo się postarać, aby ułożyć akapity z tekstem na stronie, ponieważ aby wykonać znaczniki i wszystko inne, musisz zarejestrować pewne właściwości dla całego tekstu i dla każdego pojedynczego akapitu. Jeśli Twoja witryna ma 50 stron i każda zawiera 10-20 akapitów, formatowanie tekstu i wstawianie za każdym razem tych samych tagów zajmie bardzo dużo czasu. To nie tylko męczy właściciela witryny, ale także negatywnie wpływa na wagę stron witryny. Z tego też powodu stworzono później kaskadowe arkusze stylów, w skrócie nazywane są CSS, co oznacza Kaskadowe Arkusze Stylów, dzięki nim można szybko zaprojektować tekst. Możesz przypisać jeden tag i nadać mu określone cechy, takie jak kolor tekstu, rozmiar, czcionka itp., A następnie zastosować go do akapitów. W takim przypadku plik z arkuszem stylów jest przechowywany osobno, można go przesłać do jednej witryny lub kilku jednocześnie. Następnie główne elementy strony są pisane w HTML, wstawiany jest tekst, a następnie łączony jest CSS i cały tekst przyjmuje taki wygląd, jakiego potrzebujesz. Zmniejsza to również wagę stron, co jest bardzo ważne.

Korzystanie z CSS jest wskazane, jeśli witryna zawiera wiele stron o tym samym wyglądzie. Możesz ustawić określone formatowanie tekstu dla wszystkich akapitów, jeśli napiszesz kilka wierszy w dokumencie za pomocą kodu CSS. Tworząc witrynę internetową, projektanci układu tworzą główny układ w formacie HTML na podstawie układu utworzonego w Photoshopie. Ale potem strona wygląda na niedokończoną, musisz stworzyć atrakcyjny wygląd, a osiąga się to za pomocą kaskadowych arkuszy stylów. Nie jest trudno się tego nauczyć, jeśli masz dużo wolnego czasu, ponieważ ogólny wygląd wszystkich witryn jest w przybliżeniu taki sam, możesz mieć jeden układ z kilkoma blokami i „dopasować” do niego resztę witryn. Z reguły kaskadowe arkusze stylów są znacznie bardziej złożone niż CSS; jeszcze trudniej jest zaaranżować witrynę za pomocą bloków, a nie tabel. Dodatkowo na początkowych etapach możesz napotkać problem polegający na odmiennym wyświetlaniu strony w przeglądarkach. Właśnie po to, aby nie tracić czasu i zarabiać na stronach internetowych stworzono CMS - gotowe układy stron internetowych, które mogą być bezpłatne lub płatne i posiadać określony system zarządzania.

Co to jest HTML5. Różnice i zalety

Nowy standard HTML5 pomaga właścicielom witryn internetowych i zwalnia ich z obowiązku korzystania z formatu Adobe Flash, a także innych programów. Dzięki temu standardowi można zmienić sposób wyświetlania tekstu na stronach oraz uprościć wprowadzanie informacji podczas wypełniania formularzy elektronicznych. Jeśli podzielimy wszystkie innowacje tego języka, możemy wyróżnić następujące punkty:

Po wejściu na stronę ludzie będą mogli oglądać wideo i słuchać audio za pośrednictwem przeglądarki, w tym celu tworzony jest osobny przycisk odtwarzania.

W tym języku znacznie łatwiej jest przesyłać nowe zdjęcia, można nawet tworzyć galerie zdjęć. Nie musisz nawet pobierać dodatkowego oprogramowania.

Można lokalizować tekst i zaznaczać bloki tekstu. Możesz także pięknie sformatować tekst, aby ułatwić jego czytanie.

Jeśli wcześniej w HTML4 osoba zauważyła błąd po wpisaniu danych dopiero w momencie wysłania formularza, teraz przeglądarka natychmiast zgłasza błąd w przypadku nieprawidłowego wypełnienia formularza. Jest to bardzo wygodne dla użytkowników, ponieważ nie muszą wielokrotnie wypełniać tych samych sekcji danych.

Nie ma potrzeby korzystania z modułów oprogramowania, ponieważ za pomocą HTML5 możesz wcielić w życie dowolne pomysły dotyczące witryny. Tylko jeśli witryna jest wyjątkowa i trzeba wymyślić coś specjalnego, instalowane są dodatkowe moduły oprogramowania.

Wcześniej ludzie nie mogli poprawnie przeglądać strony internetowej na tablecie lub smartfonie, ponieważ standard HTML4 nie jest kompatybilny z przeglądarkami na urządzenia mobilne i innymi systemami operacyjnymi. Korzystając z języka HTML5, tworzone są strony, które są doskonale czytelne na wszystkich urządzeniach przy dużej prędkości.

Jeśli masz jakieś pytania, napisz je w komentarzach, chętnie na nie odpowiemy!

Podstawy HTML dla początkujących, co powinien teraz wiedzieć każdy początkujący webmaster lub bloger. Jeśli chcesz nauczyć się tworzyć podstawowe strony internetowe, rozumieć sam kod, wiedzieć, co się za czym kryje i co powinno się znaleźć, to po prostu nie da się tego zrobić bez znajomości podstaw języka HTML. Na swoim blogu będę miał cały łańcuch artykułów, które poświęcę temu tematowi od A do Z, opiszę każdy tag występujący w dokumencie, co on oznacza i jak go poprawnie używać.

Podstawy HTML

Jeśli nie znasz najbardziej podstawowych rzeczy, twoja droga jest zamknięta. Wierzę, że każda osoba decydująca się na rozwój i tworzenie stron internetowych powinna znać i rozumieć podstawy, z czego składa się sama witryna, jak działa i co dzieje się w samym kodzie.

Oczywiście istnieje wiele języków programowania, wszystkie są na swój sposób skomplikowane, ale są takie, które koniecznie musisz znać. Jeśli chcesz pięknie zaprojektować list do wysłania pocztą, masz własną grupę VKontakte, grupę w innych sieciach społecznościowych, ten sam kanał YouTube, musisz majstrować przy kodzie w dowolnym silniku witryny, po prostu potrzebujesz poznać podstawowe pojęcia.

Podałem tylko kilka przykładów, tak naprawdę obecnie wiedza ta jest coraz częściej wykorzystywana w Internecie. Jestem bardziej praktykiem niż teoretykiem, dlatego w moich artykułach w tym dziale pokażę Wam krok po kroku moje przykłady tego, jak i co zrobiłem. Będę publikować zarówno przykładowe strony, jak i całe witryny.

Dokument HTML to najprostszy dokument tekstowy, język tagowania, z którym spotykasz się codziennie w Internecie. Tagi opisują strukturę dokumentu. Tagi są sformatowane jako kątowe< >nawiasach, wewnątrz których zapisana jest nazwa tagu. Przeglądarka sprawdza strukturę dokumentu, buduje go i wyświetla zgodnie z instrukcjami na Twoim monitorze, jeśli oczywiście wszystko zrobiłeś poprawnie.

Cały proces rozpoczyna się, zanim jeszcze zobaczysz gotowy obraz. Przeglądarki przetwarzają dokument sekwencyjnie, od początku do końca. Zawiera wszystko co powinno znaleźć się na stronie. Tabele, obrazy, skrypty i tak dalej, z wyjątkiem stylów CSS.

Podstawy dla początkujących

Czym jest HTML - jeśli spojrzysz na to, co pisze Wikipedia - (HyperText Markup Language) hipertekstowy język znaczników dokumentów. Większość stron w Internecie zawiera znaczniki stron w tym języku. Język ten jest interpretowany przez przeglądarki, a powstały w ten sposób sformatowany tekst jest wyświetlany na monitorze komputera lub urządzeniu mobilnym.

Język ten jest z natury bardzo łatwy i przystępny do nauki. Każdy może poznać i zrozumieć jego podstawy. Aby posługiwać się takim językiem, trzeba znać i używać deskryptorów, zwanych także tagami. To za pomocą tagów tworzony jest dokument.

Z czego powinna składać się struktura dokumentu, jakie znaczniki powinny się w nim znajdować. Spójrzmy na wszystko na jednym małym przykładzie. Napisałem tekst w MS Office i pokazałem go na tym zrzucie ekranu.

Aby wyświetlić ten tekst w przeglądarce w taki sam sposób, w jaki został zapisany w dokumencie, należy dodać do niego znacznik strony, który zawiera pewne znaczniki. Najpierw przyjrzyj się im, potem opiszę każdego, kto za co odpowiada.

Witaj na moim blogu. Bierzesz teraz lekcję z podstaw HTML. Jeśli spodobał Ci się ten artykuł, możesz zasubskrybować tego bloga, aby otrzymywać nowe artykuły na swoją skrzynkę e-mail.

Blog Jewgienija Niesmelowa! strona internetowa Podstawy HTML i CSS dla początkujących

Z jakich znaczników składa się każdy dokument HTML, co zawiera i gdzie należy to wszystko zapisać?

< html > < body > < h2 >< / h2 > < p >Witaj na moim blogu, teraz skorzystaj z samouczka dotyczącego podstaw HTML. Jeśli spodobał Ci się ten artykuł, możesz zasubskrybować tego bloga, aby otrzymywać nowe artykuły na swoją skrzynkę e-mail.< / p > < h2 >Blog Evgenii Nesmelov! Niesmelow. ru Podstawy HTML i CSS dla początkujących< / h2 > < / body > < / html >

Każdy kod składa się ze znaków umieszczonych w nawiasach ostrych. Wszystko to nazywane jest elementami. Wszystkie elementy składają się zwykle z dwóch znaczników, otwierającego i zamykającego. Radzę na początku uważnie przyjrzeć się tagom; jeśli pominiesz któryś z nich i go nie zamkniesz, będziesz musiał przejrzeć duże części kodu, aby znaleźć błąd.

Zdarzały się przypadki, gdy trwało to dłużej niż jeden dzień, osoba kontaktowała się i prosiła o pomoc, nie mógł znaleźć błędu na swojej stronie, więc zawsze uważnie patrz, co i gdzie piszesz. Skorzystajmy teraz z tego przykładu, aby przyjrzeć się każdemu elementowi kodu, co jest w nim zapisane, co to oznacza i co się ostatecznie dzieje.

Większość tagów jest sparowanych, co obejmuje tag otwierający i tag zamykający. Oprócz takich tagów istnieją również pojedyncze tagi. Tagi mogą łączyć się z innymi, zagnieżdżając się w sobie. Na przykład wyświetl tekst jednocześnie pogrubionym i kursywą.

Tekst

< strong > < i >Tekst< / strong > < / i >

Struktura dokumentu HTML

Jeszcze raz przypominam, że należy przestrzegać zasad, które są zawarte w dokumencie. W ten sposób przeglądarka rozumie, co znajduje się na stronie, jej kolejność, treść itd.

Tag to komponent, który informuje przeglądarkę internetową o wykonaniu określonego zadania. Na przykład obecność akapitu, tabeli, formularza lub obrazu.

Atrybut - modyfikuje znacznik. Można na przykład wyrównać akapit do środka lub do prawej strony, ustawić położenie obrazu na stronie i tak dalej.

ZAWSZE zamykaj tagi, jeśli je otworzysz, pamiętaj o ich zamknięciu. W przeciwnym razie wystąpi błąd i dokument nie będzie poprawnie wyświetlany na stronie. Są też wyjątki, o których nie należy zapominać.

Bez wątpienia konieczne jest zrozumienie, że istnieje tytuł dokumentu i jego treść. Tytuł to wszystko, co jest zawarte w tagu. Treść dokumentu (), treść dokumentu zawiera całą zawartość strony. Jeżeli zaistnieje potrzeba pozostawienia fragmentu kodu dla siebie, załączając w ten sposób te tagi w komentarzach, służy do tego tag. Wszystko, co znajduje się wewnątrz takiego tagu, służy jako komentarz i nie jest postrzegane przez przeglądarki.

Zacznijmy od pierwszego. Na początku dokumentu otworzyłem tag, a na końcu go zamknąłem. Kod ten jest obecny w absolutnie każdym dokumencie i informuje przeglądarkę, że wszystko umieszczone pomiędzy tymi znacznikami jest kodem HTML. Jest to rdzeń samego dokumentu; wszystko, co później znajduje się za tym znacznikiem, nie jest już zawarte w dokumencie i nie jest postrzegane przez przeglądarki. Na samym początku dokumentu tag jest otwarty, a na samym końcu należy go zamknąć.

Cała sekcja tego znacznika zawiera wszystkie informacje techniczne dokumentu. Podobnie jak w przypadku poprzedniej zawieszki, główkę również należy na końcu otworzyć i zamknąć. Informacje te obejmują tytuł strony, opis, słowa kluczowe w wyszukiwarce i kodowanie. O kodowaniu trochę poniżej.

Treść

< head >Treść< / head >

Znacznik ten jest zawarty w nagłówku i musi być zapisany wewnątrz znacznika nagłówka. Ten tag tytułowy jest obowiązkowy i musi być obecny w każdym dokumencie HTML. Oprócz tego pojawia się jako tytuł okna przeglądarki. Długość takiego nagłówka nie powinna przekraczać 60 znaków. Tekst takiego nagłówka powinien zawierać jak najpełniejszą informację charakteryzującą zawartość strony.

Jeśli w nagłówku napisałeś „Hello World”, to właśnie ta informacja powinna wyświetlić się na stronie, a nie inna. Nie powinieneś oszukiwać ludzi i wyszukiwarek, nie podoba im się to, a tym samym pogarszasz swoją sytuację. Informacje zawarte w tym tagu powinny odpowiadać treści Twojej strony.

Po obowiązkowym tagu tytułowym znajduje się opcjonalny, ale równie ważny metatag. Ten tag jest pojedynczy. Za pomocą tego tagu ustawiasz opis strony (description) i jej słowa kluczowe (keywords).

Dodatkowo metatag może zawierać dane o autorze strony i inne właściwości metadanych. Możesz uniemożliwić indeksowanie całej strony przez wyszukiwarki. Ustaw automatyczne odświeżanie strony po 20 sekundach lub po 5 sekundach, po czym następuje przejście na inną stronę.

< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Takich metaelementów może być kilka, ponieważ mogą one przenosić zupełnie inne informacje. Inni użytkownicy, otwierając stronę w przeglądarce, nie widzą wszystkich Twoich opisów, wszystko to pozostaje niewidoczne.

Znacznik stylu może być również używany do ustawiania stylów na stronie. Jeśli używasz wielu różnych stylów CSS, zaleca się ustawienie ich w osobnym pliku. Jeśli chcesz określić kilka z nich, wszystko to można określić bezpośrednio w dokumencie HTML.

.base ( szerokość: 100px; kolor tła: #000; wysokość: 150px; kolor: #fff; )

< style type = "text/css" > Baza( szerokość: 100px; tło - kolor: #000; wysokość: 150px; kolor: #fff;

Możesz też dodać style specjalnie do jednego tagu; w tym celu musisz dodać element stylu wewnątrz samego tagu. Tego tagu należy użyć wewnątrz kontenera, który ustawia style strony. Możesz użyć kilku takich tagów, nie będzie to błąd.

Nieco podobny do poprzedniego tagu, tag link pozwala ustawić style dla dokumentu, który znajduje się w innym pliku. Innymi słowy, możesz dołączyć do istniejącego dokumentu kompletny arkusz stylów CSS, który składa się z wielu właściwości. W ten sposób zmniejszasz rozmiar dokumentu, który ostatecznie będzie ładował się i otwierał szybciej na komputerze lub urządzeniu mobilnym z niską szybkością Internetu.

Można podłączyć więcej niż jeden plik, nie ma żadnych ograniczeń. Nie ma potrzeby zamykania takiego tagu. Jeżeli wszystko zostało wykonane poprawnie, do dokumentu zostaną załadowane określone style z osobnego pliku. Tag ten można dodać do podstaw HTML i nie zapomnieć o jego istnieniu. Rezultatem jest taki obraz:

< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

Za pomocą znacznika skryptu możesz połączyć różne scenariusze (skrypty) z dokumentem. Wymagana jest obecność znacznika zamykającego. Sam skrypt może znajdować się na początku dokumentu, wewnątrz lub na końcu.

Informuje przeglądarkę, że wszystko umieszczone pomiędzy tymi znacznikami powinno pojawić się w oknie przeglądarki. Oto główne tagi, które mogą znajdować się w absolutnie każdym dokumencie. Znacznik body pełni rolę głównej części strony, która zawiera całą jej zawartość. Warto otworzyć ten tag i pamiętać o zamknięciu go na końcu dokumentu.

Nagłówki stron h1 h2 h3

Pójdźmy dalej, widzimy tag, który otwiera się i zamyka w ten sam sposób. Znacznik ten oznacza główny tytuł tekstu, w większości przypadków pod nagłówkiem H1 znajduje się tytuł strony. W rzeczywistości istnieje tylko sześć nagłówków danych. . Wykorzystuje się je także w SEO, ale to już nieco inny temat. Na pewno wyróżnię w tym celu jeden artykuł i podam jego szczegółowy opis, subskrybuj aktualizacje bloga, aby niczego nie przegapić.

Obecność takich nagłówków w artykule będzie odgrywać ważną rolę w promowaniu strony. Ponadto ich użycie zapewnia przejrzystą strukturę strony, jej tytuł, podtytuły, wyróżnienia, akapity i tak dalej. Zawsze z nich korzystaj i wdrażaj je w życie. W wielu systemach CMS, takich jak WordPress, podczas pisania tekstu można zobaczyć „nagłówek 1”, „nagłówek 2”, „nagłówek 3” i tak dalej. To one odpowiadają za h1, h2 i h3.

Jeśli napiszesz tekst główny z nowego akapitu, napiszesz znacznik

Na początku i zamknij na końcu

. Zaznaczenie akapitu w formacie HTML jest równoznaczne z utworzeniem nowego akapitu w dokumencie MS Word. Nie dodałem nic nowego do dokumentu. Ale to nie wszystko, co powinno znajdować się w dokumencie HTML. Spójrzmy na inny przykład, opis pojawi się nieco później.

Dokument HTML

Ten tekst będzie pogrubiony, i ten również jest napisany kursywą

< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >Dokument HTML< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

Podstawowe elementy Głowa i Tytuł

Każdy dokument zawiera element nagłówkowy i tytułowy. Pierwszy, który następuje bezpośrednio po pierwszym tagu. Tag ten zawiera wszystkie informacje o stronie, zawiera także element. Tytuł – informacja o tytule strony, czyli inaczej tytule strony, jej nazwie. To w tytule podajesz poprawną nazwę strony, po której użytkownik będzie Cię szukał w wyszukiwarce, co jest bardzo ważnym punktem. Oba elementy muszą być otwarte i jednocześnie zamknięte. Każdy element jest zamknięty znakiem „/”. Rezultatem jest taki obraz.

Nagłówek i zawartość strony

< / html >

Jak widać, nie ma nic skomplikowanego. Oto najbardziej podstawowe znaczniki, które powinny znajdować się w każdym dokumencie HTML. Nie zapomnij zamknąć każdego z nich, w przeciwnym razie przeglądarka nie będzie w stanie dostrzec pełnego obrazu kodu. Trzeba o tym wiedzieć i zawsze pamiętać. Następnie zacznij wstawiać tekst, obrazy, filmy i tak dalej. Ale to będzie już w innych artykułach.

Edytor Notepad++

Do pracy z kodem użyj programu Notepad++. Jest darmowy i nietrudno go znaleźć w Internecie. Bardzo wygodny do zrozumienia dowolnego kodu; wygodnie wyświetla również znaczniki otwierające i zamykające. Obsługujemy składnię ponad 40 języków programowania. Tylko to, czego potrzebujesz, aby nauczyć się podstaw HTML.

Notatnik pod każdym względem przewyższa zwykły notatnik. Dla maksymalnej wygody, prostoty i nauki, ten edytor musi być początkowo zainstalowany na Twoim komputerze. Najważniejszą zaletą i wygodą jest to, że edytor Notepad++ pokazuje podpowiedzi podczas pisania kodu, co sprawia, że ​​Twoja praca jest znacznie szybsza i lepszej jakości.

elementu DOCTYPE

Każdy dokument musi także zawierać następujący element doctype. Dlaczego jest potrzebny i co powinno się w nim znaleźć. Zwykle ludzie nie przepadają za tymi linijkami, kopiują je do swoich dokumentów i spokojnie pracują. Elementy te informują przeglądarkę, jaka wersja HTML jest używana w dokumencie, jaki jest opis strony, jakie jest użyte kodowanie, jakie słowa kluczowe zostały użyte, kim jest autor i jak nazywa się strona.

Zazwyczaj umieszczane są na samym początku. Opcji jest kilka i wszystkie różnią się od siebie, napiszę jeden przykład, który jest najczęściej używany. Ten blankiet może służyć jako gotowy szablon. Dalej będzie czytelny opis każdej linii, nie powinno być z tym żadnych problemów.

Krótko i zrozumiałym językiem o podstawach HTML: Ta linijka informuje przeglądarkę, że ten dokument jest w wersji XHTML 1.0, używany jest angielski i cały ten bałagan znajduje się pod tym adresem. Następnie w metatagu wskazujemy zastosowane kodowanie. Najczęściej używany jest Windows 1251.

Opis - poruszana jest tematyka SEO, jeden z trzech głównych tagów, które muszą się znaleźć w absolutnie każdym dokumencie; tag ten wskazuje opis strony. Co jest napisane na tej stronie, krótki opis, nie więcej niż dwa zdania. Tag słów kluczowych obejmuje również temat SEO, ten tag jest wymagany. Zawiera słowa kluczowe, za pomocą których internauci będą Cię odnajdywać w wyszukiwarkach.

Znacznik tytułu zawiera nazwę samego dokumentu, jego tytuł, który widzimy w przeglądarce. Prawdopodobnie najważniejszy tag w całym dokumencie, który ma największy wpływ na promocję strony. Artykuł o dodawaniu i projektowaniu opisuje ten tag bardziej szczegółowo.

O czym musisz pamiętać z tej lekcji o podstawach HTML:

Prawie wszystkie tagi otwierają się i zamykają;

Dokument zaczyna się od tagu ;

Obecność znacznika;

Obecność znacznika;

Przejrzysta struktura dokumentu HTML.

Wszystkie strony główne powinny zawsze nosić nazwę indeks. Tak to jest przyjęte i wszyscy są do tego przyzwyczajeni, niezależnie od rozszerzenia pliku, może to być html lub php. Zawsze się to tak nazywa.

Obejrzyj film o podstawach HTML od Webformyself.

Hipertekstowy język znaczników, podstawowe elementy i struktura. To wszystko i wiele więcej postaram się opisać na moim blogu. Przede wszystkim zostaną napisane przydatne informacje dla początkujących, zostanie podany przykładowy kod oraz zapewniona zostanie możliwość pobrania samego przykładu wraz z gotową stroną.

Za pojawienie się HTML współczesny świat może podziękować jednemu naukowcowi z Europejskiej Rady Badań Jądrowych (Conseil Européen pour la Recherche Nucléaire, CERN). Ten naukowiec nazywa się Timothy John Berners-Lee. Pierwsza wersja HTML została stworzona na potrzeby formatowania dokumentów naukowych. Jest to formatowanie strukturalne pozbawione elementów opisu schematów kolorów, parametrów czcionek itp. Zatem HTML pierwotnie umożliwiał wyróżnianie nagłówków, akapitów, list i podobnych elementów strukturalnych w tekście. Wynik przetwarzania lub „odtwarzania” HTML nie powinien zależeć od cech technicznych sprzętu do jego wizualizacji, ponieważ nie zawierał on parametrów tej wizualizacji. Z biegiem czasu ta cecha języka znaczników hipertekstowych została częściowo utracona.

Tak więc pojawienie się pierwszych wersji HTML datuje się na rok 1986, a w 1991 roku HTML został znacznie ulepszony i zaczął być używany specjalnie do przesyłania hipertekstu w sieci WWW. Mówią, że znany na całym świecie skrót HTML, czyli Hyper Text Markup Language, pojawił się dokładnie na początku lat 90. ubiegłego wieku. A teraz krótka wycieczka do rodowodu języków znaczników. Pierwsza wersja hipertekstowego języka znaczników HTML została stworzona w oparciu o Standard Generalized Markup Language (SGML), który w pewnym sensie można uznać za prototyp eXtensible Markup Language. Standard XML zyskał w naszych czasach ogromną popularność ze względu na dużą liczbę jego rozszerzeń stosowanych w technologii komputerowej. Aby całkowicie zmylić czytelnika, od razu dodam, że później, w oparciu o XML, opracowano hipertekstowy język znaczników XHTML (Extensible Hypertext Markup Language), który w istocie replikuje HTML. W rezultacie mamy akronimy SGML, HTML, XML i XHTML i musimy zrozumieć, który jest który. Tak naprawdę wszystko jest proste: SGML to nic innego jak zbiór reguł, na podstawie których można zbudować dowolny język znaczników. HTML jest jednym z takich języków – aplikacją SGML. Innymi słowy, SGML definiuje, jak powinny wyglądać elementy znaczników, a HTML określa, jakie dokładnie powinny być elementy i jak powinny być interpretowane przez przeglądarki. XHTML z kolei jest zastosowaniem XML, a sam XML to nic innego jak uproszczona wersja SGML-a. , pomimo tego, że są bardzo podobne z wyglądu, mają znaczne ukryte różnice, które w większości polegają na zasadzie ich przetwarzania.

Wróćmy teraz do historii rozwoju HTML. Tak więc do 1994 roku HTML był nadal używany wyłącznie do strukturalnego oznaczania danych, chociaż zawierał już znaczniki do wyróżniania tekstu pogrubioną czcionką lub kursywą. W tym samym 1994 roku utworzono organizację W3C (World Wide Web Consortium) - World Wide Web Consortium, na którego czele, całkiem logicznie, stoi ten sam Tim Berners-Lee, aw 1995 roku opublikowano zalecenie HTML 2.0. Twórcy HTML już zrozumieli, że z czasem ich pomysł ewoluuje od języka statycznych znaczników tekstowych do głównego narzędzia do tworzenia dynamicznych zasobów Internetu. Głównym dodatkiem HTML 2.0 było pojawienie się w ramach języka formularzy zestawów kontrolek użytkownika, które miały służyć użytkownikowi do wprowadzania parametrów żądań HTTP.

Po wydaniu drugiej wersji natychmiast rozpoczęły się prace nad kolejną generacją HTML. W 1997 roku wydano rekomendację HTML 3.2, która uzupełniła język znaczników o tabele, ramki, obrazy i kilka innych ważnych znaczników. Jednak najważniejszym osiągnięciem 3. wersji jest to, że jej autorzy ponownie powrócili do problemu wizualizacji znaczników w przeglądarce, pamiętając, że HTML powinien jedynie zaznaczać strukturę dokumentu i nie powinien zawierać bezpośrednio parametrów stylów graficznych do wyświetlania elementów w przeglądarkę. Efektem ich pracy nad HTML 3.2 było pojawienie się niezależnego języka CSS (Cascading Style Sheets) - kaskadowych arkuszy stylów, których kod można teraz połączyć z kodem znaczników HTML i w ten sposób dostosować wygląd strony.

Wraz z wydaniem wersji 4 HTML w 1997 roku, pracownicy W3C pozbyli się niepotrzebnych elementów, które wraz z pojawieniem się CSS stały się przestarzałe i podważały ideę oddzielenia znaczników struktury od parametryzacji prezentacji. Ale nikt nie blokowałby nowej wersji z powodu takich drobiazgów. Głównym osiągnięciem zaleceń HTML 4.0 było pojawienie się modelu obiektowego strony (Document Object Model, DOM), którego elementami można było teraz manipulować za pomocą skryptowych języków programowania wykonywanych przez przeglądarki. Najpopularniejszym takim językiem programowania jest JavaScript. HTML plus DOM plus JavaScript to dynamiczny HTML lub po prostu DHTML, który stanowił przełom w projektowaniu stron internetowych. Teraz elementy załadowanej strony internetowej mogły zmieniać swój wygląd w odpowiedzi na działania użytkownika, a także dodawać nowe i usuwać istniejące elementy. 24 grudnia 1999 roku ukazało się najnowsze wydanie czwartej wersji hipertekstowego języka znaczników, HTML 4.01.

HTML5 nie uzyskał jeszcze statusu oficjalnej rekomendacji W3C, ale już widać, że autorzy HTML kontynuują prace nad opracowaniem wymagań dotyczących obsługi obiektowego modelu dokumentu i interpretacji JavaScript. Choć HTML5 otrzyma szereg nowych tagów, większość rekomendacji w dalszym ciągu dotyczy zachowania przeglądarki w kontekście DHTML: wbudowana będzie obsługa funkcji przeciągnij i upuść, możliwość rysowania na wirtualnym płótnie , kontroluj historię przeglądania i udostępniaj wiadomości między stronami, zapisuj kontekst wykonania i wiele więcej. Mamy nadzieję, że wraz z wydaniem nowych rekomendacji HTML stopniowo znikną problemy braku kompatybilności między przeglądarkami, gdy ten sam kod JavaScript jest wykonywany w różny sposób w różnych przeglądarkach. Przecież trend definiowania wymagań dotyczących pracy z modelem obiektowym i JavaScriptem będzie się utrzymywał, a twórcy przeglądarek będą musieli (jeśli chcą, aby ich produkty programowe były używane) przestrzegać tych wymagań.

Premiera HTML5 zaplanowana jest na rok 2014. Być może do tego czasu W3C opracuje osobne zalecenia odnoszące się wyłącznie do programowania w JavaScript, a HTML ostatecznie ponownie stanie się wyłącznie językiem znaczników struktury dokumentów. Pomimo tego, że dzisiaj jest dopiero rok 2012, wiele z nich jest już obsługiwanych przez najpopularniejsze przeglądarki. Wiele z tego, co wcześniej projektanci stron internetowych musieli zrobić samodzielnie (to samo przeciąganie i upuszczanie), wraz z wydaniem HTML5 będzie obsługiwanych na poziomie przeglądarki, a rozwój wydarzeń nie może się nie cieszyć. Możemy mieć tylko nadzieję, że tendencja się utrzyma.

Internet to ogólnoświatowa sieć, która jednoczy sieci komputerowe na całym świecie w oparciu o jednolite standardowe umowy (protokoły) dotyczące sposobów wymiany informacji i jednolitego systemu adresowania.

Do tej pory Internet zyskał niespotykaną dotąd popularność. Według ekspertów Internet łączy ponad 100 milionów komputerów. Z usług Internetu korzysta ponad 300 milionów ludzi w 170 krajach.

Z funkcjonalnego punktu widzenia Internet to:

ü niedrogi i szybki środek komunikacji pomiędzy abonentami na całym świecie;

ü niezrównane repozytorium informacji z dowolnej dziedziny wiedzy;

ü nowe obiecujące środowisko dla działalności.

Wpływ Internetu rozciąga się nie tylko na dziedzinę technologiczną komunikacji komputerowej, ma także orientację społeczną i przenika całe społeczeństwo w miarę upowszechniania się operacyjnych środków zdobywania wiedzy i handlu elektronicznego.

Najpopularniejszą i najpopularniejszą usługą internetową jest obecnie WWW (World Wide Web). Informacje w Internecie prezentowane są w formie tzw. dokumentów hipertekstowych (lub szerzej hipermedialnych), które mogą zawierać sformatowany tekst, grafikę, fragmenty audio i wideo.Główną cechą dokumentów hipertekstowych jest obecność aktywnych stref, które są wrażliwe na kliknięcie myszką.Aktywne mogą być fragmenty tekstu, całe obrazy lub ich części, kliknięcie na aktywną strefę powoduje pobranie dokumentu (docelowego) powiązanego z tą strefą.

Aby nauczyć się publikować materiały w Internecie, należy najpierw zapoznać się z hipertekstowym językiem znaczników HTML (H yperT ext Markup L anguage).

Podstawy HTML

Język znaczników dokumentów hipertekstowych HTML to zestaw poleceń zwanych znacznikami (z j etykietka Tagi HTML znalezione w tekście dokumentu są interpretowane przez przeglądarkę podczas wyświetlania dokumentu.

Przeglądanie dokumentów HTML odbywa się za pomocą programów - przeglądarki(z angielskiego przeglądarka), które wyświetlają dokument zgodnie ze znacznikami HTML i umożliwiają nawigację poprzez hiperłącza. Najpopularniejszymi przeglądarkami są Microsoft Internet Explorer firmy Microsoft Corporation i Netscape Navigator firmy Netscape Communications Corporation.

Ponieważ dokument HTML jest plikiem tekstowym, można go przygotować w prostym edytorze tekstu, takim jak Notatnik ( Notatnik), ale jest to bardzo pracochłonne. Częściej korzystają z wyspecjalizowanych edytorów przeznaczonych specjalnie do przygotowywania dokumentów HTML, które umożliwiają wstawianie znaczników za pomocą przycisków paska narzędzi lub poleceń menu oraz ustawianie atrybutów znaczników w oknach dialogowych, np. Macromedia Dreamweaver, Microsoft FrontPage, HomeSite itp.

Dokument HTML można uzyskać konwertując go do formatu HTML, na przykład z formatu dokumentu Microsoft Office. Należy zaznaczyć, że przy takiej transformacji tekst źródłowy dokumentu HTML okazuje się wyjątkowo zbędny i wymaga korekty.O wiele efektywniejsze jest użycie specjalnych edytorów HTML.

Składnia znacznika HTML

Znacznik HTML jest zapisywany w nawiasach ostrych (znakach) i składa się z nazwy, po której może następować lista atrybutów (opcjonalnie w przypadku większości tagów). Nazwy i atrybuty są angielskimi słowami i skrótami.

Tagi można podzielić na dwie grupy:

Sparowane tagi (tzw pojemniki) mają dwa elementy: otwarcie (początkowe) i zamknięcie (końcowe); komponent zamykający ma tę samą nazwę, ale po zapisaniu nazwa jest poprzedzona ukośnikiem (symbol / ). Tekst dokumentu i inne znaczniki można umieścić pomiędzy komponentami otwierającymi i zamykającymi. Fragment dokumentu znajdujący się pomiędzy elementami otwierającym i zamykającym znacznika kontenera jest formatowany przez przeglądarkę zgodnie ze znaczeniem znacznika, np. tekst znajdujący się pomiędzy znacznikami zostanie wyświetlony pogrubioną czcionką (nazwa znacznika pochodzi z języka angielskiego pogrubiony). Sparowane tagi mogą być zagnieżdżane, ale nie mogą na siebie zachodzić.

Niesparowane tagi (tzw autonomiczny) nie mają elementu końcowego.Podczas ich interpretacji do wyświetlanego dokumentu wstawiany jest ten lub inny obiekt. Na przykład tag , występujący w tekście dokumentu HTML, powoduje wstawienie obrazu graficznego z pliku pict.gif.

Atrybuty na liście są oddzielone od siebie jedną lub większą liczbą spacji, znaków tabulacji lub znaków nowej linii; kolejność zapisywania atrybutów nie jest istotna. Zdecydowana większość atrybutów jest używana jako para nazwa atrybutu = wartość atrybutu. Jeżeli wartość atrybutu składa się z więcej niż jednego słowa lub jednej liczby, należy ją ująć w pojedynczy lub podwójny cudzysłów. Atrybuty nie są określone w komponentach zamykających tagów.

Oto przykład tagu z atrybutami:

Nazwa znacznika Nazwa atrybutu

Wartość atrybutu

Nazwa atrybutu

Wartość atrybutu

Cześć !

Przeglądarka napotkawszy taki znacznik w dokumencie HTML, interpretuje go, wyświetlając tekst następujący po znaczniku znakami powiększonymi w stosunku do rozmiaru bazowego (ROZMIAR=+2) i kolorem czerwonym (KOLOR=CZERWONY); to formatowanie tekstu jest stosowane do momentu napotkania znacznika zamykającego.

Wielkość liter we wpisach znaczników i atrybutów nie ma znaczenia.

Struktura dokumentu HTML

Dokument HTML jest zawarty w znacznikach i. Pomiędzy tymi znacznikami znajdują się dwie sekcje: sekcja nagłówka (między znacznikami i) oraz sekcja treści dokumentu (między znacznikami i). Sekcja nagłówka zawiera opis parametrów używany podczas wyświetlania dokumentu, ale nie odzwierciedlany bezpośrednio w oknie przeglądarki. Sekcja treści dokumentu zawiera główny tekst przeznaczony do wyświetlenia przez przeglądarkę, znaczniki formatujące, rozmieszczenie obrazów, tabel, hiperłączy itp.

Kod HTML najprostszego dokumentu nadającego się do umieszczenia w Internecie wygląda następująco:

< TITLE >Nasza pierwsza stronaTITLE >

Najprostszy dokument HTML

Kod ten można wpisać w edytorze tekstu Notatnika i zapisać jako plik z rozszerzeniem . htm lub. html - w tym przypadku dokument otworzy się w domyślnej przeglądarce zainstalowanej na Twoim komputerze. Przeglądarka wyświetli ten dokument wyświetlając w swoim oknie wiersz „Najprostszy dokument HTML” znajdujący się w sekcji treści dokumentu. Na pasku tytułowym przeglądarki pojawi się fraza „Nasza pierwsza strona”.

Sekcja GŁOWA

Sekcja nagłówka zwykle zawiera tagi, które są niewidoczne dla użytkownika, ale mimo to mogą aktywnie wpływać na wygląd dokumentu.

Etykietka	Zamiar
	Określa nazwę całego dokumentu. Nazwa jest zwykle wyświetlana na pasku tytułowym okna przeglądarki. Ten element jest wymagany w przypadku każdego dokumentu HTML i można go podać nie więcej niż raz.
	Określa adres bazowy (URL) bieżącego dokumentu, który będzie punktem wyjścia do obliczania względnych adresów URL w dokumencie. Element nie posiada znacznika końcowego. Musi występować co najmniej jeden z argumentów: HREF - określa adres bazowy (URL) bieżącego dokumentu. TARGET - określa nazwę ramki, która domyślnie będzie używana w hiperłączach. Może się to przydać, jeśli chcesz otworzyć wszystkie łącza w dokumencie w innej ramce.
< STYLE TYPE= "text /css " >	Służy do wstawiania kaskadowych arkuszy stylów (CSS - Cascade Style Sheet) do dokumentu. TYPE to wymagany atrybut, którego wartość to zwykle „text/css”.
< МЕТА …>	Element META służy do technicznego opisu dokumentu. Za pomocą tego elementu do tytułu dokumentu wprowadzane są dodatkowe przydatne informacje, niewidoczne dla użytkownika, ale czasami po prostu niezastąpione dla prawidłowego zaindeksowania Twojej strony przez roboty serwera wyszukiwania. Element nie posiada znacznika końcowego. NAZWA – określa nazwę metapostu. Istnieje wiele predefiniowanych nazw, niektóre z nich można zobaczyć w poniższym przykładzie. TREŚĆ - przypisuje wartość wpisowi meta zdefiniowanemu w parametrze NAZWA.

Sekcja CIAŁO

Ta sekcja zawiera główną zawartość strony internetowej - tekst dokumentu, obrazy, tabele itp. Element BODY nie może występować w dokumencie więcej niż raz i może zawierać następujące atrybuty:

Składnia atrybutu	Zamiar
WYSOKOŚĆ MARGINESU= numer	Określa szerokość (w pikselach) górnego i dolnego marginesu dokumentu. Działa tylko w przeglądarkach Netscape
MARGA GÓRNA= numer	Określa szerokość (w pikselach) górnego i dolnego marginesu dokumentu. Działa tylko w przeglądarkach Internet Explorer
SZEROKOŚĆ MARGINESU= numer	Określa szerokość (w pikselach) lewego i prawego marginesu dokumentu. Działa tylko w przeglądarkach Netscape
LEWY MARGINES= numer	Określa szerokość (w pikselach) lewego i prawego marginesu dokumentu. Działa tylko w przeglądarkach Internet Explorer
TŁO= Adres URL	Określa obraz, który ma „wypełnić” tło (obraz tła). Wartość jest podana w adresie bezwzględnym lub względnym obrazu (patrz rozdział Umieszczanie zdjęć)
BGKOLOR= kolor	Określa kolor tła dokumentu. MicrosoftuInternetposzukiwacz obsługuje 16 standardowych nazw kolorów (aqua, czarny, niebieski, fuksja, szary, zielony, limonkowy, bordowy, granatowy, oliwkowy, fioletowy, czerwony, srebrny, turkusowy, żółty, biały) Innym sposobem jest użycie kodu koloru w postaci sześciocyfrowej liczby szesnastkowej, która określa intensywność składowej czerwonej (pierwsze dwie cyfry), zielonej (kolejne dwie cyfry) i niebieskiej (dwie ostatnie cyfry). Intensywność każdego składnika w postaci szesnastkowej mieści się w zakresie od 00 do FF. W przypadku podawania koloru jako wartości atrybutu znacznika, liczbę szesnastkową poprzedza się znakiem #. Na przykład wpis KOLOR ="#0000 FF " oznacza kolor niebieski Pomimo zasadniczej możliwości określenia milionów kolorów, należy wziąć pod uwagę, że przeglądarki wyświetlają tylko 256 kolorów, a każda przeglądarka ma swoją własną paletę kolorów, z której przeglądarka wybierze kolor najbliższy podanemu
TEKST= kolor	Określa kolor tekstu w dokumencie
LINK= kolor	Określa kolor hiperłączy w dokumencie
LINK= kolor	Określa kolor podświetlenia hiperłączy po kliknięciu.
VLINK	Określa kolor hiperłączy do już przeglądanych dokumentów

Formatowanie tekstu Formatowanie znaków

Wszystkie znaczniki formatujące znaki mają zarówno element otwierający, jak i zamykający i działają na tekst zawarty pomiędzy nimi.

Głównym tagiem jest... FONT>, którego należy użyć z jednym lub kilkoma atrybutami zmieniającymi rozmiar, kolor i krój czcionki:

Składnia atrybutu	Zamiar
ROZMIAR = oznaczający	Rozmiar jest podawany albo jako wartość bezwzględna (liczba od 1 do 7), albo w odniesieniu do podstawowego rozmiaru czcionki (w postaci +n lub -n).
KOLOR= kolor	Kolor
TWARZ = lista czcionek	Kroje pisma do wyświetlania tekstu; nazwy są wymienione w kolejności preferencji, oddzielone przecinkami, np. FACE="Verdana, Helvetica, Arial, Sans-Serif" Możesz także określić jeden z krojów pisma, jednak pamiętaj, że czcionka ta może nie zostać zainstalowana na komputerze użytkownika, a czcionki „egzotyczne” nie będą wyświetlane przez przeglądarkę

Dodatkowo tagi służą do zmiany stylu znaków:

. .. (z angielskiego pogrubienie) − pogrubiona czcionka;

.. . (z angielskiej kursywy) - kursywa;

... (z angielskiego TeleType) – czcionka o stałej szerokości;

... (z angielskiego podkreślenia) - podkreślone;

... S > (z angielskiego s triathlon) - przekreślone;

... (z angielskiego s sub scenariusz) - indeks;

... (z angielskiego sup eskrypt) jest indeksem górnym.

Tekst zawarty pomiędzy tagami

i (z angielskiego pre sformatowany) jest wyświetlany w takiej postaci, w jakiej został wstępnie sformatowany, ze wszystkimi spacjami i znakami podziału wierszy.

Formatowanie akapitów

Tekst wyświetlany jest w oknie przeglądarki słowo po słowie, a po osiągnięciu prawej krawędzi okna kolejne słowo jest automatycznie przenoszone do nowej linii. Nawet jeśli w kodzie strony wpisano kilka spacji lub tekst został wpisany w nowej linii, akcje te nie zostaną wyświetlone podczas przeglądania w przeglądarce. Aby więc wyświetlić w tekście ciąg kolejnych spacji lub kilka pustych linii, należy zastosować różne znaczniki.

Etykietka
(z angielskiego b reak)przerywa strumień tekstu i wstawia nową linię bez tworzenia nowego akapitu.Wiele kolejnych tagów
są interpretowane jako kilka pustych linii.Odstęp między wierszami jest pojedynczy.Znacznik nie posiada elementu zamykającego ani żadnych atrybutów.

Tag(z angielskiego s akapit)rozpoczyna akapit; nowy akapit jest oddzielony od poprzedniego podwójną linią odstępu. Akapit nie może być pusty, czyli może składać się z kilku kolejnych znaczników

są interpretowane jako jeden (w przeciwieństwie do tagu
).Element zamykający

opcjonalny, gdyż poprzedni akapit kończy się tam, gdzie zaczyna się nowy. Znacznik posiada opcjonalny atrybut ALIGN wskazujący rodzaj wyrównania akapitu, który może przyjmować wartości LEFT, CENTER, RIGHT i JUSTIFY, określając wyrównanie odpowiednio do lewej, środek, prawy i szerokość. Tekst zawarty w tagach również zostanie wyśrodkowany.

...

Jeśli element zamykający

pomiń, określony typ wyrównania zostanie zachowany do następnego znacznika określającego wyrównanie lub do końca dokumentu.

HTML umożliwia tworzenie akapitów w formacie list numerowanych lub wypunktowanych. Fragment tekstu będący listą ujęty jest w tagi:

lista uporządkowana (numerowana) (z angielskiego o zamówione l jest)

lista nieuporządkowana (wypunktowana) (z angielskiego u zamówione l jest)

Każdy element listy uporządkowanej lub nieuporządkowanej jest ujęty w znaczniki ... (z angielskiego l jest I tem). Podczas wyświetlania tekstu każdy element listy zostanie umieszczony w nowej linii, oznaczonej liczbą lub znacznikiem. Dodatkowo lista może mieć tytuł, który jest określony znacznikiem (z angielskiego l jest H eder). Tagi zamykające nie są wymagane.

	Lista numerowana	Lista punktowana
Element kodu	< O L> Nagłówek Pierwszy element Drugi element Trzeci element	< U L> Nagłówek Pierwszy element Drugi element Trzeci element U L>
Wyświetlanie przeglądarki	Nagłówek 1. Pierwszy element 2. Drugi element 3. Trzeci element	Nagłówek · Pierwszy element Drugi element · Trzeci element

Listę wielopoziomową można zorganizować poprzez kombinację list numerowanych i punktowanych.

Tag ma opcjonalne atrybuty:

Składnia atrybutu	Zamiar
TYP = format	Format numerowania może przyjmować następujące wartości:
		Cyfry arabskie (domyślne)
		wielkie litery
		małe litery
		duże cyfry rzymskie
		małe cyfry rzymskie
START = wartość	pierwszy numer na liście (domyślnie 1)

Tag ma opcjonalny atrybut

Składnia atrybutu	Zamiar
TYP = format	Format tokenu może mieć następujące wartości:
	Dysk	dysk (domyślny)
	Koło	koło
	Kwadrat	Kwadrat

Akapity można również formatować jako nagłówki poziomów (od n = 1 do n = 6), w tym celu stosuje się znaczniki postaci ... n>. Nagłówek pierwszego poziomu jest wyświetlany największą czcionką.

Tagi

, ... ,

może mieć atrybut wyrównania ALIGN o wartościach LEFT, RIGHT i CENTER.

Umiejscowienie rysunków

Obrazy wyświetlane przez przeglądarkę podczas przeglądania strony internetowej są przechowywane w oddzielnych plikach w formacie gif, jpg (jpeg) lub png, a łącze do żądanego pliku znajduje się w kodzie strony. W tym celu używany jest niesparowany tag, który ma jeden obowiązkowy i kilka opcjonalnych atrybutów.

Wymagany atrybut:
SRC = adres URL	Adres pliku graficznego (względny lub bezwzględny)
ALT= tekst	Tekst alternatywny wyświetlany w trybie przeglądarki bez ładowania obrazów (musi być ujęty w cudzysłów)
GRANICA = oznaczający	Grubość obramowania w pikselach, 0 oznacza brak obramowania (domyślnie)
KOLOR GRANICY = kolor	Ustawia kolor obramowania
WYSOKOŚĆ = oznaczający	Wysokość obrazu w pikselach (domyślnie oryginalna) lub jako procent wysokości okna przeglądarki
SZEROKOŚĆ = oznaczający	Szerokość obrazu w pikselach (domyślnie oryginał) lub jako procent szerokości okna przeglądarki
HSPACE = oznaczający	Wolna przestrzeń po lewej i prawej stronie obrazu w pikselach
VSPACE = oznaczający	Wolna przestrzeń nad i pod obrazem w pikselach
WYRÓWNIJ = oznaczający	Wyrównuje obraz w poziomie. Jeśli ustawiona jest opcja LEWA lub PRAWA, obraz zostanie odpowiednio wyrównany w poziomie, ustawienie tych wartości spowoduje zawijanie tekstu wokół obrazu

Przyjrzyjmy się bliżej bezwzględnym i względnym metodom adresowania pliku.

Adresowanie w formie absolutnej używany w odniesieniu do zasobów znajdujących się na innych serwerach. Uniwersalny adres określający lokalizację zasobu informacyjnego nazywany jest adresem URL (Uniform Resource Locator). Adres URL składa się z dwóch części oddzielonych dwukropkiem. Pierwsza część wskazuje typ protokołu sieciowego, który zależy od rodzaju zasobu. Na przykład, jeśli zasób znajduje się na serwerze WWW, jest to protokół http.Druga część zawiera nazwę komputera (serwera) w systemie nazw domenowych oraz (jeśli jest wymagana) nazwę ścieżki pliku. Podczas zapisywania nazwy ścieżki nazwy katalogów są oddzielane ukośnikiem (znakiem /) w nazwach plików i katalogów rozróżniać wielkie i małe litery, spacje nie są dozwolone. Oto przykłady adresów URL:

http://www. vshu. kirov .ru/ strona / obrazy / zdjęcie 1. jpg

http://195.21.123.13:8110

ftp://everything.com/soft/prog.zip

mailto:Ten adres e-mail jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć.

Ostatni adres URL wskazujący protokół poczta i adres e-mail nie prowadzi do żadnego źródła informacji; Jest to jedyny typ adresu URL, który nie zawiera dwóch ukośników po dwukropku.

Adresowanie zdjęć w formie absolutnej praktycznie nie jest stosowane przy tworzeniu strony internetowej.

Adresowanie w formie względnej używany w odniesieniu do zasobów znajdujących się na tym samym serwerze. Podczas zapisywania ścieżki do pliku nazwy katalogów oddzielane są ukośnikiem (symbol /), poruszanie się po katalogach systemu plików o jeden poziom wyżej jest oznaczone dwiema kropkami (symbolami ..). Aby było to jaśniejsze, wyobraźmy sobie na przykład komputer z następującą strukturą katalogów zawierającą pliki HTML:

KSZTAŁT\* ŁĄCZENIE FORMATU

Moja strona

Strony

Obrazy

Strona1.htm Strona2.htm Rys.1.jpg Rys.2.jpg

Indeks.htm Obraz.jpg

W tym przypadku możliwe są na przykład następujące opcje zapisu znacznika IMG:

ü < IMG SRC = Picture . jpg >(Obraz .jpg znajduje się na stronie Index .htm)

ü < IMG SRC = Images / Pict 1. jpg >(obrazek Rys. 1. jpg znajduje się na stronie Index.htm)

ü < IMG SRC =../ Picture . jpg >(Zdjęcie w formacie jpg znajduje się na stronie Strona 1. htm )

ü < IMG SRC =../ Images / Pict 1. jpg >(obrazek Rys. 1. jpg znajduje się na stronie Strona 1. htm)

Pomimo tego, że formalnie wymagany jest jedynie atrybut SRC, w praktyce konieczne jest także podanie tekstu alternatywnego (atrybut ALT), gdyż wiele osób pracuje z przeglądarką w trybie bez ładowania obrazków.

Wysokość i szerokość obszaru, w którym wyświetlany jest rysunek, określa się za pomocą atrybutów szerokość i wysokość w pikselach lub jako procent wielkości ekranu. Po określeniu jednego z tych atrybutów rysunek jest skalowany w taki sposób, aby jego wysokość lub szerokość odpowiadały określonemu. Drugi rozmiar dobierany jest automatycznie, w odpowiedniej proporcji. Zastosowanie tylko jednego z atrybutów powoduje zmianę obu wymiarów rysunku.
Jeśli jawnie ustawisz oba atrybuty, obraz zostanie przeskalowany wzdłuż dwóch osi zgodnie z podanymi wymiarami. Atrybuty wysokość i szerokość nie zmieniają czasu ładowania obrazu, a jedynie jego wygląd (rozmiar) na ekranie.

Hiperłącza

Hiperłącze to obiekt (tekst, obraz, fragment obrazu), który po kliknięciu myszką prowadzi do nowego dokumentu lub fragmentu dokumentu. To hiperłącza, które pozwalają uporządkować przejścia pomiędzy dowolnymi dokumentami zamieszczonymi w Internecie.

Hiperłącza tekstowe

Połączenie pomiędzy dokumentami HTML i fragmentami dokumentów jest zorganizowane za pomocą znacznika ...(z angielskiego A nchor – kotwica).

Znacznik służy zarówno do utworzenia odnośnika do innego dokumentu, jak i do fragmentu dokumentu.

Wymagany atrybut:
HREF = adres URL	Adres dokumentu docelowego (może być podany w formie bezwzględnej i względnej)
Podstawowe atrybuty opcjonalne:
NAZWA=" Nazwa"	Zaznacza ten pomiędzy< A >oraz A > fragment dokumentu jako możliwy obiekt łącza. Jako wartość należy wpisać po łacinie dowolne słowo indeksowe, które jest unikalne dla tego dokumentu. Przykładowo znacznik Sekcja1 tworzy tzw. etykietę (zakładkę) umożliwiającą przejście do sekcji 1. W takim przypadku można odwołać się do zaznaczonego obszaru po prostu podając jego nazwę po nazwie dokumentu (poprzedzonej #). Więc,< A HREF =" Index . html # part 1">Do części 1 A > przeniesie Cię do sekcji „część 1” pliku indeksu. HTML i < A HREF ="# part 2">Do sekcji 2 A > - do sekcji „część 2” bieżącego dokumentu, pod warunkiem, że dokument posiada odpowiednią etykietę
CEL = " Nazwa"	Nazwa ramki (ramki) lub okna wyświetlania dokumentu docelowego. Ten atrybut jest używany tylko w połączeniu z parametrem HREF. Wartość musi być nazwą jednej z istniejących ramek lub jedną z następujących nazw zastrzeżonych: _self - wskazuje, że w bieżącej ramce powinien zostać wyświetlony dokument określony w parametrze HREF; _parent - wskazuje, że dokument powinien być wyświetlany w ramce nadrzędnej bieżącej ramki (zajmować w całości okno przeglądarki); _blank - określa, że ​​dokument powinien zostać wyświetlony w nowym oknie
TYTUŁ= "(!JĘZYK: tekst!}"	Wyświetla podpowiedź po najechaniu myszką na hiperłącze

Tekst i obrazy umieszczone pomiędzy tagami stają się aktywnym obszarem dokumentu, wrażliwym na kliknięcie myszką, które powoduje załadowanie dokumentu docelowego. Tekst hiperłącza jest wyróżniany podkreśleniem i kolorami określonymi jako wartość atrybutów LINK, A LINK, V LINK tagu (lub kolor domyślny).

Hiperłącza-zdjęcia

Aby cały obraz stał się hiperłączem, możesz także użyć znacznika ...., tylko zamiast tekstu (lub razem z tekstem) pomiędzy< A >i znajduje się znacznik A >< IMG …>ze wszystkimi odpowiednimi atrybutami.

Na przykład , .

Mapa hiperłączy

Tag pozwala na utworzenie aktywnej strefy fragmentu tekstu lub całego obrazu; Aby różne fragmenty jednego obrazu powiązały się z różnymi dokumentami docelowymi, będziesz musiał użyć tagu, który implementuje obraz mapy.

W przypadku tagu kontenera jedynym wymaganym atrybutem jest NAME , którego wartością będzie nazwa (na przykład NAME=" mymap ", której należy użyć przy opisie atrybutu USEMAP tagu IMG opisującego obraz, który ma służyć jako mapa (z # - USEMAP="#mymap")

Wewnątrz kontenera każdy obszar obrazu wrażliwy na mysz musi mieć znacznik z następującymi atrybutami:

Składnia atrybutu	Zamiar
WSPÓŁRZĘDY= lista	Lista oddzielonych przecinkami współrzędnych aktywnej strefy (w zależności od rodzaju kształtu danej strefy)
HREF = adres URL
KSZTAŁT = formularz	Określa kształt rdzenia. Możliwe wartości tego atrybutu: koło(okrąg – określony przez współrzędne środka i promień w pikselach); prosto(prostokąt - określony przez współrzędne lewego górnego i prawego dolnego rogu); poli(wielokąt - zdefiniowany przez współrzędne jego wierzchołków) We wszystkich przypadkach współrzędne mierzone są od lewego górnego rogu obrazu w pikselach, oś X skierowana jest w prawo, a oś Y w dół.
NOREF	czasami konieczne jest wskazanie, że dana strefa (określona atrybutem SHAPE i współrzędnymi COORDS) jest nieaktywna, nie ma reakcji na kliknięcie myszką

Stoły

Tabele w dokumentach HTML służą nie tyle do umieszczania danych w komórkach otoczonych ramkami, ale do układania fragmentów tekstu i obrazów względem siebie.

Tabele w HTML są budowane wiersz po wierszu. Wszystkie dane tabelaryczne są ujęte w tagi

; opis każdego wiersza komórek (wierszy) zawarty jest w tagach…; zawartość każdej komórki zawarta jest w znacznikach ... (zwykłe komórki) lub ... H> (nagłówki).

Zatem, aby opisać np. tabelę składającą się z dwóch wierszy, z których każdy zawiera dwie komórki, trzeba będzie utworzyć następującą konstrukcję:

Komórki tabeli mogą zawierać tekst, obrazy, zagnieżdżone tabele itp. Nie należy pozostawiać pustych komórek tabeli; jeśli jakakolwiek komórka powinna wyglądać na pustą, umieść w niej nierozdzielającą spację.

Tekst umieszczony w komórkach tabeli jest domyślnie umieszczany automatycznie przez przeglądarkę; tekst jest wyświetlany słowo po słowie; Po osiągnięciu prawej krawędzi komórki następne słowo jest przenoszone do nowej linii.

Komórki tabeli mogą obejmować wiele wierszy lub kolumn; podczas opisywania takich komórek stosuje się atrybuty ROWSPAN (komórka, której znacznik zawiera ten atrybut, jest „rozciągana” o określoną liczbę wierszy) i COLSPAN (komórka jest „rozciągana” o kilka kolumn) używany. Oto przykład organizacji tabeli ze scalonymi komórkami:

< TR >

< TD ROWSPAN=2>1-1 niszczyciel >

Tagi opisujące tabele posiadają szereg opcjonalnych atrybutów.

Atrybuty znaczników określają parametry tabeli jako całości:

	Składnia atrybutu		Zamiar
WYRÓWNIJ = wartość		Wyrównanie względem przepływu tekstu; możliwe wartości to lewy, prawy i środkowy
TŁO = adres URL		Obraz tła dla całej tabeli
BGKOLOR= kolor		Kolor tła
KOLOR GRANICY = kolor		Kolor ramki
KOLOR GRANICY CIEMNY = kolor		Koloruje prawą i dolną krawędź ramki głównej oraz lewą i górną krawędź każdej komórki określonym kolorem
BORDERCOLORLIGHT = kolor		Koloruje lewą i górną krawędź ramki głównej oraz odpowiednio prawą i dolną krawędź każdej komórki określonym kolorem
PADDING KOMÓRKOWY = wartość		Odległość od krawędzi komórki do jej zawartości w pikselach
ROZSTAW KOMÓREK = wartość		Odległość między komórkami w pikselach
HSPACE = oznaczający		Wolne miejsce po lewej i prawej stronie tabeli w pikselach
VSPACE = oznaczający		Wolna przestrzeń nad i pod tabelą w pikselach
SZEROKOŚĆ = oznaczający		Szerokość tabeli (ustawiana w pikselach lub jako procent szerokości bieżącego okna przeglądarki)

Atrybuty tagu określają parametry danej serii (w przypadku wystąpienia sprzeczności atrybuty określone w tagu zostają anulowane). Wyrównanie zawartości komórek; możliwe wartości to lewa, prawa i środek

TŁO = adres URL

Obraz tła dla komórek danego wiersza tabeli

BGKOLOR= kolor

Kolor tła komórek w tym wierszu

GRANICA = oznaczający

Grubość obramowania otaczającego komórki tego wiersza; BORDER=0 oznacza niewidoczną granicę

WALIGN = oznaczający

Pionowe wyrównanie zawartości komórki; możliwe wartości to góra, środek i dół

Atrybuty znacznika ustawiają parametry danej komórki (w przypadku wystąpienia sprzeczności atrybuty określone w znacznikach i zostają anulowane).

Składnia atrybutu	Zamiar
WYRÓWNIJ = oznaczający	Wyrównaj zawartość komórki; możliwe wartości to lewa, prawa i środkowa
TŁO = ur l	Obraz tła komórki tabeli
BGKOLOR= kolor	Kolor tła komórki
GRANICA = oznaczający	Grubość ramki otaczającej komórkę
WALIGN = oznaczający	Pionowe wyrównanie zawartości komórki; możliwe wartości to góra, środek i dół
SZEROKOŚĆ = oznaczający	Szerokość komórki w pikselach lub procent szerokości tabeli
ROZPIĘTOŚĆ WIERSÓW= oznaczający	Wskazuje liczbę wierszy objętych komórką
COLSPAN = oznaczający	Określa liczbę kolumn objętych komórką

Podczas pracy z tabelami należy pamiętać, że określona wartość atrybutu WIDTH jest w wielu przypadkach jedynie „odnotowywana” przez przeglądarkę. Rzadko zachowane są podane proporcje, przeglądarka stara się jak najlepiej (w swoim rozumieniu) wyświetlić tabelę.

Serce

Użycie tickera na stronie internetowej sprawia, że ​​jest ona bardziej dynamiczna i pozwala uzyskać efekt poruszającego się obiektu. Tworzenie tickera za pomocą tagu< MARQUEE >... MARKI >.

Między< MARQUEE >i MARQUEE > można zlokalizować fragmenty tekstu i obrazy. Tekst można sformatować za pomocą odpowiednich znaczników, a grafikę wstawić za pomocą formatu .

Składnia atrybutu	Zamiar
BGKOLOR= kolor	Kolor tła. Jeśli określono tło, przeglądarka rysuje na ekranie kolorowy pasek, wzdłuż którego przesuwa się tekst lub obraz.
WYSOKOŚĆ = oznaczający	Wysokość paska tła. Wartość jest podawana w pikselach lub jako procent wysokości okna przeglądarki. Na przykład, jeśli określisz atrybut HEIGHT=25%, pasek informacyjny zajmie jedną czwartą wysokości okna
SZEROKOŚĆ = oznaczający	Szerokość paska giełdowego wyrażona w pikselach lub jako procent szerokości okna przeglądarki
KIERUNEK= oznaczający	Kierunek ruchu linii: lewo - lewo (domyślnie), prawo - prawo, góra - góra, dół - dół
ZACHOWANIE = oznaczający	Atrybut kontroluje zachowanie tickera: przewiń (domyślnie) – po dotarciu do krawędzi okna linia znika z pola widzenia i pojawia się po przeciwnej stronie; przesuń - linia pojawia się od krawędzi okna, dociera do przeciwległej i zatrzymuje się; naprzemiennie - linia przesuwa się w prawo lub w lewo, „odbijając się” od krawędzi okna i zmieniając kierunek ruchu
HSPACE = przesunięcie pikseli	Przesuń pasek giełdowy poziomo w prawo
VSPACE = Ty co tw pikselach	Tworzenie pustej przestrzeni nad i pod listwą
PĘTLA = oznaczający	Liczba przejść linii na ekranie
SCROOLAMOUNT = oznaczający	Liczba pikseli, przez które linia przechodzi w każdym kroku. Domyślny tryb to około 10 pikseli/krok. Atrybut ten pozwala dostosować prędkość ruchu linii
OPÓŹNIENIE PRZEWIJANIA = oznaczający	Określa odstęp czasu (w milisekundach) pomiędzy krokami, za pomocą tego atrybutu możesz sprawić, że linia będzie się poruszać gwałtownie
PRAWDZIWE	Gdy ta flaga (atrybut bez wartości) jest ustawiona, zostanie użyta określona wartość SCROLLDELAY. Jeśli flaga nie jest ustawiona, wartością jest SCROLLDELAY