Wprowadzenie do HTML, CSS, JavaScript, PHP
Download
Report
Transcript Wprowadzenie do HTML, CSS, JavaScript, PHP
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>
</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.
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
<meta name="author" content="Haldor/Slashmedia" />
<meta http-equiv="reply-to" content="[email protected]" />
<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=iso8859-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
- “ _top”
-“ nazwa”
hierarchii dla bieżącego dokumentu.
przywoływany dokument zostanie wstawiony na miejsce
dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę".
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>