Podstawowy przewodnik HTML dla manekinów

Ostatnia aktualizacja 05 października 2020 r


Dwadzieścia lat temu, nawet jeśli jesteś blogerem hobbystycznym, musiałeś znać kodowanie stron internetowych, aby chronić siebie lub dodać prostą funkcję do swojej witryny. Ale teraz dostępnych jest tak wiele edytorów i wtyczek, że nawet znajomość podstaw HTML nie jest już wymagana.

Problem polega na tym, że jeśli nie znasz kilku podstaw, możesz łatwo wpaść w poważne kłopoty na swoim blogu i zatrudnić drogiego programistę, który naprawi drobny problem. Nie tylko to, ale tworzenie zmian w swoim blogu, takich jak dodanie niestandardowego widżetu tekstowego, wymaga trochę wiedzy.

Kod HTML.
„Kody” HTML.

A jeśli Twój układ treści nie wygląda prawidłowo, to dzięki wiedzy HTML możesz wrócić na właściwe tory.

Oto nasza wersja przewodnika HTML dla blogerów i właścicieli firm internetowych, którzy nie są zaawansowanymi technologiami.

HTML to kręgosłup dzisiejszego internetu. Miliony stron internetowych razem utworzyły internet. Gdzie HTML to element składowy wszystkich tych witryn.

Zanim zaczniemy…

1. Co to jest HTML?

HTML to skrót nazwy Hyper Text Markup Language. Jest to standardowy język do oznaczania treści w przeglądarkach internetowych.

HTML jest reprezentowany przez „Elementy”. Elementy są również nazywane „tagami”.

2. Dlaczego HTML jest potrzebny?

Przeglądarki internetowe mogą renderować witrynę tylko wtedy, gdy jest napisana w obsługiwanym języku. HTML jest najpopularniejszym językiem znaczników i ma najwyższą akceptację dla przeglądarek internetowych.

Dlatego potrzebujesz HTML.

3. Czy w HTML rozróżniana jest wielkość liter?

W HTML nie jest rozróżniana wielkość liter. Ale najlepszą praktyką jest pisanie kodu HTML w odpowiednich przypadkach.

Kroki tworzenia pierwszego pliku HTML

Możesz utworzyć podstawowy plik HTML za pomocą Notatnika na swoim komputerze. Ale pisanie wielu linii kodów będzie bolesne.

Potrzebujesz Edytora kodu. Dobry edytor kodu ułatwi pisanie i organizowanie dużych kodów.

Używam i polecam Notepad + + (bezpłatne i open-source) do pisania języków internetowych. Istnieją inne edytory, których możesz używać poniżejlime Text, Atom itd.

Oto, co musisz zrobić:

  1. Zainstaluj edytor kodu
  2. Otwórz to
  3. Utwórz nowy plik
  4. Zapisz go jako plik .html

Jesteś gotowy do pracy!

Przykład edytora kodu Atom
Edytor kodu - Atom

1. Witaj świecie!

Skopiuj i wklej następujący kod do nowego pliku HTML i zapisz go. Teraz uruchom go w przeglądarce.

Kod:

Moja pierwsza strona internetowa Witaj świecie!

Wyjście:

Gratulacje! Utworzyłeś swój pierwszy plik HTML. W tym momencie nie musisz tego rozumieć. Omówimy to wkrótce.

Zrozumienie struktury HTML

Każdy plik HTML ma wspólną nagą strukturę. Tutaj wszystko się zaczyna. I każda duża strona kodów przyjdzie do tej struktury po przycięciu.

Spróbujmy więc zrozumieć to na podstawie „Hello World!” kod. Poniższe elementy są obowiązkowymi częściami każdego pliku HTML.

  • = Jest to deklaracja dla przeglądarki, że jest to plik HTML. Musisz to określić przed rozszerzeniem etykietka.
  • = To jest główny element pliku HTML. Wszystko, co piszesz, jest pomiędzy i .
  • = To jest część informacji meta dla przeglądarki. Kody w tym tagu nie mają wyjścia wizualnego.
  • = To jest część renderowana przez przeglądarkę internetową. To, co dokładnie widzisz na stronie internetowej, to renderowanie kodów między i .

