Technicalia.pl
  • Strona główna
  • Aktualności
  • Felietony
  • Gry
  • Bezpieczeństwo
Brak wyników
Zobacz wszystkie
Technicalia.pl logo
  • Strona główna
  • Aktualności
  • Felietony
  • Gry
  • Bezpieczeństwo
Brak wyników
Zobacz wszystkie
Technicalia.pl
Brak wyników
Zobacz wszystkie

Podstawy pisania stron – Kurs HTML #1

adam Autorstwa adam
2020-03-30
w HTML, Kurs
kurs html

Czym byłyby strony internetowe bez HTML? Ten kurs z pewnością przygotuję was do ich tworzenia. Każdy może szybko nauczyć się tego języka. Zaraz po tym, jak uważnie przeczytasz ten kurs HTML, będziesz w stanie zrobić swoją pierwszą stronę internetową. Zacznijmy jednak od początku.

Podstawy HTML

Język HTML (ang. Hypertext Markup Language – Hipertekstowy Język Oznaczania) jak jego rozwinięta nazwa wskazuje, nie jest językiem programowania, lecz opisowym. Oznacza się nim różne elementy na stronie. Wyróżniają się między innymi pojedyncze paragrafy, nagłówki oraz całe sekcje. Każdy ze znaczników HTML umieszcza się w nawiasach < ostrych >.

Sam kod możemy pisać nawet w Windowsowym notatniku ale nie polecam tego. Dużo lepiej jest pobrać jakiś darmowy program. Ja szczerze polecam Sublime Text, na przykład w wersji 3.

Większość tagów w języku HTML wymaga zamknięcia. Tag zamkniemy wpisując </[nazwa taga]> na końcu elementu. Przykładowo, bo najlepiej się uczyć na przykładach, aby utworzyć zwykły akapit tekstu, wpisujemy do kodu:

<p>Treść akapitu</p>

Możesz sprawdzić jak działa w praktyce każdy przykładowy kod używając przycisku z prawej strony 🙂

„P” jest skrótem od angielskiego słowa „paragraph” oznaczającego akapit. Znaczna część znaczników (tagów) w języku HTML pochodzi od angielskich słów. Pełną listę tagów języka znajdziemy na przykład tutaj.

Pierwsza strona w języku HTML

Zacznijmy od powiedzenia przeglądarce internetowej z jakim językiem ma do czynienia. Robi się to poprzez umieszczenie <!doctype HTML> na początku dokumentu. Teraz powinniśmy utworzyć tak zwane ramy dokumentu. Rama dokumentu składa się ze znaczników <head> oraz <body>. W tym pierwszym znajdować się będą informacje o naszej witrynie, natomiast w <body> treść strony.

Następnie otwórzmy znacznik nagłówka <h1>. Liczba w tym znaczniku określa stopień nagłówka. W sekcji <head> dodać możemy znacznik dodający <title> tytuł strony </title>, znajdujący się w między innymi w nazwie karty w przeglądarce.

Następnie dodajmy jakiś akapit tekstu żeby użytkownicy wiedzieli coś więcej na ten temat. Umieścimy go tym razem w znaczniku <p>.

<!doctype HTML>
<head>
  <title>Przykładowy tytuł strony</title>
</head>
<body>
  <h1>Przykładowy NAGŁÓWEK strony</h1>
  <p>Przykładowy AKAPIT strony</p>
</body>

Sam tekst zapewne zawiera dużo wartościowych i znaczących informacje, aczkolwiek dla czytelnika jest po prostu „klockiem” tekstu. Lepiej jest dodać jakąś grafikę czy obraz. Ważne jest, abyśmy mieli prawo do wykorzystania tego pliku lub żeby obowiązywaa na nim licencja Creative Commons (CC).

Gdy znajdziemy odpowiedni obraz, pobierzmy grafikę na nasz dysk a w kodzie dopiszmy:

<img src="przykladowa-sciezka-do-pliku/plik.png">

Gdy przeglądarka nie znajdzie w podanej lokalizacji zdjęcia o podanej nazwie wyświetli domyślny obrazek. Możesz go zobaczyć po kliknięciu przycisku „play” po prawej stronie okienka z powyższym kodem 😉

Atrybut „src” w tym tagu oznacza jego źródło i nie musi być ono lokalne, to znaczy że możemy tutaj wstawić link do obrazka na jakiejś stronie internetowej czy serwerze. Jest to jeden z tych znaczników HTML, których nie musimy zamykać.

Eksport pliku HTML

Niezależnie od tego w jakim programie pisaliśmy nasz kod procedura eksportu powinna przebiegać podobnie. Jeżeli robiliśmy to w Windowsowym Notatniku klikamy kolejno „Plik” > „Zapisz jako”. Następnie koniecznie w rozszerzeniu wybieramy plik *.html a nazwę wpisujemy według własnego uznania.

Jak plik zostanie zapisany w wygodnej dla nas lokalizacji, przykładowo na pulpicie, system powinien automatycznie wykryć i otworzyć go w domyślnej, zainstalowanej przeglądarce internetowej. Teraz możemy go dowolnie modyfikować i dodawać treść.

Kurs HTML cz. 1

To koniec pierwszej części kursu do języka HTML. W niedalekiej przyszłości ukażą się kolejne części tego cyklu, którego celem jest stworzenie samemu ładnej, estetycznej i wygodnej w obsłudze strony. Jej zawartość merytoryczna zależy tylko od was, autorów każdej strony jaką kiedykolwiek zrobicie. Gdy jednak czegoś nie zapamiętaliści zawsze możecie i powinniście otworzyć ten kurs HTML.

Tagi: HTMLkomputeryPoradnikstrony internetowe
Udostępnij14Tweet

Powiązane wpisy

kurs html
HTML

Podstawy CSS – kurs HTML #2

HTML jest naprawdę prosty w nauce, aczkolwiek by nie zapomnieć podstaw tego języka, warto dość często przypominać go sobie. W...

2020-04-11
Następny wpis

Oto kontroler do PS5. Jak prezentuje się DualSense?

kurs html

Podstawy CSS - kurs HTML #2

Komentowane 1

  1. Mark says:
    3 miesiące temu

    Thanks for your blog, nice to read. Do not stop.

    Odpowiedz

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Sprawdź

gta trilogy main

GTA Trilogy The Definitive Edition – recenzja

2022-11-28
meta bg

Meta – nowy pomysł Facebooka, co z nim nie tak?

2021-11-10

Windows 11 – wszystko, co musisz o nim wiedzieć

2021-11-05
  • Popularne
  • Komentowane
  • Najnowsze

Co zainstalować po formacie? – subiektywna lista

2021-04-27
gta trilogy main

GTA Trilogy The Definitive Edition – recenzja

2022-11-28

Windows 11 – wszystko, co musisz o nim wiedzieć

2021-11-05
Premiera iPhone 13

Premiera iPhone 13 Pro już za nami!

2021-09-15
kurs html

Podstawy pisania stron – Kurs HTML #1

1

Jedi Fallen Order – jak gra pokonała film

0

Stronność polityczna YouTube została przebadana

0

Kiedy wrócimy na Księżyc? – znamy odpowiedź

0
gta trilogy main

GTA Trilogy The Definitive Edition – recenzja

2022-11-28
meta bg

Meta – nowy pomysł Facebooka, co z nim nie tak?

2021-11-10

Windows 11 – wszystko, co musisz o nim wiedzieć

2021-11-05
Premiera iPhone 13

Premiera iPhone 13 Pro już za nami!

2021-09-15
Technicalia.pl logo

© 2022 Technicalia.pl: Technologia bliżej Ciebie.

Inne

  • O nas
  • Polityka prywatności
  • Kontakt

Znajdź nas

Brak wyników
Zobacz wszystkie
  • Strona główna
  • Aktualności
  • Felietony
  • Gry
  • Bezpieczeństwo
Go to mobile version