Wprowadzenie do WWW

Strony WWW

Jak to działa?

Strony internetowe, serwisy WWW, witryny, aplikacje webowe są wyświetlane za pomocą

specjalnego programu komputerowego, nazywanego

przeglądarką internetową lub przeglądarką www

Przykładowe przeglądarki: Chrome, Firefox, Opera, Safari, Internet Explorer, Edge.

Uwaga!

Aktualne dane sprawdzisz na stronie ranking.pl.

http://ranking.pl/pl/rankings/web-browsers-groups.html dostęp: 10.08.2017

Producenci przeglądarek regularnie udostępniają ich najnowsze wersje, umożliwiające coraz lepszą obsługę stron WWW.

Tworząc witrynę nie można jednak zakładać, że wszyscy odbiorcy będą korzystali z najnowszej wersji naszej ulubionej przeglądarki. Nasza strona musi być elastyczna, czyli prawidłowo wyświetlać się na różnych wersjach przeglądarek.

Użytkownik chcąc wyświetlić witrynę wpisuje jej adres URL we właściwym polu przeglądarki (na pasku adresu). Przeglądarka wtedy wysyła żądanie wyświetlenia strony do komputera, na którym znajduje się dana strona.

Taki komputer nazywany jest serwerem WWW

Serwery to komputery, które są przez cały czas uruchomione, a ich zadaniem jest przechowywanie i udostępnianie stron internetowych lub innych danych.

Współcześnie strony internetowe wyświetlane są na bardzo różnorodnych urządzeniach: komputerach, tabletach, smartfonach.

Każde z tych urządzeń może pracować na innej wersji systemu operacyjnego oraz w innej rozdzielczości czy

głębi kolorów.

Obecnie większość odsłon* stron internetowych odbywa się na urządzeniach mobilnych.

*Odsłona to wczytanie zawartości danej

Stało się to przyczyną tworzenia stron responsywnych (Responsive Web Design - RWD), czyli takich, których wygląd dostosowuje się do parametrów ekranu, na którym strona jest wyświetlana.

Przeglądarka do wyświetlania stron używa kodu

HTML i CSS.

Rozbudowane strony i systemy webowe często są

wzbogacone dodatkowymi technologiami, jak na przykład PHP, JavaScript, ASP.Net, Ruby i innymi.

Ewolucja HTML

Jak to działa?

Jak to się dzieje, że strona wyświetla się na naszym monitorze?

1. Użytkownik łączy się z Internetem dzięki dostawcy usług internetowych (Internet Sercive Provider – ISP).

6. Przeglądarka interpretuje kod strony i wyświetla ją.

2. Użytkownik wpisuje w przeglądarce adres URL żądanej strony, np. www.up.krakow.pl.

5. Serwer WWW przesyła żądaną stronę do przeglądarki.

3. Komputer nawiązuje połączenie z siecią serwerów DNS (Domain Name System). Serwer DNS zamienia wpisany adres na adres IP zrozumiały dla komputera.

4. Przeglądarka łączy się z adresem wskazanym przez serwer DNS, czyli nawiązuje połączenie z serwerem WWW, na którym znajduje się żądana strona.

Dokumenty HTML to pliki tekstowe, które zawierają proste polecenia dotyczące składu tekstu i odnośniki do innych danych.

Dokumenty HTML przesyłane są w postaci źródłowej i interpretowane przez przeglądarkę użytkownika.

Skrót HTML oznacza hipertekstowy język

znaczników (HyperText Markup Language), czyli język

programowania używany do tworzenia stron

internetowych.

Hipertekstowy, czyli pozwalający na tworzenie łączy pomiędzy różnymi dokumentami.

Polecenia w języku HTML nazywane są znacznikami.

Znaczniki opisują tekst i dostarczają dodatkowej informacji o znaczeniu treści dokumentu.

Struktura dokumentów HTML

Podobnie jak to ma miejsce w przypadku dokumentów edytora tekstowego (np. MS Word) w dokumentach HTML należy zastosować właściwą dla nich strukturę, czyli odpowiednio oznaczyć treści, które są nagłówkami, akapitami, sekcjami stopki, elementami nawigacji, itp..

Na czym polega problem?

Problemem jest niezrozumienie wagi struktury dokumentu przez początkujących webmasterów.

Często traktują oni wizualne wyróżnienie elementów strukturalnych jako zmianę wyłącznie estetyczną. Tymczasem estetyka jest tu sprawą podrzędną, zwłaszcza, że korzystając z CSS możemy nadać nowy wygląd każdemu elementowi strony.

Odpowiednie opisywanie treści ma służyć poprawie funkcjonalności oraz elastyczności stron.

Jak nadać strukturę?

Należy oznaczać treści odpowiednimi znacznikami i nie stosować poleceń HTML w celu zmiany wyglądu.

Do zmiany wyglądu służy kod CSS.

Język HTML do opisu elementów używa specjalnych poleceń, nazywanych znacznikami (tags).

Znaczniki umieszczone są w nawiasach kątowych <>.

Znacznik zamykający poprzedzony jest ukośnikiem.

Znacznik otwierający, zamykający oraz ich zawartość

tworzą element HTML

<h1>Flanela</h1>

<p>Jest to miękka i lekka tkanina bawełniana

Elementy HTML przypominają pojemniki.

Służą do nadania struktury dokumentowi HTML.

Znaczniki opisują czym dany element jest i jak należy go wyświetlić*.

Znaczniki występują parami, czyli każdy element HTML ma znacznik otwierający i zamykający**.

* Sposób wyświetlania (wygląd) można modyfikować za pomocą CSS.

Z wyjątkiem znaczników <br>, <hr>, <meta>, <link>.

Znaczniki HTML mogą być wzbogacone o pewne dodatkowe informacje.

Te informacje nazywane są atrybutami.

Atrybuty wprowadza się do znacznika otwierającego.

Składnia języka HTML

Znacznik Atrybut Wartość atrybutu

<p align=”right”> Tekst, który zostanie wyrównany do prawej.

Znacznik zamykający

Zawartość znacznika

Innymi słowy każdy znacznik wraz z atrybutami języka HTML przekazuje przeglądarce informacje o tym co znajduje się pomiędzy jego otwarciem i zamknięciem.

Dbając o poprawność struktury HTML staramy się, aby każdy znacznik stanowił informację o jakości elementu. Unikamy znaczników, które służą jedynie zmianie wyglądu*.

* W specyfikacji HTML 5 takie znaczniki zostały usunięte lub oznaczone jako niezalecane.

<!DOCTYPE html>

<html>

<head>

<title>Moja strona</title>

</head>

<body>

<h1>Cześć!</h1>

<p>Witaj na mojej stronie!</p>

</body> </html> Przykładowa treść strony

deklaracja typu dokumentu

Informacja o użytej wersji języka HTML.

początek dokumentu HTML

sekcja HEAD – nagłówek strony

Tutaj umieszczamy informacje

dodatkowe, metadane, skrypty.

<head> <title>Moja strona</title> </head>

tytuł strony

<body>

sekcja BODY – treść strony

Tutaj umieszczamy znaczniki i treść

tworzące naszą stronę, czyli

wszystko to, co ma zostać

wyświetlone na naszej stronie.

<h1>Cześć!</h1>

<p>Witaj na mojej stronie!</p>

przykładowa treść strony

</body>

koniec dokumentu HTML

Projektowania