Forum dla informatyków

Wujasek

HTML (ang. HyperText Markup Language) to bardzo popularny język używany do tworzenia stron internetowych. Jego prostota pozwala na bardzo szybkie zaprojektowanie witryny osobie, która nigdy nie miała z nim nawet styczności. Istnieje cała masa graficznych programów do tworzenia stron, ale lepiej zacząć od podstaw i poznać od podszewki najbardziej użyteczne tagi. Naszym narzędziem pracy będzie więc notatnik albo inny, dowolny edytor.

Wstęp.

Strona zapisana w formacie .html jest zwykłym dokumentem tekstowym, w jej wnętrzu znajdują się tagi (znaczniki), czyli inaczej polecenia, które ma odczytać przeglądarka internetowa. Na rynku istnieje, jak już wcześniej wspomniałem, ogromna ilość programów ułatwiających nam zrobienie witryny. Są wśród nich zarówno programy graficzne, w których nawet dziecko zaprojektuje swoją www, jak i tekstowe, które tylko wspomagają naszą pracę. My jednak na początek użyjemy do tego celu zwykłego notatnika, który posiada każdy z was. W kolejnych częściach kursu na łamach pc4all zaprezentuje wam inne programy ułatwiające życie webmasterowi.

Od czego zacząć?

Każda pisana przez nas strona powinna posiadać szkielet, w ramach którego będziemy posługiwać się tagami. Z kolei same tagi składają się z ostrych nawiasów, wewnątrz których znajduje się ciąg znaków mający konkretne znaczenie. Możecie używać małych bądź dużych liter, nie ma to żadnego znaczenia.

Cała strona powinna znajdować się między znacznikami <HTML> </HTML>, nagłówkowe powinny być objęte w <HEAD> </HEAD> a cała pozostała treść między <BODY> </BODY>.

W praktyce powinno wyglądać to tak:

<HTML>

<HEAD>

nagłówek

</HEAD>

<BODY>

treść strony

</BODY>

</HTML>

Screen z notatnika:

Po wpisaniu tagów do edytora tekstowego otrzymamy najprostszą z możliwych stron. Pozostaje jeszcze kwestia jak zapisać wykonaną przez nas pracę tak żeby przeglądarka internetowa interpretowała ją jako dokument html a nie zwykły tekst. W tym celu z menu wybieramy „Plik” a następnie „Zapisz jako”. W oknie, które się pojawi wpisujemy nazwę pliku „index.html”. Strona główna naszej witryny powinna nosić nazwę „index” żeby przeglądarka wiedziała od czego ma zacząć wyświetlanie zawartości naszego serwisu.

Kolejne kroki.

Przygotowany przez nas szkielet jest dobrym fundamentem dalszej budowy strony, jednak przydałoby się wyposażyć go w kilka dodatkowych informacji, które każda szanująca się strona powinna posiadać.

Pierwszym bardzo ważnym krokiem jest ustawienie strony kodowej tak, aby prawidłowo wyświetlały się wszystkie polskie znaki dialektyczne (ęąśłżźćń). W tym celu należy wpisać linijkę <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> zaraz na samym początku sekcji <HEAD> </HEAD>.

Dobrym pomysłem jest też wstawienie tytułu naszej strony, będzie się on ukazywał na pasku tytułowym przeglądarki. Ponownie w sekcji <HEAD> </HEAD> wpisujemy znaczniki:

<TITLE>tytuł strony</TITLE>

Nasza strona po tych zabiegach będzie przedstawiała się w następująco:

<HTML>

<HEAD>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

<TITLE>tytuł strony</TITLE>

</HEAD>

<BODY>

treść strony

</BODY>

</HTML>

Pasek tytułowy przeglądarki:

Wygląd strony - podstawowe znaczniki.

Tło
Jeżeli nie sprecyzujemy, jaki kolor ma mieć tło to będzie ono zawsze domyślnym kolorem okna przeglądarki np. biały, szary. W celu ustawienia tła wpisujemy linijkę:

<BODY BGCOLOR="#kod_koloru"> np. <BODY BGCOLOR="#FFFF00">

#FFFF00 – żółty

Wartość koloru składa się z „#” oraz 6 cyfr. Można też zamiast tego podać wartość słowną np. black, green, red jednak w tym przypadku mamy mało możliwości do wyboru. Wszystkie wartości kolorów heksadecymalnych (tych pierwszych) poda wam bardzo prosty w obsłudze i nie wymagający instalacji program o nazwie Kolorgenerator, który zajmuje tylko 156 KB. Możecie go ściągnąć stąd: [link widoczny dla zalogowanych]

Wielkość czcionki

Podstawowa wielkość czcionki zdefiniowana jest na 3 punkty i jeżeli nie określimy innej wielkości to nasz tekst będzie miał taką domyślną wartość. Wielkości, jakie możemy wpisywać, to wszystkie z zakresu od 1 do 7, czym większa cyfra tym większa będzie czcionka wyświetlana w przeglądarce. Aby zmienić rozmiar czcionki należy objąć pisany tekst tagami:

Tekst, który chcemy powiększyć

W miejsce „7” wpisujemy dowolną wartość, która będzie odpowiadać naszym potrzebom.

Tekst napisany czcionką o wielkości „2”

Tekst napisany czcionką o wielkości „7”

Kolor czcionki

Do wyboru koloru czcionki możemy posłużyć się tym samym programem, którego używaliśmy do określenia tła (Kolorgenerator). Różnica polega jedynie na zastosowaniu innych tagów:

Tekst, któremu chcemy nadać kolor

#0000FF – granatowy

Atrybuty czcionki

Aby zwrócić uwagę na konkretny wyraz bądź cytat w zdaniu możemy użyć jednego z trzech atrybutów czcionki:

- pogrubienie (bold)

Najlepszy serwis komputerowy

Najlepszy serwis komputerowy

- kursywa (italic)

Najlepszy serwis komputerowy

Najlepszy serwis komputerowy

- podkreślenie (underlined)

Najlepszy serwis komputerowy

Najlepszy serwis komputerowy

Akapit i wiersz

Przy pisaniu bardziej rozległego artykułu potrzebna nam będzie umiejętność dzielenia tekstu na nowe wiersze i akapity. Każde wciśnięcie przez nas klawisza „enter” w notatniku bądź edytorze tekstowym będzie pominięte przez przeglądarkę internetową. Musi ona widzieć znaki, które będzie mogła prawidłowo zinterpretować.

Nowy akapit zaczniemy wpisując:

Nowy akapit

Nowy wiersz (przełamanie tekstu) rozpoczniemy stawiając na końcu poprzedzającego znacznik .

Przykład:

Wiersz pierwszy 
Wiersz drugi 
Wiersz trzeci 
itd.

Linia

Jeżeli chcemy wyraźnie oddzielić od siebie dwie lub więcej części tekstu to jak najbardziej na miejscu będzie wstawienie poziomej linii, którą oznaczamy tagiem <HR>. Linia wyświetlana jest na 100% szerokości strony.

Lista

Jeżeli chcemy wyliczyć/wypunktować jakieś zdania to należy zrobić to w sposób, który opisany jest poniżej.

<UL>
<LI>pierwsza cecha</LI>
<LI>druga cecha</LI>
<LI>trzecia cecha</LI>
</UL>

Tagi <UL> </UL> powinny zaczynać i kończyć listę, nie jest też potrzebne stosowanie znaczników zamykających </LI> gdyż nasza strona będzie wyświetlana prawidłowo również bez nich.

Można też skonstruować listę numerowaną, w tym celu znacznik <UL> </UL> zastępujemy jego odpowiednikiem <OL> </OL>.

Hiperłącze

Jest to odnośnik, do innej strony, lub do jednej z podstron naszego serwisu. Po kliknięciu na niego przenosimy się w określone w hiperłączu miejsce. Budowa takiego odnośnika przedstawia się następująco:

<A HREF="http://www.adres_strony_na_ktora_zostaniemy_przeniesieni.pl">Opis</A>

przykładowo:

<A HREF="http://www.oc-forum.org">Wszystko o komputerach</A>

przez przeglądarkę zostanie to zinterpretowane następująco:

Wszystko o komputerach

Kolejnym rodzajem hiperłącza jest takie, które po kliknięciu na nie, spowoduje otwarcie domyślnego klienta poczty na komputerze klikającego.

<A HREF="mailto:nasz@mail.pl">Opis</A>

przykładowo:

<A HREF="mailto:sensej@oc-forum.org">Sensej</A>

Wstawianie grafiki

Naszą stronę możemy urozmaicić wstawiając na nią kilka plików graficznych. Należy jednak pamiętać, aby z tym elementem nie przesadzić. Czym więcej grafiki znajduje się na stronie tym dłużej będzie się ona ładowała. Najpopularniejszą kompresją plików graficznych jest GIF oraz JPG. Aby wstawić obrazek na stronę wpisujemy linijkę:

<IMG SRC="http://www.nazwa_strony.pl/obrazek.gif">

Jeżeli obrazek znajduje się Tagów tym samym katalogu, co strona to wystarczy wpisać:

<IMG SRC="obrazek.gif">

Łączenie tagów

A co jeżeli oprócz wielkości czcionki chcemy zmienić również jej kolor? Tutaj napiszę jak łączyć ze sobą różne cechy. Zacznijmy od przykładu podanego w pierwszym zdaniu tego akapitu.

Formatowany tekst

Efektem będzie czerwony tekst o rozmiarze 5.

Dodanie znacznika spowoduje dodatkowo podkreślenie formatowanego tekstu.

Formatowany tekst

Powyższą linijkę możemy również dodać do numerowanej listy:

<OL>

<LI>Formatowany tekst</LI>

</OL>

Przykładów łączenia ze sobą równych tagów jest wiele, wszystko zależy od waszej inwencji[/b]

Addickderup86

[link widoczny dla zalogowanych]