STRONY INTERNETOWE mgr inż. Adrian Zapała

Wielkość: px

Rozpocząć pokaz od strony:

Download "STRONY INTERNETOWE mgr inż. Adrian Zapała"

Małgorzata Zalewska
9 lat temu
Przeglądów:

1 1 STRONY INTERNETOWE mgr inż. Adrian Zapała

2 STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2

3 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

Cascading Style Sheet) arkusze stylów kaskadowych, służące do opisu strony internetowej za pomocą określonych

4 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ęzyk ten wykonuje instrukcje po stronie serwera przez tzw.

5 JĘZYKI STRON WWW SWF ASP PHP HTML 5

6 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

Serwer FTP dysk sieciowy służący do umieszczania plików pod zawartość interaktywną.

7 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

World Wide Web Consorcium) organizacja opracowująca standardy tworzenia stron www.

8 PODSTAWOWE ELEMENTY STRUKTURALNE KODU <!DOCTYPE html> <head> Nagłówek </head> <body> Właściwa treść strony </body> </html> 8

9 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=" przykładowa</a></p> <p><i>praca</i></p> </body> </html> 9

10 PODSTAWOWE KOMENDY HTML Odnośnik do strony WWW o podanym adresie URL: <a href="url">jakiś tekst</a> Odnośnik do adresu <a href="mailto:autor@adres.pl">jakiś adres</a> 10

11 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

12 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

13 PODSTAWOWE KOMENDY HTML Komenda bieżącego akapitu: <p></p> Wymuszenie przejścia do nowej linii: <br> Linia poprzeczna: <hr size="grubosc" width="dlugosc"> 13

14 PODSTAWOWE KOMENDY HTML Wyświetlanie listy punktowanej: <ul> </ul> <li>pierwszy element listy</li> <li>kolejny element listy</li> 14

15 PODSTAWOWE KOMENDY HTML Komentarze elementy, które nie wyświetlą się po przesłaniu do przeglądarki: <! komentarz --> 15

16 PODSTAWOWE KOMENDY HTML Tabela o jednym wierszu i jednej kolumnie: <table> <tr><td> </td></tr> </table> 16

17 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 wewnętrzne), lub też określić ścieżkę dostępu do pliku zewnętrznego (tzw.

18 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

na kolor czarny oraz normalny wygląd czcionki (bez pogrubienia).

19 STYLE CSS Wyśrodkowanie elementu:.wysrodkuj { } text-align: center; Tło obrazkowe: background: #fff url("plik.jpg") repeat-x; 19

20 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

Nasycenie każdego z kolorów zapisujemy w definicji barwy w postaci: #RRGGBB, gdzie: RR -

21 KOLORY W HTML I CSS Przykłady kolorów nazwy + kody heksadecymalne: Gold #FFD700 Darkmagenta #8B008B Chartreuse #7FFF00 Blue #0000FF Black # Aliceblue #F0F8FF 21

22 SCHEMAT TWORZENIA STRON WWW Edycja kodu HTML w edytorze Zapisanie pliku Przesył pliku na serwer FTP Odświeżenie strony w przeglądarce 22

23 PROGRAMY DO EDYCJI KODU HTML Adobe Dreamweaver Notepad++ Kompozer Notatnik (Notepad) 23

24 PROGRAMY DO OBSŁUGI FTP FileZilla Total Commander CuteFTP 24

Podobne dokumenty

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu