• O nas
  • Kontakt
Technicalia.pl
  • Strona główna
  • Aktualności
  • Felietony
  • Gry
  • Pomoc techniczna
Brak wyników
Wyświetl wszystkie wyniki
Technicalia.pl
Brak wyników
Wyświetl wszystkie wyniki

Podstawy pisania stron – Kurs HTML #1

Adam Wiśniewski przez Adam Wiśniewski
30 marca 2020
A A

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
Poprzedni wpis

Trailer GTA 6 już niedługo!

Następny wpis

Oto kontroler do PS5. Jak prezentuje się DualSense?

Adam Wiśniewski

Adam Wiśniewski

Pasjonat grafiki komputerowej oraz programowania. Grom komputerowym nie odmawia.

Powiązane wpisy

meta bg
Aktualności

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

10 listopada 2021
Windows 11 – wszystko, co musisz o nim wiedzieć
Microsoft

Windows 11 – wszystko, co musisz o nim wiedzieć

5 listopada 2021
Gry

Ataki DDoS na największe serwery Minecraft

26 czerwca 2021
Następny wpis
Oto kontroler do PS5. Jak prezentuje się DualSense?

Oto kontroler do PS5. Jak prezentuje się DualSense?

Dodaj komentarz Anuluj pisanie odpowiedzi

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

Polecane.

Stronność polityczna YouTube została przebadana

Stronność polityczna YouTube została przebadana

17 lutego 2020
Windows 10 zacina? Oto prawdopodobne powody.

Windows 10 zacina? Oto prawdopodobne powody.

2 sierpnia 2020

Trendujące.

Brak dostępnej zawartości
  • O nas
  • Polityka prywatności
  • Kontakt

© 2021 Technicalia.pl: Technologia bliżej Ciebie

Brak wyników
Wyświetl wszystkie wyniki
  • Pomoc techniczna
  • Gry
  • Aktualności
  • Felietony

© 2021 Technicalia.pl: Technologia bliżej Ciebie

Ta strona używa plików cookies, kontynuując korzystanie z witryny, wyrażasz zgodę na ich użycie. Polityka prywatności.