HTML jest istotną częścią sieci, jaką znamy. I choć niewielu projektantów stron internetowych tworzy strony, ręcznie wpisując HTML, nadal warto się trochę o nim dowiedzieć.

Przyjrzymy się niektórym podstawom języka, w tym tym, czym tak naprawdę jest HTML, niektórym podstawowym pojęciom i sposobom interakcji z innymi językami. Pomyśl o tym jak o “HTML dla manekinów” kurs zderzeniowy.

Podstawy HTML: Co to jest HTML?

HTML oznacza Hipertekstowy język znaczników. I chociaż czasami jest wypełniony językami programowania, nie jest to dokładne.

Jak język znaczników, HTML pozwala tylko utworzyć układ wyświetlania stron. Prawda język programowania, jak Java lub C ++, zawiera logikę i wykonywane polecenia.

Chociaż jest to proste, HTML jest podstawą każdej strony w sieci. Jest odpowiedzialny za to, co tekst wyświetla się jako pogrubiony, dodając obrazy i łącza do innych stron. Mamy HTML FAQ Essential HTML FAQ Powinieneś dodać zakładkę Essential HTML FAQ powinieneś dodać zakładkę HTML istnieje już od jakiegoś czasu, więc nadszedł czas, abyś nauczył się podstaw. Oto, co to jest, jak to działa i jak dziś możesz napisać niektóre typowe elementy w HTML! to wyjaśnia więcej.

Możesz kliknąć prawym przyciskiem myszy większość stron internetowych w przeglądarce i wybrać Zobacz stronę źródłową lub podobny, aby zobaczyć HTML za nimi. Prawdopodobnie będzie również zawierać dużo kodu, który nie jest HTMLem, ale możesz go przesiać.

Nawet jeśli nie masz doświadczenia w korzystaniu z języków znaczników lub programowania, poznanie kodu HTML sprawi, że będziesz lepiej poinformowanym użytkownikiem sieci. Przejdźmy przez pięć podstawowych kroków, które pomogą Ci zrozumieć, jak działa HTML. Po drodze podamy przykłady.

Krok 1: Zrozumienie pojęcia tagów

HTML używa systemu tagi kategoryzować różne elementy dokumentu.

Większość tagów występuje w parach, aby zawinąć w nich tekst, którego dotyczy problem. Oto prosty przykład ( tag tworzy tekst pogrubienie; omówimy to za chwilę.)

To jest pogrubiony tekst.

Zauważ, jak tag zamykający zaczyna się od ukośnika (/). Oznacza to znacznik zamykający, co jest ważne. Jeśli nie zamkniesz tagu, wszystko od początku będzie miało ten atrybut.

Jednak nie wszystkie tagi mają parę. Niektóre elementy HTML, zwane puste elementy, nie mają treści i istnieją samodzielnie. Przykładem jest
tag, który jest łamaniem linii. Możesz “blisko” takie tagi poprzez dodanie ukośnika (np
), ale nie jest to absolutnie konieczne.

Krok 2: Szkieletowy układ HTML

Właściwy dokument HTML musi mieć określone tagi, aby był poprawnie ułożony. Są to podstawowe części:

• Każdy dokument HTML musi zaczynać się od deklarować się jako taki. Zatem jego tag zamykający, , jest ostatnim elementem w pliku HTML.
• Następnie, sekcja zawiera informacje takie jak tytuł strony, różne skrypty uruchamiane na stronie i podobne. Jak sama nazwa wskazuje, zazwyczaj następuje to zaraz po inicjałach etykietka. Użytkownik końcowy nie widzi dużo treści w tych tagach.
• Wreszcie Tag przechowuje tekst strony, którą widzi czytelnik (i wiele więcej). Tutaj znajdziesz zdjęcia, linki i więcej.

Od czasu sekcja stanowi większość dokumentu HTML, reszta naszego przewodnika dotyczy elementów, które go dotyczą.

Krok 3: Podstawowe tagi HTML do formatowania

Następnie spójrzmy na niektóre popularne tagi, które tworzą dokumenty HTML. Oczywiście nie jest możliwe objęcie każdego elementu, dlatego przejrzymy niektóre z najważniejszych. Omówiliśmy wiele innych przykładów HTML 17 prostych przykładów kodu HTML, których możesz nauczyć się w 10 minut 17 prostych przykładów kodu HTML, których możesz nauczyć się w 10 minut Chcesz stworzyć podstawową stronę internetową? Naucz się tych przykładów HTML i wypróbuj je w edytorze tekstu, aby zobaczyć, jak wyglądają w przeglądarce. jeśli ci to nie zadowoli.

Jeśli te tagi wydają się dość proste, pamiętaj, że HTML powstał już w 1993 roku. W tamtym okresie sieć była w dużej mierze oparta na tekście.

Proste formatowanie tekstu

HTML obsługuje podstawowe style tekstu, takie jak w Microsoft Word:

• tagi tworzą tekst pogrubienie.
• tagi (co oznacza “nacisk”) będzie wykursywiać tekst.

HTML obsługuje również starsze znacznik dla pogrubienia i dla kursywy. Jednak lepiej jest użyć powyższych.

W skrócie, i pokaż, jak coś należy rozumieć, a te ostatnie tagi mówią tylko, jak to powinno wyglądać. Te poprzednie tagi są bardziej dostępne dla czytników ekranu używanych przez osoby niedowidzące.

