• O nas
  • Kontakt
Technicalia.pl
  • Strona główna
  • Aktualności
  • Felietony
  • Gry
  • Promocje
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 autor 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 artykuł

Trailer GTA 6 już niedługo!

Następny tekst

Oto kontroler do PS5. Jak prezentuje się DualSense?

Adam Wiśniewski

Adam Wiśniewski

Pasjonat grafiki komputerowej oraz programowania. Grom komputerowym nie odmawia.

Ostatnie artykuły.

Intel Tiger Lake 4.8 GHz na nagraniach!
Komputery

Intel Tiger Lake 4.8 GHz na nagraniach!

1 września 2020
Microsoft Flight Simulator – recenzja
Gry

Microsoft Flight Simulator – recenzja

28 sierpnia 2020
the-last-of-us_technicaliapl
Felietony

The Last of Us Part II – Gra roku czy totalna porażka?

24 czerwca 2020
Następny tekst
Oto kontroler do PS5. Jak prezentuje się DualSense?

Oto kontroler do PS5. Jak prezentuje się DualSense?

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Polecane.

Xiaomi Mi Band 5 – co nowego oferuje?

Xiaomi Mi Band 5 – co nowego oferuje?

12 czerwca 2020
Windows May 2020 Update z poważnymi problemami

Windows May 2020 Update z poważnymi problemami

30 maja 2020

Trendujące.

iPhone 11 Pro w 2021 roku – czy warto kupić?

iPhone 11 Pro w 2021 roku – czy warto kupić?

22 stycznia 2021
Windows 10 (nie) potrzebuje antywirusa! Dlaczego?

Windows 10 (nie) potrzebuje antywirusa! Dlaczego?

5 września 2020
Przyspieszanie dysku HDD – co robisz źle?

Przyspieszanie dysku HDD – co robisz źle?

23 maja 2020
iPhone SE 2020 – wszystko, co musisz wiedzieć

iPhone SE 2020 – wszystko, co musisz wiedzieć

18 kwietnia 2020
Microsoft Flight Simulator – recenzja

Microsoft Flight Simulator – recenzja

28 sierpnia 2020
  • O nas
  • Polityka prywatności
  • Kontakt

© 2021 Technicalia.pl: Technologia bliżej Ciebie

Brak wyników
Wyświetl wszystkie wyniki
  • 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.