Budowa strony www

19
3843

W poprzednich wpisach dowiedzieliście się co to jest domena i subdomena oraz hosting. Przyszedł czas na postawienie Waszej pierwszej strony www w HTML-u. Żeby zobaczyć jak wygląda strona od strony kodu, wystarczy że w swojej przeglądarce, na dowolnej stronie www, klikniesz prawym przyciskiem myszy i z podręcznego meny wybierzesz opcję „pokaż źródło strony”. Niech Was ten widok nie przerazi, nie taki diabeł straszny… 😉

Teraz pokrótce opiszę schemat strony.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”Description” content=”Krótki opis Waszej strony” />
<meta name=”Keywords” content=”Słowa kluczowe” />
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>

Lecimy od góry.
Pierwsza linijka to tak zwany prolog, nie jest wymagana, ale dzięki niej przeglądarka wie w jakiej wersji html-a pisaliśmy.

Kolejna linijka to tag <html> informujący, że tu zaczyna się dokument HTML, wewnątrz znacznika mogą znajdować się dodatkowe polecenia dla przeglądarki.

Dalej zaczyna się sekcja <head>, a w niej tak zwane meta tagi – pierwszy mówi nam o kodowaniu znaków, dla Polski powinno się używać ISO-8859-2, ale równie często używa się UTF-8.

Drugi tag meta to Description – krótki opis naszej strony (150 – 160 znaków). Obecnie wyszukiwarki nie biorą go pod uwagę w tworzeniu indeksu, ale Google wyświetla ten Tag w wynikach wyszukiwania. Powinniśmy potraktować ten opis jak reklamę naszej strony, przy czym dla każdej podstrony powinien być inny i zawierać słowa kluczowe. Pamiętaj, że opis musi być zgodny z tematyką strony.

Trzeci tag to Keywords – w znaczniku tym znajdują się słowa kluczowe. Google obecnie w ogóle nie bierze tego Tagu pod uwagę tworząc swój ranking, ale pamiętaj, że Google nie jest jedyną wyszukiwarką w Polsce i na świecie. Moja rada – korzystaj z tego Tagu pamiętając jednocześnie o umiarze.

Ostatni, czwarty tag, to <title> – według organizacji W3C najważniejszy element strony WWW, na szczęście wyszukiwarki uważają podobnie, więc powinieneś szczególnie zwrócić na ten Tag uwagę. Co powinno się tam znaleźć? Słowa kluczowe odzwierciedlające zawartość strony. Pamiętaj też, że każda podstrona powinna zawierać inny Tag tego typu! Zwróć uwagę na nasyceniu słów – duża ich liczba może zostać odebrana za spam przez wyszukiwarki!
Tag ten jest wyświetlany w wynikach wyszukiwania w nagłówku każdej strony. Pamiętaj, że Google wyświetla 65 (czasami 70) znaków ze spacjami, więc Twój opis powinien zmieścić się w tej liczbie, przynajmniej ta wyświetlana część.
Uwaga!
Nigdy, przenigdy nie pomijaj TITLE TAGU! W przeciwnym wypadku Google wyświetla standardowy tekst:
Untitled dokument – dokument bez tytułu.

Po sekcji <head> pojawia się tag <body>, tutaj znajduje się właściwa treść naszej strony.

Jak zapewne zauważyliście, każdy tag zaczyna się i kończy ostrym nawiasem gdzie tag zamykający wygląda np. tak: </title>. Czyli podobnie jak otwierający tyle, że zawiera slash („/”).

Teraz możecie sobie przykładowy schemat skopiować do pliku txt, zapisać go jako index.html i odpalić w przeglądarce.

Dla rządnych wiedzy polecam bardzo fajną stronę o html-u:
KURS HTML

19 KOMENTARZE

  1. Dobry „tutorial” dla początkujących, dający ogólny pogląd na htmla. Strona, którą polecasz z kursem htmla to strzał w dziesiątkę, sam korzystałem z niej ucząc się podstaw. Mógłbyś jeszcze coś napisać o edytorach html bo jest ich trochę, a niektóre z nich bardzo ułatwiają prace i naukę.

      • Zgadza się Homoklikusie, za te słowa ktoś zdecydowanie powinien dostać nagrodę. Dobry notatnik to podstawa. Ja osobiście bardzo cenię sobie notatnik EditPlus. Z Notepad++ nie korzystałem, ale w takim razie muszę go sprawdzić o ile tylko uda mi się go znaleźć w sieci.

      • Też jestem zwolennikiem notepad++ korzystam z niego od wielu naprawdę wielu lat. KED jeszcze jest całkiem fajny, całkiem przyjemnie zmienia kodowanie dokumentów.

        Uważam, że wiele programów jest po prostu zbędnych i najlepsze są najprostsze rozwiązania.

  2. Notepad++ jak dla mnie jest najlepszy jesli budujemy strony w oparciu o php czyli potrzebujemy odpalać środowisko serwerowe w rodzaju xampp. Przy zwykłym html lepszy jest choćby Dreamweaver ponieważ daje od razu podgląd strony i dla początkujących ma podpowiedzi w css – sam z resztą nie raz z nich korzystam bo przyspieszają znacznie pracę.

  3. Bardzo fajny artykuł, na pewno początkującym się przyda, a i zgadzam się poprzednikiem, dreamweaver jest do html’a bardzo dobry, przynajmniej ja z niego korzystam, choć nie ukrywam że lubię też zwykły notatnik 🙂

  4. Nie ukrywajny, obecnie żadna firma, wiele stron nie opiera się tylko na zwykłym HTML-u. Jednakże jak wiadomo, masa innych języków bazuje właśnie na HTML-u 😉 Może warto by dodać wpis na blogu odnośnie wprowadzanych na dobre niedługo technologii HTML5 ?

    Pozdrawiam, maciej

  5. Ja tam za bardzo się nie znam, ale czy w doctype nie powinno się używać xhtml zamiast html 4.01? Może to bez różnicy, ale po to są tworzone nowe standardy, żeby je wdrażać, a nie korzystać z przestarzałych rozwiązań.

  6. Mimo, że obecnie można sobie za darmo instalować CMS np. WordPressa, warto poznać podstawową budowę strony. Przy zmianach szablonu przydaję się podstawowa wiedza o html.

    W przypadku pisania stron „z palca” kluczowe jest uzupełnienie tagów title i description różnymi dla innych stron.

  7. Dobry artykuł. W sam raz dla początkującego – czyli mnie 😀 Budowa samej strony internetowej to zawsze była dla mnie trochę czarna magia a tu proszę, wszystko opisane przystępnym językiem. Dzięki za podzielenie się wiedzą. Pozdrawiam.

    • Cześć. Badi: jeśli myślisz o tworzeniu stron na poważnie to ok, przyda ci się to nawet bardzo. Natomiast jeśli tylko na twoje prywatne potrzeby to lepsze są cms’y, albo możesz również wypróbować platformy blogowe.

      • Ja nie polecam platform blogowych, niema to jednak jak blog/strona na własnym serwerze. Podstawy html-a każdemu się przydadzą, nawet jak stawiasz swoje stronki na gotowych skryptach, chcesz z edytować szablon, masz wiedzę robisz to sam, w przeciwnym wypadku musisz to komuś zlecieć, a to wiąże się z kosztami.

        • Platformy blogowe? Jeśli myślisz o spieniężeniu w późniejszym czasie swojej pracy to pojawi się problem, bo:

          1. Wiele platform blokuje dodawania swoich reklam
          2. Wiele systemów reklamowych nie pozwala na dodawanie swojego kodu do platform blogowych
          3. Na platformie blogowej sukcesu większego nie osiągniesz. Kiedyś będziesz chciał serwis rozbudować, a okaże się, że to niemożliwe.
          4. Brak miejsca na swoje pliki

          Dużo tutaj jeszcze wymieniać, ale na początek dobre i to.

  8. Ciekawie przedstawiona koncepcja budowy strony www. Znajomość chociażby podstawy html daje możliwość edytowania wielu rzeczy w Word Press. Prosto i ciekawie opisane dla osób poznających tajniki blogowania.

  9. Co prawda artykuł nie jest zbytnio rozbudowany, ale na pewno przyda się osobom początkującym, które chcą się czegoś nauczyć. Dla osób, które zaczynają przygodę z tworzeniem stron internetowych taki wstęp i znajomość struktury strony jest bardzo dobry.

  10. Jako metaloplastyk zostanę przy kuciu. Nie mając podstaw, to nawet najprostsze pojęcia są czarną magią. Podziwiam was za wiedzę, której nigdy nie posiądę. Jestem na etapie tworzenia tematycznych stron zapleczowych i widząc jak ciężkie zagadnienia trzeba przeforsować, aby wykonać stronkę, to chyba dopłacę wykonawcy za trudną robotę.

  11. Ja ogólnie zaczynam przygodę z tą tematyką i widzę, że tworzenie stron www, to nie jest taka prosta rzecz dla humanisty. Zaraz ktoś powie, że to nieprawda, że to tylko tak wygląda, ale ja wiem, co widzę:). Niemniej ta strona, którą Pan polecał w linku wygląda ciekawie, więc spróbuję swych sił:) Zobaczymy, jak mi pójdzie.

ZOSTAW ODPOWIEDŹ

Przepisz poniższy kod z obrazka i pokaż nam czy jesteś człowiekiem ;-)