Plik HTML to po prostu plik tekstowy zapisany z rozszerzeniem .html lub .htm.
Zaczynamy
W tym tutorialu dowiesz się jak łatwo jest stworzyć dokument HTML lub stronę internetową. Aby rozpocząć kodowanie HTML potrzebujesz tylko dwóch rzeczy: prostego edytora tekstu i przeglądarki internetowej.
Zacznijmy więc od stworzenia twojej pierwszej strony HTML.
Tworzenie twojego pierwszego dokumentu HTML
Przejdźmy przez następujące kroki. Pod koniec tego kursu, będziesz miał plik HTML, który wyświetla wiadomość „Hello world” w przeglądarce internetowej.
Krok 1: Tworzenie pliku HTML
Otwórz edytor tekstu na swoim komputerze i utwórz nowy plik.
Porada: Sugerujemy, abyś użył Notatnika (w Windows), TextEdit (w Mac) lub innego prostego edytora tekstu, aby to zrobić; nie używaj Worda lub WordPada! Kiedy już zrozumiesz podstawowe zasady, możesz przejść do bardziej zaawansowanych narzędzi, takich jak Adobe Dreamweaver.
Krok 2: Wpisz trochę kodu HTML
Zacznij od pustego okna i wpisz następujący kod:
Przykład
Wypróbuj ten kod ”
<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>Krok 3: Zapisywanie pliku
Następnie zapisz plik na pulpicie jako „myfirstpage.html „.
Uwaga: Ważne jest, aby określić rozszerzenie .html – niektóre edytory tekstu, takie jak Notatnik, automatycznie zapiszą go jako .txt w przeciwnym wypadku.
Aby otworzyć plik w przeglądarce. Przejdź do swojego pliku, a następnie kliknij na niego dwukrotnie. Zostanie on otwarty w domyślnej przeglądarce internetowej. Jeśli tak się nie stanie, otwórz przeglądarkę i przeciągnij do niej plik.
Wyjaśnienie kodu
Możesz się zastanowić, o co chodziło z tym kodem. Cóż, dowiedzmy się.
- Pierwsza linia
<!DOCTYPE html>jest deklaracją typu dokumentu. Informuje ona przeglądarkę internetową, że ten dokument jest dokumentem HTML5. Wielkość liter nie ma znaczenia. - Element
<head>jest kontenerem dla znaczników, które dostarczają informacji o dokumencie, na przykład znacznik<title>definiuje tytuł dokumentu. - Znacznik
<body>zawiera rzeczywistą zawartość dokumentu (akapity, łącza, obrazy, tabele i tak dalej), która jest renderowana w przeglądarce internetowej i wyświetlana użytkownikowi.
Szczegółowe informacje o różnych elementach HTML poznasz w kolejnych rozdziałach. Na razie skup się na podstawowej strukturze dokumentu HTML.
Uwaga: Deklaracja DOCTYPE pojawia się na górze strony internetowej przed wszystkimi innymi elementami; jednak sama deklaracja doctype nie jest znacznikiem HTML. Każdy dokument HTML wymaga deklaracji typu dokumentu, aby zapewnić, że strony są wyświetlane poprawnie.
Porada: Znaczniki <html><head>, oraz <body> tworzą podstawowy szkielet każdej strony internetowej. Zawartość wewnątrz znaczników <head> i </head> jest niewidoczna dla użytkowników z jednym wyjątkiem: tekstu pomiędzy znacznikami <title> i </title>, który pojawia się jako tytuł na karcie przeglądarki.
Znaczniki i elementy języka HTML
HTML jest zapisany w postaci elementów HTML składających się ze znaczników. Znaczniki znaczników są podstawową cechą języka HTML. Każdy znacznik składa się ze słowa kluczowego, otoczonego nawiasami kątowymi, jak na przykład <html><head><body><title><p>, i tak dalej.
ZnacznikiHTML zazwyczaj występują w parach, takich jak <html> i </html>. Pierwszy znacznik w parze jest często nazywany znacznikiem otwierającym (lub znacznikiem początkowym), a drugi znacznik jest nazywany znacznikiem zamykającym (lub znacznikiem końcowym).
Znacznik otwierający i znacznik zamykający są identyczne, z wyjątkiem ukośnika (/) po otwierającym nawiasie kątowym znacznika zamykającego, aby poinformować przeglądarkę, że polecenie zostało zakończone.
Pomiędzy znacznikami początkowym i końcowym można umieścić odpowiednią zawartość. Na przykład akapit, który jest reprezentowany przez element p, można zapisać w następujący sposób:
Przykład
Wypróbuj ten kod”
<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>W następnym rozdziale poznasz różne elementy HTML.