Elementy HTML-a
Spis treści:
1. Jakie są definicje typu dokumentów (Dtd)?
2. Kolory i tło
3. Czcionki
4. Linia odzielająca
5. Komentarz
6. Wstawianie zdjęć i mapa odsyłaczy
7. Tabele
8. Formularze
9.Listy nienumerowane i numerowane
10. Multimedia
11. Publikowanie strony
12. Linki
Pierwsza - dla stron pozbawionych
elementów przestarzałych oraz ramek:
<!DOCtype html
PUBLIC "-//W3C//Dtd html 4.0//EN"
"http://www.w3.org/tr/REC-html40/strict.dtd">
Druga - dla stron z przestarzałymi znacznikami:
<!DOCtype html
PUBLIC "-//W3C//Dtd html 4.0 Transitional//EN"
"http://www.w3.org/tr/REC-html40/loose.dtd">
Trzecia - dla stron zawierających elementy przestarzałe oraz
ramki:
<!DOCtype html
PUBLIC "-//W3C//Dtd html 4.0 Framest//EN"
"http://www.w3.org/tr/REC-html40/frameset.dtd">
Kolory można ustawiać za
pomocą:
- słów kluczowych np. black, red, white, brown, yellow,
olive itp.
- zapisu hexadecymalnego np. #111111
Domyślny kolor czcionki dla strony ustala się jako atrybut
<body>
np.
body text="red"
,
kolor tła jako atrybut
bgcolor,
a zdjęcie jako tło strony za pomocą zapisu
background="podklad.jpg"
.
Wielkość czcionki określamy:
- w wartościach bezwzględnych:
wartości od 1 do 7, domyślnie 3; na ekranie jest
5
- wartościach względnych:
np. "-4", co zmniejszy aktualny rozmiar
czcionki 5 do 1.
Krój czcionki:
Arial,
'Arial CE',
Verdana
- podajemy kilka czcionek a program wybiera
dostępne.
Fizyczne znaczniki formatujące:
<b> -
bold
<big> -
zwiększa wielkość czcionki o 1
<small> -
zmniejsza wielkość czcionki o 1
<i> -
kursywa
<s> -
przekreślenie
<u> -
podkreślenie
<sup> -
indeks górny np. 1045
<sub> -
indeks dolny np. 11112
<tt> -
czcionka nieproporcjonalna (każdy znak ma taką samą
szerokość)
<blink>; -
Znaczniki formatujące związane z treścią:
<em> -
nadaje emfazę
<strong> -
nadaje silną emfazę
<cite> -
cytowanie bibliograficzne
<code> -
identyfikuje fragment kodu pisany czcionką
nieproporcjonalą
<dfn> -
wskazuje definicje
<kbd> -
identyfikuje tekst jako wpisywany z klawiatury
<samp> -
identyfikuje ciąg znaków
<var> -
identyfikuje zmienne w kodzie
Linia oddzielająca -
wartości można podawać w pikselach lub w %.
Przykłady:
Przykład zachowania
długości linii i łamania linii w tekście:
- Jeżeli nie chcesz,
aby wszystkie informacje na Twojej stronie były publicznie
dostępne, możesz zabezpieczyć wybrane podstrony hasłem.
Prezentowany skrypt jest niezwykle prosty do wprowadzenia, ale
jednocześnie bardzo skuteczny.
- Jeżeli nie chcesz,
aby wszystkie informacje na Twojej stronie były publicznie
dostępne, możesz zabezpieczyć wybrane podstrony hasłem.
Prezentowany skrypt jest niezwykle prosty do wprowadzenia, ale
jednocześnie bardzo skuteczny.
PRE -
zachowuje spację, np.
Zachowanie spacji w tekście
za pomocą znacznika <pre>:
Ala ma kota
Po najechaniu kursorem na ten tekst zapoznaj się z komunikatem
Trzy popularne formaty
graficzne:
- .jpg lub .jpeg (jpg progressive - najpierw ładuje się w gorszej
jakości); przeznaczony dla zdjęć o wielu odcieniach kolorów
- .gif - do ilustracji i grafik niezawierajacych przejść kolorów
(schematy, diagramy); dodatkowe funkcje: przeźroczystość i
animacja (www.gamani.com; i
GIF Animator)
- .png - bardziej skompresowane niż .gif i nie stwarzaja problemów
z licencją
Stosowana rozdzielczość -
72 piksele, kolory w RGB (domyślna paleta dla przeglądarki).
Jeżeli zdjęcie jest w tym samym folderze to podajemy tylko nazwę,
jeżeli o jeden katalog wyżej to piszemy ../ścieżka lub podajemy
ścieżkę bezwzględną.
Jeżeli chcemy umieścić napis zamiast zdjęcia, np. że zdjęcie jest
niedostępne to używamy atrybutu
alt;
atrybut
align="left"
ustawia zdjęcie z lewej strony (pozycja domyślna).
Jeżeli chcemy umieścić zdjęcie na środku to umieszczamy znacznik
<img
src>
w znaczniku otwierającym i zamykającym
<center>.
Miniaturka jest odnośnikiem do pliku zewnętrznego.
Jeżeli chcemy umieścić zdjęcie z prawej strony to używamy atrybutu
align="right"
.
Mapa odsyłaczy:
Program do tworzenia mapy odsyłaczy CuteMAP
(www.globalscape.com).
- dzielimy zdjęcie na 4 obszary będące linkami do różnych
dokumentów - współrzędne zdjęcia zaczynają się od 1,1 w lewym,
górnym rogu.
- mapa odsyłaczy jest kołem
- mapa odsyłaczy jest kształtem
Uwagi ogólne:
- każdy wiersz i komórkę musimy zdefiniować osobno.
border
- szerokość obramowania
cellspacing
- szerokość linii w tabeli
cellpadding
- światło wewnątrz komórki
width
- szerokość tabeli, może być w pikselach lub
%
height
- wysokość tabeli
Przykład 1
| 1 |
2 |
3 |
| 4 |
5 |
6 |
| 7 |
|
9
|
Tab.1 Przykładowa
Przykład 2
| 1991 |
1992 |
1993 |
1994 |
1995 |
| 2001 |
2002 |
2003 |
2004 |
2005 |
Przykład 3
| |
Imię |
Nazwisko |
Data zatrudnienia |
Data zwolnienia |
| 1 |
Krzysztof |
Krawiec |
2004 |
2005 |
Przykład 4
| |
1991-1992 |
1993 |
1994 |
| Masło |
1150 |
1240 |
1380 |
1250 |
| Margaryna |
900 |
1100 |
1000 |
Przykład 5
| |
1991 |
1992 |
1993 |
1994 |
| Masło |
1150 |
1240 |
1250 |
| Margaryna |
900 |
1000 |
Przykład 6 - zagnieżdżanie tabeli
| |
1991 |
1992 |
1993 |
1994 |
| Masło |
1150 |
1240 |
1250 |
| Margaryna |
|
|
Imię |
Nazwisko |
Data zatrudnienia
|
Data zwolnienia |
| 1 |
Krzysztof |
Krawiec |
2004 |
2005 |
|
1000 |
Przykład 7
| Kolumna 1 |
Kolumna 2 |
Kolumna 3 |
| |
2 |
3 |
| 4 |
5 |
| 6 |
| 7 |
Przykład 8
| K1 |
K2 |
K3 |
| 1 |
2 |
3 |
| 4 |
5 |
| 6 |
7 |
| |
8 |
| 9 |
Przykład 9
| |
1991 |
1992 |
1993 |
1994 |
| Masło |
1150 |
1240 |
1250 |
| Margaryna |
900 |
1000 |
Przykład 10
| |
1991 |
1992 |
1993 |
1994 |
| Masło |
1150 |
1240 |
1250 |
| Margaryna |
900 |
1000 |
- do atrybutu
action
oprócz adresu serwera lub adresu e-mail można przypisać skrypt
CGI.
- plik skrytptu jest zazwyczaj zapisany w podfolderze folderu
cgi-bin.
Adresy stron ze skryptami:
cgi.resourceindex.com
www.scriptsearch.com
www.scriptarchive.com
www.freescripts.com
freehostedscripts.net
www.icthus.net/CGI-City
Adresy stron z kreatorami formularzy:
www.response-o-matic.com
www.responders.com
www.formsite.com
- można zagnieżdżać listy numerowane i nienumerowane.
Przykład 1: Lista nienumerowana
Urządzenia:
- Wejściowe:
- Wyjściowe:
Przykład 2: Lista numerowana
Spis treści:
- Wstęp
- Pierwsze kroki z językiem html
- Wprowadzenie do html i xml
- Twoja pierwsza strona www
- Jak zacząć?
- Typowe znaczniki i atrybuty HTML
- Znacznik <html>
- Znacznik <body>
- Znacznik <head>
- Znacznik <head>- wprowadzenie
- Znacznik <head>- słowa kluczowe
- Znacznik <body>- rola w
pozycjonowaniu
Przykład 3: Lista definicji
Technologie związane z projektowaniem stron www:
- Java
- Język programowania, dzięki któremu do stron www można
dodawać elementy interakcyjne umieszczane w apletach.
- JavaScript
- Język skryptowy ułatwiający zaopatrywanie stron www w
elementy interakcji poprzez osadzanie kodu skryptu
bezpośrednio w kodzie HTML.
- VBScript
- Język skryptowy pełniacy tę samą rolę co JavaScript, ale
wywodzący się z VisualBasica, języka programowania
Microsoftu.
Przykład 1: Łącze do dźwięku.
Kaczka
Przykład 2: Osadzanie dźwięku.
Należy używac formatu .wav
Moskit
- należy go odkomentować.
Najpopularniejsze typy MIME
Potrzebujemy klienta ftp
np.darmową Filezillę.
Adresy do dostawców domen internetowych:
www.dns.pl
domeny.onet.pl
www.networksolutions.com
www.register.com
www.easydns.com
www.w3.org
HTML w Wikipedii
www.webmonkey.com
www.htmlhelp.com
podstawowe znaczniki
html
Sztuka tworzenia multimedialnych dokumentów
Morrisson M., 2003. HTML i XML - szybciej,
lepiej. Wyd. RM.Warszawa.
Darmowy hosting zapewnia PRV.PL