Witryna www

Swoimi skończonymi pracami i aplikacjami możesz dzielić się z innymi, dlatego w tym materiale przedstawimy jak opublikować efekty swojej pracy w internecie. Należy zacząć od przygotowania prostej strony internetowej. Projekt strony internetowej powinien być spójny z tematyką twojej pracy. Potrzebny będzie również dostęp do konta pocztowego, aby zapewnić możliwość komunikacji z użytkownikami odwiedzającymi twoją stronę, projekt lub aplikację.

Wybór technologii tworzenia serwisów WWW

Należy się zastanowić, jakie informacje i dane powinno się umieścić na stronie internetowej. Wybór technologii, w jakiej będzie tworzona strona, zależy od rodzaju treści i sposobu ich prezentacji. Można utworzyć stronę promującą opracowaną aplikację w technologii HTML5. Przed przejściem do implementacji, należy zaplanować układ strony.

Projekt strony

Układ poszczególnych elementów (ang. layout, wym. lejałt) strony internetowej w dużej mierze zależy od funkcji, jaką będzie pełniła projektowana strona. Jeśli ma ona zaprezentować zrzuty ekranu ze stworzonej gry komputerowej lub fotografie z multimedialnego przewodnika geograficznego, konieczne będzie zaplanowanie dostatecznej przestrzeni lub nawet osobnej podstrony na galerię. W przypadku symulatora lotów kosmicznych najważniejsze będą zebrane dane statystyczne osadzone na stronie w postaci tabelki.

RH7I9MXOnMmBZ

Ilustracja przedstawiająca przykładowy układ rozmieszczenia elementów na stronie internetowej. Na górze jest pasek, na którym po lewej stronie jest napis Logo, a po prawej znajduje się Menu. Niżej jest ramka Foto, gdzie po lewej stronie jest kolejna ramka Opis. Niżej po lewej stronie znajduje się ramka O firmie. Pod nią są dwie ramki. Z lewej to Usługi, a z prawej to Kontakt. Po prawej stronie na poziomie ramek O firmie i Kontakt jest kolejna o nazwie News.

Tworzenie strony z wykorzystaniem HTML5

Stronę internetową można stworzyć, wykorzystując zwykły notatnik zainstalowany domyślnie w systemie operacyjnym np. Notatnik w systemach Windows. Edytory tekstu mają możliwość zapisu pliku w formacie html. Dzięki tej opcji można zaprojektować stronę internetową bez znajomości HTML, jednak bardzo pomocne jest wykorzystanie podstawowych poleceń i tagów języka HTML.

W internecie można znaleźć wiele darmowych edytorów HTML do projektowania stron WWW. Bardzo pomocną opcją jest możliwość kolorowania składni oraz sprawdzanie poprawności kodu. Rozwiązania te pomagają sprawnie edytować tworzoną stronę. Tworząc stronę w języku polskim, ważne jest by edytor miał możliwość kodowania polskich znaków w standardzie ISO i UTF. Znaczniki HTML, w większości składają się ze znaczników otwierających i zamykających, dlatego bardzo pomocną opcją jest ich domykanie. W sieci można znaleźć także edytory wizualne oraz kreatory szkieletu strony, które w sposób automatyczny są w stanie wygenerować szkielet projektowanej witryny. Przykładowymi popularnymi edytorami tekstowymi są Visual Studio Code, Sublime Text, WebStorm i Notepad++. Ten ostatni powinien wystarczyć do stworzenia strony.

Notepad++ rozwijany jest jako wolne oprogramowanie rozpowszechniane na licencji GNU GPL o otwartym kodzie źródłowym. Program posiada szereg przydatnych funkcji, w tym kolorowanie składni C, C++, Java, C#, XML, HTML, TeX, PHP, JavaScript. Za darmo można go pobrać ze strony https://notepad-plus-plus.org/downloads/.

Aby obejrzeć zaprojektowaną stronę WWW należy ją otworzyć w przeglądarce. Przeglądarki internetowe do niedawna komunikowały się z serwerem za pomocą protokołu HTTP, choć obecnie najpopularniejszym protokołem jest HTTPS. Najpopularniejsze przeglądarki na rynku światowym dla komputerów osobistych (dane z marca 2023 roku, źródło: https://gs.statcounter.com):

• Google Chrome – 67,29%;

• Microsoft Edge - 9,65%;

• Safari – 9,56%;

• Firefox – 7,57%;

• Opera – 2,81%;

• Inne - 3,12%.

Większość przeglądarek (w najnowszych wersjach) wspiera HTML5.

HTML (ang. HyperText Markup Language) to język do oznaczania składni, który pozwala klasyfikować zawartość dokumentu z rozszerzeniem .html lub .htm. Pojedynczy element HTML nazywany jest tagiem lub znacznikiem. Każdy znacznik może zawierać skojarzone z nim atrybuty.

Konstrukcja HTML5 różni się nieco od konstrukcji strony w HTML czy XHTML. Każdy dokument będzie się zaczynał od wpisu określającego rodzaj języka. Jest to informacja dla przeglądarki w jaki sposób interpretować występujące na stronie znaczniki. Dla HTML5 znacznik otwierający to

<!DOCTYPE html>

Następnym elementem wspólnym dla wszystkich języków HTML jest znacznik

<html></html>

Wewnątrz tego znacznika tworzona będzie treść projektowanego dokumentu czyli właściwa zawartość strony WWW. W strukturze strony można wyróżnić dwie zasadnicze części. Części te zdefiniowane są odpowiednio w znacznikach <head></head> oraz <body></body>. Pierwszy znacznik odpowiada za określenie podstawowych właściwości strony (tytuł, strona kodowa, informacje o autorze, słowa kluczowe i tym podobne). Druga część, zamknięta w znacznikach <body></body>, jest ciałem strony, czyli tym, co zostanie wyświetlone w oknie przeglądarki. Podstawowy szkielet strony HTML5 jest następujący:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> Przykładowa strona </title>
	</head>
	<body>
		Treść strony
	</body>
</html>

Poniżej znajduje się przykładowy szkielet ze zdefiniowanym układem strony i podstawową treścią.

R1Lgm5OjC5bmT

Ilustracja przedstawia szkielet strony ze zdefiniowanym układem i podstawową treścią. Po lewej stronie jest otwarta, tworzona strona internetowa, a po prawej jest otwarty edytor strony internetowej w programie Notepad++. Na górze tego programu są ikonki do edycji oraz następujące opcje: File, Edit, Search, View, Encording, Language, Settings, Tools, Macro, Run, Plugins, Window, ?. Treść pliku strona.html otwartego w tym programie jest ona napisana w linijkach i brzmi w sposób następujący. <!DOCTYPE html>. <html lang=’pl’>. <head>. Z wcięciem z lewej strony są. <meta charset=“utf‑8”/>. <title> Strona Przewodnika Multimedialnego </title>. <link href=’style.css’ re;=’stylebeet’>. Bez wcięcia znajduje się. </head>. <body>. Pusta linijka. <div class=’container’>. Pusta linijka. Z wcięciem z lewej strony znajduje się. <!-- header –>. <header>. Z jeszcze większym wcięciem jest. <img src=’logo.jpg’ alt=””/>. Z mniejszym wcięciem jest. </header>. Pusta linijka. <!-- sidebar –>. Pusta linijka. <aside>. Z ciut większym wcięciem jest. <nav>. Z jeszcze większym wcięciem jest. <ul>. Z największym wcięciem znajduje się. <li><a href=’s’>Prezentacja projektu</a></li>. <li><a href=’s’>Dokumentacja</a></li>. <Li><a href=’s’>Obrazy z aplikacji</a></li>. Z mniejszym wcięciem z lewej jest. </ul>. Z jeszcze mniejszym wcięciem jest. </nav>. Z najmniejszym wcięciem znajduje się. </aside>. Pusta linijka. <!-- main –>. <section id=’main’>. Z większym wcięciem jest. <h1> Opis aplikacji <h1>. <p>, gdzie obok i w następnej linijce jest tekst w języku obcym.</p>. Z mniejszym wcięciem jest. </section>. Pusta linijka. <!-- footer –>. <footer> Z większym wcięciem jest. <p> Imie i nazwisko© 2022 </p>. Z mniejszym wcięciem jest. </footer>. Pusta linijka. Bez wcięcia znajduje się. </div> pusta linijka. </body>. </html>. Na stronie internetowej po lewej stronie ilustracji na górze są 3 hiperłącza. Prezentacja projektu. Dokumentacja. Obrazy z aplikacji. Niżej jest tekst w języku obcym o tytule. Opis aplikacji. Pod tekstem znajduje się napis. Imie i nazwisko© 2022.

Na projektowanej stronie internetowej powinny znaleźć się informacje na temat np. stworzonej aplikacji. Na stronie głównej można umieścić logo i podstawowe informacje na temat funkcjonalności i charakterystyki autorskiej aplikacji. W menu nawigacyjnym powinny znajdować się odnośniki do podstron zawierających dokumentację oraz podstron zawierających prezentację ilustracji.

Ciekawostka

Jeśli czujesz się na siłach, do wspomnianej technologii HTML5 możesz dodać kaskadowe arkusze stylów. CSS (ang. Cascading Style Sheet - kaskadowe arkusze stylów) to język służący do opisu formy wyświetlania stron WWW. Za jego pomocą możemy określić, jak wyglądać mają różne elementy strony, takie jak tło, marginesy, tabele, obrazy, czy linki.

Gdy szkielet strony projektu będzie gotowy, można będzie się zająć jej stylem z wykorzystaniem CSS, aby nabrała ona odpowiedniego wyglądu. Kod CSS może prezentować się następująco:

Linia 1. asterysk otwórz nawias klamrowy padding dwukropek 0 średnik margin dwukropek 0 średnik zamknij nawias klamrowy. Linia 3. html otwórz nawias klamrowy width dwukropek 100 procent średnik height dwukropek 100 procent średnik zamknij nawias klamrowy. Linia 4. body otwórz nawias klamrowy font minus family dwukropek Arial przecinek Helvetica przecinek Sans minus serif średnik font minus size dwukropek 14px średnik line minus height dwukropek 1 kropka 5 średnik font minus weight dwukropek 400 średnik color dwukropek kratka 434343 średnik background dwukropek kratka FFF średnik zamknij nawias klamrowy. Linia 6. kropka container otwórz nawias klamrowy margin dwukropek 0 auto średnik zamknij nawias klamrowy. Linia 8. header otwórz nawias klamrowy margin dwukropek 25px 0 średnik zamknij nawias klamrowy. Linia 9. header img otwórz nawias klamrowy margin minus left dwukropek 100px średnik width dwukropek 25 procent średnik zamknij nawias klamrowy. Linia 11. aside otwórz nawias klamrowy float dwukropek left średnik margin dwukropek 0 0 25px średnik zamknij nawias klamrowy. Linia 12. aside nav ul otwórz nawias klamrowy list minus style dwukropek none średnik zamknij nawias klamrowy. Linia 13. aside nav ul li otwórz nawias klamrowy margin minus bottom dwukropek 1px średnik zamknij nawias klamrowy. Linia 14. a otwórz nawias klamrowy display dwukropek block średnik text minus decoration dwukropek none średnik color dwukropek kratka 000 średnik background dwukropek kratka ff0040 średnik padding dwukropek 8px 20px średnik zamknij nawias klamrowy. Linia 15. a dwukropek hover otwórz nawias klamrowy background dwukropek kratka 212121 średnik color dwukropek kratka FFF średnik zamknij nawias klamrowy. Linia 17. kratka main otwórz nawias klamrowy float dwukropek right średnik margin dwukropek 0 0 25px średnik zamknij nawias klamrowy. Linia 19. footer otwórz nawias klamrowy clear dwukropek both średnik color dwukropek kratka FFF średnik background dwukropek kratka FF0000 średnik padding dwukropek 15px 0 15px 30px średnik margin dwukropek 0 0 25px średnik zamknij nawias klamrowy.

* {padding:0;margin:0;}

html {width:100%;height:100%;}  
body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}

.container {margin:0 auto;}

header {margin:25px 0;}  
header img {margin-left: 100px; width:25%;}

aside {float:left;margin:0 0 25px;}  
aside nav ul {list-style:none;}  
aside nav ul li {margin-bottom:1px;}  
a {display:block;text-decoration:none;color:#000;background:#ff0040;padding:8px 20px;}  
a:hover{background:#212121;color:#FFF;}

#main {float:right;margin:0 0 25px;}

footer {clear:both;color:#FFF;background:#FF0000;padding:15px 0 15px 30px;margin:0 0 25px;}

R1essYZdR0YS0

Ilustracja przedstawia stronę internetową z dodanym formatowaniem kaskadowych arkuszy stylów. W lewym górnym rogu są hiperłącza Prezentacja projektu, Dokumentacja i Obrazy z aplikacji na odpowiednio czerwonym, czarnym i czerwonym tle. Na środku jest mapa Polski na czerwonym tle. Na jej terenie jest tekst. Przewodnik po największych miastach w Polsce. Niżej jest tekst w języku obcym o tytule Opis Aplikacji. Na dole, na czerwonym pasku znajduje się Imie i nazwisko © 2022.

Szablon można rozbudować o kolejne podstrony. Więcej informacji o tworzeniu stron internetowych znajdziesz w materiale Projektowanie i tworzenie stron WWWP120AyrcnProjektowanie i tworzenie stron WWW

Publikacja i administracja strony WWW

Po utworzeniu stron internetowych, ważnym zadaniem jest pokazanie ich internautom. W celu udostępnienia strony internetowej publicznie, można skorzystać z darmowych usług hostingu. Takie możliwości daje np. portal CBA.pl. Aby z nich skorzystać, wystarczy zarejestrować się na stronie www.cba.pl, podając potrzebne dane.

W miejscu nazwy domeny należy podać nazwę, która będzie w adresie strony. To może być pseudonim, w przypadku strony domowej, lub fragment opisujący zawartość np. „pasmagorskiepolski”. Domena może składać się z małych liter, myślników i cyfr:

R1OZC9T68paxt

Ilustracja przedstawia stronę główną portalu CBA.pl. Na górze jest niebieska ramka, na której jest adres strony, jej logo, przyciski z zaloguj się i rejestracja, wybór języka. Są też następujące opcje. Strona główna. Hosting. Domeny. Serwery VPS. Dedykowane. Strony WWW. Kontakt. Są też podpisane ikonki. Panel. Email. FTP. MySQL. Forum. Pomoc. Na środku strony znajduje się wyszukiwarka Wybierz domenę. Jest w niej wpisane pasmagorskiepolski. Niżej jest przykładowe domeny wraz z ceną. Domena .cba.pl. jest za darmo. .j.pl ma darmową rejestrację dla Pro oraz Vip. .pl jest za 9,90zł. .eu za 16,90zł. .com za 43,90. .net za 57,90zł. .org za 54,90zł. .com.pl za 9,90zł. Znajduje się jeszcze opcja Więcej domen… Na dole są informacje, które zasłania wyszukiwarka.

W celu utworzenia darmowego konta należy wybrać opcję „Free” spośród bezpłatnych domen. Następnie podać nazwę użytkownika, hasło do konta i adres e‑mail. Dodatkowo można wprowadzić szczegóły odnośnie stworzonej strony, takie jak kategoria i tytuł, aby łatwiej było ją znaleźć w wyszukiwarce internetowej.

R1SAAW5VG7sdH

Ilustracja przedstawia przykładowy formularz rezerwacji domenowej. Jest on na stronie CBA.pl. Na górze znajduje się informacja Wybierz nazwę domeny, jedną z naszych darmowych domen (cba.pl oraz tylko dla planów Pro oraz VIP .j.pl), jedną z płatnych domen lub Twoją własną (jeśli ją posiadasz), bez www. Niżej wpisane jest w ramce. pasmagorskiepolski.cba.pl. Wybrany jest też Hosting zamiast VPS i Serwer Dedykowany. Jako plan hostingowy wybrana jest opcja Free zamiast Pro i VIP, gdzie cena hostingu i cena domeny są darmowe. Niżej są jeszcze dane profilu z następującymi informacjami. Rejestruję tę usługę jako i zaznaczone jest osoba fizyczna. Do wyboru było też firma. Następne dane to nazwa profilu – pasmagorskie. Hasło oraz Powtórz hasło są wpisane gwiazdkami. Siła hasła jest na zielono. Adres email – mojadresemal@gmail.com. Kod potwierdzenia, obok którego jest przycisk Wyślij. Na dole jest jeszcze Akceptuję Regulamin i Politykę prywatności z okienkiem do potwierdzenia.

Dostęp do serwera przechowującego pliki strony u większości usługodawców jest możliwy za pomocą protokołu transferu plików - FTP (ang. File Transfer Protocol). Wygodnym sposobem na przesłanie danych jest wykorzystanie, na przykład, programu FileZilla, dostępnego dla różnych systemów operacyjnych pod adresem https://filezilla-project.org/download.php?type=client#close.

W głównym oknie programu można wprowadzić adres serwera i dane logowania, które będą opisane w szczegółach lub pomocy na portalu usługodawcy. Host czyli nazwę serwera jak i nazwę użytkownika znajdziesz w zakładce Konta FTP w panelu użytkownika portalu cba.pl, hasło jest takie samo jak do założonego tam konta.

R1JHjX4Gz8ddW

Ilustracja przedstawia panel użytkownika na stronie CBA.pl. Na górze jest napis. Panel użytkownika. Po lewej w kolumnie są przyciski z nawiązującymi do nich ikonkami. Podsumowanie. Konta hostingowe. Serwery VPS. Serwery dedykowane. Domeny. Konta FTP. Konta email. Bazy danych. Zadania Crona. W centralnej części na górze jest informacja. Darmowy plan hostingowy dla konta FREE#1 wygaśnie 2002‑02‑10 18:23:35. Kup konto hostingowe i ciesz się z korzyści płatnego planu. Niżej po lewej znajduje się Konta FTP dla i zaznaczona jest opcja Wszystkie konta. Po przeciwległej stronie jest przycisk Dodaj. Pod spodem jest tabela. Nazwa konta – pasmagorskie. Typ – profilowe. Host – mkwk107.cba.pl. Stan – Aktywne. Akcja – Edytuj i Usuń. Na dole jest tekst. Często zadawane pytania. Jak zarządzać kontem FTP? Podstawowe parametry konfiguracji FTP. Jakie są limity kont FTP? Jak zmienić hasło do konta FTP? Jak zalogować się do klienta FTP na CBA.pl? Pokaż więcej… Po lewej stronie pytań znajdują się ikonki przypominające kartki.

Po pomyślnym połączeniu, po prawej stronie programu pojawią się pliki przechowywane na serwerze:

Rz3gDfgBQeZhi

Ilustracja przedstawia widok okna programu FileZilla obsługującego zdalne zasoby serwera FTP. Na górze są opcje. Plik. Edytuj. Podgląd. Transfer. Serwer. Zakładki. Pomoc. Niżej są ikonki do różnych działań. Pod nimi na pasku są informacje. Serwer – mkwk107.cba.pl. Nazwa użytkownika – pasmagorskie. Hasło jest zakryte kropkami. Port – brak. Wybrana jest opcja Szybkie łączenie. Niżej znajduje się tekst w linijkach. Status: Połączenie nawiązanie, oczekiwanie na wiadomość powitalną… Status: Inicjowanie TLS… Status: Połączenie TLS nawiązane. Status: Zalogowany. Status: Uzyskiwanie listy katalogów.. Status: Listowanie katalogów w "/” zakończona pomyślnie. Status: Uzyskiwanie listy katalogów w "/pasamagorskiepolski.cba.pl”…. Status: Listowanie katalogów w "/pasmagorskiepolski.cba.pl” zakończone pomyślnie. Status: Uzyskiwanie listy katalogów w "/”… Status: Listowanie katalogów w "/” zakończone pomyślnie. Niżej po lewej jest Adres lokalny, a po prawej jest folder o nazwie pasmagorskiepolski.cba.pl. Niżej po lewej znajduje się Nazwa pliku wraz z folderami, a po prawej znajduje się folder pasmagorskiepolski.cba.pl. Na samym dole po lewej są zakładki. Pliki w kolejce. Nieudane transfery. Udane transfery.

Po pierwszym połączeniu może być widoczna przykładowa zawartość strony oraz pliki konfiguracyjne. Jeżeli wśród elementów na serwerze znajduje się folder public_html, to w nim należy umieszczać pliki strony. W innym wypadku można je kopiować bezpośrednio do katalogu głównego, jednak zawsze warto się upewnić, sprawdzając w pomocy na portalu usługodawcy.

W celu przesłania plików należy znaleźć utworzony wcześniej folder ze stroną na swoim komputerze, nawigując w lewej części okna programu do miejsca zawierającego plik index.html. Następnie trzeba zaznaczyć wszystkie elementy i przeciągnąć do okna po prawej stronie, lub klikając na nie prawym przyciskiem myszy wybrać Wyślij:

R1SQaod3xnnis

Ilustracja przedstawia widok okna programu FileZilla podczas wysyłania na serwer zdalny plików. Na górze są opcje. Plik. Edytuj. Podgląd. Transfer. Serwer. Zakładki. Pomoc. Niżej są ikonki do różnych działań. Pod nimi na pasku są informacje. Serwer – mkwk107.cba.pl. Nazwa użytkownika – pasmagorskie. Hasło jest zakryte kropkami. Port – brak. Wybrana jest opcja Szybkie łączenie. Niżej znajduje się tekst w linijkach. Status: Zalogowany. Status: Rozpoczynanie wysyłania C:\\Users\Asus ROG G75VW\OneDrive – Uniwersytet Jagielloński\Pulpit\projekt\index.html. Status: Zalogowany. Status” Rozpoczynanie wysyłania C:\\Users\Asus ROG G75VW\OneDrive – Uniwersytet Jagielloński\Pulpit\projekt\logo.jpg. Status: Transfer plików zakończony pomyślnie, przeniesione 1 815 bajtów w 1 sekunda. Status: Rozpoczynanie wysyłania C:\\Users\Asus ROG G75VW\OneDrive – Uniwersytet Jagielloński\Pulpit\projekt\style.css. Status: Transfer plików zakończony pomyślnie, przeniesione 673 bajty w 1 sekunda. Status: Transfer plików zakończony pomyślnie, przeniesione 238 841 bajtów w 1 sekunda. Status: Uzyskiwanie listy katalogów w "/pasmagorskiepolski.cba.pl”… Status: Listowanie katalogów w "/pasmagorskiepolski.cba.pl” zakończone pomyślnie. Status: Odłączono od serwera. Niżej po lewej znajduje się adres lokalny, a po prawej folder pasmagorskiepolski.cba.pl. Niżej po lewej znajduje się ramka nazwa pliku, w której są trzy pliki: index.html, logo.jpg i style.css, które są zaznaczone. Po prawej stronie są takie same pliki. Przy zaznaczonych plików otwarte jest menu kontekstowe z opcjami Wyślij, Dodaj pliki do kolejki, Otwórz, Edytuj, Utwórz, Edytuj, Utwórz katalog, Utwórz katalog i otwórz go, Odśwież, Usuń, Zmień nazwę. Kursor myszy jest na pierwszej opcji. Na dole są trzy zakładki. Pliki w kolejce. Nieudane transfery. Udane transfery (3).

Postęp widoczny będzie na dole. Przesyłanie może potrwać dłużej, w zależności od rozmiaru plików. Po skończeniu przesyłania, należy wpisać w przeglądarce adres domeny pasmagorskiepolski.cba.pl, w celu sprawdzenia czy działa ona poprawnie.

Głównym plikiem strony jest index.html. Jest on wczytywany po wpisaniu bezpośredniego adresu w przeglądarce. Przykładowo:
http://www.pasmagorskiepolski.cba.pl/ jest odpowiednikiem:
http://www.pasmagorskiepolski.cba.pl/index.html Dotyczy to również podkatalogów na stronie:
http://www.pasmagorskiepolski.cba.pl/podkatalog/ odpowiada adresowi:
http://www.pasmagorskiepolsk.cba.pl/podkatalog/index.html Jeżeli wszystko odbyło się bez problemów, można zapisać połączenie do serwera FTP w pamięci programu FileZilla. Z menu Plik należy wybrać Kopiuj aktualne połączenie do Menedżera Stron, podać jego nazwę i zatwierdzić przyciskiem OK.

R1PYw5TACL6GX

Ilustracja przedstawia widok okna menadżera stron programu FileZilla Po lewej stronie znajduje się ramka Wybierz wpis:, gdzie wybrany jest plik projekt w folderze Moje strony. Niżej są przyciski. Nowy adres. Nowy katalog. Nowa zakładka. Zmień nazwę. Usuń. Duplikuj. Po prawej są zakładki. Ogólne. Zaawansowane. Ustawienia przesyłania. Kodowanie. Wybrana jest pierwsza zakładka i w niej są następujące informacje. Protokół – FTP –protokół transferu plików. Serwer – mkwk107.cba.pl. Port- brak. Szyfrowanie – Jeżeli dostępne, używaj bezpośredniego FTP przez TLS. Tryb logowania – Normalne. Użytkownik – pasmagorskie. Hasło jest ukryte za kropkami. Kolor tła – Brak. Komentarze – brak. Na samym dole po prawej znajdują się przyciski. Połącz. OK. Anuluj.

Później można skorzystać z zapisanego połączenia, wybierając je z pierwszej ikony górnego paska nawigacyjnego.

Walidacja stron internetowych

Przed opublikowaniem strony w sieci należy upewnić się, że jest ona poprawnie skonstruowana. Pomimo dobrego wyglądu, może zawierać błędy znajdujące się w jej kodzie. Aby nie publikować wadliwych dokumentów (ładują się dłużej), należy sprawdzić poprawność kodu strony pod kątem jego zgodności ze specyfikacją języka. Do tego celu służą specjalne aplikacje, tzw. walidatory, które dodatkowo zwracają uwagę na brakujące lub źle użyte znaczniki, błędne ich zagnieżdżanie oraz na złe użycie stylów.

Jedną z nich jest aplikacja udostępniona przez organizacje W3C (ang. World Wide Web Consortium) na stronie pod adresem http://validator.w3.org

RnIUJYDsJ3wOs

Ilustracja przedstawia stronę internetową służąca do walidacji plików stron internetowych o adresie validator.w3.org. Jest ona w jeżyku angielskim. Znajdują się na niej różne informacje o tej stronie oraz okienko, gdzie wpisuje się nazwę adresu tworzonej strony. Pod okienkiem jest przycisk Check (Sprawdź).

Umożliwia ona sprawdzenie kodu strony poprzez podanie adresu strony internetowej, załadowanie pliku HTML strony lub wklejenie bezpośrednie jej kodu HTML. Po wybraniu jednej z powyższych możliwości oraz po kliknięciu Check pojawi się wynik.

R1OBZhNi1qi0S

Ilustracja przedstawia negatywny efekt walidacji wskazanego strony internetowej na stronie validator.w3.org. Strona jest w języku angielskim. Na górze znajdują się informacje jaki plik został sprawdzony. Niżej są 4 błędy. Pokazują one, na czym polega błąd, w których słowach, w którym miejscu oraz fragment kodu z błędem.

Jeśli walidator wykryje nieprawidłowości, zostaną zwrócone błędy, tak jak na powyższym zrzucie ekranu. Okazało się, że nasza strona została wstawiona na serwer z literówką w jednym ze znaczników. Mimo, że wyświetla się ona poprawnie, nie jest w pełni poprawnie napisana.

RgVtinVtic8Eg

Ilustracja przedstawia pozytywny efekt walidacji wskazanego strony internetowej na stronie validator.w3.org. Strona jest w języku angielskim. Na górze znajdują się informacje jaki plik został sprawdzony. Niżej jest zielona belka z informacją, że dokument został sprawdzony i nie znaleziono żadnego błędu.

Dopiero będąc pewnym, że strona jest poprawnie zbudowana, można śmiało udostępnić ją w sieci internetowej.