Nauka HTML

Wideo: Kurs HTML odc.1: Tworzenie stron www. Pierwszy projekt, wiedza podstawowa

Zawartość

Do kroku
Część 1 z 2: Nauka podstaw HTML
Część 2 z 2: Nauka zaawansowanego HTML
Porady
Ostrzeżenia
Potrzeby

HTML to skrót od hipertekstowy język znaczników, to jest kod lub język który służy do tworzenia stron internetowych. Może to wyglądać na skomplikowane, jeśli nigdy wcześniej nie programowałeś, ale aby go wypróbować, potrzebujesz jedynie prostego edytora tekstu i przeglądarki internetowej. Możesz rozpoznać kod HTML z forów, profili online lub artykułów wikiHow. HTML jest przydatnym źródłem informacji dla każdego, kto korzysta z Internetu, a nauka języka HTML może zająć mniej czasu, niż można by się spodziewać.

Do kroku

Część 1 z 2: Nauka podstaw HTML

Otwórz dokument HTML. Większość programów do edycji tekstu, w tym Notatnik lub Word dla Windows i Edytor tekstu dla komputerów Mac, może być używana do tworzenia dokumentów HTML. Otwórz nowy dokument i wybierz Plik → Zapisz jako z górnego menu, aby zapisać dokument jako stronę internetową lub zmień rozszerzenie pliku z „.doc”, „.rtf” lub cokolwiek innego na „.html” lub „.htm ”.
- Możesz teraz zobaczyć ostrzeżenie informujące, że dokument jest zmieniany z formatu Rich Text Format (RTF) na format „zwykłego tekstu” oraz że niektóre opcje formatowania i obrazy nie są prawidłowo zapisywane. Możesz zignorować to ostrzeżenie; Dokumenty HTML nie używają tych opcji.
- Pliki .html i .htm są takie same. To działa.
Wyświetl dokument w przeglądarce. Zapisz pusty dokument, zamknij go, a następnie kliknij dwukrotnie dokument w miejscu, w którym został zapisany, aby ponownie go otworzyć. Twój dokument powinien teraz zostać otwarty przez Twoją przeglądarkę jako pusta strona internetowa. Jeśli to nie zadziała, przeciągnij ikonę pliku na pasek adresu przeglądarki. Później, jeśli edytujesz dokument HTML zgodnie z instrukcjami w tym artykule, będziesz wracać do przeglądarki, aby sprawdzić, jak wyglądają zmiany w kodzie.
- Uwaga: Twoja strona internetowa nie jest jeszcze online. Strona nie jest dostępna dla innych i nie potrzebujesz działającego połączenia internetowego, aby ją przetestować. Wystarczy użyć przeglądarki, aby „czytać” dokument HTML tak, jakby to była witryna internetowa.
Dowiedz się, czym są „tagi”. Tagi nie są widoczne na końcowej stronie internetowej, tak jak zwykły tekst. Tagi informują przeglądarkę, jak wyświetlić stronę i zawartość strony. Tag początkowy zawiera instrukcje. Na przykład może powiedzieć przeglądarce, aby wyświetlała tekst pogrubiony. Znacznik końcowy jest potrzebny, aby poinformować przeglądarkę, gdzie mają zastosowanie instrukcje: w tym przykładzie cały tekst między tagiem początkowym i końcowym jest pogrubiony. Znaczniki końcowe są również umieszczane w nawiasach, ale po pierwszym nawiasie znajduje się ukośnik.
- Wpisz tagi początkowe w nawiasach: to jest dzień rozpoczęcia>
- Wpisz znaczniki końcowe w nawiasach, ale po pierwszym nawiasie umieść ukośnik: /to jest tag zamykający>)
- Przeczytaj w dalszej części artykułu, jak pisać tagi funkcjonalne. W tym kroku musisz tylko zapamiętać, w jaki sposób pisać tagi:> i />.
- W innych kursach HTML znaczniki są również określane jako „elementy”, a tekst między tagami otwierającymi i zamykającymi jest również określany jako „zawartość elementu”.
Wpisz swój pierwszy tag html>. Każdy dokument HTML zaczyna się od html>i kończy się na / html>etykietka. To mówi przeglądarce, że wszystko pomiędzy tymi tagami jest napisane w HTML. Dodaj te tagi do swojego dokumentu:
- pisać html> u góry dokumentu.
- Wciśnij Enter lub wróć kilka razy, aby dać sobie trochę miejsca, a następnie napisz / html>
- Pamiętam cię wszystko w tym artykule między tymi dwoma tagami.
Uczyń głowę> częścią swojego dokumentu. Pomiędzy tagami html> i / html> piszesz głowa>tag początkowy i / head>-end tag. Zrób jeszcze raz trochę miejsca między tymi tagami. Cokolwiek zapisane między tymi tagami nie będzie widoczne na samej stronie internetowej. Spróbuj wykonać następujące czynności i sprawdź, czy możesz zobaczyć, gdzie pojawiają się informacje:
- Pisz między tagami head> i / head>: tytuł> i / tytuł>
- Między tagami title> i / title> piszesz: Jak uczyć się HTML (ze zdjęciami) - wikiHow.
- Zapisz dokument i otwórz go w przeglądarce (lub zapisz dokument i odśwież stronę w przeglądarce, jeśli strona była nadal otwarta). Czy widzisz to, co właśnie napisałeś, u góry strony, nad paskiem adresu?
Utwórz sekcję body>. Cała reszta tego dokumentu dla początkujących jest umieszczona w sekcji body> i jest wyświetlana na stronie internetowej. Po tag / head>, ale przed tag / html> piszesz ciało> i / body>. Wszystko, co omówimy w dalszej części tego artykułu, umieszczamy między tagami body. Powinieneś teraz mieć dokument, który wygląda następująco (bez punktorów):
- html>
- głowa>
- tytuł> poznaj HTML - wikiHow / title>
- / head>
- ciało>
- / body>
- / html>
Dodaj tekst w różnych stylach. Czas zacząć pisać coś, co faktycznie będzie widoczne w przeglądarce! Wszystko, co napiszesz w tagach body, będzie widoczne w przeglądarce po zapisaniu zmian i odświeżeniu strony w przeglądarce. pisać nie coś ze znakami i >ponieważ twoja przeglądarka zinterpretuje to jako instrukcję HTML zamiast zwykłego tekstu. Napisz na przykład Witaj świecie! (Angielski dla „Hello world!”, To jest globalny standardowy tekst jako pierwszy przykład dowolnego kursu programowania w określonym języku programowania) lub coś innego i umieść następujące tagi przed i po tekście i zobacz, co się stanie:
- em> Witaj świecie! / em> wygląda jak tekst pisany kursywą: Witaj świecie!
- strong> Witaj, świecie! / strong> wygląda jak pogrubiony tekst: Witaj świecie!
- s> Witaj świecie! / s> wygląda jak tekst przekreślony: ~~Witaj świecie!~~
- sup> Witaj świecie! / sup> wygląda jak indeks górny:
- sub> Witaj świecie! / sub> wygląda jak podpis: _{Witaj świecie!}
- Wypróbuj kombinacje: jak widzi em> strong> Witaj świecie! / strong> / em> wyjść?
Podziel tekst na akapity. Jeśli umieścisz w dokumencie różne wiersze tekstu, zobaczysz, że wszystkie wiersze są umieszczane jeden po drugim. Musisz sam zaprogramować nowe wiersze i puste wiersze:
- p> To jest osobna sekcja./p>
- To zdanie znajduje się w pierwszym wierszu, a to zdanie w następnym.
  To pierwszy tag, na który natrafiliśmy, który nie potrzebuje tagu końcowego! Nazywamy taki tag pusty tag.
