Nauka HTML dla początkujących. Podstawy języka programowania WEB HTML

W tym cyklu chcę rozpocząć serię lekcji na temat HTML. Podjąłem tę decyzję, ponieważ chciałbym spróbować nauczyć od podstaw, jak tworzyć strony internetowe dla użytkowników. Ta myśl była w mojej głowie od dłuższego czasu. Pojawiło się tylko pytanie od czego zacząć, od HTML czy bezpośrednio przystąpić do instalacji silnika i jego dalszej konfiguracji.

Ale jeśli zaczniesz od nauki silnika, niektórzy użytkownicy, którzy nie znają HTML, zostaną pominięci. Dlatego postanowiłem zacząć od podstaw i sprawić, by nawet każdy początkujący mógł dowiedzieć się, co i jak.

Czym więc jest HTML?

Sam skrót oznacza H ureg T wew M Arkipi L przejęzyczenie ( hipertekstowy język znaczników).

Mówiąc prościej, HTML- Ten język specjalny znacznik, który mówi przeglądarce, jak wyświetlić określone Strona internetowa. Czyli w jakiej czcionce wyświetlać tekst, w jakiej kolejności komponować elementy, jakie elementy wyświetlać jako podkreślone itp. I w zależności od tego z jakim elementem napotka przeglądarka, zgodnie z zasadami określonymi w samej przeglądarce , ten element zostanie wyświetlony. Jednak te zasady można potem zmienić, ale o tym już będę mówić w moich następnych lekcjach, które będą poświęcone css.

Zacznę od spojrzenia na przykład prosta strona internetowa, Które może być. Teraz nie powinieneś skupiać uwagi na tym, co te lub tamte tagi. Wszystko ma swój czas, na początek po prostu zwróć uwagę na to, gdzie wszystko jest w kodzie i jak to wszystko ma się do tego, co wyświetla się w przeglądarce. Rozważ przykładowy dokument HTML:

Tytuł strony

Jeden dzień mojego życia

Przygotowanie koncertu

Obudziłem się dzisiaj wcześnie, bo czekał mnie ciężki dzień. W końcu dzisiaj muszę wystąpić na koncercie przed setką widzów. Aby mieć pewność, że wszystko pójdzie dobrze, muszę powtórzyć program prób.

Próba

Wszystko poszło gładko. Z naszego zespołu nikt nie stracił rytmu i jak się okazało wszyscy na próżno się martwili.

Koncert

Wszyscy grali świetnie, chociaż myślę, że był moment, kiedy nasz perkusista stracił tempo. Ale zręcznie wyszliśmy z sytuacji.

Aby rozpocząć, musisz wpisać ten tekst w niektórych Edytor tekstu(Myślę, że najwygodniejsze jest notatnik++) i zapisz plik jako index .html gdzieś na dysku. Dwukrotne kliknięcie zapisanego pliku otworzy stronę podobną do tej.

Należy pamiętać, że same tagi nie są wyświetlane, ale wyświetlana jest sama treść, która znajduje się między nimi. I stąd możesz wywnioskować, że tagi działają jak element projektu w HTML.

Patrzeć na źródło. Jak mogłeś zauważyć, przed słowem „Jeden” jest małe wcięcie. Przeglądarka nie wzięła go jednak pod uwagę, po prostu połknęła go po cichu, jakby nigdy nie istniał. Co więcej, jeśli spróbujesz umieścić dużo spacji między słowami, to wszystkie będą odbierane przez przeglądarkę jako jedna spacja - HTML ma taką funkcję.

A oto kolejna wskazówka - pisząc kod HTML, przyzwyczaj się do wcinania tych tagów, które są zagnieżdżone w innych. Na przykład tagi title i body są zagnieżdżone w tagu html. Tak więc, kiedy piszesz te tagi, nie zapomnij o odpowiednim wcięciu. Zwykle robi się je za pomocą dwóch spacji lub zakładek - to już kwestia gustu. Dlaczego jest to potrzebne? Teraz, w tym małym fragmencie dokumentu, który przytoczyłem jako przykład powyżej, nie ma zbyt wielu informacji, więc dość problematyczne jest pomylenie się w tym miejscu. Jeśli jednak na stronie znajduje się wiele zagnieżdżonych elementów, nie będzie łatwiej niż zgubić się w tym ogromnym kodzie i prawie nie zorientować się, w której części dokumentu aktualnie się znajdujesz. Lepiej więc od razu przyzwyczaić się do dobrego stylu, wtedy sam go zrozumiesz i będzie to dla ciebie dobrą przysługą w przyszłości.

Warto również określić najbardziej potrzebne minimum znaczników, które powinny znajdować się w dokumencie HTML. Mówię o tej części:

Ale nawet jeśli tej części nie ma, większość przeglądarek spojrzy na to wszystko palcami i nadal wyświetli twoją stronę. Jednak taki frywolny styl pisania kodu, w którym człowiek przeskakuje duża liczba Tagi to zły styl pisania, więc dobrym pomysłem jest umieszczenie wszystkich tych elementów na swojej stronie. W przeciwnym razie może to prowadzić do problemów z kompatybilnością z innymi przeglądarkami, co w rezultacie może mieć wpływ wygląd zewnętrzny Twoja witryna, aw rezultacie - frekwencja.

Dodatkowo możesz pisać komentarze w dokumencie HTML - są to informacje czysto usługowe, które są przeznaczone wyłącznie dla Ciebie. Zwykle są to ważne uwagi, które służą jako przypomnienie lub po prostu coś, na co powinieneś zwrócić uwagę. Komentarze nie są przetwarzane przez przeglądarkę, co oznacza, że ​​użytkownik ich nie zobaczy. Zazwyczaj pisze się je tak:

A teraz spróbujmy dowiedzieć się, który tag z naszego przykładu jest za co odpowiedzialny.

Etykietka html oznacza, że ​​zaczyna się wyjście kodu html.

głowa– sekcja informacji serwisowych. Między innymi tutaj jest tytuł, który odpowiada za tekst w pasku tytułowym okna przeglądarki. Sekcja ta może być również traktowana jako informacja, którą chcemy przekazać przeglądarce o tej stronie.

ciało- zaczyna się główna część dokumentu.

h1- tytuł.

h2- podtytuł.

p- ust.

To chyba wszystko! Jeśli to był Twój pierwszy dokument HTML, to gratulacje! Tak, nie wygląda tak wspaniale, jak byśmy tego chcieli. Niemniej jednak mamy materiał, nad którym możemy już pracować. A na następnych lekcjach wszystko będzie jeszcze ciekawsze i powoli będziemy dotykać pracy z Kaskadowe arkusze stylów (CSS).

  • < Назад

Aby komentować, musisz się zarejestrować.

HTML to hipertekstowy język znaczników, dzięki któremu sieć stała się taka, jaką znamy i kochamy. To 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ą bezimienną masę listów w dokument z paragrafami, Miniaturka, kursywa, tabele, a nawet obrazy. Mniej więcej to samo robi język 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ą znaczniki - specjalne polecenia opisujące strukturę strony internetowej. Są ujęte w nawiasy kątowe -<тег>aby przeglądarka mogła je odróżnić od większości tekstu. Następnie omówimy podstawy HTML dla początkujących.

Edytory wizualne

Osoby początkujące, które dopiero wkroczyły na ścieżkę nauki języka HTML, często rozpoczynają pracę od programów, które pozwalają tworzyć witryny bez wiedzy. W nich możesz po prostu rozmieścić 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 web developerów. Ale nie wszystko jest takie proste, ponieważ edytory wizualne mają wiele niedociągnięć, które uniemożliwiają wykorzystanie ich 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 wiele powodów, dla których zwięzła i dobrze napisana strona okazuje się być bardziej praktyczna niż jej odpowiednik stworzony w edytorze wizualnym. Strona internetowa zrobiona w takim programie będzie słabo przetwarzana przez roboty wyszukiwarek, ponieważ każdy kilobajt kodu jest dla nich ważny, a niewygodny i nielogiczny kod z wiązką raczej nie przypadnie im do gustu. Ponadto redaktorzy często pozostają w tyle, stając się nieistotnymi i nie warto wydawać środków na ich rozwój, ponieważ żaden 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ą przeglądarce strukturę strony internetowej. 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. W środku mogą znajdować się inne elementy znaczników strony, które mogą być zagnieżdżone wewnątrz siebie jak zagnieżdżona lalka. 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ść znajduje się w środku, tak jak można ją napisać dla większości znaczników HTML i ustawia właściwości elementu. Jest to wskazane w tagu otwierającym i wygląda mniej więcej tak: atrybut = "...", gdzie zamiast kropek znajduje się wartość atrybutu. Znajomość tagów to pierwszy i najważniejszy krok w opanowaniu HTML. Podstawy tej sztuki obejmują również zrozumienie struktury strony internetowej.

Struktura dokumentu

Każdy dokument HTML ma odpowiednie rozszerzenie, takie jak Index.html. Aby przeglądarka mogła zrozumieć, z czym ma do czynienia i poprawnie wyświetlić stronę. Wskazane jest przechowywanie wszystkich plików użytych do stworzenia strony w jednym katalogu, co znacznie ułatwi Ci życie w przyszłości. Podstawy języka znaczników hipertekstowych HTML wymagają jasnego zrozumienia struktury dokumentu. Zaczyna się od tagu, który informuje przeglądarkę o wersji kodu HTML używanej w tym dokumencie. Na ten moment piąta wersja języka jest istotna, więc nie trzeba tu niczego wymyślać, możesz bezpiecznie wstawić powyższy tag na początku dowolnej strony.

Następnie pojawiają się główne sparowane struktury, które tworzą „szkielet” witryny. Pierwszy tag, w którym wszystkie inne są zagnieżdżone − .... Wszystko poza nim nie jest rozpoznawane przez przeglądarkę jako strona internetowa, więc otwiera i zamyka dokument. Ten tag 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 stanowią ważną część dokumentu HTML. W tym miejscu kładzione są fundamenty serwisu, 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łą ikonę 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 zwykle znajdują się wewnątrz nagłówka.

Połączyć

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

Ciało

To w tej części dokumentu HTML tworzona jest widoczna część strony. Wszystko, co zostanie zrobione wewnątrz „ciała”, 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 tworzenia struktury strony internetowej. Aby rozpocząć pracę w HTML, wystarczy znać podstawowe tagi i umieć z nich korzystać. Poniżej najpopularniejsze z nich: