Od autora: Cześć wszystkim. Wszyscy chcemy lepiej zrozumieć tworzenie stron internetowych, aby angażować się w ciekawe projekty i realizować nasze pomysły. Ale co, jeśli jesteś kompletnym początkującym? Nasz samouczek html dla bystrzaków z praktycznymi lekcjami pomoże Ci w końcu dokonać tak ważnego przełomu w budowaniu stron internetowych od poziomu zerowego do przynajmniej podstawowego zrozumienia.

W nauce tworzenia stron internetowych, podobnie jak w prawie każdym innym biznesie, ważna jest praktyka. Możesz przeczytać przepis na barszcz 1000 razy, ale to nie sprawi, że go ugotujesz. Możesz nauczyć się podstawowych zasad prowadzenia samochodu, ale dopóki nie wsiądziesz za kierownicę, wszystko zależy od żarówki. Niewątpliwie jest jakaś korzyść ze znajomości teorii, ale nie tak duża jak z prawdziwych umiejętności.

Tak więc, jeśli mówimy o nauce html, to jest też teoria, ale jest też praktyka. Teoria w tym przypadku to po prostu jakaś seria artykułów, lekcje na temat języka, podstawowych tagów i ich zastosowania itp.

Praktyka dla ciebie zaczyna się, gdy sam utworzysz plik html, napiszesz tam kod startowy i zaczniesz własnoręcznie studiować, jak to wszystko działa. Napisałem tag, zobaczyłem, jak to działa. Wstawiłem zdjęcie - sprawdzone. Dodano kilka atrybutów itp. To właśnie praktyka pozwala szybko zrozumieć i zapamiętać główne tagi. Potem po prostu zapisujesz je na maszynie i nie musisz przez pół godziny pamiętać, jak stworzyć listę.

Cóż, w przypadku rzadkich tagów zawsze powinieneś używać słownika. Myślę, że nikt, ani jeden super projektant układu i twórca stron internetowych, nie zna wszystkich tagów na pamięć. To po prostu nie jest konieczne. Jeśli używasz tagu raz na 10 lat, to po co trzymać go w głowie? Myślę, że to zrozumiałe.

Ale nazwałbym taką praktykę po prostu rodzajem gry w piaskownicy. Po prostu piszesz różne tagi, próbując poradzić sobie ze wszystkim tak szczegółowo, jak to możliwe, ale wszystko po co? Musi być jakiś cel. Zwykle studiuje się html i css, aby następnie tworzyć własne strony internetowe i pełnoprawne witryny.

Tak więc najlepszą praktyką jest wzięcie gotowego układu strony internetowej i rozplanowanie go. Layout to właśnie proces tworzenia stron internetowych z wielowarstwowego rysunku przy użyciu języków html i css. Mogą również korzystać z frameworków, javascript i bibliotek aplikacji podczas tworzenia layoutu, ale to już temat na inną rozmowę. Wszystko to jest dodatkiem. HTML to podstawowa technologia, którą należy bardzo dobrze zrozumieć.

Ale zadowolę cię - to jest podstawowe, to jest najprostsze. Nauczenie się, jak działają określone tagi i jak je stosować, jest bardzo łatwe. W html nie ma skomplikowanych algorytmów, funkcji, metod, klas, jak ma to miejsce w językach programowania. To jest język znaczników, wystarczy go trochę przestudiować, a wszystko będzie bardzo jasne.

Jak uczyć się języka i gdzie ćwiczyć?

Ponownie mówię o łatwym uczeniu się tylko wtedy, gdy idziesz właściwą drogą. Oznacza to, że oglądaj sensowne samouczki wideo, w których niezbędne rzeczy są wyjaśniane krok po kroku, od prostych do złożonych. Jeśli oglądasz lekcje, które nie są zbudowane zgodnie z tym formatem, najprawdopodobniej po prostu nie zrozumiesz większości materiału.

Na szczęście na naszej stronie wszystkie lekcje są uporządkowane i ułożone od prostych do złożonych. Dlatego jeśli uczysz się html zgodnie z naszymi lekcjami, nie będzie problemów z opanowaniem materiału.

Mogę cię zapewnić, że nauka css jest przyjemniejsza! A pod pewnymi względami nawet łatwiej. Po pierwsze, css ma również sporo właściwości i reguł, o których musisz pamiętać. Po drugie, ten język ma bardzo prostą składnię, więc nawet początkujący nie będzie miał problemów z napisaniem w nim kodu. Po trzecie, ponieważ za wygląd strony odpowiada css, na początku będziesz zachwycony, że zrobiłeś stronę czerwoną i zrobiłeś ramkę na to zdjęcie.

Ogólnie rzecz biorąc, nauka css jest prosta i interesująca, więc polecam nie zwlekać i zacząć od razu po skończeniu z podstawami html.

Twoja ostatnia praktyka

W końcu masz egzamin. Ale nie martw się, będzie łatwo. Co więcej, nie będziesz musiał tego robić sam, ale tylko zgodnie z instrukcjami zawartymi w lekcjach. Ten egzamin to kurs. W nim w końcu osiągniesz główny cel pośredni - stworzysz swoją pierwszą witrynę i zrozumiesz, jak używać html i css w prawdziwym budowaniu witryny. Niech to będzie prosta strona, ale zdobyta wiedza wystarczy, aby dalej się rozwijać i tworzyć bardziej złożone układy.

