Ostateczny przewodnik HTML dla początkujących

Ostatnia aktualizacja 15 May 2018

Dwadzieścia lat temu, nawet jeśli jesteś blogerem hobbistycznym, 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 poznanie podstaw HTML nie jest już wymagane stworzyć stronę or prowadzisz bloga.

Problem polega na tym, że jeśli nie znasz kilku podstaw, możesz łatwo dostać się do prawdziwego problemu na swoim blogu i wynająć drogiego programistę, który naprawi niewielki problem. Co więcej, tworzenie zmian w blogu, takich jak dodanie niestandardowego widżetu tekstowego, wymaga niewielkiej wiedzy.

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 jest podstawą dzisiejszego Internetu. Miliony stron internetowych razem tworzą Internet. Gdzie HTML jest elementem składowym wszystkich tych witryn.

Pytania i odpowiedzi dla początkujących

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ż znane jako "Tagi".

2 - Dlaczego potrzebny jest HTML?

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 przypadku znaczników HTML jest rozróżniana 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ć Sublime 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!


do góry

1- Hello World!

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

Kod:

<! DOCTYPE html> <html> <head> <title> Moja pierwsza strona internetowa </ title> </ head> <body> <p> Hello World! </ P> </ body> </ html>

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 to zrozumieć z kodu „Hello World!”. Następujące elementy są obowiązkowe dla każdego pliku HTML.

  • <! DOCTYPE html> = Jest to deklaracja przeglądarki, że jest to plik HTML. Musisz określić go przed tagiem <html>.
  • <html> </ html> = To jest główny element pliku HTML. Wszystko, co napiszesz, przechodzi od <html> do </ html>.
  • <head> </ head> = To jest część informacji meta dla przeglądarki. Kody w tym tagu nie mają wyjścia wizualnego.
  • <body> </ body> = To jest ta część, którą renderuje przeglądarka internetowa. To, co dokładnie widzisz na stronie internetowej, to renderowanie kodów pomiędzy <body> i </ body>.


do góry

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.

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

(2a) Head Tags

Wszystkie znaczniki head idą pomiędzy <head> i </ head>. Zawierają meta-informacje dotyczące przeglądarki internetowej i wyszukiwarek. Zasadniczo nie mają obrazu wyjściowego.

<title> </ title>

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:

<title> Moja pierwsza strona internetowa </ title>
Znacznik tytułu pojawia się w górnej części przeglądarki.

<link>

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 się i nie potrzebuje zakończenia </ link>. W tym przypadku rel oznacza relację z plikiem, a src oznacza źródło.

Kod:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<meta>

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 = "To jest krótki opis, który pokazują wyszukiwarki"

<script> </ script>

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:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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:

<noscript> <p> Niestety! Skrypty są wyłączone. </ P> </ noscript>

(2b) Tagi ciała

Wszystkie znaczniki ciała znajdują się pomiędzy <body> i </ body>. Mają efekty wizualne. Tutaj jest najwięcej pracy. Musisz użyć tych tagów do struktury zawartości strony głównej.

<h1> </ h1> do <h6> </ h6>

To są znaczniki nagłówków. Najważniejszy nagłówek jest oznaczony <h1>, a najmniej ważny z <h6>. Powinieneś ich używać we właściwej hierarchii.

Kod:

<h1> To jest nagłówek h1 </ h1> <h2> To jest nagłówek h2 </ h2> <h3> To jest nagłówek h3 </ h3> <h4> To jest nagłówek h4 </ h4> <h5 > To jest nagłówek h5 </ h5> <h6> To jest nagłówek h6 </ h6>

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:

<p> Możesz podświetlić tekst na wiele sposobów. </ p> <p> Możesz <strong> pogrubić </ strong>, <u> podkreślenie </ u>, <em> kursywa </ em>, <znak > znacznik </ mark>, <sub> subscript </ sub>, <sup> superscript </ sup> i więcej! </ p>

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:

<! - <p> Możesz skomentować dowolny kod, otaczając go w ten sposób </ p> ->

(2c) Inne ważne znaczniki HTML

<a> </a>

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. Ma otwór <a> i część zamykającą </a>. Tekst, który chcesz zakotwiczyć, ma wartość od <a> do </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 zostanie otwarty na nowej karcie przeglądarki, czy na tej samej karcie. target = "_ blank" odnosi się do nowej karty, a target = "_ self" służy do otwierania na tej samej karcie.
  • rel = "" = Określa stosunek bieżącej strony do strony połączonej. Jeśli nie ufasz połączonej stronie, możesz zdefiniować rel = ”nofollow”.

Kod:

<p> <a target="_blank" href="https://www.google.com/"> Kliknij tutaj </a>, aby przejść do Google. Zostanie otwarta w nowej karcie. </ P> <p> <a target="_self" href="https://www.google.com/"> Kliknij tutaj </a>. Spowoduje to również przejście do Google, ale otworzy się na bieżącej karcie. </ P>

Wyjście:

<img />

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

<img /> to samozamykający się tag. Nie wymaga tradycyjnego zamykania jak </img>. Jest kilka atrybutów, które musisz znać, zanim będziesz mógł z nich poprawnie korzystać.

  • 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.
  • width = "" = Określa szerokość obrazu w pikselach.
  • Wysokość = "" = Określa wysokość obrazu w pikselach.

Przykład:

<p> To jest Googlepleks w sierpniu 2014. </ p> <p> Ten obraz ma szerokość 500 pikseli i wysokość 375 pikseli. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Siedziba Google w sierpniu 2014 "width =" 500 "height =" 375 "/>

Wyjście:

Wskazówki: chcesz wstawić klikalny obraz? Owiń kod obrazu znacznikiem <a>. Zobacz, jak to działa.