- Utwórz nagłówki, aby nazwy sekcji były jasne:
  h1> nagłówek / h1>: największy możliwy nagłówek
  h2> nagłówek / h2> (nagłówek 2-poziomowy)
  h3> nagłówek / h3> (3-poziomowy nagłówek)
  h4> nagłówek / h4> (4-poziomowy nagłówek)
  h5> nagłówek / h5> (najmniejszy możliwy nagłówek)
Dowiedz się, jak tworzyć listy. Istnieje kilka sposobów tworzenia list na stronie internetowej. Wypróbuj poniższe metody, aby dowiedzieć się, co lubisz najbardziej. Zwróć uwagę, że jedna para tagów jest umieszczana wokół całej listy (na przykład znaczniki ul> i / ul> w przypadku list nieuporządkowanych), a inna para tagów jest umieszczana wokół każdego elementu na liście, na przykład li> i / li> .
- Użyj poniższego kodu, aby utworzyć listy punktowane:
  ul> li> One item / li> li> Another item / li> li> Another item / li> / ul>
- Lub ten kod do tworzenia numerowanych list:
  ol> li> Przedmiot 1 / li> li> Przedmiot 2 / li> li> Przedmiot 3 / li> / ol>
- Lub ten kod, aby utworzyć tak zwaną listę definicji:
  dl> dt> Kawa / dt> dd> - Napój gorący / dd> dt> Mleko / dt> dd> - Napój zimny / dd> / dl>
