Samouczek HTML (dla początkujących)

Samouczek HTML dla początkującychCzy chcesz nauczyć się trochę HTML??


Brzmi jak świetny pomysł. Stąd powód, dla którego przygotowaliśmy ten samouczek HTML dla początkujących.

Obecnie na świecie jest co najmniej 1,7 miliarda stron internetowych. Praktycznie wszystkie te strony wykorzystują HTML w taki czy inny sposób.

P.S: Jeśli nie chcesz uczyć się HTML i od razu zacząć budować swoją stronę, bez konieczności kodowania, zapoznaj się z tym przewodnikiem: Jak zrobić stronę internetową ZA DARMO (bez nauki HTML).

Wprowadzenie do HTML


Co to jest HTML?

Co to jest HTMLHTML, akronim od HyperText Markup Language, to język komputerowy do tworzenia stron internetowych i aplikacji internetowych. Składający się głównie z serii kodów zwykle zapisywanych w pliku tekstowym i zapisywanych jako HTML, kod napisany w języku HTML przekłada się na piękny, dobrze sformatowany tekst lub kombinację tekstu i multimediów podczas przeglądania przez przeglądarkę.

HTML został po raz pierwszy opracowany przez brytyjskiego fizyka Tima Bernersa-Lee w 1990 roku i przeszedł tak wiele ewolucji od tego czasu, że najnowsza wersja może osiągnąć znacznie więcej, niż można było sobie wyobrazić, kiedy język został wymyślony po raz pierwszy.

W tym samouczku omówimy podstawy języka HTML i wszystko, co musisz wiedzieć, aby zacząć korzystać z HTML jako początkujący.

Wersje HTML

Po pierwsze, krótki przegląd wszystkich wersji HTML od czasu wynalezienia HTML.

  • HTML 1.0: To była wersja HTML od podstaw i pierwsza wersja tego języka.
  • HTML 2.0: Ta wersja została wprowadzona w 1995 roku. Stopniowo ewoluowała, umożliwiając dodatkowe możliwości, w tym przesyłanie plików w formie formularzy, tabele, mapy obrazów po stronie klienta i internacjonalizację.
  • HTML 3.2: W celu zapewnienia opracowania standardów dla World Wide Web, konsorcjum World Wide Web Consortium (W3C) zostało założone przez Tima Bernersa-Lee w 1994 roku. W 1997 roku opublikowali HTML 3.2.
  • HTML 4.0: Później w 1997 roku W3C wydało HTML 4.0 – wersję, która przyjęła wiele typów elementów i atrybutów specyficznych dla przeglądarki.
  • HTML 4.0 został ponownie wydany z niewielkimi zmianami w 1998 roku.
  • HTML 4.01: W grudniu 1999 r. Wydano HTML 4.01.
  • XHTML: Specyfikacje zostały wprowadzone w 2000 r. I zalecono stosowanie go jako wspólnego standardu z HTML 4.01. Wbudowano XML, aby zapewnić prawidłowe pisanie kodu i zapewnić interoperacyjność między językami programowania.
  • HTML5: W3C opublikowało HTML5 jako zalecenie w październiku 2014 r., A później wydało HTML 5.1 w listopadzie 2016 r.

Wybór edytora HTML

Wybierz edytor HTMLJeśli myślisz o tworzeniu stron internetowych w HTML, potrzebujesz edytora HTML. Korzystanie z edytora HTML ma kilka zalet.

Dobry edytor HTML utrzyma kod w czystości i porządku. Wykryje również po otwarciu nowego znacznika i automatycznie go zamknie, aby uniknąć błędów w kodzie, co w rezultacie zmniejszy ilość pisania. Większość edytorów HTML pozwala dziś wyświetlić podgląd strony internetowej, aby zobaczyć, jak będzie ona wyglądać w przeglądarce internetowej za pomocą funkcji WYSIWYG.

Istnieje wiele bezpłatnych i płatnych edytorów HTML, poniżej znajdują się niektóre z najlepszych opcji do wyboru:

Podstawowe elementy składowe HTML


Po wybraniu edytora HTML, którego chcesz użyć, następnym krokiem jest zrozumienie elementów składowych HTML. Podczas kodowania w HTML niezbędne jest zrozumienie tych elementów składowych. Zawierają tagi, atrybuty i elementy. Przyjrzymy się im poniżej:

Wprowadzenie do tagów

Po przejściu do HTML pierwszą rzeczą, którą musisz zrozumieć, są tagi. Zasadniczo tagi oddzielają zwykły tekst od kodu HTML.

W związku z tym, jeśli chodzi o HTML, tagi mają wpływ na to, czy dokument jest wyświetlany jako zwykły tekst, czy „tekst przekształcony”, który jest w zasadzie kodem tekstu, który wydaje się wyświetlać szereg rzeczy (hiperłącza, obrazy, multimedia lub inne metody formatowania) na podstawie tego, co ma wyświetlać na podstawie tagów.

Spójrzmy na słowo „On jest chłopcem” jako przykład:

  • W zwykłym formacie tekstowym otrzymujesz: On jest chłopcem.
  • Pogrubioną czcionką otrzymasz: On jest chłopcem

Aby osiągnąć to, co mamy w odważnym formacie, musisz użyć etykietka.

pogrubienie tekstu w html

W surowym HTML mamy On jest chłopcem które przeglądarka następnie tłumaczy na to: On jest chłopcem.

„On jest chłopcem” może również brzmieć kursywą.

Osiąga się to za pomocą etykietka.

tekst pisany kursywą w html

Mamy: On jest chłopcem który następnie wychodzi jako On jest chłopcem.

Hiperłącza uzyskuje się za pomocą etykietka.

przekształcanie tekstu w hiperłącze w HTML

W surowym HTML mamy: On jest chłopcem, który pokazuje, że jest chłopcem.

Jest kilka rzeczy, które powinieneś wiedzieć o tagach:

  • Tagi są praktycznie elementem składowym HTML – nie możesz robić HTML bez tagów! Jeśli utknąłeś na tym, którego znacznika użyć, sprawdź naszą tabelę okresową HTML.
  • Prawie każdy otwarty tag musi być zamknięty. Pamiętaj, że są wyjątki. Przykładem znacznika, który nie musi być zamknięty, jest pusty znacznik, taki jak podział wiersza:
    .
  • Tagi są zawarte w mniej niż („<”) and greater than (“>”) Wspornik kątowy. Znaczniki zamykające zawierają ukośnik, który staje się przed nazwą zamykanego znacznika. Przykład otwartego tagu: . Przykład zamkniętego znacznika .
  • Każdy plik HTML zaczyna się od znacznika otwierającego i kończy się tagiem zamykającym. Pierwszy wiersz pliku HTML powinien zadeklarować typ dokumentu, aby przeglądarka wiedziała, jakiego smaku HTML używasz. Właśnie dlatego strony HTML zaczynają się od „”Przed rozpoczęciem kodu HTML.

Przed dodaniem treści większość plików HTML wygląda następująco:

HTML--

Część następująca po Tag zwykle zawiera informacje o dokumencie, takie jak jego tytuł, metatagi i gdzie zlokalizować plik CSS – treść, która nie jest widoczna bezpośrednio na stronie przeglądarki. Sekcja między „ i”(Który reprezentowaliśmy przez„ GŁÓWNĄ TREŚĆ ”) to miejsce, w którym znajduje się główna zawartość pliku HTML, którą przeglądarka zobaczy w przeglądarce. Obejmuje to wszystko, od pierwszego akapitu przez hiperłącza po formatowanie do multimediów i wszystko inne.

Wprowadzenie do elementów

wprowadzenie do elementów

W HTML „element” składa się z otwierającego i zamykającego znacznika oraz zawartości między znacznikami.

W “On jest chłopcem”(Pogrubioną czcionką) przykład, mamy to w HTML: On jest chłopcem. Tekst „On jest chłopcem” otoczony jest otwartą i zamkniętą metką. Wszystko, w tym tag otwierający, treść i tag zamykający, jest elementem.

Kiedy tag jest otwarty, treść jest wprowadzana, a tag jest zamknięty, mamy element.

Element może być w formie podstawowej lub złożonej. Dlaczego? Ponieważ wszystko pomiędzy tagiem otwartym a tagiem zamykającym, a także te tagi, jest elementem. Oznacza to, że możemy mieć elementy w elemencie. W naszym obecnym przykładzie „on jest chłopcem” (On jest chłopcem) jest elementem.

Zauważysz, że powiedzieliśmy wcześniej, że dokumenty HTML zawierają tag przed rozpoczęciem treści. Treść może zawierać setki różnych elementów, ale wszystkie te elementy są częścią elementu „body” (ponieważ element body jest otwarty, zawiera treść, a następnie zostaje zamknięty).

Wprowadzenie do atrybutów

Podczas gdy dokumenty HTML w zasadzie używają znaczników do wszystkiego, czasami chcemy przekazać dodatkowe informacje wewnątrz elementu. W tym przypadku używamy atrybutu. Atrybut służy do zdefiniowania właściwości elementu, jest używany wewnątrz znacznika otwierającego elementu. Atrybuty składają się z nazwy i wartości.

Zauważ, że wartość atrybutu jest umieszczana wewnątrz znaku cudzysłowu przy użyciu formatu Twój tekst.

przykład atrybutu

Przykład:

On jest chłopcem

W tym przykładzie instruujemy, że „On jest chłopcem” jest wyrównany na środku dokumentu.

Rozpoczęcie pracy z HTML


Rozpoczęcie pracy z HTMLZakładając, że chcesz dzisiaj stworzyć własny podstawowy dokument HTML, jak zacząć? Od tworzenia tytułów stron po tworzenie formularzy, poprowadzimy Cię przez to, jak zacząć korzystać z HTML poniżej.

Tworzenie HTML Element

Podczas tworzenia dokumentu HTML jedną z pierwszych rzeczy, którą utworzysz, jest element. Zawiera metadane (lub dane o dokumencie HTML). Obejmuje to takie informacje, jak zestaw znaków, tytuł dokumentu, style dokumentu, skrypty itp.

Niektóre elementy w dołącz tytuł, który jest tworzony za pomocą etykietka.</p><p><strong>Przykład</strong>:</p><pre><title>To jest nasz tytuł strony

Ten tytuł zostanie wyświetlony na karcie przeglądarki. To również będzie indeksowane jako tytuł strony, gdy boty wyszukiwarek zaindeksują Twoją witrynę.

Obejmuje to również element, który jest często używany do określania informacji, których wyszukiwarki mogą używać do opisywania treści na swoich listach. Obejmuje to opis, słowa kluczowe, informacje o autorze itp element określa również zestaw znaków, z którego korzysta dokument HTML.

Tworzenie nagłówków w HTML

tworzenie nagłówków w html

Nagłówki odgrywają ważną rolę w sukcesie strony internetowej. Po pierwsze, ułatwiają czytelnikom skanowanie zawartości twoich stron. Po drugie, a może co ważniejsze, przekazują one strukturę twoich stron internetowych wyszukiwarkom, a zatem często wpływają na pozycję twojej treści w wynikach wyszukiwania.

To powiedziawszy, ważne jest, aby unikać używania tagów nagłówka, aby tekst był duży lub pogrubiony. Są do tego inne tagi (do których przejdziemy w dalszej części tej sekcji). Zamiast tego znaczniki nagłówka należy używać wyłącznie do struktury.

W HTML jest sześć tagów nagłówków:

do
, z

znacznik wskazujący najważniejszy nagłówek i
znacznik wskazujący najmniej ważny nagłówek.

Aby utworzyć nagłówki, po prostu zdecyduj, który nagłówek tworzysz, otwórz nagłówek zwykłym tagiem nagłówka i zawsze pamiętaj o zamknięciu tagów po zakończeniu.

Przykład nagłówków HTML:

  • To jest Twój pierwszy nagłówek HTML

    (największy)

  • To jest Twój drugi nagłówek HTML

  • To jest Twój trzeci nagłówek HTML

  • To jest Twój czwarty nagłówek HTML

  • To jest Twój piąty nagłówek HTML
  • To jest Twój szósty nagłówek HTML

