Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 – 22 12. 2008
Narzędzia do tworzenia i utrzymania dokumentów web’owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa – kompilator kodu
Definicja HTML HTML (ang. HyperText Markup Language), hipertekstowy język znaczników), dominujący język wykorzystywany do tworzenia stron internetowych. Pozwala opisać strukturę informacji zawartych w dokumencie nadając znaczenie poszczególnym fragmentom tekstu (formując linki, nagłówki, akapity, listy, itp.) oraz osadzić w tekście dodatkowe obiekty np. statyczne grafiki, interaktywne formularze, dynamiczne animacje. W składni języka HTML wykorzystuje się znaczniki opatrzone z obu stron nawiasami ostrokątnymi <……………..>. Ważną cechą języka, która wyraźnie przyczyniła się do rozpowszechnienia sieci WWW, jest niezależność od systemu operacyjnego oraz parametrów sprzętowych komputera, na którym strony te będą oglądane.
Definicja CSS Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki . CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji.
Definicja JavaScript JavaScript (JS) – obiektowy skryptowy język programowania, stworzony przez firmę Netscape, najczęściej stosowany na stronach WWW. Głównym autorem JavaScriptu jest Brendan Eich. Skrypty służą najczęściej do zapewnienia interaktywności poprzez reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. W języku JavaScript można także pisać pełnoprawne aplikacje. Fundacja Mozilla udostępnia środowisko złożone z technologii takich jak XUL, XBL, XPCOM oraz JSLib.
Definicja PHP PHP – obiektowy, skryptowy język programowania zaprojektowany do generowania dynamicznych stron internetowych. PHP najczęściej stosuje się do przetwarzania skryptów po stronie serwera WWW. Implementacja PHP w środowisku Linux wraz z serwerem WWW Apache oraz serwerem baz danych MySQL określana jest jako platforma LAMP. Skrypty napisane w PHP są z reguły umieszczane w plikach tekstowych. Dzięki temu PHP jest podobny w założeniach do coraz rzadziej stosowanego mechanizmu Server Side Includes. PHP pozwala także na wykonywanie skryptów z linii poleceń podobnie jak Perl, Python oraz Ruby.
MySQL MySQL(wym. maj es-kiu-el) - wolnodostępny system zarządzania relacyjnymi bazami danych. MySQL tworzony jest przez szwedzką firmę MySQL AB, kupioną 16 stycznia 2008 roku przez Sun Microsystems.
Budowa HTML Deklaracją typu dokumentu <html> <head> <body> Treść strony </body> </html> Deklaracją typu dokumentu może być np. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
Znaczniki w sekcji <head> ..</head> Tytuł strony: <title>Tytuł strony</title> Kodowanie znaków: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> Opis zawartości strony: <meta name="Description" content="Tu podaj opis twojej strony" /> Wyrazy kluczowe: <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." /> Język strony: <meta http-equiv="Content-Language" content="język" /> W miejscu język wpisujemy „pl” jeżeli strona ma być w języku polskim. Autor strony: <meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
Znaczniki w sekcji <head> ..</head> Data utworzenia: <meta http-equiv="Creation-Date" content="data" /> Ikonka strony <link rel="shortcut icon" href="favicon.ico"> favicon.ico to nazwa pliku z ikonką dla strony Adres zwrotny: <meta http-equiv="Reply-To" content="twój adres e-mail" />
Znaczniki w <head> cd. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" /> <meta name="author" content="Haldor/Slashmedia" /> <meta http-equiv="reply-to" content="komorra@gmail.com" /> <meta name="description" content="Sklep internetowy" /> <meta name="keywords" content="Sklep, koszulki, spodnie, tanio, bluzy" /> <meta http-equiv="content-language" content="pl" /> <title>Sklep z odzieżą\</title> <link rel="shortcut icon" href="favicon.ico"> <link href=„plik.css rel=”stylesheet” type=”text/css”/> <style type=”text/css”> body{ bacground-image:url(Image/tlo1.jpg);} </style> </head>
Rodzaje kodowania <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> Parametr „charset” określa właśnie rodzaj kodowania.
Inne rodzaje kodowania
Podstawowe znaczniki Komentarz <!—To jest komentarz--> Odsyłacz <a href=”http://onet.pl” target=”_blank”>Kliknij aby wejść na Onet</a> Parametr href określa docelową stronę Parametr target może być pominięty, ale może przyjmować jedną z czterech wartości: - _”blank” przywoływany dokument zostanie załadowany do nowego, pustego okna - “_parent” przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu. - “ _top” przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę". “ nazwa” w miejsce zdefiniowane nazwą
Podstawowe znaczniki cd. Pogrubiony <b>To jest tekst pogrubiony</b> Tekst powiększony <big>To jest tekst powiększony</big> Przejście do nowego wiersza <br/> Wypośrodkowanie tekstu <center>To jest tekst wypośrodkowany</center> Definicja sekcji <div>Tekst + inne elementy HTML</div>
Podstawowe znaczniki cd. Nagłówki od H1 do H6 <h1>To jest nagłówek o wielkości H1</h1> <h3>To jest nagłówek o wielkości H3</h3> <h6>To jest nagłówek o wielkości H6</h6> Linia pozioma <hr/> Akapit <p>Jakiś tekst w akapicie</p> Skrypt JavaScript <script type="text/javascript"> document.write("kursy komputerowy!") </script> Powyższy zapis spowoduje pojawienie się tekstu w dokumencie: kurs komputerowy
Podstawowe znaczniki cd. Zaznaczenie fragmentu tekstu (np. do zmiany stylu CSS) <span>Tekst objęty zaznaczeniem</span> Styl osadzony w sekcji HEAD (znacznik <style>) <head> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head>