1 STRONY INTERNETOWE mgr inż. Adrian Zapała
STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2
JĘZYKI STRON WWW HTML (ang. HyperText MarkUp Language) oferuje tworzenie statycznych witryn internetowych. Obecnie rozwijany jest HTML 5.0. Nie jest językiem programowania. CSS (ang. Cascading Style Sheet) arkusze stylów kaskadowych, służące do opisu strony internetowej za pomocą określonych schematów kolorystycznych, nagłówkowych itp. Umożliwiają oskryptowanie całej strony za pomocą odwołania do pojedynczego pliku, zawierającego szereg instrukcji źródłowych. 3
JĘZYKI STRON WWW PHP język programowania, oferujące tworzenie interaktywnej zawartości internetowej. Język ten wykonuje instrukcje po stronie serwera przez tzw. interpreter, dzięki czemu użytkownik w przeglądarce otrzymuje czysty kod HTML. Flash strony oparte na wektorowych animacjach w plikach SWF. 4
JĘZYKI STRON WWW SWF ASP PHP HTML 5
POJĘCIA WEBMASTERINGU Strona www strona internetowa, witryna internetowa, dokument internetowy z zwartością statyczną bądź dynamiczną. Serwer FTP dysk sieciowy służący do umieszczania plików pod zawartość interaktywną. Pozycjonowanie stron działanie mające na celu umieszczenie strony www na czołowych miejscach wyszukiwania w wyszukiwarkach (np. google) pod daną frazą. 6
POJĘCIA WEBMASTERINGU Kodowanie strony opisywanie zawartości strony internetowej za pomocą dostępnych języków, tj. HTML, PHP itd. W3C (ang. World Wide Web Consorcium) organizacja opracowująca standardy tworzenia stron www. Walidacja strony sprawdzenie poprawności strony i jej zgodności z zalecanymi przez W3C standardami. Odbywa się to w module programowym bądź internetowym. 7
PODSTAWOWE ELEMENTY STRUKTURALNE KODU <!DOCTYPE html> <head> Nagłówek </head> <body> Właściwa treść strony </body> </html> 8
PRZYKŁADOWY KOD HTML <!DOCTYPE html> <head> <meta charset="utf-8"> <title>tytuł strony</title> </head> <body> <h1>nagłówek 1</h1> <p><a href="http://www.strona.pl/">strona przykładowa</a></p> <p><i>praca</i></p> </body> </html> 9
PODSTAWOWE KOMENDY HTML Odnośnik do strony WWW o podanym adresie URL: <a href="url">jakiś tekst</a> Odnośnik do adresu e-mail: <a href="mailto:autor@adres.pl">jakiś adres</a> 10
PODSTAWOWE KOMENDY HTML Włączenie obrazka (pliki graficzne, np. *.jpg, *.gif), gdzie: width - szerokość obrazka, height - wysokość obrazka, border - grubość ramki (w pikselach, najczęściej 0). <img src="url" alt="text" width="x" height="y" border="z"> 11
PODSTAWOWE KOMENDY HTML Nagłówki każdy kolejny podtytuł pisany jest z coraz mniejszą czcionką. <hl>tekst</hl> <h2>tekst</h2> <h3>tekst</h3> <h4>tekst</h4> <h5>tekst</h5> <h6>tekst</h6> 12
PODSTAWOWE KOMENDY HTML Komenda bieżącego akapitu: <p></p> Wymuszenie przejścia do nowej linii: <br> Linia poprzeczna: <hr size="grubosc" width="dlugosc"> 13
PODSTAWOWE KOMENDY HTML Wyświetlanie listy punktowanej: <ul> </ul> <li>pierwszy element listy</li> <li>kolejny element listy</li> 14
PODSTAWOWE KOMENDY HTML Komentarze elementy, które nie wyświetlą się po przesłaniu do przeglądarki: <! komentarz --> 15
PODSTAWOWE KOMENDY HTML Tabela o jednym wierszu i jednej kolumnie: <table> <tr><td> </td></tr> </table> 16
STYLE CSS Umożliwiają określenie kolorów, jakimi będą zdefiniowane elementy w sekcji BODY. Zawartość styli można włączyć w plik (tzw. style wewnętrzne), lub też określić ścieżkę dostępu do pliku zewnętrznego (tzw. style zewnętrzne) poprzez odwołanie do pliku w katalogu z rozszerzeniem *.css. Style zawierają selektory, które stanowią strukturalne elementy kodu CSS. 17
STYLE CSS Przykład selektora i komentarza CSS:.tekst { } font-family: Verdana; color: #000000; font-weight: normal; /* ostylowanie tekstu na kolor czarny oraz normalny wygląd czcionki (bez pogrubienia). Selektory z kropką odwoływać się mogą do wielu elementów strony, natomiast selektory z hash em (#) odwołują się do elementu strony, który nie powtarza się. */ 18
STYLE CSS Wyśrodkowanie elementu:.wysrodkuj { } text-align: center; Tło obrazkowe: background: #fff url("plik.jpg") repeat-x; 19
KOLORY W HTML I CSS Każdą barwę można utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony i niebieski (RGB). Nasycenie każdego z kolorów zapisujemy w definicji barwy w postaci: #RRGGBB, gdzie: RR - nasycenie koloru czerwonego; GG - nasycenie zielonego; BB - nasycenie niebieskiego (znak # oznacza, że definiujemy kolor w kodzie HEX). 20
KOLORY W HTML I CSS Przykłady kolorów nazwy + kody heksadecymalne: Gold #FFD700 Darkmagenta #8B008B Chartreuse #7FFF00 Blue #0000FF Black #000000 Aliceblue #F0F8FF 21
SCHEMAT TWORZENIA STRON WWW Edycja kodu HTML w edytorze Zapisanie pliku Przesył pliku na serwer FTP Odświeżenie strony w przeglądarce 22
PROGRAMY DO EDYCJI KODU HTML Adobe Dreamweaver Notepad++ Kompozer Notatnik (Notepad) 23
PROGRAMY DO OBSŁUGI FTP FileZilla Total Commander CuteFTP 24