2. Tagi HTML

HTML to współpraca setek różnych tagów. Musisz się nauczyć, jak działają. Musisz także upewnić się, że użył ich we właściwy sposób.

Tagi HTML mają zwykle znacznik otwierający i zamykający. Znacznik otwierający ma słowo kluczowe otoczone znakiem mniejszym niż (<) i większym niż (>). Tag zamykający ma wszystko to samo, ale dodatkowy ukośnik (/) po znaku mniejszym niż (<).

(2a) Head Tags

Wszystkie znaczniki głowy znajdują się pomiędzy i . Zawierają metainformacje dotyczące przeglądarki internetowej i wyszukiwarek. Zasadniczo nie mają wyjścia wizualnego.

Znacznik tytułu określa tytuł strony internetowej widocznej na karcie przeglądarki. Te informacje są używane przez programy internetowe i wyszukiwarki. Możesz mieć najwyższy jeden tytuł na plik HTML.

Kod:

Moja pierwsza strona internetowa
Tag tytułu - przykłady HTML
Znacznik tytułu pojawia się w górnej części przeglądarki.

Tag linku łączy Twoją stronę HTML z zasobami zewnętrznymi. Jego głównym zastosowaniem jest łączenie strony HTML z arkuszami stylów CSS. Jest to tag samozamykający i nie wymaga zakończenia . Tutaj rel oznacza relację z plikiem, a src oznacza źródło.

Kod:

Meta to kolejny samozamykający się znacznik, który dostarcza meta informacji o pliku html. Wyszukiwarki i inne usługi internetowe wykorzystują te informacje. Meta tagi są koniecznością, jeśli chcesz zoptymalizować stronę pod kątem wyszukiwarek.

Kod:

<meta name="description" content="This is the short description that search engines show"

Znacznik skryptu służy do dołączania skryptu po stronie serwera lub tworzenia łącza do zewnętrznego pliku skryptu. Może mieć dwa atrybuty w tagu otwierającym. Jeden to typ, a drugi to źródło (src).

Kod:

Tag Noscript działa, gdy skrypty są wyłączone w przeglądarce internetowej. Sprawia, że ​​strona jest kompatybilna z tymi, którzy nie zezwalają na skrypty w swoich przeglądarkach internetowych.

Kod:

Niestety! Skrypty są wyłączone.

(2b) Tagi ciała

Wszystkie tagi ciała znajdują się pomiędzy i . Mają wyjścia wizualne. To tutaj wykonuje się najwięcej pracy. Musisz użyć tych tagów, aby uporządkować zawartość strony głównej.

do

To są tagi nagłówka. Najważniejszy nagłówek jest oznaczony tagiem a najmniej ważne z . Powinieneś używać ich we właściwej hierarchii.

Kod:

To jest nagłówek h1 To jest nagłówek h1 To jest nagłówek h1 To jest nagłówek h2 To jest nagłówek h2 To jest nagłówek h2

Wyjście:

Formatowanie znaczników

Tekst w pliku html można sformatować za pomocą wielu znaczników formatujących. Będzie to konieczne, gdy chcesz wyróżnić słowo lub linię z treści.

Kod:

Możesz wyróżnić swój tekst na wiele sposobów. Możesz pogrubić , podkreślić , pochylić , znak , indeks dolny , indeks górny i więcej!

Wyjście:

Możesz oddzielić niektóre kody od rozdzierania za pomocą tagu komentarza. Kod pojawi się w kodzie źródłowym, ale nie będzie renderowany. Głównym zastosowaniem tego znacznika jest tworzenie dokumentacji plików html do wykorzystania w przyszłości.

Przykład:

You can comment out any code by surrounding them in this way -->

(2c) Inne ważne znaczniki HTML

Anchor jest nieocenionym tagiem, który jest używany niemal wszędzie. Nie zobaczysz żadnej strony internetowej bez co najmniej jednego linku kotwicy.

