Jakie są podstawy HTML?
Opublikowany: 2023-09-25HTML (Hypertext Markup Language) to podstawowy element projektowania stron internetowych w hrabstwie Orange. Jest to język znaczników używany do tworzenia struktury i treści strony internetowej, będący podstawą wszystkich witryn internetowych. Prawdopodobnie wszyscy projektanci stron internetowych zetknęli się w swojej karierze z HTML!
HTML to standardowy język używany do tworzenia statycznych stron internetowych, czyli stron, które nie zmieniają się bez ręcznej edycji kodu HTML, co oznacza, że użytkownicy nie mają na to wpływu.
Podstawy HTML
HTML to zestaw elementów lub tagów, a każdy element reprezentuje konkretny komponent strony internetowej. Brzmi prosto, prawda? To dlatego, że tak jest! Te dokumenty HTML są tworzone przy użyciu edytora tekstu i zapisywane z rozszerzeniem .html. Podstawowy dokument HTML, aby działał poprawnie, powinien zawierać następujące elementy:
Deklaracja <!DOCTYPE>
Deklaracja <!DOCTYPE> służy jako akt otwierający dokument HTML, przygotowując scenę, informując przeglądarkę o konkretnej wersji HTML, której używasz. Potraktuj to jak przyjazne wprowadzenie, które mówi: „Hej, przeglądarce, będziemy tańczyć w rytmie HTML5!” HTML5 jest obecną gwiazdą w świecie tworzenia stron internetowych i oferuje mnóstwo ekscytujących funkcji i ulepszeń. Zatem dołączenie tej deklaracji oznacza w zasadzie polecenie przeglądarce, aby przygotowała się na nowoczesny, pełen funkcji interfejs HTML. To Twój sposób na zapewnienie prawidłowej prezentacji treści internetowych i wykorzystanie wszystkich ciekawych możliwości HTML5.
<!DOCTYPE html>
Element <HTML>
Pomyśl o elemencie <html> jak o wielkim bossie w dokumencie HTML. To szef, najważniejszy pies i ten, który utrzymuje wszystko w porządku. Tak jak szef zarządza firmą, tak element <html> zarządza całą stroną internetową. To punkt wyjścia i kontener dla wszystkich innych elementów, których będziesz używać do tworzenia treści internetowych.
Wewnątrz tego elementu <html> znajdziesz projekt swojej strony internetowej, łącznie z elementami <head> i <body>. Element <head> przechowuje ważne informacje o dokumencie, takie jak tytuł, metatagi i łącza do zasobów zewnętrznych. Tymczasem element <body> zawiera całą widoczną treść, którą widzą użytkownicy odwiedzający Twoją witrynę.
Krótko mówiąc, element <html> to ogólny obraz, naczelny dowódca i ostateczny organizator dokumentu HTML. Zapewnia, że wszystko działa sprawnie, a Twoja strona internetowa ma odpowiednią strukturę i jest prawidłowo prezentowana odbiorcom.
Element <Head>
Element <head> jest jak mózg dokumentu, przechowuje ważne informacje, takie jak tytuł, metatagi i linki do fantazyjnych rzeczy, takich jak arkusze stylów i skrypty. Tak więc, chociaż element <head> może nie być widoczny na Twojej stronie internetowej, odgrywa on kluczową rolę w zapewnieniu, że Twoja witryna wygląda świetnie, dobrze działa i skutecznie komunikuje się zarówno z użytkownikami, jak i wyszukiwarkami. To jak centrum dowodzenia, które pomaga Twojej stronie internetowej działać najlepiej.
Element <Tytuł>
Element <title> określa tytuł dokumentu, który pojawia się na pasku tytułu przeglądarki. To nie tylko wymóg techniczny, ale także potężne narzędzie komunikacji. Stworzenie jasnego, zwięzłego i odpowiedniego tytułu jest niezbędne, aby Twoja strona internetowa była łatwo rozpoznawalna, dostępna i atrakcyjna zarówno dla użytkowników, jak i wyszukiwarek.
Element <Body>
Element <body> zawiera całą zawartość strony internetowej, taką jak tekst, obrazy, filmy i inne elementy. To jest jak główna scena w teatrze – to tutaj cała akcja dzieje się w dokumencie HTML. Jest to jeden z podstawowych elementów składowych każdej strony internetowej, a jego rola jest dość prosta, ale istotna: zawiera całą widoczną treść, którą użytkownicy widzą podczas odwiedzania witryny internetowej.
Elementy HTML
Elementy HTML są ujęte w znaczniki otwierające i zamykające, otoczone nawiasami ostrymi. Znacznik otwierający zaczyna się od nazwy elementu, po której następują dowolne atrybuty w postaci par nazwa-wartość. Znacznik zamykający jest dokładnie taki sam jak znacznik otwierający, ale przed nazwą elementu ma ukośnik (/) jako rodzaj uwagi zamykającej.
Na przykład poniższy kod tworzy prostą stronę HTML:
<!DOCTYPE html>
<html>
<głowa>
<title>Moja pierwsza strona HTML</title>
</głowa>
<ciało>
<h1>Witam na mojej stronie internetowej</h1>
<p>To jest moja pierwsza strona HTML.</p>
</ciało>
</html>
Tutaj element <html> jest elementem głównym i zawiera elementy <head> i <body>. Element <head> zawiera element <title>, który określa tytuł dokumentu. Element <body> zawiera treść strony, która obejmuje nagłówek i akapit. W typowym dokumencie HTML powinieneś najpierw zacząć od największego elementu (w tym przypadku HTML), a następnie podczas tworzenia strony przejść do mniejszych fragmentów (np. nagłówka, tytułu, treści itp.).
Atrybuty HTML
Atrybuty HTML dostarczają dodatkowych informacji o elemencie i są zawarte w tagu otwierającym. W pewnym sensie pełnią rolę deskryptora. Do najczęściej spotykanych atrybutów należą:
Atrybut identyfikatora
Atrybut id identyfikuje element, a w JavaScript i CSS służy do manipulowania elementem.
Atrybut klasy
Atrybut class grupuje elementy razem, umożliwiając ich stylizację za pomocą CSS.
Atrybut stylu
Atrybut style to fajna funkcja HTML, która pozwala zastosować style bezpośrednio do pojedynczego elementu, bezpośrednio w kodzie HTML. To jakby modowo zmienić ten konkretny element, określając takie elementy, jak kolory, czcionki i odstępy, bez konieczności tworzenia osobnego arkusza stylów. Może to być przydatne, gdy chcesz dokonać szybkiej, jednorazowej zmiany wyglądu elementu bez wpływu na resztę stylów witryny. Jest to więc Twoje podstawowe narzędzie, dzięki któremu możesz dodać odrobinę wyjątkowości do konkretnych elementów projektu swojej strony internetowej.
Atrybut Hrefa
Atrybut href jest używany w linkach do określenia adresu URL strony docelowej.
Wniosek
HTML jest podstawą projektowania stron internetowych i jest niezbędny do stworzenia dobrze zorganizowanej strony internetowej. To pierwszy krok do pełnoprawnej strony internetowej! Dlatego zrozumienie podstaw HTML jest niezbędne dla każdego, kto chce zbudować stronę internetową. HTML to język znaczników składający się z elementów, atrybutów i treści. Każdy element reprezentuje konkretny komponent strony internetowej, a atrybuty dostarczają dodatkowych informacji o elemencie. Dzięki HTML możesz stworzyć ustrukturyzowaną, atrakcyjną wizualnie i interaktywną witrynę internetową.
Zobacz powiązany artykuł tutaj: https://www.drivetrafficmedia.com/the-różne-coding-languages-of-web-design/
