#1.1. Wprowadzenie | #1. Struktura HTML oraz stylizacja CSS

#1.1. Wprowadzenie

 

Zawód Frontend Developer?

W dzisiejszych czasach byłby problem znaleźć osobę, która nie korzysta z Internetu. Jednak spora część osób nie wie, jak są skonstruowane strony internetowe.

Osoby posiadające wiedzę i umiejące budować rozwiązania związane z stronami, mają większą świadomość technologiczną, ale również większą możliwość znalezienia pracy w IT. Specjalistów wcząż brakuje i będzie brakować.

Najlepiej zarabiającą grupą specjalistów IT są programiści. Zmierzają się z wieloma różnymi rozwiązaniami. Część z nich tworzy rozwiązania webowe, które można otworzyć w przeglądarce internetowej. Przyjęło się że taka osoba nazywana jest ogólnie webdeveloperem.

W ramach zawodu webdevelopera wyróżnia się następujące specjalizacje:

  • Front-end Developer – osoba która tworzy warstwy wizualne strony internetowej na wzór projektu od grafika, oraz dodaje interakcje elementom dynamicznych, np. kliknięcie w przykładowy element spowoduje zmianę na stronie. Projektuje szablony które mają głównie charakter prezentacyjny. Zaawansowany front-endowiec umie tworzyć również rozwiązania funkcyjne, tzn. interakcje z komunikacją z baządanych). Front-endowiec powinien znać między innymi następujące technologie: HTML5, CSS3, SASS, framework odpowiadający front-endowi oraz podstawy JavaScript/jQuery.
  • Back-end Developer – osoba która jest od logiki aplikacji wpływająca na jej funkcjonalność (zachowanie) oraz za konstrukcje bazy danych, w której są przechowywane dane wyświetlane w aplikacji – w warstwie front-endowej. Również taka osoba odpowiada za wydajność i bezpieczeństwo. Niezbędne technologie, to między innymi: PHP lub Python, baza danych – MySQL lub MongoDB, system dla serwera – Linux lub Windows Server.
  • JavaScript Developer – programista stojący między front-endem a back-endem, budujący zaawansowane powiązania we front-endzie lub pomagając przy komunikacji pomiędzy front-endem a bazą danych w back-endzie. Zaawansowany programista JS używa jednego z frameworków (bibliotek), przykładowo: Angulara lub Reacta.
  • Full-stack Developer – osoba doświadczona, która łączy w sobie kompetencje front-endowe, back-endowe i JavaScript developera, czyli osoba potrafiący 3 powyższe specjalizacje.

W moim kursie chciałbym przedstawić materiał osobom chcącym być Junior Front-end Developerem. Jest to zapewne tańsze rozwiązanie niż szkolenia typu bootcamp, tzn. udostępniam autorski materiał z niskim progiem wejścia. Każdy programista ciągle się uczy, więc i ja tworząc takie materiały udoskonalam swoje umiejętności.

 

Metody internetowe 

Programiści, a dokładniej w naszym przypadku – webdeveloperzy budują różne rozwiązania internetowe, które przedstawiane są jako:

  • Strony internetowe – prezentują informację, w formie wizytówki. Ich rola to głównie informacyjna. Sporadycznie posiadają elementy funkcjonalne.
  • Serwisy internetowe – są to bardziej rozbudowane rozwiązania , np. serwisy informacyjne.
  • Aplikacje mobilne – oprogramowanie dedykowane na telefony (smartfony) posiadające zaawansowane funkcje.
  • Aplikacje internetowe – aplikacje posiadające pewne funkcjonalności, np. pakiet arkuszy kalkulacyjnych.

W tym kursie pokaże jak przygotować szablony dla stron internetowych. To podstawowe zajęcie w pracy front-endowca. Również będziemy tworzyć aplikacje internetowe, wyposażone w różne funkcjonalności. Wszystkie efekty swojej pracy, będzie można zobaczyć w przeglądarce.

 

Działanie strony internetowej

Strona internetowe jest zbudowana z plików o rozszerzeniu “.html”, np. index.html. Nasze urządzenie odbiorcze, czyli komputer, smartfon to tzw. klient. Po wpisaniu adresu w przeglądarce i zatwierdzenie go, to do serwera przez Internet podąża żądanie otrzymania, np. kodu źródłowego strony internetowej. Gdy żądanie jest prawidłowe to serwer odpowie i wyśle z powrotem kod HTML. Na końcu otrzymamy wynik, tzn. w przeglądarce pojawi się żądana strona internetowa.

 

HTML – definicja

Sktót HTML (z angielskiego: HyperText Markup Language) to hipertekstowy język znaczników. Co to znaczy hipertekstowy? W nim można używać linków, które kierują do innych plików HTML, czyli w łatwy i czytelny sposób można przemieszczać się między stronami.

Język HTML jest podstawowym językiem do budowy strony internetowej. Trzyma w sobie treść strony i tworzy strukturę tej treści. Można odnieść wrażenie, że za pomocą języka HTML definiuje się wygląd strony a tak nie jest. HTML to tylko struktura informacji na naszej stronie.

Gdy wejdziemy w szczegóły, to poprzez określanie struktury należy rozumieć, że HTML określa typy treści, którą w sobie zawiera, zagnieżdżenia i kolejność. Wyróżniamy następujące typy treści:

  • linki,
  • nagłówki,
  • teksty, paragrafy, znaki końca linii
  • zdjęcia i grafiki,
  • kontenery treści.

 

Dokument HTML

Cały kod HTML zapisywany jest w tekstowych plikach z rozszerzeniem html. np. plik index.html. Przed rozszerzeniem nadajemy nazwę pliku. Po utworzeniu takiego pliku w przeglądarce internetowej, zawarty w nim kod HTML zostanie zinterpretowany i zostanie wyświetlona tylko treść bez kodu. Niebawem dowiesz się co w takim pliku jest kodem, a co treścią.

Witryna internetowa to komplet takich dokumentów HTML, pomiędzy którymi możemy się poruszać, przykładowo za pomocą linków w naszych dokumentach html.

Plik HTML można edytować nawet w windowsowym notatniku, lub w programach, w których ułatwiają tą edycje. Takie programy dają duże możliwości, np. otwarcie całego projektu w formie drzewa plików i katalogów. Kolejną dogodnością jest kolorowanie składni i pilnowanie formatowania kodu. W moim kursie przedstawię program umożliwiający edycje kodu – Visual Studio Code. Pokaże jego możliwości pod względem technicznym. Bez problemu można go sobie pobrać w wersji darmowej. Po instalacji można w ramach testu, utworzyć nowy dokument html i umieścić w nim dowolny tekst.

Struktura i tagi HTML

Podstawowym elementem kodu HTML jest tag, tłumacząc – znacznik. To specjalne słowo kluczowe które umieszcza się wewnątrz ostrych nawiasów (tzw. znak mniejszości i większości). Konstrukcja tagu wygląda następująco:

<tag_name>zawartość</tag_name>

Zawartość pomiędzy ostrymi nawiasami określa typ tagu. Tagi to kod HTML, a teksty między nimi to treść. Tagi ograniczają teksty, co umożliwia określić strukturę dokumentu HTML.

Poniżej podaje najważniejsze cechy tagów:

  • Pierwszy tag w parze to tag otwierajacy, natomiast drugi to tag zamykający, np. <p></p>
  • Tag zamykający ma podobną konstrukcje do tagu otwierającego. W tym przypadku należy dodać “/” przed nazwą,
  • Niektóe tagi nie wymagają zamknięcia, np.<br>

Przykładowe tagi i struktura dokumentu HTML

Wszystkie dokumenty HTML mają ściśle określoną strukturę – tzn. kod początkowy, który powtarza się za każdym razem w każdym pliku HTML. W ramach tej struktury umieszczamy swoją treść i inne tagi.  Poniżej dodaję przykładową strukturę:

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Moja pierwsza strona</title>
    </head>
    <body>
        <h1>Mój pierwszy tytuł</h1>
        <p>Mój pierwszy paragraf i <a href="https://www.stronanowoczesna.pl">Stronanowoczesna.pl</a>.</p>
        <img src="obraz.jpg" alt="krajobraz" title="album">
    </body>
</html>

Wyjaśnienie elementów struktury:

  • Deklaracja DOCTYPE pokazuje typ dokumentu jako HTML,
  • Zawartość pomiędzy znacznikami “html” to dokument HTML.
  • Treść pomiędzy znacznikami “head” prezentuje informacje o stronie, które są istotne dla przeglądarki, ale nie widoczne dla końcowego użytkownika,
  • Zawartość w tagach “meta” (zagnieżdzone pomiędzy znacznikami “head”) zawiera informacje niezbędne dla przeglądarki. Aby poprawnie znaki polskie się wyświetlały za pomocą tagu meta dodajemy kodowanie UTF-8:
<meta charset="UTF-8">
  • Zawartość między znacznikami “title” to tytuł strony. Zawsze go widać na samej górze okna przeglądarki, na zakładce “tab”.
  • Treść w tagach “link” to przeważne podpięcie arkusza stylów (przedstawię to dokładniej w kolejnym rozdziale),
  • Zawartość pomiędzy znacznikami “script” to metoda na dołączenie skryptów do strony. W przyszłości poruszę temat w kursie,
  • Treść między znacznikami “body” to jest to co widzimy w przeglądarce. Wstawiamy w nich wszystkie teksty, zdjęcia oraz wszystkie inne poniższe elementy,
  • Słowa pomiędzy znacznikami “h1” to nagłówek strony,
  • Akapit pomiędzy znacznikami “p” to paragraf tekstu,
  • Treść pomiędzy: 
<a href="#"></a>

definiuje link, który ma kierować pod dany w atrybucie href adres,

  • Znacznik:
<img src="obraz.jpg" alt="">

wstawia plik grafiki na stronę z danego źródła src.

Atrybuty tagów

Znacznikom, czyli tagom HTML można dodawać atrybuty, które określają dodatkowe właściwości tagu. Poniżej spójrz jak dodać taki atrybut:

<tag_name attribute1="valueX" attribute2="valueY">content</tag_name>

Atrybuty dodaje się do tagu otwierającego. Do jednego tagu można dodać kilka atrybutów, pamiętając aby dodać spację między nimi. Po znaku równości dodaję się podaje się wartość atrybutu, zawierając ją w cudzysłowie.

W przypadku różnych tagów można stosować różne atrybuty, które przyjmują określoną wartość. Przykładowo, aby dodać obraz do dokumentu HTML, należy napisać następujący kod:

<img src="obraz.jpg" alt="las" title="Mój krajobraz">

Po znaku < nadajemy nazwę tagu, np. img. Następnie dodajemy atrybut src, który nadaje nazwę pliku grafiki w cudzysłowie. Zaraz po src możemy zauważyć atrybut title oraz alt. Atrybut title powoduje, że po najechaniu kursorem na grafikę, pokaże się treść zawierająca wartość tego atrybutu. Atrybut alt umożliwia nam określić tekst zastępczy dla obrazka, który ma się pojawić, gdy nastąpi problem z wyświetleniem. Test powinien nawiązywać do treści grafiki.

Wszystkie tagi/atrybuty mamy umieszczone na stronie W3schools. Jest to godne polecenia źródło informacji o HTML i nie tylko. To istna encyklopedia naszych czasów. Warto co jakiś czas zaglądać do niej, zamiast uczyć się wszystkiego na pamięć.

 

Tagi – zagnieżdżanie 

Ważnym punktem widzenia struktury dokumentu HTML jest to, że możemy zagnieżdżać tagi jeden w drugim. Poniżej podaje przykład:

<body>
    <h1>Mój pierwszy nagłówek</h1>
    <p>Mój pierwszy <a href="http://google.pl">akapit</a>.</p>
    <img src="foto.jpg alt="fotografia" title="krajobraz">
</body>

Tag paragrafu p jest zagnieżdżony w body, a w nim jest zagnieżdżony link a href="". Jest to tzw. struktura drzewiasta. Zagnieżdżone tagi o poziom niżej należy w kodzie wcinać w prawo. Służy oczywiście do tego klawisz “TAB”. Przede wszystkim ma to ułatwić czytanie kodu. Od razu widzimy co jest w czym zagnieżdżone. Należy pamiętać, że wszystkie dzieci w danym tagu powinny mieć to samo wcięcie.

Popularną praktyką jest nazewnictwo co do relacji tagów wg zagnieżdżania. Na przykładzie kodu wygląda to następująco:

  • child (z ang. dziecko) – p jest dzieckiem body,
  • parent (z ang. rodzic) – body jest rodzicem p,
  • sibling (z ang. rodzeństwo) – h1 jest rodzeństwem img oraz p.

Należy pamiętać, żeby trzymać się konsekwentnie porządku w kodzie – w tym przypadku aby pilnować poprawnego zagnieżdżenia. Poniżej dodałem przykład jak nie powinno się robić:

<div>
    <p>Cześć</p>
<p>Jak się masz?</p>
</div>
Tagi p powinny posiadać takie samo wcięcie względem div. Prawidłowe zagnieżdżenie w tym przypadku powinno być następujące:
<div>
    <p>Cześć</p>
    <p>Jak się masz?</p>
</div>

HTML – wersja 5

Znacznik !DOCTYPE html w pierwszej linii oznacza, że został zastosowany HTML5. To najnowsza wersja i aktualnie stosowana wersja tego języka.

Streszczając – HTML5 dostarcza zestaw nowych tagów. Wszystkie tagi można znaleźć na stronie . Główną rolą tagów z najnowszej wersji jest nadanie dokładniejszego znaczenia poszczególnym elementom w dokumencie HTML. Przykładowo, gdy tworzymy pasek nawigacji na stronie, można użyć tagu nav zamiast div, który jest ogólnym znacznikiem sekcji treści. W taki sposób przeglądarka wie, że dany obszar to nawigacja strony, a nie stopka bądź inny element.

Najpopularniejsze znaczniki stosowane w HTML5 to między innymi: header, nav, aside, section, footer, strong, em, article.

 

 

Ćwiczenie: Strona internetowa na rozgrzewkę

Stwórz nowy projekt w Codesandbox.

  • Dodaj standardową strukturę dokumentu html.
  • W tytule strony (title) dodaj zawartość: “Strona internetowa”.
  • W sekcji body dodaj nagłówek pierwszego stopnia (h1) z zawartością taką samą jak tytuł strony.
  • Pod nagłówkiem, dodaj 3 paragrafy tekstu (p). Nad każdym z nich dodaj nagłówek stopnia drugiego. Wypełnij je przykładową treścią, np. “O mnie”.
  • Pod trzecim nagłówkiem dodaj dwa działające linki, np. Google i Facebook. Dzięki atrybutowi target="_blank" strona uruchomi się w nowej zakładce. Prawidłowa składnia poniżej:
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="https://www.facebook.com/"target="_blank">Facebook</a>
  • Pod linkami umieść na stronie 2 zdjęcia – np. z darmowej strony . Do tego użyj następującego kodu: 
<img src="pierwszy link zdjęcia">
<img src="drugi link zdjęcia">
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

quizzical-galois-5fkcn

quizzical-galois-5fkcn danielminschinski

Wszystkie pytania proszę kierować na mojego Messengera, lub bezpośrednio na emaila: danielminschinski@gmail.com

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube. 

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!