Chciałbym zapoznać was z czymś, co moŻe się przydać w najmniej niespodziewanym momencie, a mianowicie pisaniu stron w HTML?u za pomocą najzwyklejszego edytora tekstowego, co jest rzeczą, mimo pozorów, banalną. Część 1 - Budowa strony
Mimo iŻ HTML jest trochę przestarzały to dla początkującego webmastera jest wystarczający
Stronę w nim budujemy za pomocą znaczników (tagów). KaŻdy znacznik składa się ze znaków: mniejszości (<) i większości (>), tworzących nawias (<>) oraz tekstem między nimi. Jeśli tekst pomiędzy nawiasami jest poprzedzony znakiem slash (/) to kończy on blok (lub sekcję). A więc znacznik moŻe wyglądać tak: <tekst>, lub tak: </tekst>. Pierwszy moŻe być samodzielny lub występować w parze. Drugi występuje zawsze po tagu rozpoczynającym, czyli o takim samym tekście ale bez slasha.
Podstawą są 3 pary znaczników:
-
<html> </html> Rozpoczęcie i zakończenie kodu
-
<head> </head> Rozpoczęcie i zakończenie nagłówka
-
<body> </body> Rozpoczęcie i zakończenie korpusu
Na razie czarna magia, ale juŻ tłumaczę.
<html> - Rozpoczyna naszą stronę internetową. Wstawiamy go zawsze na początku strony. Informuje on przeglądarkę o rozpoczęciu kodu HTML.
</html> - Kończy naszą stronę internetową. Wstawiamy go zawsze na końcu strony. Informuje on przeglądarkę o zakończeniu kodu HTML.
Cała zawartość strony powinna znajdować się pomiędzy tymi znacznikami
w nagłówku lub korpusie.<head> - Rozpoczyna nagłówek (sekcja nagłówkowa). Wstawiamy go zawsze po tagu <html>. Informuje on przeglądarkę o najwaŻniejszych rzeczach dotyczących technicznej części strony.
</head> -Kończy nagłówek. Wstawiamy go zawsze przed tagiem <body>.
<body> - Rozpoczyna Korpus (sekcja główna). Wstawiamy go zawsze po tagu </head>.
Zawiera on całą treść strony oraz dane dotyczące wyglądu.
</body> - Kończy korpus. Wstawiamy go zawsze przed tagiem </html>.
No, juŻ moŻemy zbudować kod strony (co prawda nic tam nie będzie, ale to juŻ coś), który będzie wyglądał tak:
Kod:
<html>
<head>
</head>
<body>
</body>
</html>
Część 2 - sekcja nagłówkowa
Mieści się ona pomiędzy znacznikami <head> i </head>. Umieszczamy w niej tytuł, stronę kodową, elementy kodu dotyczące efektowności i poprawności wyświetlania strony.
?Tytuł
Tytuł powinien być:
- Krótki
- Związany z treścią strony
- Jedynym fragmentem kodu wyświetlanym z sekcji nagłówkowej (tekst lub rysunek)
- WyróŻniający się z otoczenia
Do zmian wyglądu tytułu w wersji pisanej moŻna uŻywać znaczników do edycji tekstu.
?Strona kodowa strony
Jak wiemy na ziemi jest wiele róŻnych kultur uŻywających wiele róŻnych języków i narzeczy. Podstawowym pismem internetu jest alfabet łaciński, jednak wiele znaków w nim nieobecnych, np.: ę, ź.
Standardem w internecie jest
?iso-8859-2? które bez problemów koduje większość polskich znaków. Problemem są 3 litery:
ą, ś i ¦. Trzeba je zastępować znakami: ?, ?, ?. Do oznaczenia strony kodowej iso-8859-2 uŻywa się tagu:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"iso-8859-2">.
MoŻna teŻ uŻyć programu ?Ogonki97?, który zamieni 3 powyŻsze litery na odpowiedniki w
iso-8859-1 oraz doda odpowiedni znacznik.
?Inne
Do tej sekcji dodawane teŻ inne istotne (lub przydatne) znaczniki lub skrypty (czyli krótkie programy odtwarzane w przeglądarce).
A więc nasz skrypt wygląda tak:
Kod:
<html>
<head>
<edytor1>Tytuł</edytor1>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"iso-8859-2">.
<waŻny tag 3>
<waŻny tag 5>
<waŻny tag 8>
</head>
<body>
</body>
</html>
Część 3- sekcja główna
Tutaj zazwyczaj nie umieszczamy Żadnych tagów dotyczących całej strony, a jedynie bloków (fragmentów) tekstu. A więc wypadało by pokazać kilka podstawowych tagów:
bgcolor="Nazwa koloru po angielsku" wartość Tagu <body> ustalająca kolor tła
<i></i> ?Italic? Pochylenie czcionki
<b></b> ?Bold? Pogrubienie czcionki
<u></u> ?Underline> Podkreślenie czcionki
<img src=?nazwa_rysunku.rozszerzenie?> Wstawienie rysunku.
<br> Następny wiersz
<p> Pusty wiersz
<tt></tt> Czcionka monotypiczna, czyli o stałej szerokości znaku
<font></font> Ma on dwie odstawowe wartości
size=?x” Rozmiar czcionki, od 1 do 7, lub ??2? , ?-1? ?+0? ?+1? ?+2? ?+3? ?+4? (pierwszego nie polecam poniewaŻ czasem nie działa)
color=?angielska nazwa koloru”
Wartości uŻywamy w tagu rozpoczynającym, razem lub osobno.
<a href=?adres url?>Wyświetlany tekst</a> Odnośnik do innej strony
<a href=?#Nazwa_kotwicy?>Wyświetlany tekst lub zdjęcie</a> Odnośnik Kotwicy
<a name=?#Nazwa_kotwicy?>Tu moŻna wstawić tekst</a> Kotwica
Kotwica słuŻy do przenoszenia nas do konkretnego miejsca na stronie. Jeśli szukane miejsce znajduje się na innej stronie znak ?#? poprzedzamy jej nazwą.
<hr> Linia moŻe mieć 2 wartości
width=(wartość w pixelach lub procentach) szerokość lini
size=(wartość w pixelach) wysokość lini
No to juŻ mamy na stronie "coś" sensownego
Kod:
<html>
<head>
<b>Tytuł</b>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"iso-8859-2">.
<waŻny tag>
</head>
<body bgcolor="red">
<b><tt>Treść 1<tt></b><p>
Bla bla bala<br>
<a href="http://www.utx.pl/">Forum UTX</a>
<a href=#kotwica>Coś tam</a>
<a href="url"#kotwica2>url</a>
1<br>
2<br>
3<br>
4<br>
<name=#kotwica></a>Coś tam
</body>
</html>
- Tabele
Tworzenie tabeli to dość skomplikowana sprawa, jednak do jej syworzenia wystarczą 3 pary tagów:
<table></table> Informuje przeglądarkę o rozpoczęciu i zakończeniu pisania tabeli
<tr></tr> Nowy wiersz w tabeli
<td></td> Nowa komórka tabeli
Do powyŻszych tagów uŻywamy następujących wartości:
border="Grubość ramki w pixelach" (tylko w tagu <table>)
cellpadding="Margines w pixelach" (tylko w tagu <table>)
width="Szerokość w pixelach lub procentach" height="Wysokośćć w pixelach lub procentach"Tabela 2\2 pola:
Kod:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
>>>>>W kaŻdym wierszu musi być tyle samo komórek<<<<<---------------------------
Proszę o konstruktywne komentarze i krytykę.
Pozdrawiam
Rafał Karwat
Publikowanie i kopiowanie tego tekstu bez zgody autora jest łamaniem praw autorskich.
Wykaz stron i for na których za moją zgodą publikowany jest ten artykuł:
http://frytka-jamniki.webpark.pl/autoryzacja.html
