5 kroków do zrozumienia podstawowego kodu HTML

5 kroków do zrozumienia podstawowego kodu HTML

HTML jest istotną częścią sieci, jaką znamy. I chociaż niewielu projektantów stron internetowych tworzy strony, ręcznie wpisując kod HTML, nadal warto się trochę o tym dowiedzieć.





Przyjrzymy się podstawom języka, w tym tym, czym naprawdę jest HTML, niektórymi podstawowymi pojęciami i jak współdziała z innymi językami. Pomyśl o tym jako o przyspieszonym kursie „HTML dla manekinów”.



Podstawy HTML: Co to jest HTML?

HTML oznacza Hipertekstowy język znaczników . I chociaż jest to czasami wrzucane do jednego z języków programowania, nie jest to dokładne.





Jak język znaczników , HTML umożliwia tylko tworzenie układu wyświetlania stron. Prawda język programowania , podobnie jak Java lub C++, zawiera logikę i wykonywane polecenia.

Chociaż jest to proste, HTML jest podstawą każdej strony internetowej. Odpowiada za pogrubienie tekstu, dodawanie obrazów i linki do innych stron. Mamy FAQ HTML, które wyjaśnia więcej.



Możesz kliknąć prawym przyciskiem myszy większość stron w przeglądarce i wybrać Zobacz stronę źródłową lub podobne, aby zobaczyć kod HTML za nimi. Prawdopodobnie będzie to również zawierało dużo kodu, który nie jest HTML, ale możesz go przesiać.

Nawet jeśli nie masz żadnego doświadczenia z językami znaczników lub programowania, nauka trochę o HTML sprawi, że będziesz bardziej świadomym użytkownikiem sieci. Przejdźmy przez pięć podstawowych kroków, które pomogą Ci zrozumieć, jak działa HTML. Po drodze podamy przykłady.



Krok 1: Zrozumienie pojęcia tagów

HTML wykorzystuje system tagi kategoryzować różne elementy dokumentu.

Większość tagów występuje w parach, aby zawinąć w nich dotknięty tekst. Oto prosty przykład (



tag tworzy tekst pogrubiony ; omówimy to za chwilę.)

This is some bold text .

Zwróć uwagę, że tag zamykający zaczyna się od ukośnika (/). Oznacza to znacznik zamykający, co jest ważne. Jeśli nie zamkniesz tagu, wszystko od początku będzie miało ten atrybut.

jak dodawać aplikacje do vizio smartcast tv?

Jednak nie wszystkie tagi mają parę. Niektóre elementy HTML, zwane puste elementy , nie mają treści i istnieją samodzielnie. Przykładem jest


znacznik, który jest podziałem wiersza. Możesz „zamknąć” takie tagi, dodając ukośnik (np.


), ale nie jest to bezwzględnie konieczne.

Krok 2: Układ HTML szkieletu

Prawidłowy dokument HTML musi mieć określone znaczniki, aby był poprawnie rozplanowany. Oto najważniejsze części:

  • Każdy dokument HTML musi zaczynać się od |_+_| zadeklarować się jako takie. Zatem jego zamykający znacznik, |_+_| , to ostatni element w pliku HTML.
  • Następnie |_+_| sekcja zawiera informacje takie jak tytuł strony, różne skrypty działające na stronie i tym podobne. Jak sama nazwa wskazuje, zwykle pojawia się to zaraz po początkowym |_+_| etykietka. Użytkownik końcowy nie widzi dużej ilości treści w tych tagach.
  • Wreszcie |_+_| tag zawiera tekst strony, którą widzi czytelnik (plus wiele więcej). Tutaj znajdziesz obrazy, linki i nie tylko.

Ponieważ

sekcja stanowi większość dokumentu HTML, reszta naszego przewodnika dotyczy elementów, które się do niej odnoszą.

Krok 3: Podstawowe znaczniki HTML do formatowania

Następnie przyjrzyjmy się niektórym typowym znacznikom, które tworzą dokumenty HTML. Oczywiście nie jest możliwe omówienie wszystkich elementów, więc omówimy niektóre z najważniejszych. omówiliśmy wiele więcej przykładów HTML jeśli to cię nie satysfakcjonuje.

Jeśli te tagi wydają się dość proste, pamiętaj, że HTML został stworzony w 1993 roku. W tamtych czasach Internet był w dużej mierze oparty na tekście.

Proste formatowanie tekstu

HTML obsługuje podstawowe style tekstu, takie jak w programie Microsoft Word:

  • |_+_| tagi tworzą tekst pogrubiony .
  • |_+_| tagi (co oznacza „podkreślenie”) będą wykursywiać tekst.

HTML obsługuje również starsze

tag dla pogrubienia i

dla kursywy. Jednak lepiej jest użyć powyższych.

W skrócie,

oraz

pokazują, jak coś należy rozumieć, podczas gdy te ostatnie mówią tylko, jak to powinno wyglądać. Te dawne tagi są bardziej dostępne dla czytników ekranu używanych przez osoby niedowidzące.

Akapit i inne działy

HTML

tag pozwala zdefiniować sekcję dokumentu. Zwykle jest to połączone z CSS (patrz poniżej), aby sformatować sekcję w określony sposób.

ten

tag pozwala podzielić tekst na akapity. Przeglądarki automatycznie umieszczają trochę miejsca przed i po nich, umożliwiając naturalny podział tekstu.

Możesz dodać nagłówki do swojego dokumentu i ułatwić śledzenie za pomocą

Poprzez

Tagi. H1 to najważniejszy nagłówek, a H6 najmniej ważny. Prawie każdy artykuł MakeUseOf używa nagłówków H2 i H3 do organizowania informacji.

Uderzenie Wejść dodanie podziałów wierszy w dokumencie HTML w rzeczywistości ich nie wyświetli. Zamiast tego możesz użyć

aby dodać podział wiersza.

Oto przykład, który wykorzystuje wszystkie te elementy:

Krok 4: Wstawianie obrazów

Obrazy są istotną częścią większości stron internetowych. Możesz je łatwo dodać za pomocą HTML, a nawet ustawić dla nich różne właściwości.

Wstawiasz obraz za pomocą

etykietka. Łącząc to z

atrybut pozwala określić, skąd ma być ładowany obraz.

Kolejny ważny atrybut

jak zrobić twitchową nakładkę w Photoshopie

tagi to

. Tekst alternatywny umożliwia opisanie obrazu dla czytników ekranu lub w przypadku, gdy obraz nie ładuje się poprawnie. Możesz najechać myszą na obraz, aby zobaczyć jego tekst alternatywny.

Użyj

oraz




elementy, aby określić liczbę pikseli, w których pojawia się obraz.

Połącz to wszystko razem, a tag obrazu wygląda tak:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Sieć WWW nie byłaby siecią bez linków do innych stron. Używając

tag, możesz linkować do innych stron w dowolnym tekście.

W środku

src

tag,

atrybut mówi, gdzie łączysz. Wystarczy wkleić adres URL. Możesz użyć

alt

element, aby dodać fragment tekstu, który pojawia się, gdy ktoś najedzie kursorem na link.

Podstawowy link wygląda tak:

width

ten

height

tag ma wiele innych możliwych elementów, ale nie będziemy ich tutaj zagłębiać.

Jak HTML łączy się z CSS i JavaScript

Przyjrzeliśmy się podstawom HTML i sposobom tworzenia strony internetowej. Ale jak możesz sobie wyobrazić, sam HTML nie nadaje się do współczesnego internetu. Proste strony internetowe HTML były powszechne w czasach „Web 1.0”, kiedy większość witryn nie była niczym więcej niż statycznym tekstem.

Ale teraz mamy o wiele więcej. CSS (Cascading Style Sheets) to język używany do opisu, jak powinien wyglądać tekst przygotowany w HTML. Zapamiętaj

Dr. Phil

omówiliśmy tag? Wewnątrz tego (i innych tagów) możesz zdefiniować a

atrybut. Następnie w dołączonym dokumencie CSS możesz napisać instrukcje, jak to zrobić

powinno wyglądać.

Możesz zdefiniować te elementy stylu bezpośrednio w kodzie HTML, ale jest to uważane za kiepską praktykę, ponieważ jest znacznie trudniejsze w utrzymaniu. Dowiedz się więcej z te proste przykłady CSS . Sprawdź także jak zoptymalizować pliki CSS .

JavaScript

Widzieliśmy, że HTML definiuje zawartość, a CSS określa wygląd. JavaScript, ostatni członek trio kluczowego dla sieci, umożliwia stronom internetowym reagowanie na działania ludzi bez za każdym razem ładowania nowej strony.

Na przykład JavaScript umożliwia witrynie ostrzeganie, że wprowadzone hasło nie spełnia jej wymagań, zanim spróbujesz je przesłać. Projektant stron internetowych może używać JavaScript do przełączania obrazów w pokazie slajdów lub monitowania użytkownika o wprowadzenie danych.

To tylko kilka elementarnych przykładów. JavaScript to język skryptowy, który jest w stanie zrobić wiele i jest stosunkowo dużo bardziej skomplikowany niż HTML i CSS. Widzieć nasz przegląd JavaScript o wiele więcej.

Patrzenie na pełny zakres projektowania stron internetowych wykracza poza zakres tego artykułu, ale wystarczy powiedzieć, że HTML współdziała z innymi językami, tworząc strony internetowe, które znamy dzisiaj.

Ewolucja HTML

Należy zauważyć, że HTML nie jest statyczny. HTML przeszedł kilka zmian, z których najnowsza to HTML 5. Warto zauważyć, że ten standard obsługuje natywne osadzanie wideo zamiast polegać na zastrzeżonych formatach, takich jak Adobe Flash.

Nowe iteracje HTML również od czasu do czasu deklarują pewne archaiczne tagi jako przestarzałe. Należą do nich okropne tagi, takie jak

href

oraz

title

(odpowiednio przewijany i flashowy tekst) powszechnie spotykane w projektowaniu stron internetowych w latach 90. XX wieku. Pamiętaj więc, że standardy zmieniają się z biegiem czasu.

Mała wiedza o HTML to długa droga

Odbyliśmy krótką prezentację działania dokumentu HTML. Teraz znasz już podstawy struktury stron internetowych. Nawet jeśli nie budujesz stron internetowych, jesteś nieco bardziej świadomy sieci, z której korzystasz na co dzień.

jak zmniejszyć rozmiar pliku jpeg?

Aby dowiedzieć się więcej, uaktualnij swoje umiejętności tworzenia stron internetowych za pomocą podstawowych narzędzi, a następnie sprawdź nasz poradnik jak zaprojektować swoją pierwszą stronę internetową .

Źródło: Belyaevskiy/ Depositphotos

Udział Udział Ćwierkać E-mail 5 wskazówek, jak doładować swoje maszyny VirtualBox Linux

Masz dość słabej wydajności oferowanej przez maszyny wirtualne? Oto, co powinieneś zrobić, aby zwiększyć wydajność VirtualBox.

Czytaj dalej Powiązane tematy
  • Programowanie
  • HTML
  • Tworzenie stron internetowych
  • JavaScript
  • Narzędzia dla webmasterów
  • Programowanie
  • HTML5
O autorze Ben Stegner(opublikowano 1735 artykułów)

Ben jest zastępcą redaktora i kierownikiem ds. wdrażania w MakeUseOf. Zrezygnował z pracy w IT, aby pisać w pełnym wymiarze godzin w 2016 roku i nigdy nie oglądał się za siebie. Od ponad siedmiu lat zajmuje się samouczkami technicznymi, rekomendacjami gier wideo i nie tylko.

Więcej od Bena Stegnera

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować