| NAJPROSTSZA STRONA |
| |
Wykonajmy najprostszą stronę. Potrzebny jest nam prosty edytor typu notes. Otwieramy nowy dokument i zapisujemy go pod dowolną nazwą, ale z rozszerzeniem htm albo html np. strona.html
|
| Przykład 1. | |
W pliku wystarczy wpisać:
<html>
<body>
Cześć, dobrze, że jesteś na mojej stronie!
Mam na imię Agnieszka i mam 16 lat. Jestem trochę roztargniona. Mama mówi na mnie Aga i mówi: "Oj, Agnieszko, jaka ty jesteś roztrzepana".
</body>
</html>
Po wyświetleniu pliku np. w Internet Explorer nasza strona wyświetli się w następującej postaci:
Cześć, dobrze, że jesteś na mojej stronie!
Mam na imię Agnieszka i mam 16 lat. Jestem trochę roztargniona. Mama mówi na mnie Aga i mówi: "Oj, Agnieszko, jaka ty jesteś roztrzepana".
Po co te dodatki na początku strony? Elementy zamykane w takich ostrych nawiasach służą do ustalenia sposobu wyświetlania strony, do wybierania czcionek, służą także do oznaczenia części (bloków) strony. Mówi się o nich jako o znacznikach.
I tak:
<html> znacznik oznacza rozpoczęcie części pisanej w języku html
</html> znacznik kończy część strony pisaną w html'u
<body> znacznik oznacza rozpoczęcie tekstu strony
</body> znacznik kończący tekst strony
Jak widać znaczniki takie występują parami <znacznik> i </znacznik> czyli znak otwierający jakąś część i drugi zamykający tę część.
Gdzie tutaj są jakieś elementy języka html?
Faktycznie nie wpisaliśmy innych znaczników oprócz znaczników html i body oznaczających części strony. Podam teraz kilka prostych znaczników służących do formatowania strony. Znaczniki możemy pisać małymi lub wielkimi literami, możemy pisać tekst jednym ciągiem, znaki ENTER'a się nie liczą, a wielokrotne spacje są traktowane jako jedna spacja (oprócz znacznika pre).
|
| PROSTE ZNACZNIKI: |
| b, i, u, itd. | | Podstawy formatowania i abecadło języka html:
<b>Tekst wytłuszczony</b> (po angielsku bold)
<i>Tekst pochylony</i> (po angielsku italic, czyli pismo odręczne, włoskie, pochylone, kursywa)
<u>Tekst podkreślony</u> (po angielsku underline)
<strong>Wyróżniony</strong> (mocny-strong, mocny akcent, tekst wyróżniony)
<H1>Tytuł pierwszy H1</H1> tytuł pierwszego poziomu (od Head - czyli nagłówek)
<H2>Tytuł drugi H2</H2> tytuł drugiego poziomu, pisany mniejszą czcionką
<H3>Tytuł trzeci H3</H3> tytuł trzeciego poziomu, pisany mniejszą czcionką
<em>Zacytowany fragment</em> Zacytowany fragment, czyjaś wypowiedź, tytuły książek itp.
<hr> Linia (nie polecana!)
Koniec wiersza<br>
i przejście do następnego
<p>Paragraf, czyli większy fragment tekstu, nazywany czasem akapitem. Na początku i na końcu paragrafu wstawiany jest pusty wiersz</p>
Jak widać, część znaczników występuje pojedynczo (koniec wiersza, linia), bez pary otwierającej i zamykającej. Część, jak pogrubienie, pochylenie czcionki i inne znaczniki stosowane do bloku tekstu zawsze występują parami.
INNE ZNAKI:
niełamliwa spacja służąca np. do łączenia nierozdzielanych wyrazów np. Agnieszka Borkowska.
Po wspisaniu znaczników © ® ™ otrzymamy symbole © ® ™
|
| Przykład 2. | |
A teraz ten sam przykład z zastosowaniem poznanych znaczników:
<html>
<body>
<H2>Strona domowa Agnieszki</H2>
Cześć, dobrze, że jesteś na mojej stronie!<br>Mam na imię <b>Agnieszka</b> i mam 16 lat.<br>Jestem trochę roztargniona.<br>Mama mówi na mnie <i>Aga</i> i mówi: "<em>Oj, Agnieszko, jaka ty jesteś roztrzepana</em>".
</body>
</html>
Wyświetli się on w następujący sposób:
Strona Domowa Agnieszki
Cześć, dobrze, że jesteś na mojej stronie!
Mam na imię Agnieszka i mam 16 lat.
Jestem trochę roztargniona.
Mama mówi na mnie Aga i mówi: "Oj, Agnieszko, jaka ty jesteś roztrzepana".
|
| ZNACZNIKI BLOKU |
| <P> </P> | |
Paragraf. Na początku wstawiany jest pusty wiersz. Na końcu, po paragrafie, też jest wstawiany pusty wiersz.
|
| <DIV> </DIV> | |
Blok Div służy do łączenia elementów. Ten blok kończy się przejściem do następnego wiersza, ale nie wstawia pustego wiersza "pod" jak w znaczniku <P>.
|
| <SPAN> </SPAN> | |
Blok służący do zmiany cech elementów. Nie wstawia żadnych pustych wierszy, nie przenosi kursora do następnego wiersza. (więcej w stylach).
|
| FORMATOWANIE BLOKU |
| WIDTH | |
Element służy do ustalania szerokości, np. szerokości linii.
<HR WIDTH=100> linia o szerokości 100 pikseli
<HR WIDTH=5%> linia o szerokości 5% szerokości strony
|
| ALIGN | |
Wyrównywanie elementów np. wyrównanie linii do prawej krawędzi strony
<HR WIDTH=20% ALIGN=right> linia o szerokości 200 pikseli wyrównana do prawej
|
| COLOR | |
Kolor elementu np. linii
<HR SIZE=20 WIDTH=150 ALIGN=left COLOR=green> zielona linia o wysokości 20 pikseli szerokości 150 pikseli wyrównana do lewej
|
| PRZYKŁAD ZASTOSOWANIA BLOKU DO FORMATOWANIA TEKSTU |
|
| Style | |
<P STYLE="font-family: verdana; font-size: 18pt; font-weight: lighter; background: yellow; color: red">Przykład zastosowania stylu do zmiany własności tekstu.</P>.
Przykład zastosowania stylu do zmiany własności tekstu.
|
| COLOR | |
Zmiana koloru tekstu
Do tekstu musimy stosować znacznik STYLE. Określimy wtedy łatwo wszystkie cechy tekstu
<P STYLE="COLOR=red"> Blok tekstu koloru czerwonego </P>
Blok tekstu koloru czerwonego
<P STYLE="COLOR: blue; FONT-SIZE: 20pt; BACKGROUND: black">Tekst niebieski na czarnym, rozmiar 20 punktów</P>
Tekst niebieski na czarnym, rozmiar 20 punktów
UWAGA:
Zobacz, że w stylu określa się elementy pisząc wartości po znaku dwukropka, znaczniki oddzielamy średnikiem.
|
| ELEMENTY FORMATOWANIA W ZNACZNIKU STYLE |
|
| FONT-SIZE | |
FONT-SIZE określa rozmiar pisma
Przykład:
Tym razem zastosujmy blok DIV.
<DIV STYLE="FONT-SIZE: 8pt;">Rozmiar 8 punktów</DIV>
Rozmiar 8 punktów
Rozmiar 10 punktów
Rozmiar 15 punktów
|
| COLOR | |
COLOR określa kolor pisma
Przykład:
Tym razem ze znacznikiem SPAN (nie wstawia znaku końca wiersza)
<SPAN STYLE="FONT-SIZE:12; COLOR: brown; ">Tekst brązowy</SPAN>
Tekst brązowy
Przykład innych kolorów:
Black (Czarny) Gray (Szary) Silver (Srebrny) Green (Zieleń)
Blue (Niebieski) Navy (Niebieski marynarski) Yellow (Żółty)
|
| WIDTH | |
WIDTH określa szerokość
Przykład:
Określmy szerokość bloku
<SPAN STYLE="WIDTH: 200">Dłuższy fragment tekstu wymagający przełamania</SPAN>
Dłuższy fragment tekstu wymagający przełamania, tutaj wyświetlany tylko w bloku o szerokości 200 pikseli.
|
| BACKGROUND | |
BACKGROUND określa kolor tła
Przykład:
<SPAN STYLE="BACKGROUND: red; COLOR: white;"> Fragment tekstu w kolorze białym na czerwony tle. </SPAN>
Fragment tekstu w kolorze białym na czerwony tle.
Jeżeli chcecie żeby tekst nie rozpoczynał się razem z tłem, to wstawcie przed tekstem i po tekście twardą spację
|
| FONT-WEIGHT | |
FONT-WEIGHT określa wagę pisma (ciężkie pismo i lekkie)
Przykład:
<SPAN STYLE="FONT-WEIGHT: normal;">Tekst normalny.</SPAN>
Abecadło z pieca... Tekst normalny. normal
Abecadło z pieca... Tekst lekki. lighter
Abecadło z pieca... Tekst ciężki. bold
Abecadło z pieca... Tekst cięższy. bolder
|
| FONT-FAMILY | |
FONT-FAMILY określa rodzinę czcionki
Przykład:
<SPAN STYLE="FONT-FAMILY: Times;">Tekst pisany czcionką Times.</SPAN>
Tekst pisany czcionką Times
Tekst pisany czcionką Arial
Tekst pisany czcionką Courier
Tekst pisany czcionką Verdana
UWAGA:
Każdy tekst jest pisany czcionką tego samego rozmiaru!
|