Struktura jest taka sama. Posiada część otwieraną i zamykającą . Tekst, który chcesz zakotwiczyć, znajduje się między a .

Istnieją pewne atrybuty określające, gdzie i jak użytkownik idzie po kliknięciu.

  • ahref = ”“ = Określa link docelowy. Link łączy podwójne cudzysłowy.
  • target = ”“ = Określa, czy adres URL będzie otwierany w nowej karcie przeglądarki, czy w tej samej karcie. target = „_ blank” dotyczy nowej karty, a target = „_ self” - otwierania w tej samej karcie.
  • rel = ”“ = Określa relację bieżącej strony z połączoną stroną. Jeśli nie ufasz połączonej stronie, możesz zdefiniować rel = ”nofollow”.

Kod:

Kliknij tutaj, aby przejść do Google. Otworzy się w nowej karcie. Kliknij tutaj . Przeniesie Cię również do Google, ale otworzy się w bieżącej karcie.

Wyjście:

Tag obrazu to kolejny ważny tag, bez którego nie można sobie wyobrazić wielu witryn opartych na obrazie.

jest tagiem samozamykającym. Nie potrzebuje tradycyjnego zamknięcia . Jest kilka atrybutów, które musisz znać, zanim będziesz mógł używać go poprawnie.

  • src = ”“ = Służy do definiowania łącza źródłowego obrazu. Umieść link pomiędzy podwójnymi cytatami.
  • alt = ”“ = Oznacza tekst alternatywny. Gdy obraz się nie ładuje, ten tekst daje użytkownikom pojęcie o brakującym obrazie.
  • szerokość = ”“ = Określa szerokość obrazu w pikselach.
  • Wysokość = ”“ = Określa wysokość obrazu w pikselach.

Przykład:

To jest Googlepleks w sierpniu 2014 r. Ten obraz ma szerokość 500 pikseli i wysokość 375 pikseli.

Wyjście:

Wskazówki: Chcesz wstawić klikalny obraz? Owiń kod obrazu tagiem. Zobacz, jak to działa.

lub

Znacznik listy służy do tworzenia listy elementów. oznacza listy uporządkowane (lista numerowana) i oznacza listy nieuporządkowane (wypunktowane).

Elementy listy wewnątrz lub jest oznaczony . li oznacza listę. Możesz mieć ich tyle jak chcesz wewnątrz rodzica lub etykietka.

Kod:

To jest uporządkowana lista: Przedmiot 1 Pozycja 2 Pozycja 3 To jest lista nieuporządkowana: Przedmiot 1 Pozycja 2 Pozycja 3

Wyjście:

Tag tabeli służy do tworzenia tabeli danych. Istnieje kilka tagów poziomu wewnętrznego, które definiują nagłówki, wiersze i kolumny tabeli.

jest zewnętrznym kodem rodzica. W tym tagu oznacza rząd tabeli, oznacza kolumnę tabeli i oznacza nagłówek tabeli.

Kod:

Nazwa Wiek Zawód Jo 27 Biznesmen kolęda 26 Pielęgniarka Simone 39 Profesor

Wyjście:

Uwaga: wartości wewnątrz pierwszego są nagłówkami. Więc użyliśmy który stosuje pogrubienie tekstu do tekstu.

Grupowanie tabel

Możesz rozszerzyć funkcjonalność tabeli za pomocą elementów do grupowania tabel. Będą chwile, kiedy trzeba tworzyć duże tabele, które dzielą się na wiele stron.

Grupując dane tabeli w nagłówek, treść i stopkę, można zezwolić na niezależne przewijanie. Nagłówek i część ciała zostaną wydrukowane na każdej stronie, na której znajduje się stół.

Tagi grupowania tabel to:

  • = Do zawijania nagłówków tabeli. Drukuje na każdej podzielonej stronie tabeli.
  • = Do zawijania głównych danych tabeli. Możesz mieć ich tyle tak jak potrzebujesz. ZA tag oznacza oddzielną grupę danych.
  • = Do zawijania informacji o stopce tabeli. Drukuje na każdej podzielonej stronie tabeli.

Pamiętaj, że nie musisz używać grupowania. Możesz go użyć, aby większe tabele były bardziej czytelne. Podczas gdy niektórzy specjalni programiści wyraźnie wykorzystują te znaczniki jako selektory CSS.

Oto, jak możemy zgrupować naszą przykładową tabelę w , i :

Kod:

Nazwa Wiek Zawód Jan 27 Biznesmen kolęda 26 Pielęgniarka Simone 39 Profesor Łączna liczba osób: 3

Wyjście:

Element formularza służy do tworzenia interaktywnych formularzy dla stron internetowych. Formularz HTML zawiera kilka kolejnych elementów. Na przykład, , itp.

Atrybut akcji w formularzu jest bardzo ważny. Wskazuje stronę serwera lub stronę trzecią do przetwarzania informacji. W celu przetworzenia należy najpierw zdefiniować metodę.

Możesz użyć jednej z dwóch metod: pobierz lub opublikuj. Get wysyła wszystkie informacje w formacie adresu URL, w którym Post wysyła informacje w treści wiadomości.

Istnieje wiele typów danych wejściowych do formularzy. Podstawowym typem wprowadzania jest tekst. Jest napisane jako . Typy mogą również obejmować radio, pole wyboru, e-mail i tak dalej. Na dole powinno znajdować się pole typu przesyłania, aby utworzyć przycisk przesyłania.

tag służy do tworzenia etykiet i kojarzenia ich z danymi wejściowymi. Zasada kojarzenia etykiet z wejściami jest taka, że ​​mają taką samą wartość w atrybucie for = ”” etykiety i atrybucie id = ”” wejścia.

Kod:

Imię: Nazwisko: Krótkie biografie: Płeć: Męski Płeć żeńska

Wyjście:

Uwaga: Wskazałem akcję o wartości pustej, ponieważ nie była ona połączona z żadnym serwerem w celu przetworzenia informacji.

3. Atrybuty HTML

Atrybuty są jednym z rodzajów modyfikatorów tagów HTML. Dodają nowe konfiguracje do znaczników HTML.

Atrybut wygląda jak nazwa_atrybutu = ”” i znajduje się w otwierającym tagu HTML. Wartość atrybutu znajduje się między podwójnymi cudzysłowami.

id = ”” i class = ””

id i class to identyfikatory znaczników HTML. Różne nazwy są przypisane do różnych elementów HTML za pomocą identyfikatorów. Możesz użyć jednego identyfikatora klasy dla wielu elementów. Ale nie można użyć jednego identyfikatora id dla wielu elementów.

Kod:

To jest główny tytuł

href = ””

href oznacza odniesienie do hipertekstu. Wskazują użytkownikom linki referencyjne. Tag kotwicy używa href do kierowania użytkowników do docelowego adresu URL.

Kod:

Google

src = ””

src oznacza źródło. Określa źródło multimediów lub zasobów używanych w pliku HTML. Źródłem może być URL lokalny lub zewnętrzny.

Kod:

alt = ””

alt oznacza alternatywę. Jest to tekst zapasowy, który jest używany, gdy element HTML nie może się załadować.

Kod:

style = ””

atrybut stylu jest często używany w tagach HTML. Wykonuje zadanie CSS w tagu HTML. Twoje właściwości stylistyczne mieszczą się między podwójnymi cudzysłowami.

Kod:

To jest inny tytuł

4. Wyświetlanie kodu: blokowe a wbudowane

Niektóre elementy zawsze zaczynają się od nowej linii i przyjmują pełną dostępną szerokość. To są elementy „blokowe”.

Dawny: , , - , formularz itp.

Niektóre elementy zajmują tylko wymagane miejsce i nie zaczynają się w nowej linii. To są elementy „w tekście”.

Ex: ,, ,, itp.

Będziesz musiał odróżnić elementy blokowe od liniowych, gdy będziesz używać stylów CSS. W tym przewodniku HTML nie jest to konieczne.

Kod:

Moja pierwsza strona internetowa To jest nagłówek H2. Posiada wyświetlacz Block. To kolejny nagłówek H2. Tutaj znacznik podkreślenia ma wbudowany wyświetlacz.

Wyjście:

5. Podwójny cudzysłów a pojedynczy cudzysłów w HTML

To pytanie jest bardzo oczywiste. Co powinieneś używać w HTML? Pojedynczy cudzysłów lub podwójny cudzysłów? Ludzie zdają się używać obu, ale które są poprawne?

W HTML pojedynczy cytat i podwójny cytat są takie same. Nie wpływają na wynik.

Możesz użyć dowolnej osoby. Ale mieszanie obu stron na stronie jest uważane za złą praktykę. Powinieneś być konsekwentny z każdym z nich.

6. Semantyczny HTML a niesemantyczny HTML

Semantic HTML to najnowsza wersja HTML, która jest również nazywana HTML5. Jest to rozwinięta wersja niesanantycznego HTML i XHTML.

Dlaczego HTML5 jest lepszy? W poprzednich wersjach elementy HTML były identyfikowane za pomocą identyfikatorów / nazw klas. Na przykład: został uznany za artykuł.

W HTML5 tag reprezentuje siebie jako artykuł bez konieczności posiadania identyfikatora / identyfikatora klasy.

Ze względu na HTML5, teraz wyszukiwarki i inne aplikacje internetowe mogą lepiej zrozumieć stronę internetową. Semantyczne strony internetowe sprawdziły się lepiej w SEO.

Oto lista popularnych tagów HTML5:

  • = Ta opcja służy do zawijania głównej treści, którą chcesz pokazać swoim widzom.
  • = To służy do oznaczania nagłówka części treści, takiej jak tytuł lub meta autora.
  • = Określa zdefiniowaną przez użytkownika lub niezależną zawartość dla Twoich przeglądających.
  • = Może grupować dowolny kod, taki jak nagłówek, stopka lub pasek boczny. Można powiedzieć, że jest to semantyczna forma div.
  • = To jest miejsce, w którym znajduje się treść stopki, tekst zastrzeżony lub tekst chroniony prawami autorskimi.
  • = Umożliwia wstawianie plików audio bez problemów z wtyczkami.
  • = Lubię , możesz wstawiać filmy za pomocą tego tagu bez problemów z wtyczką.

Prosta struktura HTML5 wyglądałaby tak:

Moja pierwsza strona internetowa Menu 8 Menu 1 To jest tytuł artykułu Wysłane przez John Doe Treść artykułu trafia tutaj Prawa autorskie 2 John Doe

7. Walidacja HTML

Większość profesjonalistów internetowych sprawdza ich kod po skończeniu. Dlaczego konieczne jest sprawdzenie poprawności kodu, gdy działa poprawnie?

Istnieją dwa możliwe powody sprawdzania poprawności kodów:

  1. Pomoże Ci to stworzyć kod kompatybilny z różnymi przeglądarkami i platformami. Kod może nie wyświetlać żadnych błędów w bieżącej przeglądarce, ale może w innym. Sprawdzanie kodu naprawi to.
  2. Wyszukiwarki i inne programy internetowe mogą przestać indeksować Twoją stronę, jeśli występują w niej błędy. Możesz potwierdzić poprzez weryfikację, że nie ma żadnego poważnego błędu.

W3C Validator jest najpopularniejszą usługą do sprawdzania poprawności kodu. Mają kilka metod sprawdzania poprawności kodów. Możesz przesłać plik lub bezpośrednio wpisać kod w swoim silniku walidacyjnym.

8. Inne pomocne zasoby

HTML to temat nieustannie uczący się. Bardziej zaktualizowane wersje HTML mogą pojawić się wcześniej. Więc musisz być na bieżąco i ćwiczyć. Praktyka jest tym, co HTML asów.

Oto przydatne zasoby dla Ciebie: