najłatwiejsza strona internetowa

Najłatwiejsza strona internetowa

27 maja 2021 | 2 min czytania


Najłatwiejsza strona internetowa

Jak myślisz ile potrzeba czasu, żeby nauczyć się pisać strony internetowe? Pisać? To strony się pisze? Przecież one mają własne layouty to jakim cudem mogą być napisane? Otóż całym pięknem tworzenia stron internetowych jest to, że od samego początku do końca strona jest tekstem i żeby ją stworzyć trzeba znać przynajmniej jeden język kodowania, jakim jest HTML. Język ten odpowiada za to, co wyświetla się na stronie, czyli innymi słowy mówiąc za treść. Jeżeli chcemy nagłówek używamy odpowiedniego tagu, jeżeli tabelę odpowiedniej konstrukcji tagów i tak dalej. Pewnie jest to trochę zawiłe więc postanowiłem pokazać Ci mały przykład i stworzyć z Tobą bardzo podstawową stronę internetową.

Jakie umiejętności trzeba mieć, żeby stworzyć prostą stronę www

Tak naprawdę umiejętności, które opisałem powyżej, czyli znajomość podstawowego języka kodowania, czyli HTML to jedno, ale musimy także mieć wiedzę na temat konstrukcji strony internetowej. Chodzi o to, że oprócz tagów, które odpowiadają za wygląd, musimy wstawić także tagi, które odpowiadają za bardzo ogólnie mówiąc informacje o stronie, czy na przykład tzw. meta tagi, tag title itd. Zaraz, ale gdzie my to wszystko mamy pisać? Najprostszym edytorem HTML jest po prostu zwykły systemowy Notatnik. Otwórzmy więc go i zapiszmy pusty plik w nowoutworzonym folderze pod dowolną nazwa. Plik nazwiemy index.html. Żeby plik odpowiednio się zapisał za pomocą notatnika opcję Zapisz jako typ musimy mieć zaznaczoną jako „wszystkie pliki”.

Podstawy języka HTML

Dobrze, mamy już nasz pierwszy plik HTML, w którym możemy edytować zmiany. Plik jest pusty, więc musimy wprowadzić do niego konstrucję HTML. Podstawowy szkielet pliku HTML wygląda następująco:

<!DOCTYPE html>



<html lang="pl">



<head>



    <meta charset="UTF-8">



    <title>Tytuł</title>



</head>



<body>



</body>



</html>

Co oznaczają powyższe tagi:

  • Tag <!DOCTYPE html> informuje przeglądarkę o tym, że ma do czynienia z plikiem HTML
  • Tag <html> otwiera plik HTML i zamyka go na końcu, a lang=”pl” mówi, że strona jest napisana w języku polskim
  • Tag <head> jest odpowiedzialny za tzw głowę witryny, czyli te informacje, których nie widać i należa do nich m.in. 
  • <meta charset=”UTF-8″> – mówi przeglądarce jakie jest kodowanie witryny
  • <title>Tytuł</title> – nadaje tytuł witrynie
  • Sekcja body to ciało witryny, które odpowiada za „widzialne” elementy i tą sekcją zajmiemy się poniżej.
Sprawdź też:   Jak zainstalować WordPress

Semantyczne znaczniki kodu HTML

Zapisany plik z kręgosłupem HTML otwieramy ponownie w Notatniku. Będziemy zapisywać wszystko w sekcji body, ponieważ chcemy manipulować wyglądem naszej strony, a właśnie ta sekcja jest za to odpowiedzialna.

Nagłowki

Żeby strona była zoptymalizowana pod SEO musi posiadać jeden nagłowek <h1></h1>.

Istnieje 6 różnych nagłowków, a każdy z nich ma inną moc. Jak się łatwo domyślić h1 ma największą moc i na każdej podstronie może być tylko jeden i analogicznie pod nim mogą się znajdować nagłowki niższego rzędu.

Wstawmy więc do naszego kod w sekcji body taką linijkę:

<h1>Nasz pierwszy nagłówek</h1>

Pogrubienie

Istnieje zwykłe pogrubienie i semantyczne pogrubienie. To semantyczne pogrubienie mówi wyszukiwarce i syntezatorom mowy, że znajduje się tam coś ważnego. Taki tag zapisujemy następująco: <strong></strong>

Zapiszmy więc pod naszym nagłówkiem poniższą linijkę, żeby zobaczyć jak to działa.

Zdanie, które zawiera <strong>pogrubiony tekst</strong>

Obrazki

W obrazkach znajduje się jeden bardzo ważny atrybut, który bardzo duża ilość osób pomija, a dzięki niemu możemy się bardzo sprawnie pozycjonować w wyszukiwarce obrazów Google.

Zapismy dowolny obrazek w folderze z plikiem index.html i nazwijmy go obrazek.jpg. Załózmy, że ma rozszerzenie jpg. Żeby dodać obrazek na stronę internetową musimy użyć następującego tagu:

<img src='obrazek.jpg'>

My jednak chcemy, żeby nasz obrazek był lepiej widoczny w Google i zapiszemy go inaczej.

<img src='obrazek.jpg' alt='opis obrazka'>

Altrybut alt określa co znajduje się na obrazku i dzięki temu wyszukiwarka może go łatwiej znaleźć. Poza tym jeżeli nasz obrazek nie wczyta się poprawnie postanie zastąpiony tym tekstem.

To są jedynie trzy z wielu tagów, które możemy użyć w HTML. Mam nadzieje, że temat Ci się spodobał i będziesz chciał kontynuować jego naukę, ponieważ to jest dopiero początek, a z każdym kolejnym tematem jest coraz lepiej. Po nauce HTML przychodzi czas na stylizowanie za pomocą CSS i wtedy strony nabierają pięknego layoutu.

Sprawdź też:   Instalacja WordPress

Podobne posty:

Najnowsze artykuły

Wtyczka do newsletterów w WordPressie

obsluga newslettera w wordpress Przeczytaj

WooCommerce czy PrestaShop

WooCommerce czy PrestaShop Przeczytaj

Czym zajmuje się firma e-commerce?

Czym zajmuje się firma e-commerce? Przeczytaj
Więcej artykułów
strzalka w gore