HTML to hipertekstowy język znaczników, który sprawił, że sieć jest taka, jaką znamy i kochamy. To właśnie dzięki temu wspaniałemu narzędziu strony wyglądają pięknie i nowocześnie, a także zapewniona jest wygoda ich użytkowania. HTML po prostu porządkuje elementy strony internetowej w sposób przyjazny dla użytkownika. Jego praca jest porównywalna do tego, co robią MS Word czy OpenOffice. Zamieniają pozbawioną cech charakterystycznych masę liter w dokument zawierający akapity, pogrubiony tekst, kursywę, tabele, a nawet obrazy. W przybliżeniu ten sam język ma HTML, z tą tylko różnicą, że jego dokumenty są wyświetlane w przeglądarce, a możliwości tego narzędzia są znacznie szersze niż edytora tekstu. Do znaczników używane są tagi - specjalne polecenia opisujące strukturę strony internetowej. Są one ujęte w nawiasy ostre -<тег>aby przeglądarka mogła je odróżnić od większości tekstu. Następnie omówimy podstawy języka HTML dla początkujących.

Edytory wizualne

Początkujący, którzy dopiero stawiają stopę na ścieżce nauki HTML często rozpoczynają swoją pracę z programami, które pozwalają tworzyć strony bez żadnej wiedzy. W nich możesz po prostu ułożyć elementy na ekranie tak, jak będą wyświetlane w przeglądarce. Wydawałoby się, że oto jest - źródło wiecznej łaski, pozwalające pozbyć się większości twórców stron internetowych. Ale nie wszystko jest takie proste, ponieważ edytory wizualne mają wiele wad, które uniemożliwiają ich użycie w poważnych projektach.

Wszystkie te programy tworzą wiele niepotrzebnych tagów, które sprawiają, że ostateczna wersja strony jest uciążliwa i nieoptymalna. Oczywiście w dobie szybkiego Internetu ma to mniejsze znaczenie niż wcześniej, ale jest kilka powodów, dla których zwięzła i dobrze napisana strona okazuje się bardziej praktyczna niż jej odpowiednik stworzony w edytorze wizualnym. Strona zrobiona w takim programie będzie źle przetwarzana przez roboty wyszukujące, bo każdy kilobajt kodu jest dla nich ważny, a uciążliwy i nielogiczny kod z mnóstwem nie będzie im odpowiadał. Ponadto redaktorzy często są spóźnieni, stają się nieistotni i nie warto wydawać środków na ich rozwój, ponieważ ani jeden profesjonalista nie korzysta z tych produktów. Dlatego każdy, kto chce pracować w dziedzinie tworzenia stron internetowych, powinien znać podstawy HTML.

tagi

Jak wspomniano powyżej, tagi opisują strukturę strony internetowej dla przeglądarki. Większość z nich ma tag otwierający i zamykający, ale nie wszystkie. Na przykład, , gdzie treść jest zamiast kropek. Pierwszy pokazuje, gdzie zaczyna się tag, a drugi go zamyka. Wewnątrz mogą znajdować się inne elementy znaczników strony, które można zagnieżdżać jeden w drugim, jak zagnieżdżoną lalkę. Ważne jest, aby zamykać tagi w odpowiednim czasie, aby strona wyświetlała się poprawnie.

Istnieją również pojedyncze tagi, których nie trzeba zamykać. W nich treść jest w środku, tak jak można ją napisać dla większości znaczników HTML i ustawia właściwości elementu. Jest wskazany w tagu otwierającym i wygląda mniej więcej tak: atrybut = "...", gdzie zamiast kropek jest wartość atrybutu. Znajomość tagów to pierwszy i najważniejszy krok w opanowaniu języka HTML. Podstawy tej sztuki to również zrozumienie struktury strony internetowej.

Struktura dokumentu

Każdy dokument HTML ma odpowiednie rozszerzenie, takie jak Index.html. Dzięki temu przeglądarka może zrozumieć, z czym ma do czynienia i poprawnie wyświetlić stronę. Wskazane jest przechowywanie wszystkich plików użytych do stworzenia serwisu w jednym katalogu, co znacznie ułatwi Ci życie w przyszłości. Podstawy języka znaczników hipertekstu HTML wymagają jasnego zrozumienia struktury dokumentu. Zaczyna się od tagu, który informuje przeglądarkę o wersji kodu HTML używanego w tym dokumencie. W tej chwili aktualna jest piąta wersja języka, więc nie ma co wymyślać, możesz spokojnie wstawić powyższy tag na początku dowolnej strony.

Następnie pojawiają się główne sparowane struktury, które tworzą „szkielet” witryny. Pierwszy znacznik, w którym zagnieżdżone są wszystkie pozostałe − .... Wszystko poza nim nie jest rozpoznawane przez przeglądarkę jako strona internetowa, więc otwiera dokument i zamyka go. Ten znacznik jest wymagany dla każdego dokumentu. Zawiera również kilka innych wymaganych tagów, które zostaną omówione poniżej.

głowa

Wewnątrz tagu ... zawiera informacje techniczne, które nie będą wyświetlane na stronie, ale mimo to są ważną częścią dokumentu HTML. W tym miejscu kładzie się fundamenty strony, tutaj wybiera się kodowanie i wpisuje nazwę strony. Jest zawarty w wymaganym tagu . Nazwa wyświetlana jest w górnej części przeglądarki, gdzie można również umieścić małą ikonkę charakteryzującą zawartość strony. Wskazane jest natychmiastowe określenie kodowania dokumentu w celu jego prawidłowego wyświetlenia. Można to zrobić za pomocą tagu . Metatagi dostarczają informacji o strukturze strony i zazwyczaj znajdują się wewnątrz nagłówka.

Połączyć

Znajomość podstaw HTML wymaga również używania stylów kaskadowych, czyli css. Ustawiają właściwości elementów, które będą wyświetlane na stronie. Nowoczesne podejście do tego zadania polega na usunięciu dla większej wygody takich cech jak kolor, wysokość i położenie elementu w pliku zewnętrznym. Tag służy do łączenia pliku css . Po zakończeniu wygląda to tak: , gdzie href wskazuje lokalizację pliku, a typ wskazuje jego typ.

Ciało

To właśnie w tej części dokumentu HTML tworzona jest widoczna część strony. Wszystko, co zostanie zrobione w „ciele”, zostanie pokazane przez przeglądarkę. W używana jest ogromna liczba znaczników HTML. Podstawy to formatowanie tekstu, praca z linkami i najprostsze narzędzia do strukturyzowania strony internetowej. Aby rozpocząć pracę w HTML, wystarczy znać podstawowe tagi i umieć z nich korzystać. Poniżej znajdują się te najpopularniejsze:

• - służy do wyboru podłańcucha, który będzie podlegał specjalnemu stylowi opisanemu w css;
• - tworzy link na stronie internetowej; adres skoku jest ustawiany przez atrybut href;
• - jeden z najpopularniejszych tagów naszych czasów; każdy, kto zdecyduje się poznać podstawy języka HTMLl, powinien zwrócić na to szczególną uwagę, ponieważ jest to element blokowy, na podstawie którego powstaje lwia część nowoczesnych witryn (parametry dla bloków

  są ustawione w css, a wewnątrz tego znacznika można umieścić inne bloki);

• Zaznacza akapit z tekstu; treść akapitu znajduje się pomiędzy znacznikami otwierającymi i zamykającymi;

• - lista numerowana, której elementy są ujęte w znacznik pary
  1. - lista wypunktowana, w której, podobnie jak w przypadku listy numerowanej, elementy są oznaczone znacznikiem

     • -

       - nagłówki dokumentu (liczba wskazuje poziom nagłówka, tj

       - nagłówek główny, a kolejne opcje to jego podtytuły, nawiasem mówiąc, nagłówki poziomów

       ,

       prawie niemożliwe do znalezienia w Internecie), należy również pamiętać, że na stronie może znajdować się tylko jeden nagłówek

       ;

     • - Miniaturka;
     • - kursywa;
     • - wstawienie obrazka na stronę (jest to pojedynczy tag, nie potrzebuje tagu zamykającego, ale musi zawierać atrybut alt, który określa tekst obrazka);

     To nie wszystkie tagi potrzebne do stworzenia własnej strony internetowej, ale wystarczą, aby położyć podwaliny pod HTML dla początkujących.

     css

     Rozwój języka HTML doprowadził do tego, że każdy tag nabrał masy atrybutów, a wymagania dotyczące wyglądu stron internetowych znacznie wzrosły. Kod stał się nieporęczny i niewygodny, trudno było go odczytać, nie mówiąc już o jego adaptacji czy zmianie. Ponadto, jeśli masz w witrynie dziesięć stron, które mają wiele nagłówków zaznaczonych na zielono i nagle chcesz zmienić je na czerwone, musisz ciężko pracować, zmieniając każdy z nich ręcznie. Wraz z pojawieniem się kaskadowych arkuszy stylów proces ten stał się prosty i logiczny, a kod HTML stał się znacznie bardziej czytelny.

     

     Stosowanie CSS

     Aby tworzyć strony WWW, trzeba znać podstawy HTML i CSS, bo dziś bez znajomości kaskadowych arkuszy stylów nie da się nic zrobić w tej dziedzinie. Ustawiają atrybuty dla dowolnego elementu, które mają zastosowanie do całego dokumentu. W ten sposób możesz ustawić kolor dla wszystkich elementów jednocześnie

     Lub pisząc tylko jedną regułę. Biorąc pod uwagę współczesne wymagania dotyczące wyglądu stron internetowych, stosowanie kaskadowych arkuszy stylów jest obowiązkowe.

     Aby połączyć plik css z dokumentem, istnieje tag linku. Zasada jego użycia została opisana nieco wyżej, ale nie jest to jedyna opcja łączenia wszystkich stylów w jednym miejscu. Jest jeszcze jeden tag

     za pomocą elementu . Element nie wymaga tagu zamykającego. Ten element określa relacje między bieżącą stroną a innymi dokumentami. Takich elementów na stronie może być kilka. Wpis będzie wyglądał następująco:

     Tabela 4. Atrybuty tagów

     Atrybut	Opis, akceptowana wartość
     krzyżowe pochodzenie	Określa, czy podczas pobierania obrazu z witryny ma być używany CORS (technologia przeglądarki, która umożliwia stronie internetowej dostęp do zasobów z innej domeny). anonimowy — w żądaniu międzydomenowym przeglądarka automatycznie dodaje nagłówek Origin zawierający nazwę domeny, z której wysłano żądanie. Jeśli serwer nie odpowie nagłówkiem CORS Access-Control-Allow-Origin: * (lub nazwą domeny zamiast gwiazdki), obraz zostanie zablokowany przed ładowaniem. use-credentials - jeśli serwer nie dostarczy poświadczeń za pomocą Access-Control-Allow-Credentials: true , ładowanie obrazu zostanie zablokowane.
     href	Głównym atrybutem tagu, wartością jest ścieżka do pliku ze stylami.
     hreflang	Określa język tekstu w połączonym dokumencie.
     głoska bezdźwięczna	Określa typ urządzenia, do którego ma zostać zastosowany zasób łącza.
     chwilowo	Losowo generowana przez serwer zmienna łańcuchowa, która określa reguły używania stylów wbudowanych do ochrony treści. Wartością atrybutu jest ciąg tekstowy.
     rel	Atrybut definiuje relację między bieżącym dokumentem a dokumentem odniesienia. alternatywny — link do tego samego dokumentu, ale w innym formacie (np. strony do wydrukowania, tłumaczenie, kopia lustrzana, kanał RSS lub Atom), . Archives wskazuje, że połączony dokument ma wartość historyczną. Odnośnik może wskazywać na zbiór akt, dokumentów i innych materiałów. autora link do strony o autorze dokumentu lub do strony z danymi kontaktowymi autora. zakładka Odniesienie do najbliższego przodka artykułu, który jest łączem, lub do sekcji artykułu, która jest najbliżej związana z elementem, jeśli nie ma przodka. zewnętrzna służy do wskazania, że ​​strona, do której prowadzi link, nie jest częścią tej witryny. first określa łącze do pierwszego dokumentu w sekwencji dokumentów. link pomocy do dokumentu pomocy. ikona określa ścieżkę do ikony używanej w bieżącym dokumencie. last określa łącze do ostatniego dokumentu w sekwencji dokumentów. licencja Łącze do informacji o prawach autorskich do dokumentu. następny wskazuje, że ten dokument jest częścią serii, a łącze wskazuje następny dokument w serii. nofollow wskazuje, że link nie jest zatwierdzony przez autora strony lub że link jest komercyjny. noreferrer określa, że ​​nagłówek żądania klienta zawierający źródłowy adres URL żądania nie powinien być przekazywany podczas podążania za łączem. pingback określa adres serwera pingback, który pozwala blogowi automatycznie powiadamiać strony, które się do niego łączą. prefetch określa, że ​​plik odniesienia powinien być wcześniej buforowany. prev wskazuje, że ten dokument jest częścią serii i że odsyłacz wskazuje na poprzedni dokument w serii. search wskazuje, że dokument, do którego następuje odwołanie, zawiera interfejs wyszukiwania i powiązane zasoby. pasek boczny wskazuje, że połączony dokument zostanie w miarę możliwości pokazany w dodatkowym kontekście przeglądarki, a niektóre przeglądarki po kliknięciu hiperłącza otworzą okno umożliwiające dodanie łącza do paska zakładek. arkusz stylów jest odniesieniem do zewnętrznego pliku, który będzie używany jako arkusz stylów dla tego dokumentu. oznacza, że ​​znacznik, do którego prowadzi hiperłącze, należy do tego dokumentu. up wskazuje, że strona jest częścią struktury hierarchicznej i że hiperłącze prowadzi do zasobu wyższego poziomu w strukturze.
     rozmiary	Określa rozmiar ikon do wyświetlania wizualnego. Atrybut rozmiary jest używany tylko w połączeniu z atrybutem rel="icon" i może przyjmować następujące wartości: widths height - definiuje listę rozmiarów oddzielonych spacjami, każdy rozmiar musi być w formacie - widths height (rozmiary ikon podane są w pikselach), np.: ; dowolny - ikona może być skalowana do dowolnego rozmiaru.
     tytuł	Określa tytuł łącza lub nazwę zestawu alternatywnych arkuszy stylów. Wartością atrybutu jest tekst.
     typ	Określa typ MIME dokumentu, do którego następuje łącze. W tym przypadku przyjmuje wartość "text/css" .

     1.2.5. Element

     Informuje przeglądarkę, że wszystko między tymi tagami powinno być wyświetlane w oknie przeglądarki. Oto główne tagi, które mogą być obecne w absolutnie każdym dokumencie. Znacznik body służy jako główna treść strony, która zawiera całą jej zawartość. Pożądane jest otwarcie tego znacznika i nie zapomnij go zamknąć na końcu dokumentu.

     Tytuły stron h1 h2 h3

     Idźmy dalej, widzimy tag

     który również otwiera się i zamyka. Znacznik ten oznacza główny nagłówek 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.

     . Wykorzystywane są również w SEO, ale to już trochę inny temat. Zdecydowanie wyróżnię jeden artykuł na ten temat i podam ich szczegółowy opis, zasubskrybuję aktualizacje bloga, aby niczego nie przegapić.

     Obecność takiego tytułu w artykule odegra ważną rolę w promocji strony. Ponadto korzystanie z nich zapewnia przejrzystą strukturę strony, jej nagłówek, podtytuły, wyróżnienia, akapity i tak dalej. Zawsze z nich korzystaj i stosuj je w praktyce. W wielu systemach CMS, takich jak WordPress, podczas pisania tekstu zauważysz „Nagłówek 1”, „Nagłówek 2”, „Nagłówek 3” i tak dalej. Odpowiadają za h1, h2 i h3.

     Jeśli piszesz treść z nowego akapitu, piszesz znacznik

     Na początku i zamknij na końcu

     . Wyznaczenie akapitu w 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 znaleźć się w dokumencie HTML. Spójrzmy na inny przykład, opis będzie trochę później.

     Ten tekst będzie pogrubiony, a ten jest 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 nagłówka i tytułu

     

     Każdy dokument ma element head i element tytułowy. Pierwszy , który pojawia się bezpośrednio po pierwszym tagu . Znacznik ten zawiera wszystkie informacje o stronie, zawiera również element \Zawartość strony

     < / html >

     Jak widać, nie ma nic skomplikowanego. Oto najbardziej podstawowe tagi, 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 to wiedzieć i zawsze pamiętać. Następnie zaczynasz wstawiać tekst, zdjęcia, filmy i tak dalej. Ale to będzie w innych artykułach.

     edytor Notepad++

     

     Użyj Notepad++ do pracy z kodem. Jest bezpłatny i łatwy do znalezienia w Internecie. Bardzo wygodne do postrzegania dowolnego kodu, wygodne jest również pokazywanie tagów otwierających i zamykających. Obsługujemy składnię ponad 40 języków programowania. Właśnie to, czego potrzebujesz, aby nauczyć się podstaw HTML.

     Notatnik jest lepszy pod każdym względem od zwykłego notatnika. Aby zapewnić maksymalną wygodę, prostotę i naukę, edytor ten należy najpierw zainstalować na komputerze. Najbardziej podstawową zaletą i wygodą jest to, że edytor Notepad++ pokazuje podpowiedzi podczas pisania kodu, co czasami przyspiesza i usprawnia pracę.

     element DOCTYPE

     Każdy dokument musi również określać 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 dokumentów i spokojnie pracują. Elementy te informują przeglądarkę, która wersja html jest używana w dokumencie, jaki opis strony, jakie kodowanie jest używane, jakie słowa kluczowe są zawarte, kto jest autorem i jak nazywa się strona.

     Zazwyczaj umieszcza się je na samym początku. Istnieje kilka opcji i wszystkie różnią się od siebie, napiszę jeden przykład, który jest używany najczęściej. Ten blank może być użyty jako gotowy szablon. Następnie będzie jasny opis każdej linii, nie powinno być z tym problemów.

     Krótko prostym językiem o podstawach html: Ta linijka mówi przeglądarce, że ten dokument to XHTML w wersji 1.0, używany jest angielski i cały ten bałagan znajduje się pod tym adresem. Następnie w metatagu określ używane kodowanie. Windows 1251 jest najczęściej używany.

     Opis - dotyczy tematu SEO, jednego z trzech głównych tagów, które muszą znaleźć się w absolutnie każdym dokumencie, ten tag wskazuje opis strony. Co jest napisane na tej stronie, krótki opis, nie więcej niż dwa zdania. Tag słów kluczowych wpływa również na tematykę SEO, ten tag jest wymagany. Zawiera słowa kluczowe, po których internauci odnajdą Cię 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.

     Co musisz zapamiętać z tej lekcji o podstawach HTML:

     1. Prawie wszystkie tagi otwierają się i zamykają;
     2. Dokument zaczyna się od znacznika ;
     3. Obecność znacznika ;
     4. Obecność znacznika ;
     5. Przejrzysta struktura dokumentu HTML.

     Wszystkie strony wzorcowe powinny być zawsze nazywane słowem indeks. Tak to jest przyjęte i każdy jest do tego przyzwyczajony, bez względu na to jakie będzie rozszerzenie pliku, może to być zarówno html jak i php. To się zawsze 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, podany zostanie przykładowy kod oraz możliwość pobrania samego przykładu wraz z gotową stroną.

     Każdy korzysta z internetu i każdy przegląda różne strony i chyba każdy chciałby umieścić swoją stronę w internecie, ale nie jest to łatwe, przyczyn tego jest wiele. Aby jednak móc hostować wysokiej jakości witrynę, wystarczy znać podstawy „ Programowanie sieciowe", który jest język HTML. W tym artykule przyjrzymy się głównym elementom, tagom, atrybutom, a nawet napiszemy pierwszą stronę internetową.

     hipertekstowy język znaczników- "HTML" ( hipertekstowy język znaczników) wielu już dawno przestało uważać go za język programowania. Ponieważ samo pojęcie HTML obejmuje różne metody projektowania dokumentów hipertekstowych, projektowanie, edytory hipertekstowe, przeglądarki i wiele innych. Użytkownik, który opanował ten język, nabywa umiejętność robienia poważnych rzeczy prostymi metodami i co najważniejsze szybko, co we współczesnym świecie uznawane jest za bardzo dobre!

     W HTML można tworzyć własne produkty multimedialne i dystrybuować je na płytach CD, a wszystkie te produkty, wykonane w postaci zestawów stron HTML, nie wymagają opracowywania specjalistycznych narzędzi programowych, ponieważ wszystko, co niezbędne do pracy z danymi ( Przeglądarki internetowe) stały się częścią standardowego oprogramowania większości komputerów osobistych.

     • Element (element) jest konstrukcją języka HTML. Jest to obiekt, który zawiera dane i pozwala sformatować je w określony sposób. Każda strona internetowa jest zbiorem elementów. Jedną z głównych idei hipertekstu jest możliwość zagnieżdżania elementów.
     • Etykietka (etykietka) to znaczniki początku lub końca elementu. Tagi określają zakres elementów i oddzielają elementy od siebie. W tekście strony internetowej znaczniki są ujęte w nawiasy ostre, a po znaczniku końcowym zawsze następuje ukośnik.
     • Atrybut(atrybut) — parametr lub właściwość elementu. Innymi słowy, jest to zmienna, która ma standardową nazwę i której można przypisać określony zestaw wartości: standardowy lub dowolny. Oczekuje się, że wartości znaków atrybutów będą ujęte w proste cudzysłowy, ale niektóre przeglądarki zezwalają na ich rezygnację z używania cudzysłowów. Dzieje się tak, ponieważ typ atrybutu jest zawsze znany z góry. Atrybuty znajdują się wewnątrz znacznika początkowego i są oddzielone od siebie spacjami.
     • Hiperłącze- fragment tekstu, który jest wskaźnikiem do innego pliku lub obiektu. Hiperłącza są niezbędne, aby umożliwić nawigację między dokumentami.
     • rama (rama) - termin ten ma dwa znaczenia. Pierwszy to obszar dokumentu z własnymi paskami przewijania. Druga wartość to jeden obraz w kompleksie ( animacja) plik obrazu (podobny do klatki z filmu). Możliwe jest również, że zamiast terminu „ramka” w literaturze specjalistycznej i zlokalizowanych produktach oprogramowania można znaleźć termin „ramka” lub „ramka”.
     • Plik HTML lub strona HTML – dokument utworzony w formie hipertekstu w oparciu o język HTML. Takie pliki mają rozszerzenie htm lub html.
     • aplet (aplet) to program, który jest przesyłany na komputer klienta jako osobny plik i uruchamiany podczas przeglądania strony internetowej.
     • Scenariusz lub skrypt ( scenariusz) to program dołączony do strony internetowej w celu zwiększenia jej możliwości.
     • Rozszerzenie (rozszerzenie) to element, który nie jest częścią specyfikacji języka, ale jest używany, dając możliwość stworzenia nowego, ciekawego efektu formatowania.
     • CGI (Wspólny interfejs bramy) to ogólna nazwa programów, które działając na serwerze pozwalają rozszerzyć możliwości stron WWW. Na przykład bez takich programów niemożliwe jest tworzenie interaktywnych stron.
     • Kod HTML - hiper Dokument tekstowy w swojej oryginalnej formie, gdy wszystkie elementy i atrybuty są widoczne.
     • Strona internetowa— dokument (plik) przygotowany w formacie hipertekstowym i umieszczony w sieci World Wide Web.
     • Strona internetowa (strona) to zbiór stron internetowych umieszczonych w jednym miejscu i wzajemnie połączonych.
     • Przeglądarka (przeglądarka) to przeglądarka internetowa.
     () - kopiowanie plików z serwera na komputer kliencki.
     • Adres URL (Jednolity lokalizator zasobów) lub Uniform Resource Locator, adres jakiegoś obiektu w Internecie, tj. typowy adres WWW wygląda tak: http://www.nazwa.domeny/nazwapliku.

     Wszystkie elementy języka można warunkowo podzielić na trzy grupy. Pierwsza zawiera elementy tworzące strukturę dokumentu hipertekstowego. Wykorzystanie takich elementów to konieczna formalność, której nie można zaniedbać. Druga grupa obejmuje elementy tworzące efekty formatowania. Ich użycie jest podyktowane specyficznymi wymaganiami dokumentu, wyobraźnią i kompetencjami programisty.Trzecia grupa obejmuje elementy, które pozwalają na kontrolę oprogramowania zainstalowanego i uruchomionego na komputerze klienckim. Często takie elementy są tworzone automatycznie, gdy programista używa edytora hipertekstu lub podobnego programu do wstawienia jakiegoś obiektu do dokumentu.

     Mimo że specyfikacja HTML jest standardem, język jest wzbogacany o nowe elementy ( rozszerzenia). Dlatego niektóre strony internetowe są łatwiejsze do przeglądania w określonych przeglądarkach. Rozszerzenia są tworzone tylko przez znane firmy tworzące oprogramowanie dla WWW, a zwykli użytkownicy mogą ulepszać swoje strony internetowe poprzez programowanie. Aplety pozwalają usunąć ograniczenia HTML i uwolnić wyobraźnię programisty.

     Wersje HTML

     Pierwsza wersja języka HTML została opracowana na początku lat 90. przez Tima BenersLee dla jednej z popularnych w przeszłości przeglądarek Mosaic. Ale wtedy ani przeglądarka, ani sam HTML nie miały jeszcze dobrego zastosowania. W 1993 roku pojawił się HTML+ i ta wersja również przeszła w dużej mierze niezauważona. Ale rozprzestrzenianie się języka HTML było spowodowane wersją 2.0, która pojawiła się w czerwcu 1994 roku. I od tego czasu nastąpił wzrost popularności WWW na całym świecie. Standardy zawarte w wersji 2 zakorzeniły się tak dobrze, że są nadal używane.

     Wersja HTML 3.0, która pojawiła się mniej więcej rok później, wprowadziła możliwość rysowania symboli matematycznych ( znaki całki, nieskończoność, ułamki, nawiasy itp.) używając elementów języka. Ale rozwój tego projektu zwolnił i nie otrzymał dalszej dystrybucji.

     W 1996 roku pojawiła się wersja HTML 3.2. To była genialna decyzja, wystarczy wspomnieć, że ramki zostały wprowadzone do specyfikacji języka i są obecnie bardzo popularne wśród twórców stron internetowych. Do dziś wszystkie przeglądarki obsługują tę wersję HTML.

     Oficjalna specyfikacja HTML 4 ( Dynamiczny HTML) został opracowany w 1997 roku. Już wtedy było oczywiste, że dalszy rozwój hipertekstu będzie prowadzony poprzez programowanie WWW. Okazało się to znacznie wydajniejsze niż wprowadzanie nowych elementów do języka.

     Struktura strony internetowej

     Poniżej znajduje się kod strony internetowej, który jest wykonany w HTML i na przykładzie tej strony przeanalizujemy jej strukturę, ale najpierw skopiujemy cały kod do zwykłego notatnika tekstowego i klikniemy „Zapisz jako” i zapiszemy plik z rozszerzeniem html, tj. . napisz .html po nazwie

     Struktura dokumentu internetowego Przejdź na koniec dokumentu<НR> <Н1>Nagłówek 1

     <Н2>Nagłówek 2 <НЗ>Nagłówek 3 <Н4>Nagłówek 4 <Н5>Nagłówek 5 <Н6>Nagłówek 6 <НR>Tutaj znajduje się pierwszy link<а name ="list2"> <НR> <р>Powinien znajdować się tutaj
     główny tekst strony internetowej.
     A ja na przykład wstawię tutaj
     kilka transferów,
     dzięki czemu można
     obserwować wzrokowo,
     jak to działa dla ciebie
     linki w dokumencie
     ale jeśli masz dużą rozdzielczość,
     Po prostu nie zauważysz przejścia na linkach
     <НR> <а name="list1"

     Iść do<а href ="#list">Początek dokumentu

     Aby zrozumieć strukturę strony internetowej, należy wziąć pod uwagę wszystkie jej elementy zawarte w powyższym kodzie.

     < HTML>

     Oznaczenie dokumentu w HTML. Jedną z zasad języka jest wielopoziomowe zagnieżdżanie elementów. Ten element jest elementem najbardziej zewnętrznym, ponieważ cała strona internetowa musi znajdować się między znacznikami początkowym i końcowym. Zgodnie z ideą element ten można traktować jako formalność. Ma atrybuty version, lang i dir, które są rzadko używane w tym przypadku i umożliwia zagnieżdżanie elementów HEAD, BODY FRAMESET i innych elementów definiujących ogólną strukturę strony internetowej. Oczywiście tag końcowy wszystkie takie dokumenty wygasają.

     < głowa>

     Obszar nagłówka strony internetowej. Innymi słowy, jego pierwsza część. Podobnie jak poprzedni element, HEAD służy jedynie do uformowania ogólnej struktury dokumentu. Ten element może mieć atrybuty lang i dir.

     < tytuł>

     Element do umieszczenia tytułu strony WWW. Linia tekstu znajdująca się wewnątrz tego elementu jest wyświetlana nie w dokumencie, ale na pasku tytułowym okna przeglądarki. Ten element bardzo wpływa na promocję w wyszukiwarce. wyszukiwarki zwracają szczególną uwagę na tag TITLE. Moja rada: nigdy nie twórz bardzo długiego tekstu w tym tagu ( Wystarczy 65 znaków).

     <МЕТА>

     Ten element zawiera informacje o usłudze, które nie są wyświetlane podczas przeglądania strony internetowej. Wewnątrz nie ma tekstu w zwykłym znaczeniu, więc nie ma znacznika końcowego. Każdy element META zawiera dwa główne atrybuty, z których pierwszy określa typ danych, a drugi zawartość.

     < ciało>

     Ten element zawiera hipertekst, który definiuje rzeczywistą stronę internetową. Jest to widoczna część dokumentu, którą strona rozwija się automatycznie i która jest wyświetlana przez przeglądarkę. W związku z tym znacznika końcowego tego elementu należy szukać na końcu strony internetowej. Wewnątrz elementu BODY możesz użyć wszystkich elementów do zaprojektowania strony internetowej. Wewnątrz znacznika startowego elementu BODY można umieścić wiele atrybutów służących do ustawienia całej strony. Rozważmy je w kolejności.

     Jednym z najbardziej użytecznych atrybutów tego tagu, który ma wpływ na wygląd strony, jest

     background="ścieżka do pliku w tle"

     Prostszy projekt tła sprowadza się do ustawienia jego koloru

     bgcolor="#FFFFFF"

     Kolor tła jest określany przez trzy dwucyfrowe liczby szesnastkowe określające intensywność koloru czerwonego, zielonego i niebieskiego (rbg).

     Ponieważ możesz zmienić tło strony, możesz także zmienić kolor tekstu. Ma to następujący atrybut

     text="#RRGGBB"

     Poniższy atrybut służy do ustawiania koloru tekstu hiperłączy.

     link="#RRGGBB"

     Możesz także określić zmianę koloru dla ostatniego hiperłącza wybranego przez użytkownika

     <Н1>

     Element nagłówka. Istnieje sześć poziomów nagłówków, które są oznaczone w następujący sposób.
     <Н1>nagłówek
     <Н2>nagłówek
     <Н3>nagłówek
     <Н4>nagłówek
     <Н5>nagłówek
     <Н6>nagłówek

     Nagłówek poziomu 1 jest największy, a nagłówek poziomu 6 jest najmniejszy. W przypadku nagłówków możesz użyć atrybutu ustawiającego wyrównanie do lewej, do środka lub do prawej:

     align="lewo" align="środek" align="prawo"

     Znacznik służy do tworzenia nowego akapitu.

     I aby przejść do nowej linii bez tworzenia akapitu - tag
     czyli jest transfer. Te tagi nie muszą być zamykane. Oczywiście, jeśli nie użyjesz w tagu

     Element ALIGN, który może ustawić wyrównanie akapitu:

     Lewy

     Wyśrodkowany

     Prawidłowy

     Tekst pomiędzy tymi elementami jest wyjustowany.

     <НR>

     Linia pozioma ( Linia pozioma) jest bardzo powszechnym elementem. Po pierwsze dlatego, że z jego pomocą bardzo łatwo i wygodnie można podzielić stronę na części. Po drugie dlatego, że autor strony ma bardzo mały wybór takich elementów projektu. Element nie ma znacznika końcowego, ale ma szereg atrybutów do wyrównania do lewej, do środka, do prawej, wyrównania:

     • wyrównaj="w lewo"
     • align="centrum"
     • wyrównaj="w prawo"
     • align="wyjustuj"

     Dokument HTML może być bardzo nieporęczny i niezbyt wygodny dla użytkownika, który musi szybko przejść do żądanej sekcji dokumentu. W tym celu można skorzystać z mechanizmu hiperłączy. W tym celu umieść odpowiednie etykiety w odpowiednich miejscach w tekście.

     <а name=»метка»>Dowolny tekst

     W takim przypadku dana linia dokumentu otrzymuje nazwę, a zatem inna część dokumentu, a nawet inny dokument, może być hiperłączem do tej etykiety.

     Aby wstawić obrazy ( Kino) w dokumencie HTML używany jest następujący znacznik ( zawiera pełny opis atrybutów tego znacznika):
     

     Listy

     (lista) zostały opracowane w HTML, bez wątpienia pod wpływem sukcesu edytorów tekstu. Lista różni się od zwykłego tekstu przede wszystkim tym, że użytkownik nie musi zastanawiać się nad numeracją jej elementów: HTML przejmuje to zadanie. W przypadku uzupełniania listy o nowe pozycje lub skracania, numeracja jest kontynuowana automatycznie. W przypadku list nieuporządkowanych HTML poprzedza każdy element okręgami, prostokątami, rombami i innymi obrazami. Ostatecznie lista przybiera przyzwoitą formę. Istnieją dwie grupy takich znaczników: jedna określa ogólny wygląd listy ( i pozwalają określić atrybuty), podczas gdy inne określają jego wewnętrzną strukturę. Listy mogą używać atrybutów standardowych. Istnieje kilka rodzajów list.

     Najbardziej powszechna jest lista nieuporządkowana ( lista nieuporządkowana). Przedstawiono to poniżej:

     • Pozycja 1 listy
     • Pozycja 2 listy
     • Pozycja 3 listy

     Element ul jest rodzajem selekcji listy. Pozwala oddzielić jedną listę od drugiej. Element li oznacza każdy z elementów.

     stoły

     Są jednym z najbardziej niezbędnych sposobów formatowania danych na stronie WWW. Głównym udogodnieniem jest to, że przeglądarka przejmuje rysowanie całej tabeli. Rozmiar ramki może być automatycznie dostosowywany do wielkości okna przeglądarki oraz oczywiście do wielkości linii tekstu i cyfr w komórkach tabeli. Tabele pozwalają między innymi rozwiązywać wiele zadań projektowych: wyrównywać części strony względem siebie, umieszczać obrazy i tekst obok siebie, kontrolować kolorystykę i tak dalej. Podczas tworzenia tabel stosowana jest zasada zagnieżdżania: wewnątrz głównego elementu tabeli (TABELA) tworzonych jest szereg elementów definiujących wiersze (TR), a wewnątrz tych elementów znajdują się elementy opisujące każdą komórkę w wierszu (TD , TH).

     Aby zrozumieć strukturę istniejącej tabeli lub opracować nową, istnieje jedna zasada, że ​​kolejność elementów opisuje tabelę od góry do dołu i od prawej do lewej. Na przykład, jeśli element TR zostanie określony po elemencie TABLE, oznacza to, że rozpoczyna się opis nowego wiersza tabeli. Wszystko po tym elemencie zostanie umieszczone w jednej linii (od prawej do lewej). Może to być sekwencja elementów TD ( komórki), inny stół i tak dalej. Po pojawieniu się nowego elementu TR rozpocznie się opis kolejnej linii i tak dalej aż do końca tabeli (tag).
     Tabelę można wyrównać w poziomie za pomocą atrybutu align:

     • align="left" - w lewo;
     • align="centrum" - wyśrodkowany;
     • align="right" - w prawo.

     Szerokość tabeli można ustawić dokładnie w pikselach lub jako procent szerokości strony w oknie przeglądarki. Na przykład: szerokość=400 lub szerokość=50%

     Do kontrolowania wyglądu ramki służą dwa atrybuty. Faktem jest, że przeglądarka tworzy obraz ramki, symulując jej trójwymiarowość ( wypukły) wykorzystując różnicę w oświetleniu twarzy

     Scenariusze

     Niemal wszyscy webmasterzy chcą, aby ich strony w serwisie miały nowoczesny wygląd, były wielofunkcyjne, piękne i dynamiczne. Standardowe środki HTML nie jest możliwy, więc stosuje się różne środki: aplety, obiekty, kaskadowe arkusze stylów i tak dalej. Ale najbardziej popularny i rozpowszechniony typ ( przyjęcie) jest użycie skryptów.

     Skrypt to kod programu zawarty w tekście strony w formularzu kod źródłowy i wykonywane przez przeglądarkę podczas przeglądania strony. Skrypt można napisać w JavaScript, opracowany przez firmę Netscape lub w języku Visual Basic Script ( VBScript) opracowany przez firmę Microsoft.

     Znacznik ten umożliwia oddzielenie tekstu programu skryptowego od innych informacji na stronie. Znacznik SCRIPT musi zawierać atrybut języka, który definiuje język i może przyjmować następujące wartości:

     • javascript — kod JavaScript;
     • vbscript — kod VBScript.

     Atrybut type może również wskazywać typ języka, chociaż jego użycie jest opcjonalne. Aby nie łamać wszystkich zasad, wewnątrz elementu można umieścić następującą definicję:

     type="tekst/javascript"

     Jedną z najfajniejszych cech skryptów jest możliwość zmiany zawartości strony w wyniku wykonania programu. Ale to tylko cecha, a nie reguła. Atrybut defer (który nie przyjmuje żadnej wartości) może być użyty do „powiedzenia” przeglądarce, że żadne takie zmiany nie zostaną wprowadzone. W niektórych przypadkach pozwala to przyspieszyć ładowanie strony.

     Ze standardowych atrybutów możesz użyć atrybutu charset.

     Znacznik skryptu ( lub kilka takich elementów) można umieścić wewnątrz elementu HEAD lub BODY. Jeśli skrypt znajduje się wewnątrz elementu BODY, możliwe jest również, że przeglądarka, która nie obsługuje elementu SCRIPT, odbierze kod programu jako zwykły tekst i wyświetli go na ekranie. Aby temu zapobiec, kod skryptu jest wprowadzany jako komentarz:

     —
     —
     —

     Wszystkie nowoczesne przeglądarki rozpoznają tę sztuczkę i ignorują znaki komentarza. Jeśli musisz wprowadzić komentarz w tekście skryptu, używany jest do tego inny zapis: dwa ukośniki // są wprowadzane na początku wiersza.
     Kod skryptu jest wykonywany podczas ładowania strony, tj. podczas gdy zawartość jest nadal widoczna na ekranie. Poniżej znajduje się przykład prostego skryptu ( wyświetlenie komunikatu w oknie).

     —
     —
     —
     —
     —
     —
     —
     —

     To jest prosta strona, ale zawiera jednowierszowy skrypt. Metoda alert wyświetla komunikat przed załadowaniem. I zawiesi się, dopóki użytkownik nie kliknie przycisku OK, pobieranie będzie kontynuowane.
     Może się zdarzyć, że np. strona zostanie wyświetlona w przeglądarce, która nie obsługuje skryptów, w tym celu przewidziany jest element NOSCRIPT. Współcześni widzowie ignorują jego treść. Element ten można wykorzystać na kilka sposobów. Na początek możesz wyświetlić w nim taką reklamę: Twoja przeglądarka nie może wykonać skryptu wymaganego do wyświetlenia tej strony internetowej!» Po drugie, wewnątrz elementu można opracować uproszczoną wersję strony, bez skryptów. Po trzecie, możesz utworzyć łącze do innego dokumentu HTML. Element NOSCRIPT musi mieć znacznik końcowy.

     Tutaj jesteśmy z tobą i zbadaliśmy podstawy takiego języka programowania WEB, jak HTML. Nawet po przeczytaniu tego krótkiego artykułu masz już pomysł, a nawet umiejętność programowania w tym języku. Powodzenia!