Tworzenie stron WWW

w języku HTML

1.

Akapity i nagłówki

2.

Formatowanie tekstu

3.

Linia rozdzielcza

4.

Listy uporządkowane i nieuporządkowane

5.

Wstawianie rysunków

6.

Łącza hipertekstowe

7.

Tworzenie hiperłącza do innego dokumentu

8.

Tworzenie hiperłączy

9.

Tworzenie kotwic wewnętrznych

10.

Tabele

11.

Atrybuty znaczników <tabele>, <td>

12.

Kolory

13.

Identyfikacja elementów

14.

Dodawanie komentarzy

Spis treści:

Tworząc akapit, można określić sposób jego
wyrównania (podobnie jak w edytorze tekstu: do lewej,
do środka , do prawej , wyjustowany). Służy to do tego
atrybut align ( z ang. Wyrównywać), przyjmujący
jedną z wartości wymienionych w tabeli. Atrybut align
jest wykorzystywany także w innych znacznikach języka
HTML.

Na przykład :
<p align= „center”> Wyrównanie akapitu do środka strony
</p>

Postać atrybutu align

Funkcja

align = „left”

wyrównanie do lewej

align = „center”

wyrównanie do środka

align = „right”

wyrównanie do prawej

align = „justify”

justowanie

Domyślnie ( jeżeli nie użyjemy atrybutu align) akapity wyrównywane
są do lewejstrony

Uwaga:

W języku HTML wartości atrybutów wpisuje się w znakach

cudzysłowu.
W języku HTML mamy również możliwość wyróżnienia tytułów. Jest to
ważne nie tylko ze względu na efekt wizualny ( powiększone litery),
ale także z uwagi na możliwości poszukiwania dokumentu
(wyszukiwarki internetowe często przykładają większą wagę do
tekstu oznaczonego jako tytuł). Do dyspozycji mamy sześć poziomów
tytułów w kolejności od najważniejszych do mniej ważnych.

<h1> Tytuł pierwszego poziomu </h1>
<h2> Tytuł drugiego poziomu </h2>
…
<h6> Tytuł szóstego poziomu </h6>

Tytuły można wyrównać, podobnie jak akapity, korzystając z
atrybutu align ,
np. <h1 align= „center”>Tytuł</h1> spowoduje wyśrodkowanie
tytułu względem szerokości strony.

Wstecz

Do formatowania tekstu służą odpowiednie znaczniki:

Formatowanie tekstu:

Nazwa znacznika

Funkcja

<p>

 otwieramy akapit 

</p>

zamykamy akapit



Indeks górny



Indeks dolny

<b></b>

Pogrubienie

<i></i>

Pochylenie

<u></u>

Podkreślenie

<s></s>

Przekreślenie

<font

size=„rozmiar”></font>

Określenie wielkości tekstu

<font face=”czcionka”

></font>

Określenie czcionki tekstu

<font coloe= „kolor”></font> Określenie koloru tekstu

Tekst, którego ma dotyczyć formatowanie, umieszczamy pomiędzy
znacznikiem otwierającym i znacznikiem zamykającym, na przykład
<b> pogrubiony napis</b>.

Znaczniki można ze sobą łączyć. Np. aby uzyskać tekst

napisany

pogrubioną kursywą, należy użyć zapisu: <b><i>

Pogrubiona kursywa</i></b>.

W jednym znaczniku można użyć kilka atrubutów, Np. aby

jednocześnie okrelić krój czcionki, wielkość pisma i kolor
tekstu, można użyć

polecenia

<font face= „Tahoma” size=3color=„red”> Tekst napisany

czcionką

Tahoma o wielkości 3, w kolorze czerwonym</front>.

Uwaga: Znaczniki zamykamy w kolejności odwrotnej do ich otwierania

DOBRZE:

<b><i> pogrubiona kursywa </i></b>

ŹLE:

<b><i> pogrubiona kursywa </b></i>

Wstecz

Czasami zachodzi potrzeba rozdzielania fragmentów
tekstu poziomą linią. Do utworzenia takiej linii służy
znacznik <hr>. Znacznik ten posiada także
dodatkowe atrybuty.

Linia rozdzielcza :

Nazwa atrybutu

Funkcja

align=„wyrównainie”

Określa położenie linii względem

strony.

size= „grubość”

Określa grubość linii ( w pikselach)

width= „szerokość”

Określa szerokość rysunku

Wstecz

HTML pozwala na tworzenie list uporządkowanych (numerowania) lub
nieuporządkowanych (wypunktowania).

Przy tworzeniu list numerowanych komputer wstawia automatycznie
kolejne numery punktów. Listy można też zagnieżdżać wewnątrz
siebie.

Listy uporządkowane i

nieuporządkowane:

Lista uporządkowana ma

postać:

Lista nieuporządkowana

ma postać:

<ol>

<li> Element listy</li>

<li> Element listy </li>

…

</ol>

<ul>

<li>Element listy</li>

<li>Element listy</li>

…

</ul>

Wstecz

Aby umieścić na stronie rysunek, należy zastosować

znacznik

<img src= „źródło_pliku”>,
Znacznik ten nie ma postaci zamykającej.
Podstawowe formaty obrazów wykorzystywanych na stronach

WWW to: GIF, PNG, JPEG.

Na przykład :
<img src=„zdjecie.jpg”>

Wstawianie rysunków:

Na stronie można także umieścić dowolny rysunek z
Internetu, pod warunkiem, że znamy jego adres URL:
<img
src=„http://www.migra.pl/img/products/9788393071562.
png”>.

Wykorzystując na swojej stronie obrazy pochodzące z innych
stron internetowych, należy pamiętać o przestrzeganiu praw
autorskich

Wstecz

Znacznik <img> posiada wile dodatkowych atrybutów, które można
wykorzystać do określenia położenia obrazu na stronie. Najważniejsze z nich:

Nazwa

Funkcja

Align= „wyrównanie”

Określa sposób wyrównania

obrazka względem otaczającego

tekstu

Alt=„tekst”

Alternatywny tekst to

wyświetlenia jeżeli przeglądarka

nie może wyświetlić obiektu

Width=„szerkość”

Szerokość w pikselach lub

procentach

Height=„wyskość”

Wysokość elementu w pikselach

lub procentach

Hspace= „odstęp”

Margines w poziomie dookoła

obiektu (w pikselach) .

vspace= „odstęp”

Margines w pionie dookoła

obiektu (w pikselach) 

Najważniejszą cechą języka HTML, decydującą o jej
popularności i wszechstronności jest możliwość tworzenie
hiperłączy. Przez hiperłącze rozumiemy wyróżniony w pewien
sposób obiekt ( fragment tekstu, rysunek), po wybraniu
któregog(np. poprzez kliknięcie go myszą) w oknie
przeglądarki zostanie wyświetlony nowy dokument.
Do tworzenia łącz hipertekstowych służy znacznik <a>.
Istnieją dwie różne składnie tego polecenia, o odmiennych
zastosowaniach.

Łącza hipertekstowe

Wstecz

Znacznik przyjmuje postać:
<a href=„obiekt_docelowy”>Treść hiperłącza</a>
Przez treść hiperłącza należy rozumieć tekst lub rysunek aktywujący
hiperłącze (po kliknięciu myszą). Tekst ten jest zwykle wyświetlany
na niebiesko i z podkreśleniem, rysunek zaś- otoczony niebieską
ramką. Obiekt docelowy to nazwa bądź adres URL pliku, który ma
zostać otwarty przez przeglądarkę.
Dodatkowy atrybut target=„nazwa_ramki” umożliwia otwarcie
strony docelowej w innym oknie( na innej karcie) przeglądarki.

Tworzenie hiperłącza do innego

dokumentu

Wstecz

<a herf=„index2.html”>Dalej</a>
Po kliknięciu tekstu Dalej w oknie przeglądarki zostanie
wyświetlona zawartość pliku index2.html
<a href=http://www.migra.pl/target=„_blank”> Wydawnictwo
MIGRA</a>
Po kliknięciu tekstu Wydawnictwo MIGRA otworzy się nowe
okno (nowa karta) przeglądarki, w którym zostanie
wyświetlona strona wydawnictwa Migra.
<a href=„index2.html”><img src=„rys.gif”></a>
Aktywowanie hiperłącza następuje poprzez kliknięcie rysunku
rys.gif.

Tworzenie hiperłączy

Wstecz

Przy długich dokumentach zdarza się, że potrzebujemy wyświetlić
określone miejsce takiego dokumentu ( np.. Jeżeli podzielony jest
na rozdziały – początek rozdziału ). Język HTML, pozwala na
zaznaczenie wybranych miejsc za pomocą kotwic (ang. Anhor).
Kotwice tworzymy poleceniem : <a name=„nazwa_kotwicy”></a>,
gdzie nazwa_kotwicy to dowolny, wybrany przez nas ciąg znaków.
Aby następnie przejść do zaznaczonego w ten sposób miejsca,
tworzymy hiperłącze poleceniem <a
href=„#nazwa_kotwicy”>Treść hiperłącza </a>, gdzie plik
html to nazwa pliku, w którym wstawiliśmy kotwicę. Jeżeli
odnośnik ma przenieść nas do kotwicy w tym samym dokumencie,
nazwę pliku można pominąć; <a herf=„#nazwa kotwicy”> Treść
hiperłącza </a>.

Tworzenie kotwic

wewnętrznych:

Wstecz

W języku HTML tabele składają się z wierszy, a wiersze- z komórek.
Granice tabeli określają znaczniki <tabele></tabele>, granice wiersze
tabeli – znaczniki <tr></tr>, komórek tabeli- znaczniki <td></td>.
Na przykład:

Tabele:

Nazwa

atrybutu

Funkcja

Znacznik <tabele>

align

Określa sposób wyrównania tabeli.

width

Szerokość w pikselach lub procentach

border

Grubość ramki w pikselach

cellpadding

Określa margines pomiędzy krawędzią komórki i jej

zawartością

cellspacing

Określa odstęp pomiędzy komórkami

Znacznik <td>

align

Określa wyrównanie zawartości komórek tabeli lub

elementów blokowych w poziomie

width

Szerokość w pikselach lub procentach 

height

Wysokość elementu w pikselach lub procentach

colspan

Określa ile kolejnych komórek w wierszu powinno

zostać połączone w jedną dużą komórkę

rowspan

Określa ile kolejnych komórek w kolumnie powinno

zostać połączone w jedną dużą komórkę

Atrybuty znaczników
<tabele>, <td>

Wstecz

Wielu elementom WWW można nadawać odrębne kolory. Kolor
można określić albo za pomocą jego angielskiej nazwy, albo
podając jego wartość w systemie RGB. Na wartość w systemie
RGB składają się , poprzedzone krzyżykiem, trzy liczby
zapisane w systemie szesnastkowym , odpowiadające
składowym (czerwonej, zielonej i niebieskiej ) koloru. W ten
sposób możemy opisać dowolną z ponad 24 milionów barw
dostępnych na ekranie monitora.

<font color=„red>

czerwony tekst

</font>

<font color=„#ff0000”>

czerwony tekst

</font>

Kolory:

Wstecz

Duże strony składają się często z setek elementów( obrazów,
tabel, hiperłączy, akapitów) różnego typu. Aby ułatwić ich
identyfikacje, wprowadzono dodatkowe atrybuty , które
umożliwiają oznaczenie i opisywanie elementów.

Identyfikacja elementów:

Nazwa

atrybutu

Funkcja

Id=„identyfikat

or”

Określa identyfikator elementu.

Identyfikator powinien być unikatowy, tzw. Na

danej stronie nie powinno być dwóch elementów

o takich samych nazwach.

Przykłady:

<tabele id=„tab01”>…</tabele>

<img src=„…”id=„obr01”>

Title=„opis”

Określa opis elementu pokazywany po najechaniu

kursorem myszy na dany element.

Przykład:

<img src=„…”title=„zfjęcie przedstawia wyspę El

Hierro”>

Wstecz

Do kodu HTML można dodawać komentarze. Umieszczamy je
między znakami <!...i…>. Komentarze są ignorowane przez
przeglądarkę . Możemy je wykorzystać do zwiększenia
czytelności tworzonego kodu (np. do opisywania trudniejszych
elementów), a także gdy chcemy tymczasowo wyłączyć
wyświetlenie jakiegoś fragmentu strony (wystarczy wtedy
dopisać wokół niego znaki komentarza).

<html>
<head>
<title> Tytuł strony </title>
<head>
<body>
<!...Tu będzie treść strony…>
<body>
<html>

Dodawanie komentarzy

Wstecz