Ta seria samouczków poprowadzi Cię przez tworzenie i dalsze dostosowywanie tej strony internetowej przy użyciu HTML, standardowego języka znaczników używanego do wyświetlania dokumentów w przeglądarce internetowej. Nie jest wymagane wcześniejsze doświadczenie w kodowaniu, ale zalecamy rozpoczęcie od początku serii, jeśli chcesz odtworzyć stronę demonstracyjną.
Pod koniec tej serii powinieneś mieć stronę internetową gotową do wdrożenia w chmurze i podstawową znajomość HTML. Umiejętność pisania kodu HTML będzie stanowiła solidną podstawę do nauki dodatkowych umiejętności związanych z tworzeniem stron internetowych, takich jak CSS i JavaScript.
Ten kurs wprowadzi Cię do podstawowego dokumentu HTML i nauczy Cię, jak przeglądać kod źródłowy dokumentu HTML w przeglądarce.
HTML jest używany do oznaczania dokumentu za pomocą instrukcji, które mówią przeglądarce, jak wyświetlać i interpretować zawartość dokumentu. Na przykład, HTML może powiedzieć przeglądarce, która zawartość tekstowa powinna być interpretowana jako nagłówek, a która jako akapit. HTML jest również używany do dodawania obrazów i przypisywania linków do tekstu i obrazów. Instrukcje te są przekazywane za pomocą znaczników HTML, które są zapisywane w taki sposób: <tagname>. Wiele znaczników, choć nie wszystkie, używa znacznika otwierającego i zamykającego, aby owinąć wokół treści, do której modyfikacji są używane.
Aby zrozumieć jak te znaczniki są używane, spójrzmy na wycinek kodu HTML. Poniższy kod HTML pokazuje, jak znaczniki HTML są używane do strukturyzacji tekstu oraz dodawania linków i obrazów. Nie przejmuj się, jeśli nie rozumiesz znaczników od razu – zajmiemy się tym w następnym poradniku.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Ten kod HTML jest renderowany w przeglądarce w następujący sposób:
Powinieneś teraz zrozumieć, jak przykładowy kod HTML jest renderowany w przeglądarce. Następnie dowiemy się, jak przeglądać kod źródłowy dowolnej strony internetowej za pomocą narzędzia przeglądarki.
Przeglądanie kodu źródłowego strony internetowej
Prawie każda strona internetowa, którą napotkasz używa HTML do struktury i wyświetlania stron HTML. Możesz sprawdzić kod źródłowy dowolnej strony internetowej, używając przeglądarki internetowej, takiej jak Firefox lub Chrome. W Firefoksie przejdź do pozycji „Narzędzia” w górnym menu i kliknij na „Programista WWW/Źródło strony” w ten sposób:
W Firefoksie można również użyć skrótu klawiaturowego Command-U, aby wyświetlić kod źródłowy strony internetowej.
W przeglądarce Chrome proces ten jest bardzo podobny. Przejdź do górnej pozycji menu „Widok” i kliknij na „Deweloper/Wyświetl źródło”. Możesz też użyć skrótu klawiaturowego Option-Command-U.
Spróbuj przejrzeć kod źródłowy strony demo, którą zbudujemy w tej serii tutoriali. Powinieneś otrzymać stronę zawierającą o wiele więcej znaczników HTML niż nasz przykład powyżej. Nie bądź zaniepokojony, jeśli wydaje się to przytłaczające. Pod koniec tego kursu powinieneś lepiej rozumieć, jak interpretować kod źródłowy HTML i jak używać HTML do budowania i dostosowywania własnych stron internetowych.
Uwaga: Jak wspomniano powyżej, możesz sprawdzić kod źródłowy dowolnej strony internetowej używając narzędzi z przeglądarki Firefox lub Chrome. Spróbuj sprawdzić kod kilku swoich ulubionych stron, aby poznać strukturę kodu dokumentów internetowych. Mimo że kod źródłowy tych stron będzie prawdopodobnie zawierał więcej języków niż HTML, nauka HTML pomoże Ci przygotować się do nauki dodatkowych języków i frameworków do tworzenia stron internetowych w późniejszym czasie, jeśli będziesz tego chciał.