Tworzenie akapitów

tworzenie akapitów w HTML

Następnym krokiem jest rozpoczęcie tworzenia akapitów. Akapity można tworzyć za pomocą

etykietka.

Przykład:

To jest twój pierwszy akapit.

To jest twój drugi akapit i będziesz tworzył o wiele więcej akapitów.

Pamiętaj, że pisanie w HTML różni się bardzo od pisania czystym tekstem. Dlatego jeśli podzielisz tekst wewnątrz HTML bez rozpoczynania nowego akapitu, tak naprawdę nie będzie miało znaczenia, kiedy tekst zostanie wyświetlony w przeglądarce. Zamiast tego chcesz użyć podziału linii, który jest reprezentowany przez
etykietka.

Przykład:

To jest nowy akapit. I chcę użyć wielu nowych linii. Rozbijam to.

Nie wyjdzie to następująco:

To jest nowy akapit.
I chcę użyć wielu nowych linii.
Rozbijam to.

Zamiast tego wyjdzie w ten sposób:

To jest nowy akapit. I chcę użyć wielu nowych linii. Rozbijam to.

Jak zatem podzielić tekst na nowe wiersze, aby wyglądało to tak:

To jest nowy akapit.
I chcę użyć wielu nowych linii.
Rozbijam to.

Używając podziałów linii.

Przykład:

To jest nowy akapit.
I chcę użyć wielu nowych linii.
Rozbijam to.

To powiedziawszy, należy zauważyć, że podział linii (
) jest pustym tagiem, więc nie musisz go zamykać.

Formatowanie tekstu w HTML

formatowanie tekstu w HTML

Następnym krokiem jest sformatowanie tekstu w HTML. W tym miejscu możesz wskazać, czy chcesz, aby Twój tekst był pogrubiony, pochylony, podkreślony, subskrybowany, indeks górny itp. Jest to podstawowy przewodnik, więc ta sekcja nie będzie kompletna pod względem formatowania. Zamiast tego uwzględnimy tylko niektóre podstawowe tagi formatowania. Proces korzystania z innych form formatowania jest prosty – wystarczy znaleźć odpowiedni tag i śmiało:

Używając pogrubienia: On jest chłopcem wychodzi jako On jest chłopcem

Używanie kursywy: On jest chłopcem wychodzi jako On jest chłopcem

Podkreślanie tekstu: On jest chłopcem wychodzi jako On jest chłopcem. Warto zauważyć, że Tag został wycofany w HTML 4.01 i został ponownie zdefiniowany, aby reprezentować stylistycznie inny tekst w HTML5. W związku z tym zaleca się użycie CSS do wskazania tekstu, który powinien zostać podkreślony. Ponieważ ten artykuł jest podstawowym przewodnikiem, staramy się, aby był on prosty.

Korzystanie z indeksu dolnego: On jest chłopcem wychodzi jako On jest chłopcem

Korzystanie z indeksu górnego: On jest chłopcem wychodzi jako On jest chłopcem

W przypadku innych tagów, których można użyć do formatowania, możesz zajrzeć do glosariusza na końcu tego zasobu, w którym zamieściliśmy wiele odpowiednich tagów HTML.

Listy uporządkowane i nieuporządkowane

Wcześniej czy później będziesz musiał utworzyć listy. Listy mogą być uporządkowane (tj. Numerowane) lub nieuporządkowane (tj. Nienumerowane).

Oto przykład uporządkowanej listy:

  1. Przedmiot 1
  2. Pozycja 2
  3. Pozycja 3

Oto jak go utworzyć:

  1. Przedmiot 1
  2. Pozycja 2
  3. Pozycja 3

Oto przykład nieuporządkowanej listy:

  • Przedmiot 1
  • Pozycja 2
  • Pozycja 3

Oto jak go utworzyć:

  • Przedmiot 1
  • Pozycja 2
  • Pozycja 3

Jeśli nie jest to już oczywiste. Oto podział:

The

  • Tag służy do wskazania każdego elementu na liście. Podczas tworzenia listy możesz użyć
      znacznik wskazujący uporządkowaną listę („o” = uporządkowana, a „l” = lista) lub