Jak uczyć się HTML

Wideo: Programista od zera. Czego trzeba się nauczyć by robić strony. #1

Zawartość

Kroki
Część 1 z 2: Nauka podstaw HTML
Część 2 z 2: Zaawansowany HTML
Porady
Ostrzeżenia
Czego potrzebujesz

HTML to skrót od angielskiego hipertekstowy język znaczników (hipertekstowy język znaczników). To jest kod lub język, w którym tworzony jest podstawowy znacznik witryny. Nauka może wydawać się zniechęcająca, jeśli nigdy nie programowałeś, ale w rzeczywistości wszystko, czego potrzebujesz, aby zacząć, to podstawowy edytor tekstu i przeglądarka internetowa. Możesz nawet rozpoznać kilka przykładów znaczników HTML, które spotkałeś na forach internetowych, dostosowanych stronach niestandardowych lub artykułach wikiHow. HTML to przydatne narzędzie dla każdego internauty, a nauka podstaw zajmie mniej czasu, niż myślisz.

Kroki

Część 1 z 2: Nauka podstaw HTML

1 Otwórz dokument HTML. Większość edytorów tekstu (Notepad lub Notepad ++ dla Windows, TextEdit dla Maca, gedit dla GNU / Linux) można wykorzystać do generowania plików HTML. Utwórz nowy dokument i zapisz go za pomocą Plik → Zapisz jako w formacie strony internetowej lub zmień rozszerzenie pliku na .html lub .htm zamiast .doc, .rtf lub inne rozszerzenie.
- Możesz otrzymać ostrzeżenie, że plik zostanie zapisany jako „zwykły tekst” zamiast w formacie RTF lub że formatowanie i obrazy nie zostaną zapisane. To jest w porządku; dla HTML te opcje nie są potrzebne.
2 Otwórz wygenerowany plik w przeglądarce. Zapisz pusty plik, znajdź go na swoim komputerze i kliknij go dwukrotnie, aby go otworzyć. W przeglądarce powinna otworzyć się pusta strona. Jeśli nie, przeciągnij plik na pasek adresu przeglądarki. Podczas edycji pliku HTML możesz odświeżyć tę stronę, aby zobaczyć zmiany.
- Pamiętaj, że w ten sposób nie tworzysz strony internetowej w Internecie. Inne osoby nie będą miały dostępu do tej strony i nie potrzebujesz połączenia internetowego, aby przetestować swoją stronę lokalną. Przeglądarka po prostu interpretuje kod HTML, „czytając” go tak, jakby była stroną internetową.
3 Dowiedz się, czym są tagi znaczników. W przeciwieństwie do zwykłego tekstu tagi nie pojawiają się na stronie. Zamiast tego informują przeglądarkę, jak wyświetlić stronę i jej zawartość. Tag „otwierający” zawiera instrukcje. Na przykład może powiedzieć przeglądarce, że tekst powinien być wyświetlany jako pogrubiony... Potrzebuje również znacznika „end”, aby pokazać przeglądarce, gdzie kończy się instrukcja. W tym przykładzie tekst między znacznikami początkowym i końcowym zostanie wyświetlony pogrubioną czcionką. Tagi są zapisane w nierównych znakach, ale tag końcowy zaczyna się od ukośnika.
- Znacznik otwierający jest zapisany między znakami nierówności: otwieranie tagu>
- W tagu zamykającym przed deskryptorem tagu (nazwą) umieszczany jest ukośnik: /koniec tagu>
- Czytaj dalej, aby dowiedzieć się, jak używane są różne tagi. W tym kroku wystarczy zapamiętać format nagrywania. Między znakami nierówności wpisywane są znaczniki:> i />
- W niektórych samouczkach znaczniki HTML są nazywane elementami, a tekst między znacznikami otwierającym i zamykającym jest nazywany zawartością elementu.
4 Wpisz w edytorze tag html>. Każdy plik HTML musi zaczynać się od tagu html> i zakończ tagiem / html>... Tagi te informują przeglądarkę, że cała zawartość między tagami jest w formacie HTML. Dodaj te tagi do swojego dokumentu:
- Często pliki HTML zaczynają się od wiersza ! DOCTYPE html>co oznacza, że przeglądarki muszą rozpoznawać cały plik jako HTML. Ten wiersz nie jest konieczny, ale może pomóc w rozwiązaniu problemów ze zgodnością.
- Wybierz html> u góry dokumentu.
- Naciśnij klawisz Enter lub Return kilka razy, aby utworzyć wiele pustych wierszy, a następnie wpisz / html>
- Zapamietaj to całość kod, który utworzysz w tym artykule, będzie musiał być zapisany między tymi dwoma tagami.
5 Utwórz sekcję head> w pliku. Pomiędzy tagami html> i / html> utwórz tag otwierający głowa> i zamykający tag / głowa>... Dodaj między nimi kilka pustych linii. Treść zapisana pomiędzy tagami head> i /head> nie jest wyświetlana na samej stronie. Wykonaj następujące kroki, a zobaczysz, do czego służy ten tag:
- Pomiędzy tagami head> i / head> napisz tytuł> oraz / tytuł>
- Pomiędzy tagami title> i / title> napisz Jak uczyć się HTML - wikiHow.
- Zapisz zmiany i otwórz plik w przeglądarce (lub odśwież stronę, jeśli plik jest już otwarty). Widzisz tekst, który pojawia się w tytule strony nad paskiem adresu?
6 Utwórz sekcję body>. Wszystkie inne tagi i tekst w tym przykładzie są napisane w sekcji body, której zawartość jest wyświetlana na stronie. Po tag zamykający / nagłówek>, ale przed tag / html> dodaj tagi ciało> oraz / ciało>... W dalszej części tego artykułu pracuj z sekcją ciała. Twój plik powinien wyglądać mniej więcej tak:
html>
głowa>
title> Jak uczyć się HTML - wikiHow / title>
/ głowa>
ciało>
/ ciało>
/ html>
7 Dodaj tekst, używając różnych stylów. Czas dodać prawdziwą treść do strony! Wszystko, co napiszesz między tagami body, zostanie wyświetlone na stronie po odświeżeniu w przeglądarce. Nie używaj symbolika lub >ponieważ przeglądarka spróbuje zinterpretować treść jako tag zamiast tekstu. Pisać Cześć! (lub cokolwiek chcesz), a następnie spróbuj dodać te tagi do tekstu i zobacz, co się stanie:
- em> Witam wszystkich! / em> sprawia, że tekst jest „kursywą”: Cześć!
- silny> Witam wszystkich! / silny> sprawia, że tekst jest „pogrubiony”: Cześć!
- s> Witam wszystkich! / s> tekst przekreślony: ~~Cześć!~~
- sup> Witam wszystkich! / sup> wyświetla czcionkę jako indeks górny:
- sub> Witam wszystkich! / sub> wyświetla czcionkę jako indeks dolny: _Cześć!
- Wypróbuj różne tagi razem. Jak to będzie wyglądać em> silny> Witam wszystkich! / silny> / em>?
8 Podziel tekst na akapity. Jeśli spróbujesz napisać wiele wierszy tekstu w pliku HTML, zauważysz, że podziały wierszy nie są wyświetlane w przeglądarce. Aby podzielić tekst na akapity, musisz dodać tagi:
- p> To jest osobny akapit. / p>
- Po tym zdaniu następuje podział wiersza br> przed początkiem tego wiersza.
  To pierwszy tag, który nie wymaga tagu końcowego. Te tagi są nazywane tagami „pustymi”.
- Utwórz nagłówki, aby pokazać tytuły sekcji:
  h1> tekst nagłówka / h1>: największy tytuł
  h2> tekst nagłówka / h2> (nagłówek drugiego poziomu)
  h3> tekst nagłówka / h3> (nagłówek trzeciego poziomu)
  h4> tekst nagłówka / h4> (nagłówek czwartego poziomu)
  h5> tekst nagłówka / h5> (najmniejszy tytuł)
9 Naucz się tworzyć listy. Istnieje kilka sposobów tworzenia list na stronie internetowej. Wypróbuj poniższe opcje i zdecyduj, który z nich najbardziej Ci się podoba. Należy zauważyć, że dla całej listy potrzebna jest jedna para tagów (na przykład ul> i / ul> w przypadku listy punktowanej), a każdy element listy jest wyróżniony inną parą tagów, na przykład li> i / li>.
- Lista punktowana:
  ul> li> Pierwsza linia / li> li> Druga linia / li> li> I tak dalej / li> / ul>
- Lista numerowana:
  ol> li> Jeden / li> li> Dwa / li> li> Trzy / li> / ol>
- Lista definicji:
  dl> dt> Kawa / dt> dd> - gorący napój / dd> dt> Lemoniada / dt> dd> - zimny napój / dd> / dl>
10 Układ strony za pomocą podziały wierszy, linie poziome i Kino. Czas dodać do strony coś innego niż tekst. Wypróbuj poniższe tagi lub skorzystaj z łączy, aby uzyskać więcej informacji. Skorzystaj z usługi hostingu online, aby utworzyć link do obrazu, który chcesz opublikować:
- Linia pozioma: godz.>
- Wstaw zdjęcie: img src = "link do obrazu">
11 Dodaj linki. Możesz użyć tych tagów do tworzenia hiperłączy do innych stron i witryn, ale ponieważ nie masz jeszcze witryny, dowiesz się teraz, jak tworzyć linki kotwiczne, czyli linki do określonych miejsc na stronie:
- Utwórz kotwicę ze znacznikiem a> w miejscu, w którym chcesz utworzyć link na stronie. Wymyśl jasną i zapadającą w pamięć nazwę:
  
  a name = "Wskazówki"> Tekst, do którego prowadzisz link. / a>
- Użyj tagu href>, aby utworzyć względny link lub link do zasobu zewnętrznego:
  
  a href = "link do strony lub nazwa kotwicy na stronie"> Tekst lub obraz, który będzie służył jako link. / a>
- Aby utworzyć link do względnego linku na innej stronie, dodaj znak # po głównym linku i nazwie kotwicy. Na przykład https://en.wikihow.com/learn-HTML#Tips zawiera linki do sekcji porad na tej stronie.

Część 2 z 2: Zaawansowany HTML

1 Poznaj atrybuty. Atrybuty są zapisane wewnątrz tagu, wskazując dodatkowe informacje. Format atrybutów jest następujący: nazwa = "wartość", gdzie tytuł definiuje atrybut (na przykład kolor dla atrybutu koloru), a wartość wskazuje jego wartość (na przykład czerwony dla czerwonego).
- Atrybuty zostały faktycznie użyte w poprzedniej sekcji dotyczącej podstaw HTML. Tag img> używa atrybutu src, względne kotwice linków używają atrybutu Nazwaa linki używają atrybutu href... Jak już zauważyłeś, wszystkie atrybuty są zapisane w formacie ___='___’.
2 Eksperymentuj z tabelami HTML. Tworzenie tabeli wiąże się z użyciem różnych tagów. Możesz poeksperymentować lub przeczytać bardziej szczegółowe instrukcje.
- Utwórz tagi tabeli:stół> / stół>
- Zawrzyj zawartość każdego wiersza w tabeli w tagach: tr>
- Nagłówek kolumny jest zdefiniowany przez tag: th>
- Komórki w kolejnych wierszach: td>
- Przykład użycia tych tagów:
  
  tabela> tr> th> Kolumna 1: miesiąc / th> th> Kolumna 2: oszczędności / th> / tr> tr> td> styczeń / td> td> 5000 rubli / td> / tr> / tabela>
3 Poznaj dodatkowe tagi sekcji nagłówka. Znasz już tag head>, który znajduje się na początku każdego pliku html. Oprócz tagu title> w tej sekcji znajdują się inne tagi:
- Metatagi zawierające metadanewykorzystywane przez wyszukiwarki do indeksowania witryny. Aby Twoja witryna była łatwiejsza do znalezienia w wyszukiwarkach, użyj jednego lub więcej otwierających metatagów (tagi zamykające nie są wymagane).Użyj jednego atrybutu i jednej wartości na tag: meta name = "opis" content = "opis strony">; lub meta name = "słowa kluczowe" content = "słowa kluczowe oddzielone przecinkami">
- Tagi Link>, które wskazują na pliki innych firm, takie jak arkusze stylów (CSS), które są tworzone przy użyciu innego typu kodowania i umożliwiają zmianę strony HTML za pomocą koloru, wyrównania tekstu i wielu innych funkcji.
- Tagi script> służące do dołączania plików JavaScript do strony. Pliki te są potrzebne do interaktywnej modyfikacji strony (w odpowiedzi na działania użytkownika).
4 Eksperymentuj z kodem HTML innych witryn. Przeglądanie kodu źródłowego innych stron internetowych to świetny sposób na naukę języka HTML. Możesz kliknąć stronę prawym przyciskiem myszy i wybrać opcję Wyświetl źródło lub coś podobnego z górnego menu przeglądarki. Spróbuj dowiedzieć się, co robi nieznany tag, lub wyszukaj w Internecie informacje na jego temat.
- Chociaż nie możesz edytować witryn innych osób, możesz skopiować kod źródłowy do swojego pliku, aby później eksperymentować z tagami. Pamiętaj, że znaczniki CSS mogą być niedostępne, a kolory i formatowanie mogą wyglądać inaczej.
5 Zacznij przeglądać bardziej szczegółowe przewodniki. Istnieje wiele witryn w Internecie poświęconych znacznikom HTML, takich jak W3Schools czy HTMLbook. W sprzedaży są również książki papierowe, ale staraj się znaleźć najnowsze wydanie, gdy standardy się zmieniają i ewoluują. Co więcej, opanuj CSS, aby mieć znacznie większą kontrolę nad układem i wyglądem swojej witryny. Po nauce CSS, projektanci stron internetowych zwykle uczą się JavaScript.

Porady

Notepad ++ to świetny darmowy program, podobny do zwykłego Notatnika, ale możesz zapisać i przetestować swój kod w przeglądarce online. (Obsługuje również prawie każdy język - HTML, CSS, Python, JavaScript itd.)
Znajdź prostą stronę w sieci, zapisz kod na swoim komputerze i poeksperymentuj z nim. Spróbuj przenieść tekst, zmienić czcionkę, zastąpić obrazy - cokolwiek!
Możesz trzymać notatnik, w którym zapisujesz tagi, aby zawsze mieć je pod ręką. Możesz również wydrukować tę stronę i odnieść się do niej.
Kiedy piszesz kod, rób to ostrożnie, aby Ty i inni ludzie mogli go zrozumieć. Użyj!- Wstaw komentarz tutaj -> dla komentarzy HTML: nie zostaną one odzwierciedlone na stronie, ale będą widoczne w dokumencie kodu.
XML i RSS zyskują na popularności. Kod stron zawierających technologie XML i RSS jest trudniejszy do przeczytania i zrozumienia dla niedoświadczonego użytkownika, ale narzędzia te są całkiem przydatne.
Znaczniki znaczników w HTML nie uwzględniają wielkości liter, ale zalecamy używanie tylko małych liter (jak w przykładach w tym artykule) zarówno dla standaryzacji, jak i zgodności XHTML.

Ostrzeżenia

Niektóre tagi wyszły z użycia w ciągu ostatnich kilku lat i zostały zastąpione nowymi, które dają takie same lub dodatkowe efekty.
Jeśli chcesz przetestować swoją stronę, przejdź do witryny W3 i zapoznaj się z nowoczesnymi wymaganiami HTML. Standardy HTML zmieniają się z czasem, a niektóre tagi są zastępowane nowymi, które działają lepiej w nowoczesnych przeglądarkach.

Czego potrzebujesz

Edytor tekstu, taki jak Notatnik (Windows) lub TextEdit (Mac)
Papier/notatnik (niekoniecznie)
Edytor HTML, taki jak Notepad ++ (Windows) lub TextWrangler (Mac) (niekoniecznie)