<ol> </ ol> lub <ul> </ ul>

Znacznik listy służy do tworzenia listy przedmiotów. <ol> oznacza listę uporządkowaną (lista numerowana), a <ul> oznacza listę nieuporządkowaną (punktory).

Pozycje listy wewnątrz <ol> lub <ul> są oznaczone tagami <li> </ li>. li oznacza listę. Możesz mieć dowolną liczbę <li>, jak chcesz w tagu nadrzędnym <ol> lub <ul>.

Kod:

<p> To jest uporządkowana lista: </ p> <ol> <li> Element 1 </ li> <li> Element 2 </ li> <li> Element 3 </ li> </ ol> <p> Lista jest nieuporządkowana: </ p> <ul> <li> Element 1 </ li> <li> Element 2 </ li> <li> Element 3 </ li> </ ul>

Wyjście:

<table> </ table>

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.

<table> </ table> to zewnętrzny kod nadrzędny. W tym tagu <tr> oznacza wiersz tabeli, <td> oznacza kolumnę tabeli, a <th> oznacza nagłówek tabeli.

Kod:

<table> <tr> <th> Imię </ th> <wiek> Wiek </ th> <th> Zawód </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Biznesmen </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Pielęgniarka </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> Professor </ td> </ tr> </ table>

Wyjście:

Uwaga: Wartości wewnątrz pierwszych <tr> są nagłówkami. Użyliśmy więc <th>, które 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:

  • <thead> </ thead> = Do zawijania nagłówków tabeli. Drukuje na każdej podzielonej stronie tabeli.
  • <tbody> </ tbody> = Do zawijania głównych danych tabeli. Możesz mieć tylu <tbody>, ile potrzebujesz. Znacznik <tbody> oznacza oddzielną grupę danych.
  • <tfoot> </ tfoot> = 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 podzielić naszą przykładową tabelę na <thead>, <tbody> i <tfoot>:

Kod:

<table> <thead> <tr> <th> Name </ th> <th> Wiek </ th> <th> Zawód </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Biznesmen </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Pielęgniarka </ td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professor </ td> </ tr> </ tbody> <tfoot> <tr> <td> Razem: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Wyjście:

<formularz> </ formularz>

Element Form służy do tworzenia interaktywnych formularzy dla stron internetowych. Formularz HTML zawiera kilka kolejnych elementów. Na przykład: <label>, <input>, <textarea> 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 rodzajów danych wejściowych dla formularzy. Bardzo podstawowym typem wprowadzania jest tekst. Jest napisane jako <input type = "text">. Typy mogą być również radio, pole wyboru, e-mail i tak dalej. Aby utworzyć przycisk przesyłania, na dole powinno być wejście typu "submit".

Znacznik <label> służy do tworzenia etykiet i kojarzenia ich z wejściami. Zasada kojarzenia etykiet z danymi wejściowymi ma tę samą wartość w atrybucie = "" atrybutu label i id = "" atrybutu input.

Kod:

<form action = "#"> <label for = "firstname"> First Name: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Last Name: </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Short Bio: </ label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Tutaj wpisz swój bio ... "> </ textarea> <br> <label> Płeć: </ label> <br> <label for =" male "> Male </ label> <input type = "radio" name = "gender" id = "male"> <br> <label for = "female"> Kobieta </ ​​label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Wyjście:

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


do góry

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 attributename = "" i znajduje się w otwierającym tagu HTML. Wartość atrybutu przechodzi między podwójne cudzysłowy.

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:

<h1 class = "heading"> To jest główny tytuł </ h1>

href = ""

href oznacza Hypertext Reference. Kierują użytkowników do odnośników. Tag Anchor <a> używa href do wysyłania użytkowników do docelowego adresu URL.

Kod:

<a href="https://www.google.com/"> Google </a>

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:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

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

Kod:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Siedziba Google" />

styl = ""

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:

<h2 style = "color: red"> To jest kolejny tytuł </ h2>


do góry

Wyświetlanie 4-Code: Block vs Inline

Niektóre elementy zawsze zaczynają się od nowej linii i przyjmują pełną dostępną szerokość. Są to elementy "Block".

Przykład: <div>, <p>, <h1> - <h6>, formularz itp.

Niektóre elementy zajmują tylko wymaganą przestrzeń i nie zaczynają się od nowej linii. Są to elementy „wbudowane”.

Przykład: <a>, <span>, <br>, <strong>, <img> itd.

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:

<! DOCTYPE html> <html> <head> <title> Moja pierwsza strona internetowa </ title> </ head> <body> <h2> To jest nagłówek H2. Ma wyświetlacz Block. </ H2> <h2> To jest <u> inny nagłówek </ u> H2. Tutaj znacznik podkreślenia ma wbudowany wyświetlacz. </ H2> </ body> </ html>

Wyjście:


do góry

5- Podwójny cytat 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.


do góry

6 - Semantyczny HTML kontra Nie semantyczny 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 przez nazwy id / class. Na przykład: <div id = "article"> </ div> został uznany za artykuł.

W HTML5 tag <article> </ article> przedstawia się jako artykuł bez potrzeby użycia identyfikatora id / class.

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:

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

Prosta struktura HTML5 wyglądałaby tak:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Moja pierwsza strona internetowa </ title> </ head> <body> <header> <nav> <ul> < li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> To jest tytuł artykułu </ li> h2> <p> Wysłane przez Johna Doe </ p> </ header> <p> Treść artykułu jest dostępna </ p> </ article> </ main> <footer> <p> Prawa autorskie 2017 John Doe </ p> </ footer> </ body> </ html>


do góry

7- Sprawdzanie poprawności 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.


do góry

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: