Lekcje komputerowe

Podstawy HTML dla początkujących w zrozumiałym języku. Co to jest HTML? Pojęcie tagu Co to oznacza w HTML?

Aby zrozumieć, czym jest HTML i dlaczego jest potrzebny, otwórzmy dowolną stronę w przeglądarce i spójrzmy na jej kod źródłowy.

Na przykład otworzę stronę wyszukiwarki Yandex.

Cała grafika i tekst, które widzisz na stronie, są generowane przy użyciu kodu HTML.

HTML– to jest powiązanie pomiędzy stroną internetową a dodatkowymi technologiami, które będą na niej zastosowane.

Zasadniczo wszystkie polecenia HTML widoczne na powyższym obrazku są zwykłym tekstem, który można zapisać w dowolnym edytorze tekstu. Zmieniając rozszerzenie pliku tekstowego na *.html (porozmawiamy o tym, jak to zrobić później), otrzymujemy pełnoprawną stronę internetową, którą może przetworzyć przeglądarka.

Spójrzmy teraz na samą definicję i zastanówmy się, co ona oznacza.

HTML to skrót oznaczający HyperText Markup Language lub przetłumaczony na język rosyjski jako „HyperText Markup Language”.

Aby zrozumieć, co to wszystko oznacza, przyjrzyjmy się każdemu słowu tego skrótu osobno.

Język.

HTML to przede wszystkim język za pomocą którego możesz przekazać przeglądarce informacje o tym, jakie elementy znajdują się na stronie internetowej i jakie niosą ze sobą znaczenie.

Jak każdy język, HTML zawiera słowa (polecenia) i zasady zapisywania tych słów (składnia języka).

Cechowanie.

Należy pamiętać, że głównym zadaniem HTML jest informowanie przeglądarki o znaczeniu elementów strony internetowej.

Kod HTML pozwala „podzielić” stronę internetową na poszczególne elementy i poinformować przeglądarkę, który element jest jaki.

Na przykład ten formularz nagrywania:

Informuje przeglądarkę, że ma do czynienia z akapitem.

A to formularz zapisu:

Nagłówek

Wskazuje, że element jest nagłówkiem.

Wynika z tego, że HTML nie jest odpowiedzialny za wygląd i projekt dokumentu.

Aby to zobaczyć, weźmy jako przykład jedną stronę internetową i wyłączmy na niej style odpowiedzialne za projekt i zobaczmy, jak się zmienia.

Strona ze stylami projektowania:

Ta sama strona, ale z wyłączonymi stylami (używany jest tylko jeden kod HTML):

Ponadto HTML nie jest językiem programowania i nie odpowiada za wykonywanie operacji logicznych i programistycznych na stronie oraz przetwarzanie danych. Możesz to łatwo sprawdzić, jeśli wyłączysz obsługę języka programowania klienta w przeglądarce.

Często początkujący zapominają o tej zasadzie i próbują użyć HTML, aby wymusić wyświetlenie elementu w taki czy inny sposób lub zmusić go do wykonania pewnych działań na stronie za pomocą HTML, ale nie jest to poprawne. Każda akcja na elemencie ma swoje własne technologie.

Hipertekst.

I wreszcie ostatnim słowem w definicji języka HTML jest hiperłącze. Strony internetowe mają pewien element, który czyni je wyjątkowymi i odróżnia je od zwykłego tekstu ze zdjęciami. Tym elementem są linki.

Przedrostek „hyper” oznacza, że ​​po kliknięciu łącza może otworzyć się inny zasób (strona) w Internecie, który może znajdować się na innym serwerze.

HTML to język opracowany specjalnie do tworzenia stron zawierających hiperłącza.

Podsumowując, możemy powiedzieć, że HTML to język, który został stworzony, aby pomóc przeglądarce zrozumieć, z jakich części składa się strona internetowa i jakie znaczenie niosą te elementy.

To na razie tyle z teorii. Przejdźmy do następnego praktycznego kroku. Teraz naszym zadaniem jest przygotowanie programów, które będziemy wykorzystywać do pracy z HTML.

Można to przetłumaczyć jako „hipertekstowy język znaczników”. Hipertekst to specjalny sposób poruszania się po stronach internetowych, realizowany w formie hiperłączy. Klikając na te linki, możesz łatwo poruszać się po strukturze serwisu. Przejścia w tym przypadku nie zachodzą liniowo, tj. zawsze masz możliwość przejścia do dowolnej strony serwisu, do której link jest aktualnie widoczny.

Znacznik odnosi się do pewnych reguł i właściwości przypisanych do elementów strony. Są one realizowane w formie tzw. tagów. Na przykład, aby wskazać, że określony tekst na stronie powinien być wyśrodkowany, możesz oznaczyć go znacznikiem środkowym. Możesz zobaczyć kod HTML konkretnej strony poprzez jej menu kontekstowe. Na przykład, aby uzyskać dostęp do tego kodu w przeglądarce Firefox, kliknij stronę prawym przyciskiem myszy i wybierz „Kod źródłowy strony”.

Jak działa kod HTML?

Kod HTML to zestaw krótkich tagów zawierających elementy strony. Cały ten kod jest przechowywany w pliku z rozszerzeniem .html lub .htm. Gdy otworzysz taki plik w przeglądarce, kod jest przez niego interpretowany, a gotowa strona wyświetlana jest w oknie programu. Znając język znaczników HTML, prawie każdy może stworzyć własną stronę.

Jakie są rodzaje tagów?

Tagi są oddzielnymi konstrukcjami w kodzie HTML. Jest to zwykły tekst ujęty w nawiasy ostre „”. Tagi można zobaczyć w kodzie HTML niemal każdej strony. Same tagi nie są wyświetlane na stronach, lecz wyświetlają konkretny element, który jest zakodowany za pomocą tagów. Na przykład, jeśli na stronie znajduje się obraz, to jego kod HTML zawiera znacznik img.

Ograniczenia HTML

Pomimo tego, że kod HTML pozwala na zbudowanie strony hipertekstowej o dość wysokiej jakości, ma on swoje ograniczenia. Strony zawierające wyłącznie taki kod są statyczne, tj. brakuje im dynamiki, efektów specjalnych i innych funkcji. Można je jednak wprowadzić za pomocą innych języków, takich jak Java Script. Zdecydowana większość współczesnych stron internetowych tworzona jest przy użyciu dodatkowych języków, które czynią je bardziej żywymi i interaktywnymi.

Witajcie drodzy początkujący webmasterzy. Zacznijmy uczyć się języków programowania.

I zaczniemy je studiować od HTML.

Od razu powiem, że pod koniec kursu będziesz potrafił samodzielnie napisać stronę internetową w czystym HTML i opublikować ją w Internecie. Ale nadal polecam poświęcić trochę czasu, a po html zapoznać się z css.

Wtedy sprawisz, że strona będzie fajniejsza i będziesz mógł skorygować wygląd strony stworzonej na gotowym CMS-ie (systemie zarządzania treścią).

Nauka języka programowania i nauka języka obcego to nie to samo, a jest o wiele łatwiejsza. Co więcej, nie jest to przerażające, ale bardzo ekscytujące.

Po prostu to, co niezrozumiałe, zawsze cię przeraża, ale obiecuję, że już po pierwszych lekcjach wszelkie obawy miną.

Nauczymy się obsługi edytora, który należy zainstalować na swoim komputerze.

W tym edytorze plików możesz napisać kod i od razu zobaczyć, jak wyświetli go przeglądarka. Bardzo wygodnie.

Chodź, najpierw opowiem Ci trochę o tym, czym jest HTML, i to będzie nudna część naszego kursu, a potem przejdziemy do najciekawszej praktyki. Na pewno nie będzie tam nudno.

HTML (HyperText Markup Language) dosłownie oznacza hipertekstowy język znaczników. Służy do tworzenia stron internetowych.

I jeśli w naszym rozumieniu zbiór prostych stron połączonych jednym tematem jest książką, albo nawet, lepiej powiedziane, grubym magazynem, to zbiór stron internetowych połączonych jedną nazwą domeny jest stroną internetową.

Każda strona internetowa ma swój własny, unikalny tekst, napisany przez Ciebie i zamknięty w kodzie HTML.

Kod to instrukcja dla przeglądarki, jak wyświetlić konkretny element. Załóżmy, że napisałeś słowo, ale w jakiej formie pojawi się ono na ekranie, zależy od tego, w jakim kodzie je umieścisz.

Kod HTML składa się z następujących elementów:

2. Atrybuty tagów.

3. Wartości atrybutów.

Przyjrzyjmy się im w kolejności.

Znacznik HTML jest głównym elementem kodu. Jest napisane tak:

Jak widać składa się z dwóch części. Pierwsze nawiasy ostre stanowią część otwierającą, natomiast drugie, z ukośnikiem, stanowią część zamykającą.

Pomiędzy tymi dwiema częściami zapisana jest pozostała część kodu strony, która będzie wyświetlana na ekranie.

Etykietka informuje przeglądarkę, że jest to dokument HTML i jest głównym (nadrzędnym) znacznikiem dla wszystkich pozostałych elementów.

W pozostałych tagach, elementach kodu, w nawiasie ostrokątnym wpisana jest litera lub słowo, które będzie nazwą tagu i określało, jaki element będzie wyświetlany na ekranie przez ten tag.

Na przykład, jeśli umieścisz literę h1 w nawiasach ostrych, tekst zostanie wyświetlony na ekranie jako nagłówek.

Cześć

Oznacza to, że czcionka słowa „Hello” będzie większa i odważniejsza niż reszta tekstu.

Jeśli umieścisz literę p w nawiasie ostrym, tekst zawarty w tagu zostanie wyświetlony jako akapit.

Cześć

Oznacza to, że czcionka będzie normalna, ale wszystko napisane po tym znaczniku zacznie się od nowej linii.

Takich liter, a nawet słów określających rodzaj polecenia w HTML jest kilkadziesiąt, chociaż często używa się nie więcej niż 10-15 znaczników.

Po drodze przyjrzymy się każdemu z nich bardziej szczegółowo.

Poniżej znajdują się atrybuty tagów. Często używane, również nie więcej niż kilkanaście. A ostatnio jeszcze mniej, gdyż wszystkie funkcje atrybutów zostały przeniesione do css.

Ale o tym później, ale na razie nadal dowiemy się, czym jest atrybut, ponieważ niektóre z nich nie straciły na znaczeniu i nigdy nie stracą.

Atrybut to dodatkowe polecenie. Jest to napisane w początkowej części tagu. Na przykład, jeśli chcesz, aby tytuł był kolorowy, musisz wstawić atrybut koloru w początkowej części znacznika h1

Przejdźmy od razu do wartości atrybutów. Chodzi o to, że atrybut musi mieć wartość. Oznacza to, że jeśli wydałeś polecenie pokolorowania tytułu, musisz wskazać, jaki będzie to kolor.

To wskazanie będzie wartością atrybutu. To wygląda tak:

To jest czerwone.

W ten sam sposób, ale używając innych atrybutów, możesz ustawić rozmiar tekstu, wcięcia, wyrównania i wiele więcej.

Chociaż projektowanie coraz częściej przenosi się do CSS, a atrybuty projektu stopniowo stają się przestarzałe i niepraktyczne.

A teraz wyciągamy wnioski z powyższego:

HTML to język zrozumiały dla przeglądarek. Potrzebujemy go, żeby porozumieć się z przeglądarką, czy też, można powiedzieć, sterować nią, czyli wydawać polecenia, jak ma odbierać i wyświetlać na ekranie to, co piszemy.

Dodam, że tagi, atrybuty i ich znaczenie są łatwe do zapamiętania podczas ćwiczeń praktycznych i tak będzie w zasadzie we wszystkich kolejnych artykułach.

Tam od razu widzisz znacznik, dowiadujesz się o jego znaczeniu, w jakim przypadku i w jakim miejscu jest używany, jakie znaki mu towarzyszą i jak jest zapisany, więc nie będę teraz pokazywać wszystkich znaczników i atrybutów, zobaczymy wszystko w praktyce.

Jeśli ktoś jest zainteresowany, zawsze może rzucić okiem na pełną listę tagów i atrybutów HTML. .

Choć jeśli nie zamierzasz programować zawodowo, wystarczy znać kilka (kilkanaście) podstawowych tagów i kilka atrybutów.

Cóż, to chyba wszystko. Kilka? I na razie nie potrzeba więcej. Reszty dowiemy się w trakcie nauki na konkretnych przykładach.

Myślę, że będzie to lepiej zrozumiane na przykładach. Naszym celem jest stworzenie strony internetowej i zrozumienie, jak to wszystko działa, więc śmiało i ćwicz.

Zakręt

Jak tylko usiądziesz do nauki, jakiś drań cię obudzi!!!

W szkole nauczyciel mówi uczniom:
- Który z Was w końcu uważa się za głupca? Wstań.
Po długiej przerwie jeden z uczniów wstaje:
- Więc myślisz, że jesteś głupi?
- No cóż, nie do końca, ale jakoś dziwnie jest, że stoisz sam.

Co to jest HTML i do czego służy? - 3,7 na 5 na podstawie 3 głosów

Przed rozpoczęciem nauki proponuję zastanowić się, czym jest HTML i do czego jest przeznaczony.

HTML oznacza Hyper Text Markup Language, który można przetłumaczyć jako hipertekstowy język znaczników. Strony internetowe tworzone są w tym języku.

HTML nie jest językiem programowania. Przeznaczony jest do oznaczania dokumentów tekstowych. Oznacza to, że w zasadzie używamy go do formatowania tekstu.

Jak więc możemy edytować tekst za pomocą HTML? Faktem jest, że język HTML składa się ze znaczników. Każdy tag określa, jak będzie wyglądał tekst na Twojej stronie.

Inaczej mówiąc, każdy tag przekazuje Twojej przeglądarce (programowi, za pomocą którego przeglądasz strony internetowe) określone polecenie, przeglądarka rozumie to polecenie i wyświetla na Twoim ekranie gotowy, sformatowany w określony sposób tekst.

Dlatego nie widzisz samego kodu, przeglądarka wyświetla na ekranie monitora gotowy, sformatowany tekst i grafikę. Jeśli chcesz zobaczyć sam kod HTML oraz znaczniki, za pomocą których sformatowany jest aktualnie czytany tekst, przejdź do pozycji menu > wyświetl w przeglądarce Internet Explorer i z rozwijanej listy wybierz > źródło. Zobacz zdjęcie.

W rezultacie otworzy się okno zawierające kod. Podobny do tego, który widać na drugim zdjęciu. Możesz przewijać i przeglądać ten kod, składa się on głównie z tagów, które w większości przypadków zawierają tekst. Zatem bez wchodzenia w szczegóły można powiedzieć, że każdy tag określa gdzie, jak, jaką czcionką i kolorem będzie wyglądał Twój tekst.

Ale tak naprawdę tagi HTML potrafią więcej niż tylko formatowanie tekstu; za ich pomocą możesz wstawić obraz na stronę, tworzyć tabele, tworzyć łącza i wiele więcej.

Każdy tag spełnia swoje specyficzne funkcje, a aby nauczyć się tworzyć strony internetowe, musisz wiedzieć, do czego przeznaczony jest ten lub inny tag. Myślę, że teraz już trochę rozumiesz, czym jest HTML.

Najpierw przyjrzyjmy się, czym jest tag. Mówiąc najprościej, tagi składają się ze zwykłych angielskich znaków lub słów, tylko te litery i słowa są zaprojektowane w określony sposób.

Każdy znacznik składa się z nawiasów ostrych,< >wewnątrz których umieszczone są określone symbole. Większość z nich polega na otwieraniu i zamykaniu.

Na przykład tag - otwarcie i- zamknięcie. Jak widać różnią się obecnością ukośnika / w symbolu zamykającym. Jeśli umieścisz pomiędzy nimi jakieś słowo, np. Cześć wówczas zostanie ono pogrubione. Wszystko, co ujęte jest w nawiasach ostrych w tym przypadku, nie jest wyświetlane na ekranie, lecz jest swego rodzaju poleceniem dla przeglądarki, aby słowo zawarte pomiędzy tymi znacznikami zostało pogrubione.

Tagów jest oczywiście wiele i każdy z nich spełnia swoje specyficzne funkcje. Wszystkie pozostałe tagi i cały kod HTML działają mniej więcej na tej samej zasadzie. Kiedy żądasz dowolnego dokumentu z Internetu, Twoja przeglądarka pobiera kod HTML, odpowiednio go interpretuje i wyświetla na ekranie gotowy sformatowany tekst, grafikę, tabele itp.

Celem tej lekcji było dać ci wyobrażenie o tym, czym jest HTML; w następnych lekcjach zaczniemy uczyć się tego języka znaczników. Aby ułatwić Ci przyswojenie materiału, polecam zacząć naukę od najprostszych, płynnie przechodząc do bardziej skomplikowanych, np. w następującej kolejności: na początku przestudiuj, w jaki sposób dokument służy do ustawiania i produkować, uczyć się ustawiać itp. na bardziej złożone.

Do tworzenia stron HTML można używać specjalnych programów, np. lub tworzyć strony za pomocą prostego edytora tekstu, który jest dostępny w dowolnej wersji systemu Windows.

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 jest zdobycie doświadczenia i praktyki, im więcej masz praktyki, tym lepszym jesteś programistą internetowym.