fbpx
Front-endPoczątki programowania

HTML w 5 minut

Szybki poradnik HTML dla początkujących!

Przypominam: 15 kwietnia o godzinie 18:00 będziemy kontynuować nasze warsztaty Pierwszy krok do IT. W drugim odcinku zaczniemy prawdziwą zabawę w tworzenie stron, a to dzięki CSS. Przygotowałem dla Was szybki refresher z HTML. Jeśli wolisz wersje wideo, to na dole masz link do webinaru, na którym omawiałem te zagadnia.

HTML

HTML – jest językiem znaczników i stanowi podstawę budowania stron internetowych. W skrócie: piszemy jakiś znacznik i jest on zamieniany przez przeglądarkę na element, który jemu odpowiada.

Np. napiszemy znacznik <img> a przeglądarka wyświetli nam obrazek.

Edytor kodu

Kod HTMl najlepiej pisać w Edytorze kodu. Edytor kodu to nic innego jak notatnik z wieloma pomocnymi funkcjami. My będziemy używać Visual Studio Code, którego możesz pobrać za darmo tutaj.

Znacznik

Znacznik to tag otoczony dwoma znakami < oraz >. Standardowo element w HTML posiada dwa znaczniki. Otwierający i zamykający. Zobaczmy to na przykładzie elementu paragrafu:

<p>Tutaj treść paragrafu</p>

Taki kod wstawi nam na stronę paragraf, a treścią będzie „Tutaj treść paragrafu”. Jak widzisz paragraf otwierany jest znacznikiem <p> a zamykany znacznikiem </p>. Ten dodatkowy znak / sprawia, że jest to znacznik zamknięcia. Prawie każdy element musi być zamknięty. Prawie… bo oczywiście istnieje parę wyjątków. Są elementy, których nie trzeba zamykać, ale o tym później.

Ile jest znaczników?

Całkiem sporo, natomiast:

  • Na początku wystarczy Ci znajomość kilku
  • Nie musisz uczyć się ich na pamięć
  • Nie wszystkich się używa, a część używa się sporadycznie

Na początku wystarczą te:

Struktura dokumentu

Każdy dokument HTML musi mieć taką strukturę:

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

Oznacza to, że jeśli tworzysz nowy plik HTML, to zawsze zaczynasz od takiej struktury.

Wypełnijmy powyższą strunkturę jakimś przykladowym kodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tytuł mojej strony</title>
  </head>
  <body>
    <p>Treść mojej strony</p>
  </body>
</html>

Co my tu mamy:

<!DOCTYPE html>

Określa wersję HTML. Dawniej ten znacznik miał większe znaczenie, dziś po prostu musisz pamiętać, że zawsze taki ma być na początku dokumentu.

Dalej mamy element <html>:

<!DOCTYPE html>
<html>
  
</html>

W elemencie <html> znajduje się element <head>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tytuł mojej strony</title>
  </head>

</html>

W sekcji <head> wrzucamy wszystkie ustawienia dotyczące strony. Nie są one wyświetlane bezpośrednio na ekranie przeglądarki, ale mają wpływ na stronę. Powyżej mamy dodane dwa ustawienia. <meta charset=”utf-8″> który ustawia nam odpowiednie kodowanie pliku. W skrócie: bez tego nie będziemy mieć polskich znaków w tekście. A <title> pozwala nam ustawić tytuł strony. To jest ten tytuł, który wyświetla się, jak najedziesz na zakładkę w przeglądarce, w przypadku strony infoShare Academy wygląda on tak:

Dalej w <html> mamy <body>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tytuł mojej strony</title>
  </head>
  <body>
    <p>Treść mojej strony</p>
  </body>
</html>

W <body> umieszczamy już elementy, które będą wyświetlane w przeglądarce. Jest to treść naszej strony.

O strukturze w HTML myśl jak o pudełkach. Mamy pudełko <html>, w którym mamy dwa pudełka: <head> i <body>. W każdym wrzucamy inne rzeczy:

Atrybuty

Jak widzisz w sekcji <head> element <meta> jest jednym z tych znaczników, które nie mają zamknięcia. Dodatkowo posiada on atrybut charset=”utf-8″ w którym ustawiamy dodatkowe ustawienie. W przypadku meta charset w atrybucie podajemy utf-8 czyli rodzaj kodowania pliku. Takich kodowań jest wiele, więc musimy powiedzieć przeglądarce którego ma użyć.

Inny, bardziej czytelny przykład to element obrazka:

<img>

Skąd przeglądarka ma wiedzieć, jaki ma wyświetlić obrazek? Musimy dodać atrybut, który wskaże miejsce, w którym znajduje się obrazek. Robimy to przez dodanie atrybutu src. W środku atrybutu podajemy adres w internecie lub na dysku gdzie znajduje się nasz obrazek.

<img src="adres_naszego_obrazka">

Pod tym adresem znajduje się logo Google: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

Wystarczy wrzucić element <img> z atrybutem src, w którym jest ten adres, aby wyświetlić logo Google na naszej stronie:

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

Spróbuj!

Teraz otwórz Edytor kodu i spóbuj stworzyć swoją pierwszą stronę, która wyświetla obrazek z logiem Google. O to lista rzeczy, którą musisz zrobić:

  • otwórz Edytor kodu i stwórz nowy plik
  • skopiuj strukturę dokumentu HTML
  • do sekcji body dodaj element obrazeka z odpowiednim atrybutem
  • zapisz plik na pulpicie, pamiętaj, że pliki HTML muszą mieć odpowiednie rozszerzenie: .html
  • twój plik niech się nazywa: home.html
  • otwórz swój plik w przeglądarce i zobacz czy wyświetla się logo

Co dalej?

Jeśli chcesz, możesz obejrzeć webinar w którym przechodzę na żywo przez te wszystkie kroki:

Możesz doczytać więcej o znacznikach: https://www.w3schools.com/html/

Polecam przeczytać rozdział „Dla zielonych” na stronie: https://www.kurshtml.edu.pl/html/zielony.html

Spróbuj pobawić się pozostałymi znacznikami z listy. Np. listą lub tabelką.

Zapisz się na kolejny webinar

Nie zawsze za pierwszym razem wszystko zrozumiesz. To normalne. Dlatego kontynuuj naukę HTML i CSS z naszymi warsztatami. W drugim odcinku będę też przypominał o podstawach HTML. Zapisz się na bezpłatne warsztaty tutaj.

Sprawdź także
Close
Back to top button