Technologie internetowe
Download
Report
Transcript Technologie internetowe
Tworzenie stron internetowych
Podstawy HTML
„Ucz się, jak gdybyś miał żyć wiecznie,
żyj – jak gdybyś miał umrzeć jutro”
Św. Izydor z Sewilli
Tomasz Piłka
HTML – historycznie
HTML (Hypertext Markup Language) to język
znacznikowy służący do pisania stron WWW.
Przyjmuje się, że został opracowany przez Tima
Bernersa-Lee w roku 1990,
Prawdopodobnie najstarszy dokument HTML dostępny w
Internecie został utworzony 13 listopada 1990 roku.
Tim Berners-Lee
twórca koncepcji WWW (WorldWideWeb)
Komputer NeXT, na którym pracował
pierwszy serwer WWW
(dziś znajduje się on w muzeum CERN w Meyrin).
HTML
HTML umożliwia zapis treści dokumentu
i równocześnie opis jego układu
graficznego.
Dokument HTML to plik tekstowy, z
ewentualnymi załącznikami, w którym
znajduje się tekstowa treść przeplatana
z rozkazami formatującymi, zapisanymi
w formie tzw. znaczników (tags).
Każdy znacznik HTML przyjmuje postać
słowa kluczowego otoczonego ostrymi
nawiasami (znakami "<" i ">").
HTML
Większość znaczników HTML występuje w parach, na
które składają się znacznik otwierający i znacznik
zamykający. Znacznik zamykający różni się od
otwierającego wyłącznie znakiem ukośnika
poprzedzającym słowo kluczowe.
Znaczniki HTML mogą posiadać atrybuty sterujące,
które wpływają na ich funkcjonowanie. Atrybuty te
są umieszczane wewnątrz znacznika, za słowem
kluczowym.
Język HTML dopuszcza też możliwość stosowania
komentarzy, będących blokami tekstu ignorowanymi
przez programy klientów HTTP (przeglądarki).
Komentarze otacza się znakami "<!--" i "-->".
Struktura dokumentu HTML
Typ
dokumentu
Niewidoczna
Zawartość
pliku
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tekst</title>
</head>
<body>
Widoczna
Zawartość
pliku
</body>
</html>
Elementy nagłówka <head>
<title> tytuł strony </title>
<base href="http://www.firma.com/dokument.html">
<meta name="Description" content=„opis strony">
<meta name="Keywords" content="lista wyrazów
kluczowych">
<meta name="Author" content="nazwisko autora">
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<meta http-equiv="Creation-Date” content="Tue, 04 Dec
1993 21:29:02 GMT">
<meta name="Generator" content="nazwa edytora">
Elementy <body> - tło dokumentu
Obraz jako tło
<body background=„URL pliku graficznego">
Kolor tła
<body bgcolor="kolor">
"kolor" może być podany „imiennie” (np. red,
green, black, white) lub za pomocą wartości
heksadecymalnych (szesnastkowych) w
systemie RGB
Kolory w HTML-u
Każda przeglądarka stron WWW pozwala uzyskać na
ekranie jednocześnie 256 różnych kolorów, jednak tylko
216 z nich poprawnie wyświetlają wszystkie przeglądarki
internetowe.
Dowolny kolor składa się z trzech barw podstawowych:
czerwonej, zielonej i niebieskiej (red, green, blue - czyli
RGB). Do dyspozycji mamy 256 odcieni każdego z tych
kolorów i poprzez ich mieszanie otrzymujemy dowolny inny
kolor.
Kolor RGB zapisywany jest w postaci
#RRGGBB
gdzie RR to zapisany szesnastkowo (heksadecymalnie)
kolor czerwony (red), GG to kolor zielony (green), a BB to
kolor niebieski (blue). Oznacza to, że każdy kolor może
przyjmować wartości od 00 do FF.
Kolory w HTML-u
Można też używać nazw kolorów.
Podstawowe 16 określeń pochodzi od nazw
kolorów, które można było uzyskać na
komputerach z kartą graficzną VGA
(komputery pokazywały kiedyś tylko 16
kolorów): white (kolor biały - #FFFFFF),
black (kolor czarny - #000000), green, blue,
fuchsia, yellow, lime, olive, purple, teal,
silver, red, navy, maroon, gray, aqua.
Ostatecznie zwiększono jednak liczbę
dostępnych nazw kolorów do 140.
Elementy <body> - pozioma linia
Linię poziomą wstawiamy za pomocą polecenia <hr>.
Linii możemy nadać atrybuty:
grubość, np.: <hr size=”5”>
długość określoną w pikselach
<hr width=”300”>
lub w procencie szerokości strony
<hr width=”50%”>
wyrównanie na stronie (domyślnie na środku), np.:
<hr align=”left”>
Atrybuty można łączyć, np.:
<hr align=”right” size=”8” width=”200”>
Formatowanie tekstu - wiersz
Polecenie <br> przenosi tekst o jeden wiersz
w dół (w ramach akapitu):
To
To
To
To
jest
jest
jest
jest
pierwszy wiersz <br>
drugi wiersz <br>
trzeci wiersz <br>
czwarty wiersz <br>
Napisanie kilku kolejnych <br> pozwala
poszerzyć pionowy odstęp między
elementami (przez wstawianie pustych
wierszy):
<br><br><br><br>
Formatowanie tekstu - akapity
Aby rozdzielić akapity, należy się posłużyć
poleceniem <p> :
<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>
Wyrównywanie tekstu w akapicie:
środkowanie <p align=”center”> tekst akapitu </p>
wyrównywanie do prawego marginesu
<p align=”right”> tekst akapitu </p>
wyrównywanie do lewego marginesu
<p align=”left”> tekst akapitu </p>
wyrównanie jednocześnie do lewego i prawego
marginesu
<p align=”justify”> tekst akapitu </p>
Formatowanie tekstu - nagłówki
<hn> </hn>
cyfra n oznacza stopień nagłówka (mamy ich 6).
Polecenie wprowadzające nagłówek stopnia
pierwszego może wyglądać następująco:
<h1> nagłówek pierwszego poziomu </h1>.
Nagłówki można wyrównać używając polecenia
align:
na środku strony <h1 align=”center”> tytuł </h1>
wyrównywanie do prawego marginesu
<h1 align=”right”> tytuł </h1>
wyrównywanie do lewego marginesu
<h1 align=”left”> tytuł </h1>
Formatowanie tekstu - czcionka
<b> tekst pogrubiony </b>
<i> tekst pochylony </i>
<u> tekst podkreślony </u>
<strike> tekst przekreślony </strike>
<tt> tekst maszynowy </tt>
<sup> indeks górny </sup>
<sub> indeks dolny </sub>
<blink> tekst migający </blink>
<center> tekst lub obrazek na środku </center>
Formatowanie tekstu - czcionka
Krój czcioki:
<font face="nazwa_kroju"> tekst </font>
Na przykład:
Time
Arial
Courier
Kolor czcionki:
<font color=„kolor"> tekst </font>
Formatowanie tekstu - czcionka
Wielkość czcionki.
wartość absolutna:
<font size="x">Tekst </font>
Możemy stosować czcionkę o wielkości od 1 do 7
(x = 1...7). Im większa wartość, tym większa
czcionka w przeglądarce.
wartość relatywna (względna)- wielkość
zmiany.
Czcionka standardowa ma wielkość 3, możemy
dodać do niej co najwyżej 4 jednostki lub odjąć
co najwyżej 2.
<font size="+x">Tekst </font>
<font size="-x">Tekst </font>
Listy (wykazy) wypunktowane
kod
<ul>
<li> Pierwszy punkt
<li> Drugi punkt
<li> Trzeci punkt
</ul>
<ul type=”disc”>
<ul type=”circle”>
<ul type=”square”>
efekt wykonania
Pierwszy punkt
Drugi punkt
Trzeci punkt
Listy (wykazy) numerowane
kod
<ol>
<li> Pierwszy punkt
<li> Drugi punkt
<li> Trzeci punkt
</ol>
<ol
<ol
<ol
<ol
<ol
<ol
efekt wykonania
1. Pierwszy punkt
2. Drugi punkt
3. Trzeci punkt
start=”x”>
type=”A”> numerowanie wg wielkich liter
type=”a”> numerowanie wg małych liter
type=”I”> numerowanie wg wielkich liczebników rzymskich
type=”i”> numerowanie wg małych liczebników rzymskich
type=”1”> numerowanie wg liczebników arabskich
Odsyłacze do stron WWW
<a href="adres_strony_internetowej">
nazwa strony </a>
Przykład:
<a href="http://www.onet.pl"> Portal
Onet.pl</a>
Wynik: Portal Onet.pl
Uwagi:
Na ekranie przeglądarki jest wyświetlany tekst, który
znajduje się między znacznikami
<a href="... "> i </a>.
Adres internetowy jest podawany w cudzysłowie.
Odsyłacze do plików
Odsyłacz do innego pliku HTML (w tym samym
katalogu):
<a href="nazwa_strony.html” target=”_blank”> Napis
</a>
Odsyłacz do innego pliku HTML w katalogu
podrzędnym:
<a href=”nazwa_katalogu/nazwa_strony.html">
Napis </a>
Odsyłacz do pliku HTML w katalogu
równorzędnym:
<a href="../nazwa_katalogu/nazwa_strony.html">
Napis</a>
Odsyłacz do pliku tekstowego:
<a href=„nazwa_pliku_tekstowego"> Tekst </a>
Odsyłacz do pliku dźwiękowego/filmu:
<a href=”nazwa_pliku_multim"> Tekst </a>
Odsyłacze do miejsca na stronie
Oznaczenie miejsca (etykiety)
<a name="nazwa_etykiety">
Odsyłacz do etykiety na tej samej stronie
<a href="#nazwa_etykiety"> Tekst lub
obrazek, na który klikamy </a>
Odsyłacz do etykiety na innej stronie
<a href="strona.htm#nazwa_etykiety"> Tekst
lub obrazek, na który klikamy </a>
Odsyłacze do poczty elektronicznej
<a href=”mailto:adres@poczty”> tekst lub
obrazek, na który klikamy </a>
Po kliknięciu zostanie na komputerze klienta
uruchomiony standardowy program do
obsługi poczty e-mail.
Dodatkowe opcje:
<a href="mailto:[email protected] [email protected]
&subject=List ze strony
&body=Witajcie Moi drodzy"> Napisz do mnie </a>
Grafika
Elementy graficzne są wyświetlane na stronie
dzięki poleceniu:
<img src=”URL_pliku_graficznego” />
Znacznik img może mieć dodatkowe atrybuty:
width=”szerokość”
height=”wysokość”
alt=”tekst_opisu obrazka”
border=”grubość_obramowania”
align=”top | middle | bottom | left | right” (!)
hspace=”odstępy_poziome”
vspace=”odstępy_pionowe”
Pliki graficzne muszą zostać umieszczone na
serwerze razem z plikami html tworzącymi
stronę.
Grafika
Na stronie można umieszczać również tzw. mapy
obrazkowe, czyli obrazy ze zdefiniowanymi obszarami,
których kliknięcia powoduje wyświetlenie innego pliku (są
to tzw. hot-spots)
przykład
Definicja obrazka będącego mapą:
<img src="razem1.gif" usemap="#razem1" border="0">
Definicja obszarów hot-spots:
<map id="razem1" name="razem1">
<area shape="circle" coords="193,86,36" href=„plik1.html" alt="Kubuś Puchatek">
<area shape="rect" coords="114,96,161,157" href=„plik2.html" alt="Kłapouchy">
<area shape="poly" coords="92,72,153,94,144,37" href=„plik3.html" alt="Tygrysek">
<area shape="circle" coords="92,132,24" href=„plik4.html" alt="Prosiaczek">
<area shape="default" nohref="nohref" alt="Moja strona o Kubusiu Puchatku">
</map>
Tabele
Tabela w HTML-u składa się z wierszy
(zaznaczanych znacznikiem <tr>) oraz
zawartych w nich komórek
(wprowadzanych znacznikiem <td>).
W komórkach można umieszczać tekst lub
grafikę.
<table width=”50%” border=”5” >
<tr>
<td> Komórka 11</td> <td> Komórka 12 </td>
</tr>
<tr>
<td> Komórka 21</td> <td> Komórka 22 </td>
</tr>
</table>
Tabele
Znacznik <table> może mieć wiele atrybutów,
m.in.:
align – określa sposób wyrównania tabeli,
width - określa szerokość tabeli w pikselach albo w
postaci procentu szerokości ekranu przeglądarki,
bgcolor - kolor tła we wszystkich komórkach tabeli,
cellpading – ilość wolnej przestrzeni między zawartością
komórki a jej brzegiem,
cellspacing
–
przerwa
(w
pikselach)
między
poszczególnymi komórkami,
border - grubość brzegów w pikselach
frame - określa, które części zewnętrznych brzegów
tabeli są wyświetlane.
rules - pozwala manipulować wewnętrznymi liniami
tabeli.
Tabele
Niektóre atrybuty można nadać komórkom lub
wierszom tabeli, np.:
Atrybut colspan – umożliwia rozciągnięcie
komórki tabeli na więcej kolumn w wierszu
<td colspan=”3”>
Atrybut rowspan – umożliwia rozciągnięcie
komórki na więcej wierszy w kolumnie
<td rowspan=”4”>
Komórkom można nadać kolor tła inny niż kolor tła
całej tabeli.
Ramki
Ramki pozwalają na wyświetlenie na stronie
innej strony internetowej lub innego pliku.
<iframe src=”URL_dokumentu”
name=”nazwa_ramki”>tekst dla użytkowników
przeglądarek nie obsługujących takich ramek
</iframe>
Znacznik iframe może mieć dodatkowe
atrybuty:
frameborder=”0|1”
height=”wysokość_ramki”
width=”szerokość_ramki”
marginwidth=”szerokość_marginesu”
marginheight=”wysokość_marginesu”
scrolling=”yes|no|auto”
align=”top | middle | bottom | left | right”>
Dziękuję za uwagę