17 prostych przykładów kodu HTML, których możesz się nauczyć w 10 minut

17 prostych przykładów kodu HTML, których możesz się nauczyć w 10 minut

Mimo że współczesne witryny internetowe są na ogół budowane z przyjaznymi dla użytkownika interfejsami, warto znać podstawowy kod HTML. Jeśli znasz 17 przykładowych tagów HTML (i kilka dodatków), będziesz w stanie stworzyć podstawową stronę internetową od podstaw lub zmodyfikować kod utworzony przez aplikację taką jak WordPress.





Dostarczyliśmy przykłady kodu HTML z danymi wyjściowymi dla większości tagów. Jeśli chcesz zobaczyć je w akcji, pobierz przykładowy plik HTML na końcu artykułu. Możesz bawić się nim w edytorze tekstu i załadować go w przeglądarce, aby zobaczyć, co zrobią twoje zmiany.



1.

Będziesz potrzebować tego tagu na początku każdego tworzonego dokumentu HTML. Zapewnia, że ​​przeglądarka wie, że czyta HTML i oczekuje HTML5, najnowszej wersji.





Mimo że nie jest to w rzeczywistości tag HTML, warto o nim wiedzieć.

2.

To kolejny tag, który informuje przeglądarkę, że czyta HTML. Tag znajduje się bezpośrednio po tagu DOCTYPE i zamykasz go tagiem na samym końcu pliku. Wszystko inne w twoim dokumencie znajduje się między tymi znacznikami.



3.

Tag rozpoczyna sekcję nagłówka pliku. Treści, które tu trafiają, nie pojawiają się na Twojej stronie internetowej. Zamiast tego zawiera metadane dla wyszukiwarek i informacje o przeglądarce.

W przypadku podstawowych stron tag będzie zawierał Twój tytuł i to wszystko. Ale jest jeszcze kilka innych rzeczy, które możesz uwzględnić, a omówimy je za chwilę.



Cztery.

Ten tag ustawia tytuł Twojej strony. Wszystko, co musisz zrobić, to umieścić swój tytuł w tagu i zamknąć go w ten sposób (dołączyłem również tagi nagłówka, aby pokazać kontekst):


My Website

Jest to nazwa, która będzie wyświetlana jako tytuł karty po otwarciu w przeglądarce.



5.

Podobnie jak tag tytułowy, metadane są umieszczane w obszarze nagłówka strony. Metadane są używane głównie przez wyszukiwarki i zawierają informacje o zawartości Twojej strony. Istnieje wiele różnych pól meta, ale są to jedne z najczęściej używanych:

  • opis : Podstawowy opis Twojej strony.
  • słowa kluczowe : wybór słów kluczowych mających zastosowanie do Twojej strony.
  • autor : Autor Twojej strony.
  • rzutnia : Tag zapewniający, że Twoja strona będzie dobrze wyglądać na wszystkich urządzeniach.

Oto przykład, który może dotyczyć tej strony:




Tag „viewport” powinien zawsze zawierać treść „width=device-width, initial-scale=1.0”, aby Twoja strona dobrze się wyświetlała na urządzeniach mobilnych i stacjonarnych.

6.

Po zamknięciu sekcji nagłówka dojdziesz do treści. Otwierasz to tagiem i zamykasz tagiem. To idzie na samym końcu pliku, tuż przed tagiem.

Cała zawartość Twojej strony internetowej znajduje się pomiędzy tymi tagami. To tak proste, jak się wydaje:


Everything you want displayed on your page.

7.

Nieco mniejszy nagłówek


Podtytuł

Wynik:

Jak widać, na każdym poziomie stają się mniejsze.

8.

Znacznik akapitu rozpoczyna nowy akapit. To zwykle wstawia dwa podziały wiersza.

Spójrz na przykład na przerwę między poprzednią linią a tą. To właśnie

tag zrobi.

Your first paragraph.


Your second paragraph.

Wynik:

Twój pierwszy akapit.

Twój drugi akapit.

Możesz także użyj stylów CSS w tagach akapitów, takich jak ten, który zmienia rozmiar tekstu:

This is 50% larger text.

Wynik:

9.

Znacznik podziału wiersza wstawia pojedynczy podział wiersza:

The first line.

The second line (close to the first one).

Wynik:

Praca w podobny sposób to

etykietka. Spowoduje to narysowanie poziomej linii na stronie i jest dobre do oddzielania sekcji tekstu.

10.

Ten tag definiuje ważny tekst. Ogólnie oznacza to, że będzie odważny. Jednak możliwe jest użycie CSS do tworzenia tekst wyświetla się inaczej.

znajdź powieść romantyczną według opisu

Możesz jednak bezpiecznie używać do pogrubionego tekstu.

Very important things you want to say.

Wynik:

Bardzo ważne rzeczy, które chcesz powiedzieć.

Jeśli znasz tag do pogrubienia tekstu, nadal możesz go używać. Nie ma gwarancji, że będzie nadal działać w przyszłych wersjach HTML, ale na razie działa.

jedenaście.

Lubić oraz , oraz są powiązane. ten tag identyfikuje wyróżniony tekst, co ogólnie oznacza, że ​​zostanie on napisany kursywą. Ponownie, istnieje możliwość, że CSS sprawi, że podkreślony tekst będzie wyświetlany inaczej.

An emphasized line.

Wynik:

Podkreślona linia.

ten tag nadal działa, ale znowu jest możliwe, że zostanie przestarzały w przyszłych wersjach HTML.

12.

ten , czyli kotwica, tag umożliwia tworzenie łączy. Prosty link wygląda tak:

Przejdź do MUO

Atrybut „href” wskazuje miejsce docelowe linku. W wielu przypadkach będzie to inna strona internetowa. Może to być również plik, taki jak obraz lub plik PDF.

Inne przydatne atrybuty to „cel” i „tytuł”. Atrybut target jest prawie wyłącznie używany do otwierania linku w nowej karcie lub oknie, na przykład:

Go to MUO in a new tab

Wynik:

Przejdź do MUO w nowej zakładce

Atrybut „title” tworzy podpowiedź. Najedź na poniższy link, aby zobaczyć, jak to działa:

Hover over this to see the tool tip

Wynik:

Najedź na to, aby zobaczyć podpowiedź

13.

Jeśli chcesz umieścić obraz na swojej stronie, musisz użyć tagu obrazu. Zwykle będziesz go używać w połączeniu z atrybutem 'src'. Określa źródło obrazu, tak jak to:

Wynik:

ile można zarobić wydobycia bitcoina

Dostępne są inne atrybuty, takie jak „wysokość”, „szerokość” i „alt”. Oto jak to może wyglądać:

the name of your image

Jak można się spodziewać, atrybuty „height” i „width” ustawiają wysokość i szerokość obrazu. Ogólnie rzecz biorąc, dobrym pomysłem jest ustawienie tylko jednego z nich, aby obraz był poprawnie skalowany. Jeśli użyjesz obu, możesz skończyć z rozciągniętym lub zgniecionym obrazem.

Znacznik „alt” informuje przeglądarkę, jaki tekst wyświetlić, jeśli nie można wyświetlić obrazu, i dobrze jest dołączyć do dowolnego obrazu. Jeśli ktoś ma wyjątkowo wolne połączenie lub starą przeglądarkę, nadal może zorientować się, co powinno znajdować się na Twojej stronie.

14.

    Znacznik uporządkowanej listy umożliwia tworzenie uporządkowanej listy. Ogólnie oznacza to, że otrzymasz listę numerowaną. Każda pozycja na liście wymaga znacznika pozycji listy (

  1. ), więc Twoja lista będzie wyglądać tak:


    1. First thing

    2. Second thing

    3. Third thing

    Wynik:

    1. Pierwsza rzecz
    2. Druga rzecz
    3. Trzecia rzecz

    W HTML5 możesz użyć

      aby odwrócić kolejność liczb. Możesz ustawić wartość początkową za pomocą atrybutu start.

      Atrybut „type” pozwala poinformować przeglądarkę, jakiego typu symbolu należy użyć dla elementów listy. Można go ustawić na „1,” „A”, „a”, „I” lub „i”, ustawiając wyświetlanie listy ze wskazanym symbolem w następujący sposób:

        piętnaście.

          Lista nieuporządkowana jest znacznie prostsza niż jej uporządkowany odpowiednik. To po prostu wypunktowana lista.


          • First item

          • Second item

          • Third item

          Wynik:

          • Pierwsza pozycja
          • Druga pozycja
          • Trzecia pozycja

          Listy nieuporządkowane mają również atrybuty „typ”, które można ustawić na „dysk”, „koło” lub „kwadrat”.

          16.

          Chociaż używanie tabel do formatowania nie jest mile widziane, wiele razy będziesz chciał użyć wierszy i kolumn do segmentacji informacji na swojej stronie. Aby tabela działała, potrzebnych jest kilka tagów. Oto przykładowy kod HTML:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          ten

          oraz
          znaczniki określają początek i koniec tabeli. tentag zawiera całą zawartość tabeli.

          Każdy rząd tabeli jest ujęty wetykietka. Każda komórka w każdym rzędzie jest owinięta alboznaczniki dla nagłówków kolumn lubtagi dla danych kolumn. Potrzebujesz jednego z nich dla każdej kolumny w każdym rzędzie.

          Wynik:

          1. kolumna2. kolumna
          wiersz 1, kolumna 1wiersz 1, kolumna 2
          wiersz 2, kolumna 1wiersz 2, kolumna 2

          17.

          Kiedy cytujesz inną witrynę lub osobę i chcesz odróżnić cytat od reszty dokumentu, użyj tagu blockquote. Wszystko, co musisz zrobić, to umieścić cytat w otwierających i zamykających tagach cytatów blokowych:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Wynik:

          Sieć, tak jak to przewidziałem, jeszcze jej nie widzieliśmy. Przyszłość jest wciąż o wiele większa niż przeszłość.

          Dokładne formatowanie, które jest używane, może zależeć od używanej przeglądarki lub CSS witryny. Ale tag pozostaje ten sam.

          Przykłady kodu HTML

          Dzięki tym 17 przykładom HTML powinieneś być w stanie stworzyć prostą stronę internetową. Możesz je wszystkie przetestować już teraz w edytorze tekstu online, aby poczuć, jak działają.

          Aby uzyskać więcej krótkich lekcji HTML, wypróbuj kilka aplikacji do mikronauki do kodowania. Pomogą Ci szybko przyspieszyć.

          Udział Udział Ćwierkać E-mail Chcesz nauczyć się podstaw kodowania? Wypróbuj 5 niewielkich aplikacji do kodowania w wolnym czasie

          Chcesz nauczyć się podstaw kodowania, ale masz mało czasu? Te niewielkie aplikacje do kodowania zajmą Ci zaledwie kilka minut pracowitego dnia.

          Czytaj dalej           Powiązane tematy
          • Programowanie
          • Wordpress
          • HTML
          • Tworzenie stron internetowych
          • Poradniki kodowania
          O autorze Andy Betts(221 opublikowanych artykułów)

          Andy jest byłym dziennikarzem prasowym i redaktorem magazynu, który od 15 lat pisze o technologii. W tym czasie przyczynił się do niezliczonych publikacji i wykonał prace copywriterskie dla dużych firm technologicznych. Prowadził również eksperckie komentarze dla mediów oraz prowadził panele na wydarzeniach branżowych.

          Więcej od Andy'ego Bettsa

          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ć