Zwiększ atrakcyjność swojej strony dzięki nowym liniom, poziomym liniom i obrazom. Teraz nadszedł czas, aby zacząć dodawać inne rzeczy do swojej strony. Wypróbuj następujące tagi (zdjęcie musi zostać opublikowane online, aby można było użyć łącza do obrazu):
- Wstaw linię: br> lub hr>
- Wstaw obrazy: img src = "the_url_of_your_image">
Wstaw linki do innych miejsc na stronie. Możesz również użyć tego kodu do tworzenia linków do innych stron i witryn internetowych, ale ponieważ nie masz jeszcze witryny internetowej, skupimy się na „kotwicach”, czyli określonych miejscach na stronie, do których możesz utworzyć link:
- Najpierw utwórz kotwicę ze znacznikiem a> w miejscu na stronie, do którego ma prowadzić łącze. Nadaj kotwicy jasną, łatwą do zapamiętania nazwę:
  
  a name = "Tips"> To jest tekst, wokół którego umieszczasz kotwicę./a>
- Użyj tagu href>, aby utworzyć link do swojej kotwicy lub innej strony internetowej:
  
  a href = "adres URL strony internetowej lub nazwa kotwicy na tej stronie"> Wpisz tutaj tekst lub obraz wyświetlany jako łącze./a>
- Aby utworzyć łącze do kotwicy na innej stronie, dodaj znak # po adresie URL, a po nim nazwę kotwicy. Na przykład http://www.wikihow.com/HTML-leren#Tips przeniesie Cię bezpośrednio do sekcji „Wskazówki” na tej stronie.

Część 2 z 2: Nauka zaawansowanego HTML

Dowiedz się o atrybutach. Atrybuty są umieszczane w tagu i służą do wprowadzania dodatkowych zmian w „zawartości elementu” między tagiem początkowym i końcowym. Nigdy nie stoją samotnie. Są napisane w następujący sposób: nazwa = "wartość". Nazwa reprezentuje nazwę atrybutu (na przykład „kolor”), a wartość opisuje ten konkretny przypadek (np. „czerwony”).
- Jeśli uważnie przyjrzałeś się poprzedniej części tego artykułu, napotkałeś już atrybuty. Znacznik img> używa atrybutu src, kotwica używa atrybutu Nazwa a linki używają atrybutu href. Można powiedzieć, że wszystkie mają odpowiedni rozmiar ___='___’ podążać.
Eksperymentuj z tabelami HTML. Aby utworzyć tabelę lub wykres, potrzebujesz kilku tagów:
- Zacznij od tagów tabeli („table” w języku angielskim) otaczających całą tabelę:stół> / stół>
- Umieść tagi wokół zawartości każdego wiersza: tr>
- Umieść nagłówki kolumn w pierwszym wierszu: th>
- Umieść komórki w kolejnych wierszach: td>
- Oto przykład tego, jak to wszystko się łączy:
  
  table> tr> th> Kolumna 1: Miesiąc / th> th> Kolumna 2: zaoszczędzone pieniądze / th> / tr> tr> td> styczeń / td> td> 100 € / td> / tr> / table>
Zapoznaj się z innymi tagami używanymi w sekcji nagłówka. Poznałeś już nagłówek tagu>, który umieszczasz na początku każdego dokumentu. Oprócz tagu title> w sekcji head mogą znajdować się inne tagi:
- Do tworzenia plików używane są metatagi metadane o stronie internetowej. Dane te są wykorzystywane przez wyszukiwarki do kategoryzowania stron internetowych. Aby Twoja strona była widoczna dla wyszukiwarek, możesz umieścić jeden lub więcej metatagów (tagi końcowe nie są konieczne), każdy tag musi zawierać dokładnie jeden atrybut nazwy i atrybut treści, na przykład: meta name = "description" content = "wstaw tutaj opis ">; lub meta name = "słowa kluczowe" content = "wpisz tutaj listę słów kluczowych, zawsze oddzielonych przecinkiem">
- link> tagi służą do łączenia innych plików ze stroną. Zwykle używane do kojarzenia arkuszy stylów CSS ze stronami HTML, strony te są zbudowane z innego rodzaju kodu i służą do określenia ogólnego stylu strony.
- Znaczniki script> służą do kojarzenia plików javascript ze stroną HTML. JavaScript umożliwia zmianę strony, jeśli użytkownik zrobi coś na stronie.
Graj z HTML z istniejących stron. Przeglądanie kodu źródłowego stron internetowych to świetny sposób na poszerzenie wiedzy na temat języka HTML. Kliknij stronę prawym przyciskiem myszy i wybierz „Wyświetl źródło”, „Pokaż źródło strony” lub podobne. Dowiedz się, co robi konkretny tag, którego nie znasz, lub wyszukaj odpowiedź w Internecie.
- Nie możesz edytować witryn internetowych innych osób, ale możesz skopiować kod HTML do własnego dokumentu i poeksperymentować z nim, aby zobaczyć, jakie są różne zmiany. Uwaga: ponieważ wiele witryn korzysta z arkuszy stylów CSS, możesz nie widzieć wielu kolorów lub innych stylów.
Dowiedz się o HTML, czytając bardziej szczegółowe artykuły. W Internecie jest wiele zasobów umożliwiających opanowanie większej liczby tagów HTML, takich jak W3Schools lub Codecademy. Dostępnych jest również wiele książek w formacie HTML, ale upewnij się, że używasz najnowszego wydania, ponieważ standard HTML zmienia się od czasu do czasu. Po opanowaniu języka HTML na dobrym poziomie możesz skorzystać z CSS, aby uzyskać większą kontrolę nad projektem i stylem swojej strony internetowej. Następnie następnym krokiem jest zwykle JavaScript.

Porady

Warto znaleźć prostą stronę internetową w Internecie, a następnie zacząć bawić się kodem. Spróbuj przenieść tekst, zmienić czcionkę, zmienić obrazy, cokolwiek chcesz!
Możesz użyć notatnika do zapisania kodu, aby mieć coś, na czym możesz się oprzeć, jeśli nie pamiętasz go przez chwilę. Możesz również wydrukować tę stronę i zachować ją w celach informacyjnych.
XML i RSS są obecnie coraz częściej używane na stronach internetowych. Kod może wyglądać na niedostępny dla ludzkiego oka, zwłaszcza gdy jest oglądany w kodzie źródłowym, ale funkcjonalność może być przydatna.
W tagach używanych w HTML nie jest rozróżniana wielkość liter, ale domyślnie są używane małe litery (tak jak robimy to w tym artykule). Zalecane są małe litery w tagach, również ze względu na zgodność z XHTML.

Ostrzeżenia

Niektóre tagi nie są już używane i zostały zastąpione innymi tagami, które robią to samo, ale często oferują więcej opcji.
Jeśli chcesz się upewnić, że Twoja strona jest zgodna ze standardem HTML, przejdź do witryny W3, aby przetestować swój kod pod kątem obecnego standardu. Wiele tagów stało się przestarzałych i zostało zastąpionych tagami, które działają lepiej w nowoczesnych przeglądarkach.

Potrzeby

Program do edycji tekstu, taki jak Notatnik (Windows) lub Edytor tekstu (Mac).
kartka papieru lub zeszyt (opcjonalny)
Program specjalnie zaprojektowany do pisania HTML, taki jak Notepad ++ dla Windows lub TextWrangler dla Mac (opcjonalny)