Akapit i inne działy

HTML Tag pozwala zdefiniować sekcję dokumentu. Zwykle jest to łączone z CSS (patrz poniżej), aby sformatować sekcję w określony sposób.

The

Możesz dodać nagłówki do dokumentu i ułatwić śledzenie przy użyciu

przez

tagi. H1 jest najważniejszym nagłówkiem, a H6 jest najmniej ważnym. Niemal każdy artykuł MakeUseOf używa nagłówków H2 i H3 do organizowania informacji.

Uderzenie Wchodzić dodanie podziałów wierszy w dokumencie HTML nie spowoduje ich wyświetlenia. Zamiast tego możesz użyć
aby dodać podział linii.

Oto przykład, który wykorzystuje wszystkie z nich:

 
Przykładowy nagłówek
 
To jest jeden akapit.
 
To jest sekunda
akapit podzielony na dwie linie.
  

Krok 4: Wstawianie obrazów

Obrazy są istotną częścią większości stron internetowych. Możesz je łatwo dodawać za pomocą HTML, a nawet ustawiać dla nich różne właściwości.

Wstawiasz obraz za pomocą

Ale teraz mamy o wiele więcej. CSS (Cascading Style Sheets) to język używany do opisywania wyglądu tekstu przygotowanego w HTML. Zapamiętaj tag, o którym rozmawialiśmy? Wewnątrz tego (i innych tagów) możesz zdefiniować klasa atrybut. Następnie w towarzyszącym dokumencie CSS możesz napisać instrukcje, jak to zrobić klasa powinno wyglądać.

Możesz zdefiniować te elementy stylu bezpośrednio w kodzie HTML, ale jest to uważane za złą praktykę, ponieważ jest o wiele trudniejsze do utrzymania. Dowiedz się więcej dzięki tym prostym przykładom CSS 10 prostych przykładów kodu CSS, których możesz nauczyć się w 10 minut 10 prostych przykładów kodu CSS, których możesz nauczyć się w 10 minut Omówimy sposób tworzenia wbudowanego arkusza stylów, abyś mógł ćwiczyć umiejętności CSS. Następnie przejdziemy do 10 podstawowych przykładów CSS. Stamtąd twoja wyobraźnia jest granicą! .

JavaScript

Widzieliśmy, że HTML określa treść, a CSS określa wygląd. JavaScript, ostatni członek trio kluczowego dla sieci, pozwala stronom internetowym reagować na działania ludzi bez konieczności ładowania nowej strony za każdym razem.

Na przykład JavaScript pozwala witrynie ostrzec Cię, że wprowadzone hasło nie spełnia jego wymagań przed próbą jego przesłania. Projektant stron internetowych może używać JavaScript do przełączania obrazów w pokazie slajdów lub monitowania użytkownika o wprowadzenie danych.

To tylko kilka podstawowych przykładów. JavaScript jest językiem skryptowym, który potrafi wiele zrobić i jest stosunkowo bardziej skomplikowany niż HTML i CSS. Zobacz nasze omówienie JavaScript Czym jest JavaScript i jak działa? Co to jest JavaScript i jak działa? Co to jest Javascript? Jest to język programowania używany do ulepszania stron internetowych. Obejmuje dynamicznie aktualizowane strony internetowe, interfejsy użytkownika i wiele innych. Zobaczmy, o co chodzi w Javascript. o wiele więcej.

Omówienie pełnego zakresu projektowania stron internetowych wykracza poza zakres tego artykułu, ale wystarczy powiedzieć, że HTML współdziała z innymi językami, aby tworzyć strony, które znamy dzisiaj.

Ewolucja HTML

Należy zauważyć, że HTML nie jest statyczny. HTML przeszedł szereg zmian, z których najnowszą jest HTML 5. W szczególności ten standard obsługuje osadzanie natywnych filmów wideo zamiast polegać na zastrzeżonych formatach, takich jak Adobe Flash.

Nowe iteracje HTML również deklarują, że niektóre archaiczne tagi są przestarzałe. Obejmują one takie okropne tagi jak i (odpowiednio ten przewijany i flashowany tekst) często spotykane w projektowaniu stron internetowych z lat 90. Pamiętaj więc, że standardy zmieniają się z czasem.

Mała znajomość HTML przechodzi długą drogę

Zapoznaliśmy się z krótką prezentacją dotyczącą działania dokumentu HTML. Teraz znasz podstawy struktury stron internetowych. Nawet jeśli nie budujesz stron internetowych, jesteś bardziej świadomy sieci, z której korzystasz na co dzień.

Aby dowiedzieć się więcej, podnieś swoje umiejętności tworzenia stron internetowych za pomocą niezbędnych narzędzi. Uaktualnij swoje umiejętności tworzenia stron internetowych za pomocą tych 10 podstawowych narzędzi. Te narzędzia online dla nowych i doświadczonych twórców stron internetowych z pewnością poprawią Twoje umiejętności! a następnie zapoznaj się z naszym przewodnikiem, jak zaprojektować pierwszą stronę internetową Jak zrobić stronę internetową: dla początkujących Jak zrobić stronę internetową: dla początkujących Dzisiaj poprowadzę cię przez proces tworzenia kompletnej strony internetowej od zera. Nie martw się, jeśli będzie to trudne. Poprowadzę cię przez to na każdym kroku. .

Źródło obrazu: Belyaevskiy / Depositphotos