HTML dla początkujących:

Oś czasu technologii internetowych


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

Projektowanie stron internetowych bez tabel

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

Wprowadzenie

Jeśli chcesz zostać webmasterem i nauczyć się, jak tworzyć strony internetowe, możesz mieć dość zniechęcające spojrzenie na HTML.

Tego jednak nie da się uniknąć, ponieważ zdecydowana większość odwiedzanych stron docelowych została napisana i zbudowana przy użyciu elementów HTML. W rzeczywistości HTML jest teraz używane przez ponad 74% wszystkich znanych stron internetowych, podczas gdy ten język pomaga również ulepszyć wszystko, od projektu witryny po jakość treści, które oferuje.

W tym przewodniku zapoznamy się z podstawowymi zasadami HTML i jego potencjalnymi aplikacjami, zanim przejrzymy przykłady poszczególnych elementów używanych podczas kodowania witryny.

Co to jest HTML?

Procent witryn korzystających z różnych podkategorii HTML

różne podkategorie procentów HTML

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

HTML jest również oparty na wielu indywidualnych elementach, które stopniowo budują strony internetowe, kształtują prezentację treści i ożywają twoją stronę internetową. Te elementy są tworzone i zawarte w „znacznikach”, które definiują alternatywne fragmenty treści, takie jak nagłówki, akapity i podobne przykłady.

Omówimy te elementy i ich budowę bardziej szczegółowo poniżej, jednocześnie sprawdzając, jak można je spersonalizować, aby wprowadzić kolor, linki i zmienną typografię na swojej stronie internetowej.


Gdzie jest używany HTML?

Popularne strony używające HTML

Gdzie jest używany HTML

Jak widzimy, najczęstszą aplikacją dla HTML jest projektowanie poszczególnych stron docelowych, które składają się na twoją stronę. Nie jest to jedyna aplikacja popularnego narzędzia do kodowania, jednak zrozumienie jego dodatkowych zastosowań pomoże Ci w pełni wykorzystać możliwości języka jako nowego webmastera. Oto kilka innych sposobów, w jakie można zastosować HTML:

  • Twórz konfigurowalne elementy na istniejącej stronie

    Jeśli zamierzasz zezwalać na komentarze w blogach lub treści generowane przez użytkowników w witrynie, możesz użyć fragmentów kodu HTML, aby to umożliwić. Te elementy umożliwią użytkownikom podkreślanie słów kluczowych, osadzanie linków i formatowanie komentarzy w zależności od ograniczeń nałożonych jako moderator.

  • Utwórz dodatkową treść do wiadomości e-mail

    Poczta e-mail używa również HTML jako języka bogatych wiadomości tekstowych, które zawierają linki, tekst i wiele innych elementów, których nie można opisać w postaci zwykłego tekstu. Tak więc, jeśli chcesz udostępnić e-maila, który odnosi się do Twojej witryny za pośrednictwem poczty e-mail, możesz użyć HTML, aby zoptymalizować wpływ wiadomości.

  • Zapoznaj się z dokumentami pomocy offline, które są zainstalowane na twoim komputerze

    Co ciekawe, HTML jest używany jako format komputerowych dokumentów pomocy dostępnych w trybie offline. Podstawowa znajomość HTML może zatem pomóc w zrozumieniu problemów ze sprzętem i szybszym ich rozwiązaniu, co z kolei może zapewnić, że będziesz w stanie szybciej przywrócić witrynę w przypadkach, gdy przejdzie ona w tryb offline.

HTML i CSS
Wyświetl HTML i CSS [Ściągawka]

Struktura strony HTML

</strong><br/> <strong>

Zawartość strony

Elementy html, head i body są częścią specyfikacji HTML od połowy lat 90. XX wieku i jeszcze kilka lat temu były podstawowymi elementami stosowanymi do nadawania struktury dokumentom HTML.
Jednak sytuacja zmieniła się dramatycznie w ciągu ostatnich kilku lat, ponieważ HTML5 dodał mnóstwo nowych tagów, które można wykorzystać do dodania bogatego znaczenia semantycznego do struktury dokumentu HTML.

Dokumenty HTML są wymagane, aby rozpocząć od deklaracji typu dokumentu (nieformalnie „doctype”). W przeglądarkach doctype pomaga zdefiniować tryb renderowania. HTML5 nie definiuje DTD; dlatego w HTML5 deklaracja typu dokumentu jest prostsza i krótsza.


Zanim zbudujesz stronę HTML, potrzebujesz podstaw.

Zwykle strona składa się z trzech elementów konstrukcyjnych:

1. Nagłówek: Nagłówek zawiera treści związane ze wszystkimi stronami w Twojej witrynie, takie jak logo lub nazwa witryny oraz system nawigacji. Nagłówek jest widoczny na każdej stronie.

2. Główny korpus: Zajmuje to największy obszar na stronie internetowej. Zawiera treści specyficzne dla przeglądanej strony.

3. Stopka: Treść stopki zwykle obejmuje dane 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 konstrukcyjne, gdy się łączą:


Możesz tu wstawić tekst lub kod, np
Kod śledzenia Google Analytics dla
przykład.

Idzie główna treść twojej strony
tutaj. Wypełnij go tekstem i obrazami!

Oto kolejny przykład, używając tagów nagłówka i tagu akapitu do estetycznej strukturyzacji treści. Dodatkowo wrzuciliśmy tag stopki dla treści poniżej głównej treści strony:


Możesz tu wstawić tekst lub kod, np
Kod śledzenia Google Analytics dla
przykład.

Mój pierwszy nagłówek

Witam na mojej stronie internetowej!

informacje kontaktowe można przejść tutaj


Tagi HTML

Tagi HTML

Punktem wyjścia dla każdego kodu HTML są indywidualne tagi, których można użyć do stworzenia wszystkich kluczowych elementów i pomocy w uporządkowaniu stron internetowych. Poniżej przyjrzymy się najpopularniejszym tagom, zanim zbadamy, w jaki sposób można je wykorzystać do wygenerowania określonych elementów na stronie:

Tagi nagłówka

Wszystkie dokumenty online, w tym strony internetowe, zaczynają się od nagłówka. Są one zbudowane przy użyciu znaczników HTML, przy czym język pozwala obecnie na umieszczenie maksymalnie sześciu elementów o różnych rozmiarach, które umożliwiają także uporządkowanie zawartości za pomocą dodatkowych tytułów, napisów i wyróżnionych linii pogrubionego tekstu. Aby rozpocząć nagłówek, wystarczy poprzedzić odpowiedni tekst znakiem

,

,

,

,

lub

tag w zależności od pożądanego rozmiaru.
Następnie należy zastosować tag zamykający na końcu nagłówka, aby otoczyć tekst, i będzie wyświetlany w następujący sposób w formacie HTML:

Istnieje 12 kategorii tagów:


To jest pozycja 1

To jest pozycja 2

To jest pozycja 3

To jest pozycja 4

To jest pozycja 5

To jest pozycja 6

Wiodące technologie HTML Tags
udostępnij w sieci

0,27%

HTML5
Tag na płótnie

0,29%

HTML5
Tag audio

0,69%

HTML5
Tag wideo

3,1%

HTML5
Tag SVG

6,54%

HTML5
Osadź tag


Po potwierdzeniu przełoży się to na następującą estetykę na Twojej stronie’strona docelowa:

To jest pozycja 1

To jest pozycja 2

To jest pozycja 3

To jest pozycja 4

To jest pozycja 5

To jest pozycja 6

Tutaj widać różne rozmiary zmiennych nagłówków, podobnie jak fakt, że przeglądarka dodaje linię przed i po nagłówku. Zauważysz również, że znacznik zamykający na końcu tekstu nagłówka ma nieco inną estetykę, ale omówię to w następnym rozdziale, ponieważ staramy się używać znaczników do definiowania określonych elementów.

Tagi akapitu

Wsparcie wideo i audio
Zapomnij o Flash Playerze i innych odtwarzaczach multimedialnych innych firm, spraw, aby Twoje filmy i dźwięki były naprawdę dostępne dzięki nowemu HTML5

Podobną zasadę stosuje się do początkowych znaczników akapitu, które są przedstawione przez

. Umożliwia to uporządkowanie treści i podzielenie jej na odpowiednie akapity, co z kolei przekłada się na łatwiejsze i bardziej płynne czytanie. Jeszcze raz

tag należy umieścić na początku odpowiedniego tekstu, zanim na końcu zostanie zastosowany alternatywny tag zamykający, aby zakończyć efekt. Jednak w przeciwieństwie do znaczników nagłówka nie ma różnych liczb, które mogłyby zmienić rozmiar tekstu opisanego w akapicie. Na przykład:

Twój pierwszy akapit

Twój drugi akapit

Twój trzeci akapit

Wykorzystanie tagów wideo HTML5 przez strony internetowe na całym świecie

Kraj
Liczba stron internetowych

Stany Zjednoczone

140,008

Rosja

87 508

Niemcy

34,519

Zjednoczone Królestwo

26 609

Francja

25 697

Japonia

23.578

Tajwan

19,798

Ukraina

19,204

Brazylia

16,773

Chiny

16,523

Reszta świata

265,371

Poza formatem HTML spowoduje to uszkodzenie tekstu w następujący sposób na ukończonej stronie internetowej:

Twój pierwszy akapit

Twój drugi akapit

Twój trzeci akapit

Tagi podziału linii

Pierwsze przykłady reprezentują najbardziej podstawowe tagi HTML, ale są też inne, które używają innego formatu i alternatywnego zamykania. Weźmy na przykład podziały wierszy, które tworzą rozróżnienie, w którym wiersze tekstu są dzielone i kontynuowane w następnym wierszu. Istnieje zasadnicza różnica między podziałami linii i akapitami w polu HTML, ponieważ chociaż te ostatnie są standardowymi elementami blokowymi zawierającymi tekst, te pierwsze tworzą separację w obrębie istniejącego

element.

Z tego powodu podziały wierszy reprezentują pusty element HTML i dlatego nie są definiowane ani przez otwierające, ani zamykające znaczniki. Zamiast tego są one przedstawione przez
tag, który można wstawić do istniejącego

elementy do podziału tekstu i potencjalnie podkreślenia ważnych informacji. Pojedyncza spacja między znakiem br a ukośnikiem jest kluczowa, ponieważ w przeciwnym razie znacznik nie będzie rozpoznawany w formacie HTML.

Oto przykład:

to rysunkowy znacznik rysunkowy HTML5, który pozwala wykorzystać jeszcze więcej możliwości interaktywności i animacji internetowej niż poprzednie bogate platformy aplikacji internetowych, takie jak Flash.

Możesz nawet tworzyć gry przy użyciu HTML5 etykietka. HTML5 to świetny, przyjazny dla urządzeń mobilnych sposób na rozwijanie zabawnej, interaktywnej gry

Dzień dobry

Bardzo dziękuję za zapytanie, skontaktujemy się z Tobą, jeśli będziemy potrzebować czegoś innego.

Z poważaniem

Pan Jones

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

Dzień dobry,

Bardzo dziękuję za zapytanie, skontaktujemy się z Tobą, jeśli będziemy potrzebować czegoś innego.

Z poważaniem

Pan Jones

Jak widać, możesz stosować podział wiersza tak często, jak chcesz w istniejącym elemencie akapitu, o ile dodają wartości i ułatwiają przyswajanie informacji. Zobaczysz również, że otwierające i zamykające znaczniki akapitów pozostają niezmienione, a znaczniki podziału linii służą do zmiany układu tekstu zawartego w.

Jest to jeden z przykładów wykorzystania znaczników HTML do zmiany istniejących elementów, który odgrywa kluczową rolę w definiowaniu układu wizualnego stron internetowych i treści.

Linie poziome

Kategorie witryn, w których używany jest tag HTML5 Canvas

Kategorie witryn, w których używany jest tag HTML5 Canvas

Podobnie istnieją inne tagi, których można użyć w obrębie

element lub w celu dalszego oddzielenia treści tekstu na stronie internetowej. Jednym z najczęściej używanych jest


znacznik, który pomaga utworzyć pusty element, który rysuje wizualną, poziomą linię między naprzemiennymi sekcjami dokumentu online. Możesz na przykład ustawić linię między dwoma częściami tekstu, aby na przykład ponownie ustawić ostrość czytelnika lub po prostu wprowadzić nowy element wizualny. Oto jak stworzyć taką przerwę w HTML:

Twój pierwszy akapit


Twój drugi akapit

Tutaj zerwanie między znakami hr i ukośnikiem uwydatnia konstrukcję pustego elementu, a po raz kolejny nie jest wymagany tag zamykający, aby ukończyć efekt. Spowoduje to utworzenie następującego obrazu:

Twój pierwszy akapit
________________________________________

Twój drugi akapit

Twój pierwszy akapit
_______________________

Twój drugi akapit

Przeglądarki mobilne w pełni przyjęły HTML5, więc tworzenie gotowych projektów mobilnych jest tak proste, jak projektowanie i konstruowanie ich mniejszych ekranów dotykowych – stąd popularność Responsive Design. Istnieje kilka świetnych metatagów, które umożliwiają optymalizację pod kątem urządzeń mobilnych

78% twórców treści zgadza się, że struktura jest odpowiednia do tworzenia aplikacji mobilnych, a 68% twierdzi, że nadaje się do projektowania dowolnych i wszystkich rodzajów aplikacji


Tagi graficzne

Tagi graficzne reprezentują również puste elementy w HTML, co ponownie oznacza, że ​​nie zawierają tagu zamykającego. Ponieważ zawierają one tylko atrybuty odnoszące się do adresu URL obrazu umieszczanego w witrynie, są one definiowane po prostu przez znacznik na początku elementu. Można je umieścić w dowolnym miejscu na stronie, chociaż nierzadko umieszcza się je w istniejących elementach, takich jak akapity lub nagłówki. Oto jak zaprezentuje się typowy tag obrazu HTML:

jakiś tekst

Powinieneś również podać tekst alternatywny dla swojego obrazu, który pomaga ludziom go zobaczyć w przypadku powolnego ładowania lub korzystania z czytnika ekranu. W ten sposób, jeśli przeglądarka nie może znaleźć obrazu, wyświetli wartość alternatywnego atrybutu widzom. To ponownie używa tagu obrazu, ale zawiera inny zestaw atrybutów:

 HTML5 Icon

Elementy HTML

elementy HTML

Wcześniej przyjrzeliśmy się, jak proste tagi HTML są używane do definiowania elementów na stronie, a także badamy, w jaki sposób można je dalej dostosowywać za pomocą pustych elementów zawierających tagi obrazu i podziału linii. Pomaga nam to zrozumieć związek między tagami i elementami oraz sposób, w jaki można ich używać do definiowania różnych rodzajów treści w Twojej witrynie.

Chociaż wszystkie aspekty języka HTML są reprezentowane przez znacznik, na przykład zdefiniowany element zawierający treść musi mieć zarówno znacznik początkowy, jak i zamykający. Tak więc nagłówki i akapity są elementami HTML, ponieważ używają znaczników początkowych i końcowych do kapsułkowania i rozszerzania odpowiedniego tekstu. Natomiast puste elementy albo zawierają atrybuty, albo w ogóle nie zawierają treści, co pozwala na ich użycie w istniejących elementach bez potrzeby zamykania tagu.

Definiowanie elementów HTML

HTML5 nigdzie się nie pojawi, a wraz z przyjęciem coraz większej liczby elementów coraz więcej firm zacznie się rozwijać w HTML5

W przypadku korzystania z przykładów, takich jak nagłówki i akapity, kluczowe znaczenie ma prawidłowe stosowanie znaczników początkowych i końcowych. Jest to tag początkowy (taki jak

lub

), który definiuje na przykład dany element, a tag zamykający zapewnia, że ​​ten element nie będzie kontynuowany w pozostałej części strony. Jeśli nie użyjesz zamknięcia tag na końcu żądanego akapitu, na przykład tekst pojawi się w jednym bloku, który jest nieestetyczny i bardzo trudny do odczytania.

Wszystkie znaczniki zamykające są identyczne jak znaczniki początkowe, z wyjątkiem tego, że te pierwsze zawierają ukośnik przed odpowiednimi znakami. Więc w przypadku

nagłówek będzie tagiem zamykającym , podczas gdy dla akapitów zawsze będziesz używać aby zdefiniować podział tekstu. Wymaga to zwracania uwagi na szczegóły podczas kodowania, a przy programowaniu nagłówków należy pamiętać, że liczba, której używasz (np. H1 lub h2) jest stosowana zarówno w znaczniku początkowym, jak i zamykającym.

Częstotliwość użycia różnych elementów HTML

Nazwa elementu XHTML

głowa
tytuł
HTML
ciało
za
meta
img
stół
td
tr
br
p
scenariusz
czcionka
div
b
połączyć
Centrum
Zakres
Formularz
Wejście
styl
godz
silny
ja
hl
li
noscript
mapa
powierzchnia
ul
Wybierz
opcja
h3
h2
rama
zestaw ramek
param
osadzać
em
u
obiekt
zablokować cytat
Nie
ramki
tbody
iframe
mały
h4
baza
Nord





























0
10
20
30
40
50
60
70
80
90
100

Korzystanie z zagnieżdżonych elementów HTML

Na tym etapie widać wyraźnie, że dokumenty HTML i strony internetowe są tworzone przez drzewo różnych elementów, które służą jako elementy składowe szeregu zasobów. Przyjrzeliśmy się również, w jaki sposób te elementy mogą być tworzone i wykorzystywane do strukturyzowania treści online, i będziemy kontynuować to teraz, patrząc na zagnieżdżone elementy HTML.

Podobnie jak puste elementy i samodzielne tagi (jak
mogą być włączone do zdefiniowanych elementów HTML, tak zwane elementy zagnieżdżone mogą być również umieszczone w treści, takiej jak nagłówki i akapity. Obejmują one przykłady, takie jak pogrubienie i kursywa oraz podkreślony tekst, przy czym można je zastosować, aby dodać osobowość do treści i przyciągnąć uwagę czytelnika do konkretnych ciekawych miejsc.

Pogrubiony, pochylony i podkreślony tekst w HTML

Pozwolić’Powiedzmy, że chcesz podświetlić słowo w istniejącym elemencie akapitu. Możesz to osiągnąć, odważnie, używając prostych znaczników w ramach standardu

element. Używając HTML, zaprogramujesz to w następujący sposób:

chcę to słowo śmiałe.


Tutaj element zagnieżdżony ma zarówno znacznik początkowy, jak i końcowy, z których każdy ma podobny format, jak te związane z nagłówkami i akapitami. Można je bezproblemowo stosować w istniejących elementach, aw tym przypadku przyniosą następujące wyniki:

chcę to słowo śmiałe.

Teraz pozwól’Powiedzmy, że chciałbyś również zmienić typografię tego słowa, aby było ono również kursywą. Można to osiągnąć po prostu dodając kolejny element zagnieżdżony, który należy zakodować w następujący sposób:

chcę to słowo śmiałe.

Jak widać, początkowa i końcowa kursywa zostały po prostu włączone do

element. Spowoduje to teraz przekształcenie treści w elemencie, dzięki czemu będzie wyglądać następująco:

Tytuły HTML zawsze były i pozostają najważniejszym sygnałem HTML używanym przez wyszukiwarki do zrozumienia, o czym jest strona. W rzeczywistości, jeśli Twoje tytuły HTML zostaną uznane za złe lub nie opisowe, Google je zmieni

chcę to słowo śmiałe.

Oczywiście możesz zdecydować, że wolisz wyróżnić to słowo w inny sposób. Możesz zatem użyć alternatywnego zagnieżdżonego elementu, takiego jak podkreślenie (które jest reprezentowane przez i tagi. Te tagi można zastosować w ten sam sposób w ramach

element, wyglądający następująco w HTML:

chcę to słowo do podkreślenia.

W tym przypadku tekst pojawi się na Twoim dokumencie lub stronie docelowej w następujący sposób:

Nowe elementy semantyczne wprowadzone przez HTML5 znacznie ułatwią czytanie początkującym programistom. Zamiast widzieć wiersz po wierszu

i elementy, bardziej zdefiniowane tagi, takie jak

,

i

chcę to słowo do podkreślenia.

Daje to wgląd w elementy, które mogą być tworzone przez tagi, które z kolei określają strukturę twoich stron internetowych i ich zawartość. Nie tylko to, ale puste i zagnieżdżone elementy mogą również służyć do dalszego definiowania treści.

Atrybuty HTML

Atrybuty globalne są atrybutami wspólnymi dla wszystkich elementów HTML; można ich używać we wszystkich elementach, chociaż atrybuty mogą nie mieć wpływu na niektóre elementy. Globalne atrybuty mogą być określone we wszystkich elementach HTML, nawet tych nieokreślonych w standardzie


Jeśli tagi to bloki konstrukcyjne, które konstruują i definiują elementy, wówczas można użyć atrybutów HTML w celu dostosowania ich właściwości (takich jak styl, kolor i język. Wszystkie elementy HTML mają podstawowe atrybuty, które zapewniają podstawowe informacje i są zawsze określone w znaczniku stat Zwykle występują w parach, więc często pojawiają się w następującym formacie: nazwa =”wartość.“

Mówiąc prościej, nazwa reprezentuje właściwość, którą chcesz ustawić, a wartość odnosi się do określonych kryteriów, które chcesz uwzględnić.

Istnieje wiele atrybutów, które można zastosować do elementów HTML, ale te, które są najbardziej odpowiednie dla początkujących webmasterów to:

Atrybut „Lang”

Jest to najbardziej podstawowy atrybut, który określa język dokumentu i jego elementy. Zadeklarowano go za pomocą ‘język’ i chociaż można go łatwo przeoczyć, ma tę zaletę, że sprawia, że ​​treść jest bardziej dostępna dla czytników ekranu i wyszukiwarek. Zwykle będzie prezentowany na początku dokumentu w następującym formacie:

Rozpoznano kilka podstawowych typów atrybutów, w tym:

wymagane atrybuty, wymagane przez określony typ elementu, aby ten typ elementu działał poprawnie

opcjonalne atrybuty, służy do modyfikowania domyślnej funkcjonalności typu elementu

standardowe atrybuty, obsługiwany przez dużą liczbę typów elementów

atrybuty zdarzenia, używane do powodowania, że ​​typy elementów określają skrypty uruchamiane w określonych okolicznościach


Po atrybucie lang dwie pierwsze litery określają język (w tym przypadku jest to język angielski). Po łączniku dwie następne litery ustanawiają dialekt, chociaż nie będzie on obecny w każdym języku. Ważne jest, aby odpowiednio dobrać ten atrybut, aby skutecznie dotrzeć do odbiorców.

Atrybut „Wyrównaj”

Dotknęliśmy już formatu atrybutów HTML (name =”wartość), a najlepszym tego przykładem jest próba wyrównania zawartości elementów. Na przykład możesz wyśrodkować wszystkie akapity na określonej stronie, a wyrównanie jest właściwością, którą chcesz ustawić. Następnie, ’Centrum’ jest wartością atrybutu, chociaż możesz wyrównać tekst w lewo lub w prawo. Na przykład:

Ten tekst jest wyśrodkowany

Rodzaje aplikacji zbudowanych w HTML5

Wydajność

54%

Użyteczność

38%

Konsument

35%

LOB

22%

Sieć społecznościowa

18%

Zabawa

17%

Styl życia

12%

Podróżować

9%

Gry

8%

Inny

13%

To wyrówna twój

elementy na środku strony i utwórz jednolity układ dopasowany do specyfiki Twojej witryny (patrz poniżej):

Ten tekst jest wyśrodkowany

Ten tekst jest wyśrodkowany

Ten tekst jest wyśrodkowany

Atrybut „Href”

HTML5 zawiera także mnóstwo świetnych interfejsów API, które pozwalają budować lepszą obsługę i bardziej dynamiczną aplikację internetową – oto krótka lista natywnych interfejsów API:

  • Przeciągnij i upuść (DnD)
  • Baza danych pamięci offline
  • Zarządzanie historią przeglądarki
  • Edycja dokumentu
  • Czasowe odtwarzanie multimediów

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, które zawierają linki zwrotne do wewnętrznych stron docelowych, jest również realną strategią, więc musisz nauczyć się kodować je w HTML.

Linki HTML są definiowane za pomocą tag, który zawiera link docelowy wraz z powiązanym tekstem kotwicy, który będzie zawierał adres URL. To jest ‘href ’ atrybut, który określa adres witryny, jest on jednak włączony jako część tagu początkowego. Jest zakodowany w HTML w następujący sposób:

Google

To wyraźnie podkreśla różnicę między początkowym a końcowym tagiem i będzie tłumaczone w następujący sposób na stronie docelowej:

HTML5 nie jest kontrolowany przez jedną firmę. Jedną z jego najlepszych cech jest fakt, że jest to otwarty standard. Deweloperzy mają swobodę przepływu kreatywności i dodawania tylu funkcji, ile tylko mogą


Atrybut „Kolor”

Jest to kolejny ważny atrybut, ponieważ użycie koloru może tchnąć życie w twoją stronę internetową, jednocześnie pomagając tworzyć ważne kontrasty i mocną estetykę projektu. W HTML kolor można określić za pomocą jego nazwy, chociaż można również użyć wartości RGB lub HEX, aby osiągnąć ten cel. Ta pierwsza opcja jest jednak najłatwiejsza do naśladowania, chociaż można ją również zastosować do nagłówków, akapitów i innych elementów na stronie.

Płótno HTML5
Zobacz płótno HTML5 [Ściągawka]

Jest to atrybut stylu, a wybór koloru reprezentuje wartość, którą chcesz ustawić. Na przykład, gdy zastosujesz kolor czerwony do głównego nagłówka, będzie on wyglądał następująco:

Kolor tła ustawiony za pomocą czerwonego

Po zastosowaniu element ten pojawi się w Twojej witrynie w następujący sposób:

Kolor tła ustawiony za pomocą czerwonego

W porównaniu do innych przeglądarek, każda aktualizacja Google Chrome zapewnia obsługę HTML5. Ponadto domyślnym odtwarzaczem YouTube jest teraz HTML5, a reklamy Flash Google są teraz konwertowane na HTML5


Po raz kolejny istnieje wyraźne rozróżnienie między znacznikami początkowym i końcowym, które definiują element, podczas gdy jest to jeden z najłatwiejszych atrybutów do zastosowania w HTML. Ponadto dodatkowo podkreśla nazwę =”format wartości atrybutów HTML, dzięki czemu proces uczenia się i stosowania ich jest znacznie łatwiejszy w całej witrynie.

Sprawdź się

Z podstawową znajomością HTML i jego poszczególnych elementów, następnym krokiem jest podjęcie prostych projektów i zastosowanie wiedzy teoretycznej do rozwiązywania praktycznych wyzwań.

Aplikacje oparte na przeglądarce z HTML5 nie będą miały problemu z geolokalizacją

W poniższym ćwiczeniu opisaliśmy tekst z wyjątkiem i poprosiliśmy o sformatowanie różnych aspektów przy użyciu HTML. Skorzystaj z przewodnika i wszystkiego, czego się nauczyłeś, aby ukończyć wyzwanie, przygotowując się do kodowania własnej witryny.
________________________________________

Główny nagłówek

Witamy na naszej stronie internetowej, Example.com! Mamy nadzieję, że lubisz czytać nasze treści, skontaktuj się z nami.

Dzięki za odwiedziny!

Ucz się więcej.

Wykorzystanie HTML5 przez programistów
(Przez region)

Ameryka Północna i Łacińska

70%

Ameryka Południowa

61%

ASPAC

60%

Australia

60%

Europa

59%

Afryka

50%

________________________________________

Pytania:

  1. Uzupełnij element nagłówka poprawnym tagiem zamykającym.
  2. Pogrub nagłówek.
  3. Wstaw poziomą linię pod nagłówkiem.
  4. Użyj atrybutu koloru i odcienia ‘Dzięki za odwiedziny’ w zielonym
  5. Wstaw ten hiperlink (https://www.w3schools.com/html/) do tekstu kotwicy “Uczyć się
    więcej.”
  6. Na górze strony użyj nazwy =”format wartości, aby wyrównać akapity do lewej


Wniosek

Chociaż HTML powstał dopiero w 1991 r. (Pierwsza wersja języka kodowego została uruchomiona w 1995 r.), Szybko stał się przełomowym narzędziem w projektowaniu funkcjonalnych i atrakcyjnych wizualnie stron internetowych. Poziom wpływu HTML również ewoluuje, a najnowsza iteracja (HTML5) jest wdrażana przez rosnącą liczbę witryn na całym świecie.

W związku z tym poznanie podstawowych elementów HTML i sposobu ich zastosowania jest najważniejszym krokiem, jaki zrobisz, aby stworzyć udaną, widoczną i ostatecznie konkurencyjną stronę internetową.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Liked Liked