HTML Samouczek dla początkujących

Jeśli chcesz zostać webmasterem i nauczyć się tworzyć strony internetowe, możesz uznać, że perspektywa zapoznania się z językiem HTML jest dość zniechęcająca.

Jest to coś, czego nie można uniknąć, jednak, ponieważ zdecydowana większość stron internetowych, które odwiedzasz, została napisana i skonstruowana przy użyciu elementów HTML. W rzeczywistości, HTML jest obecnie używany przez ponad 74% wszystkich znanych stron internetowych, podczas gdy ten język pomaga również poprawić wszystko, od projektu witryny do jakości treści, które zawiera.

W tym przewodniku, będziemy badać podstawowe zasady HTML i jego potencjalne zastosowania, przed spojrzeniem na przykłady poszczególnych elementów, które są używane podczas kodowania witryny.

Co to jest HTML?

W prostych słowach, HTML reprezentuje standardowy język znaczników do tworzenia stron internetowych online. Jest to skrót od Hyper Text Markup Language, a jego najbardziej podstawową funkcją jest ustanowienie struktury, układu i prezentacji poszczególnych stron docelowych. Podczas gdy przeglądarki internetowe nie wyświetlają bezpośrednio języka HTML, odgrywa on kluczową rolę w tworzeniu widocznej, dostępnej i łatwej w użyciu witryny.

HTML jest również oparty na wielu indywidualnych elementach, które stopniowo budują strony internetowe, strukturyzują prezentację treści i ożywiają twoją witrynę. Elementy te są tworzone i zawarte w „znacznikach”, które definiują alternatywne części treści, takie jak nagłówki, akapity i podobne przykłady.

Będziemy badać te elementy i ich konstrukcję bardziej szczegółowo poniżej, jednocześnie patrząc na to, jak można je spersonalizować, aby wprowadzić kolor, linki i zmienną typografię do witryny.

Gdzie jest używany HTML?

Jak widzimy, najczęstszym zastosowaniem HTML jest projektowanie poszczególnych stron docelowych, które składają się na Twoją witrynę. Nie jest to jedyne zastosowanie tego popularnego narzędzia kodowania, jednak zrozumienie jego dodatkowych zastosowań pomoże Ci w pełni wykorzystać możliwości tego języka jako początkującemu webmasterowi. Tak więc, oto niektóre z dalszych sposobów, w jaki HTML może być zastosowany:

• Tworzenie elementów konfigurowalnych w ramach istniejącej strony. Jeśli zamierzasz umożliwić komentowanie wpisów na blogu lub publikację treści generowanych przez użytkowników na swojej stronie, możesz użyć fragmentów kodu HTML, aby to umożliwić. Te elementy umożliwią użytkownikom podkreślanie słów kluczowych, osadzanie łączy i formatowanie komentarzy w zależności od ograniczeń, które wprowadzisz jako moderator.
• Twórz dodatkową zawartość dla poczty elektronicznej. Email używa również HTML jako języka dla bogatych wiadomości tekstowych, które zawierają linki, tekst i wiele innych elementów, które nie mogą być przedstawione w zwykłym tekście. Tak więc, jeśli chcesz udostępnić ebook, który odnosi się do swojej witryny za pośrednictwem poczty e-mail, można wykorzystać HTML do optymalizacji wpływu wiadomości.
• Zrozumienie dokumentów pomocy offline, które są zainstalowane na komputerze. Co ciekawe, HTML jest używany jako format dla komputerowych dokumentów pomocy, które są dostępne w trybie offline. Podstawowa znajomość HTML może więc pomóc w zrozumieniu problemów ze sprzętem i szybszym ich rozwiązywaniu, co z kolei może zapewnić szybsze przywrócenie witryny w przypadkach, gdy przestała ona działać.

Struktura stronyHTML

Zanim będziesz mógł zbudować stronę html, potrzebujesz podstaw na miejscu.

Typowo, strona będzie składała się z trzech elementów strukturalnych:

1. Nagłówek: Nagłówek zawiera treści istotne dla wszystkich stron w Twojej witrynie, takie jak logo lub nazwa witryny, a także system nawigacji. Nagłówek jest widoczny na każdej stronie.
2. Główne ciało: Zajmuje największy obszar na stronie internetowej. Zawiera treść właściwą dla przeglądanej strony.
3. Stopka: Zawartość stopki zwykle zawiera informacje kontaktowe, adres wysyłki lub informacje prawne. Podobnie jak nagłówek, stopka pojawia się na każdej stronie, ale jest umieszczona na dole.

Oto, jak wyglądają te podstawowe elementy strukturalne, gdy występują razem:

Jest to kolejny przykład użycia znaczników nagłówka i akapitu do estetycznego uporządkowania treści. Dodatkowo, dorzuciliśmy znacznik stopki dla treści poniżej głównej części strony:

ZnacznikiHTML

Punktem wyjścia dla każdego kodu HTML są poszczególne znaczniki, które mogą być używane do tworzenia wszystkich kluczowych elementów i pomagają nadać strukturę Twoim stronom internetowym.

Poniżej przyjrzymy się najbardziej powszechnym znacznikom, zanim zbadamy, jak można je wykorzystać do wygenerowania konkretnych elementów na stronie:

Znaczniki nagłówka

Wszystkie dokumenty online, w tym strony internetowe, zaczynają się od nagłówka. Są one konstruowane przy użyciu znaczników HTML, przy czym język ten pozwala obecnie na stosowanie do sześciu elementów o różnej wielkości, które umożliwiają również nadanie treści struktury za pomocą dodatkowych tytułów, podtytułów i wyróżnionych linii pogrubionego tekstu. Aby rozpocząć nagłówek, wystarczy poprzedzić odpowiedni tekst znacznikiem <h1> , <h2> , <h3> , <h4> , <h5> lub <h6> w zależności od pożądanego rozmiaru.

Następnie należy zastosować znacznik zamykający na końcu nagłówka, aby zamknąć tekst, który zostanie wyświetlony w następujący sposób w formacie HTML:

Po potwierdzeniu przełoży się to na następującą estetykę na landing page’u Twojej witryny:

W tym miejscu wyraźnie widać różne rozmiary zmiennych nagłówków, podobnie jak fakt, że przeglądarka dodaje linię przed i po nagłówku. Można również zauważyć, że znacznik zamykający na końcu tekstu nagłówka ma nieco inną estetykę, ale zajmiemy się tym w następnym rozdziale, gdy będziemy używać znaczników do definiowania konkretnych elementów.

Znaczniki akapitu

Podobna zasada jest stosowana do znaczników rozpoczynających akapit, które są przedstawiane przez <p>. Pozwala to na ustrukturyzowanie treści i podzielenie jej na odpowiednie akapity, co z kolei przekłada się na łatwiejsze i bardziej płynne czytanie. Po raz kolejny, znacznik <p> powinien być umieszczony na początku tekstu, a na końcu należy zastosować znacznik zamykający, aby dopełnić efektu. W przeciwieństwie do znaczników nagłówków, nie ma tu jednak różnych liczb, które mogłyby zmienić rozmiar tekstu umieszczonego w akapicie.

Poza formatem HTML, spowoduje to następujący podział tekstu na gotowej stronie internetowej:

Znaczniki przerwania linii

Pierwsze przykłady reprezentują najbardziej podstawowe znaczniki HTML, ale istnieją inne, które wykorzystują inny format i alternatywne zamknięcia. Weźmy na przykład podziały linii, które tworzą rozróżnienie, w którym wierszu tekstu są łamane i kontynuowane w następnej linii. Istnieje zasadnicza różnica między łamaniem linii a akapitami w dziedzinie HTML, ponieważ podczas gdy te ostatnie są standardowymi elementami blokowymi, które zawierają tekst, te pierwsze tworzą separację w ramach istniejącego elementu <p>.

Z tego powodu, łamanie linii reprezentuje pusty element w HTML i dlatego nie jest zdefiniowane przez znaczniki otwierające lub zamykające. Zamiast tego są one przedstawiane za pomocą znacznika <br />, który można wstawić do istniejących elementów <p>, aby rozbić tekst i potencjalnie podkreślić ważne fragmenty informacji. Pojedyncza spacja między znakiem <be> a ukośnikiem w przód jest kluczowa, ponieważ w przeciwnym razie znacznik nie jest rozpoznawalny w formacie HTML.

Po zastosowaniu, spowoduje to rozbicie tekstu w następujący sposób:

Jak widzisz, możesz stosować podziały wiersza tak często, jak chcesz, w ramach istniejącego elementu akapitu, tak długo, jak dodają one wartość i sprawiają, że informacja jest łatwiejsza do strawienia. Zobaczysz również, że znaczniki otwierające i zamykające akapit pozostają niezmienione, a znaczniki łamania linii są używane do zmiany układu tekstu zawartego wewnątrz.

Jest to jeden z przykładów tego, jak znaczniki HTML mogą być używane do zmiany istniejących elementów, co odgrywa kluczową rolę w określaniu wizualnego układu stron internetowych i treści.

Linie poziome

Podobnie, istnieją inne znaczniki, które mogą być użyte wewnątrz elementu <p> lub do dalszego oddzielania ciał tekstu na twojej stronie internetowej. Jednym z najczęściej używanych jest znacznik <hr>, który pomaga utworzyć pusty element, który rysuje wizualną, poziomą linię pomiędzy naprzemiennymi sekcjami dokumentu online. Może się zdarzyć, że chcesz umieścić linię pomiędzy dwoma częściami tekstu, na przykład po to, aby skupić uwagę czytelnika lub po prostu wprowadzić nowy element wizualny. Oto jak tworzy się taką przerwę w języku HTML:

Tutaj łamanie pomiędzy znakami hr i forward slash podkreślają konstrukcję pustego elementu, podczas gdy po raz kolejny nie ma znacznika zamykającego wymaganego do zakończenia efektu. W ten sposób powstanie następujący obraz:

Znaczniki obrazu

Znaczniki obrazu również reprezentują puste elementy w HTML, co po raz kolejny oznacza, że nie posiadają znacznika zamykającego. Ponieważ zawierają one tylko atrybuty, które odnoszą się do adresu URL obrazu, który osadzasz na stronie, są one zdefiniowane po prostu przez znacznik <img > na początku elementu. Mogą one być umieszczone w dowolnym miejscu na stronie, chociaż nie jest to niezwykłe, aby włączyć je do istniejących elementów, takich jak akapity lub nagłówki. Oto jak będzie się prezentował typowy znacznik HTML image:

Powinieneś również dostarczyć tekst zastępczy dla swojego obrazu, który pomoże ludziom w jego wyświetleniu w przypadku wolnych czasów ładowania lub użycia czytnika ekranu. W ten sposób, jeśli przeglądarka nie może znaleźć obrazu, wyświetli wartość atrybutu alternatywnego dla widzów. To po raz kolejny wykorzystuje znacznik image, ale zawiera inny zestaw atrybutów:

Elementy HTML

Poprzednio przyjrzeliśmy się, jak proste znaczniki HTML są używane do definiowania elementów na stronie, jednocześnie badając, jak można je dalej dostosowywać poprzez użycie pustych elementów zawierających znaczniki image i line break. To pomoże nam zrozumieć związek, jaki istnieje między znacznikami i elementami oraz jak mogą być one używane do definiowania różnych typów zawartości na stronie internetowej.

Podczas gdy wszystkie aspekty języka HTML są reprezentowane przez znacznik, na przykład zdefiniowany element, który zawiera zawartość, musi mieć zarówno znacznik początkowy, jak i końcowy. Tak więc, nagłówki i akapity są elementami HTML, ponieważ używają znaczników początkowych i końcowych do zamknięcia i rozszerzenia odpowiedniego tekstu. W przeciwieństwie do nich, elementy puste albo zawierają atrybuty, albo w ogóle nie zawierają zawartości, co pozwala na ich użycie wewnątrz istniejących elementów bez potrzeby stosowania znacznika zamykającego.

Definiowanie elementów HTML

Przy użyciu przykładów takich jak nagłówki i akapity, prawidłowe zastosowanie znaczników początkowych i zamykających jest kluczowe. To właśnie znacznik początkowy (taki jak <h1> lub <p>) definiuje na przykład dany element, podczas gdy znacznik zamykający zapewnia, że element ten nie jest kontynuowany w pozostałej części strony internetowej. Jeśli na przykład nie użyjesz znacznika zamykającego </ p> na końcu żądanego akapitu, tekst pojawi się w pojedynczym bloku, który jest nieestetyczny i bardzo trudny do odczytania.

Wszystkie znaczniki zamykające są identyczne ze znacznikami początkowymi, z wyjątkiem tego, że te pierwsze posiadają ukośnik w przód przed odpowiednimi znakami. Tak więc w przypadku nagłówka <h1>, znacznikiem zamykającym będzie </ h1> , podczas gdy dla akapitów zawsze będziesz używał </ p> do określenia przerwy w tekście. Wymaga to zwracania uwagi na szczegóły podczas kodowania i ważne jest, aby pamiętać podczas programowania nagłówków, że numer, którego używasz (taki jak h1 lub h2) jest stosowany zarówno w znacznikach początkowych, jak i końcowych.

Używanie zagnieżdżonych elementów HTML

Na tym etapie, jasne jest, że dokumenty HTML i strony internetowe są tworzone przez drzewo różnych elementów, które służą jako budulec dla szeregu zasobów. Przyjrzeliśmy się również, jak te elementy mogą być formowane i używane do struktury treści online, i będziemy kontynuować to teraz, patrząc na zagnieżdżone elementy HTML.

Tak jak puste elementy i samodzielne znaczniki (jak <br / >mogą być włączone do zdefiniowanych elementów HTML, tak zwane zagnieżdżone elementy mogą być również umieszczone w treści, takich jak nagłówki i akapity. Obejmują one takie przykłady, jak pogrubienie i kursywa oraz podkreślenie tekstu, podczas gdy mogą być stosowane w celu dodania osobowości do treści i przyciągnięcia wzroku czytelnika do określonych punktów zainteresowania.

Pogrubienie, kursywa i przekreślenie tekstu w HTML

Powiedzmy, że chcesz podkreślić słowo w istniejącym elemencie akapitu. Możesz to osiągnąć poprzez pogrubienie go, używając prostych znaczników wewnątrz standardowego elementu <p>. Używając HTML, zaprogramujesz to w następujący sposób:

W tym przypadku element zagnieżdżony posiada znacznik początkowy i zamykający, z których każdy ma format podobny do formatu znaczników związanych z nagłówkami i akapitami. Można ich używać bezproblemowo w ramach istniejących elementów, a w tym przypadku da to następujące rezultaty:

Teraz powiedzmy, że chciałbyś również zmienić typografię tego słowa tak, aby było ono również kursywą. Można to osiągnąć po prostu poprzez dodanie kolejnego elementu zagnieżdżonego, który powinien być zakodowany w ten sposób:

Jak widać, znaczniki początku i końca kursywy zostały po prostu włączone do elementu <p>. Spowoduje to teraz przekształcenie zawartości wewnątrz elementu tak, aby wyglądała ona następująco:

Oczywiście, możesz zdecydować, że wolałbyś wyróżnić to słowo w inny sposób. Możesz więc użyć alternatywnego elementu zagnieżdżonego, takiego jak strikethrough (który jest reprezentowany przez znaczniki <s> i </s>. Znaczniki te można zastosować w ten sam sposób w elemencie <p>, występującym w języku HTML w następujący sposób:

W tym przypadku, tekst będzie wyglądał następująco na Twoim dokumencie lub stronie docelowej:

To oferuje wgląd w elementy, które mogą być tworzone przez znaczniki, co z kolei definiuje strukturę Twoich stron internetowych i treści, które się na nich znajdują. Nie tylko to, ale puste i zagnieżdżone elementy mogą być również używane do dalszego definiowania zawartości.

Atrybuty HTML

Jeśli znaczniki są budulcem, który konstruuje i definiuje elementy, to atrybuty HTML mogą być używane do dostosowywania ich cech (takich jak styl, kolor i język. Wszystkie elementy HTML mają podstawowe atrybuty, które dostarczają podstawowych informacji i są zawsze określone w znaczniku stat. Zwykle występują w parach, więc często pojawiają się w następującym formacie: name=”value.”

W prostych słowach, nazwa reprezentuje właściwość, którą chcesz ustawić, podczas gdy wartość odnosi się do konkretnych kryteriów, które chcesz uwzględnić.

Istnieje duża liczba atrybutów, które mogą być zastosowane do elementów HTML, ale te, które są najbardziej istotne dla początkujących webmasterów to:

Atrybut 'lang’

Jeden z najbardziej podstawowych atrybutów określa język dokumentu i jego elementów. Jest on deklarowany za pomocą atrybutu 'lang’ i choć łatwo go przeoczyć, ma on tę zaletę, że czyni treść bardziej dostępną dla czytników ekranu i wyszukiwarek. Zazwyczaj będzie on przedstawiony na początku dokumentu w następującym formacie:

Po atrybucie lang, pierwsze dwie litery określają język (w tym przypadku jest to angielski). Po myślniku, następne dwie litery określają dialekt, chociaż nie będzie on obecny dla każdego języka. Ważne jest, abyś dostał ten atrybut dobrze, jeśli chcesz skutecznie dotrzeć do swojej publiczności.

Atrybut 'align’

Mówiliśmy już o formacie atrybutów HTML (name=”value”), a najlepsze wcielenie tego występuje, gdy próbujesz wyrównać zawartość w swoich elementach. Możesz na przykład zdecydować się na wyśrodkowanie wszystkich akapitów na konkretnej stronie, przy czym wyrównanie jest właściwością, którą chcesz ustawić. Następnie, „center” jest wartością atrybutu, chociaż masz wybór wyrównania tekstu do lewej lub prawej.

To wyrówna twoje <p>elementy w środku strony i stworzy jednolity układ pasujący do specyfiki twojej witryny (zobacz poniżej):

Atrybut 'href’

Jeśli zamierzasz zbudować widoczną stronę internetową, ważne jest, abyś uwzględnił zarówno linki przychodzące, jak i wychodzące. Budowanie portfolio linków obejmującego linki zwrotne do wewnętrznych stron docelowych jest również opłacalną strategią, dlatego też należy nauczyć się kodować je w HTML.

LinkiHTML są zdefiniowane za pomocą znacznika <a>, który zawiera link docelowy wraz z powiązanym tekstem zakotwiczenia, który będzie zawierał adres URL. Jest to atrybut „href „, który określa adres strony, jednak jest to włączone jako część tagu startowego. Jest on zakodowany w HTML w następujący sposób:

To wyraźnie podkreśla rozróżnienie między tagiem początkowym a zamykającym i będzie się tłumaczyć w następujący sposób na Twojej stronie docelowej:

Atrybut 'color’

Jest to kolejny ważny atrybut, ponieważ użycie koloru może tchnąć życie w Twoją stronę internetową, jednocześnie pomagając stworzyć ważne kontrasty i silną estetykę projektu. W HTML, kolor może być określony poprzez użycie jego nazwy, chociaż możliwe jest również użycie wartości RGB lub HEX, aby osiągnąć ten cel. Ta pierwsza opcja jest jednak najłatwiejsza do naśladowania, podczas gdy może być również stosowana do nagłówków, akapitów i innych elementów na stronie.

Jest to atrybut stylu, z wybranym kolorem reprezentującym wartość, którą chciałbyś ustawić. Po zastosowaniu koloru czerwonego do nagłówka głównego, na przykład, będzie on wyglądał tak:

Po zastosowaniu ten element będzie wyglądał na Twojej stronie w następujący sposób:

Po raz kolejny widać wyraźne rozróżnienie między znacznikami początkowymi i zamykającymi, które definiują element, podczas gdy jest to jeden z najłatwiejszych do zastosowania atrybutów w HTML. Podkreśla to również format name=”value” atrybutów HTML, czyniąc proces nauki i stosowania tych atrybutów znacznie łatwiejszym w całej witrynie.

Sprawdź to sam

Z podstawowym zrozumieniem języka HTML i jego poszczególnych elementów, następnym krokiem jest podjęcie kilku prostych projektów i zastosowanie wiedzy teoretycznej do rozwiązywania praktycznych wyzwań.

W ćwiczeniu opisanym poniżej, przedstawiliśmy wyjątek tekstowy i poprosiliśmy o sformatowanie różnych aspektów przy użyciu języka HTML. Użyj przewodnika i wszystkiego, czego nauczyłeś się do tej pory, aby ukończyć to wyzwanie, przygotowując się do kodowania własnej strony internetowej.

Pytania:

1. Uzupełnij element nagłówka poprawnym znacznikiem zamykającym.
2. Pogrub nagłówek.
3. Wstaw poziomą linię pod nagłówkiem.
4. Użyj atrybutu color i odcień „Dzięki za odwiedziny” na zielono
5. Wstaw to hiperłącze (https://www.w3schools.com/html/) do tekstu zakotwiczenia „Dowiedz się więcej.”
6. W nagłówku strony użyj formatu name=”value”, aby wyrównać akapity do lewej

Statystyki i fakty dotyczące języka HTML

1. Elementy HTML, head i body są częścią specyfikacji HTML od połowy lat dziewięćdziesiątych i jeszcze kilka lat temu były podstawowymi elementami używanymi do nadawania struktury dokumentom HTML. Jednak sytuacja zmieniła się diametralnie w ciągu ostatnich kilku lat, ponieważ HTML5 dodał mnóstwo nowych znaczników, które mogą być użyte do dodania bogatego znaczenia semantycznego do struktury dokumentu HTML.
2. Dokumenty HTML muszą zaczynać się od deklaracji typu dokumentu (nieformalnie, „doctype”). W przeglądarkach, doctype pomaga zdefiniować tryb renderowania. HTML5 nie definiuje DTD; dlatego w HTML5 deklaracja doctype jest prostsza i krótsza.
3. Przeglądarki mobilne w pełni przyjęły HTML5, więc tworzenie projektów gotowych na urządzenia mobilne jest tak proste, jak projektowanie i konstruowanie dla ich mniejszych ekranów dotykowych – stąd popularność Responsive Design. Istnieje kilka świetnych meta tagów, które również pozwalają na optymalizację pod kątem urządzeń mobilnych.
4. 78% twórców treści zgadza się, że struktura ta jest odpowiednia do tworzenia aplikacji mobilnych, a 68% twierdzi, że jest odpowiednia do projektowania wszelkich rodzajów aplikacji.
5. HTML5 jest również wyposażony w wiele wspaniałych interfejsów API, które pozwalają na tworzenie lepszych doświadczeń użytkownika i bardziej dynamicznych aplikacji internetowych – oto krótka lista natywnych interfejsów API:
   • Drag and Drop (DnD)
   • Offline storage database
   • Zarządzanie historią przeglądarki
   • Edycja dokumentów
   • Timed media playback
6. HTML5 nie jest kontrolowany przez jedną firmę. Jedną z jego najlepszych cech jest fakt, że jest to standard otwarty. Programiści mają swobodę, aby pozwolić swojej kreatywności płynąć i dodać tak wiele funkcji i cech, jak to tylko możliwe.
7. W porównaniu z innymi przeglądarkami, każda aktualizacja Google Chrome zapewnia wsparcie dla HTML5. Dodatkowo, domyślny odtwarzacz YouTube jest teraz HTML5, a reklamy Google we Flashu są teraz konwertowane na HTML5.
8. Użycie HTML5 przez deweloperów (według regionów):
   • Ameryka Północna i Łacińska – 70%
   • Ameryka Południowa – 61%
   • ASPAC – 60%
   • Australia – 60%
   • Europa – 59%
   • Afryka -. 50%

Wnioski

Pomimo, że HTML powstał dopiero w 1991 roku (a pierwsza wersja języka kodowania pojawiła się w 1995 roku), szybko stał się kluczowym narzędziem w projektowaniu funkcjonalnych i atrakcyjnych wizualnie stron internetowych. Poziom wpływu HTML nadal ewoluuje, z najnowszą iteracją (HTML5) przyjmowaną przez coraz większą liczbę stron internetowych na całym świecie.

W tym względzie, nauka podstawowych elementów HTML i jak je zastosować jest najważniejszym krokiem w tworzeniu udanej, widocznej i ostatecznie konkurencyjnej strony internetowej.

.