HTML-Ćwiczenia

Details

Category: HTML / XHTML

Created on Monday, 24 October 2011 07:05

Written by Jakub Chałupczak

Ćwiczenia do samodzielnego wykonania - HTML/XHTML

Formatowanie tekstu:

• ćwiczenie 1
• ćwiczenie 2
• ćwiczenie 3

Tabele

Details

Category: HTML / XHTML

Created on Wednesday, 21 September 2011 11:31

Written by Jakub Chałupczak

Tabele

Wprowadzenie

Tabele są bardzo ważnym elementem HTML. Pierwotnie służyły one do prezentacji tzw. danych tabelarycznych, a więc różnego rodzaju zestawień. Obecnie webmasterzy wynaleźli im wiele bardzo różnych zastosowań. Często użytkownik przeglądający strony w Internecie nawet nie ma świadomości, że konstrukcja którą ogląda jest tabelką.

Budowa tabeli

Każda tabela w języku HTML ma określoną strukturę. Wstawiamy ją do dokumentu używając pary znaczników

<table> </table>

Znaczniki te pełnią rolę pojemnika który musimy wypełnić komórkami. Za pomocą kolejenj pary znaczników <tr> </tr> wyznaczamy WIERSZE tabeli, natomiast znaczniki <td> </td> służą do zakreślenia komórek. Dopiero w komórkach możemy umieszczać dane, podobnie jak robimy to z tekstem umieszczając go wewnątrz znacznika <p> </p> Oto przykład kodu tworzącego najprostszą tabelkę w języku HTML:

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Tabela której definicję widzimy powyżej ma jeden wiersz (jedna para znaczników <tr></tr>) w tym wierszu znajdują się natomiast trzy komórki, które opisane są elementem <td> </td> Tak mogłaby ona zaprezentować się na stornie WWW:

Mogłaby jednak się nie zaprezentuje gdyż brakuje jej istotnego parametru, obramowania. Za obramowanie tabeli odpowiada parametr border umieszczany zawsze wewnątrz znacznika <table border="1" >
Liczba będąca wartością parametru border określa grubość obramowania. Podanie wartości "0" spowoduje, że obramowanie nie będzie widoczne. Jest to wartość domyślna w większości przeglądarek w związku z tym do tabeli z przykładu powyżej należałoby dodać parametr border="1".

Prześledźmy kolejny przykład. Tym razem nasza tabelka będzie miała 3 wiersze i 3 komórki w każdym z nich.

Kod niezbędny do utworzenia takiej tabeli zamieszczam poniżej.

<table border="1" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
</tr>
</table>

Na zamieszczonym przkładzie w pojemniku jaki stanowią znaczniki <table> </table> umieszczamy trzy znaczniki odpowiedzialne za konstrukcję wierszy <tr> </tr>. Następnie w każdym z nich tworzymy za pomocą znaczników <td> </td> trzy komórki.

Formatowanie tabeli

Podobnie jak większość elementów języka HTML także tabele posiadają parametry które umożliwiają zmianę ich wyglądu i dostosowanie ich do naszych potrzeb. Parametrów możemy używać zarówno w stosunku do całej tabelki (umieszczamy je wtedy w znaczniku <table> ) jak i pojedynczej komórki <td>. Poniżej zamieszczam tabelę która zawiera listę parametrów wraz z ich opisami. Pamiętajmy, że aby użyć jakiegoś z nich musimy użyć następującej składni parametr="wartość"

Łączenie komórek tabeli

Komórki tabeli możemy ze sobą łączyć. Dzięki temu uzyskujemy pojedyncze, ale znacznie większe komórki. Może się to okazać przydatne, szczególnie gdy tworzymy rozbudowaną tabelę zawierającą dużą liczbę rekordów. Znaczników tych używa się też stosując tabele w charakterze szkieletu strony

Znacznika <rowspan></rowspan> używamy aby połączyć z sobą kilka wierszy, natomiast znacznika <colspan></colspan> aby połączyć kolumny. Spójrzmy na przykład poniżej

<table>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>

W komórce 1 użyto atrybutu <colspas="2">. Dzięki temu dwie komórki tabeli zostały połaczone w jedną dłuższą. Warto zwrócić uwagę, że komórka 1 od momentu użycia atrybutu <colspas="2"> liczona jest jako DWIE komórki. Stąd też w pierwszym wierszu zastosowano jedynie trzy znaczniki <td></td>, a w drugim wierszu cztery. Stało sie tak dlatego, że obecnie pierwsza komórka liczona jest podwójnie.

Popatrzmy jeszcze na zastosowanie atrybutu <td rowspan="2">

Tym razem połączyliśmy z sobą dwie komórki tabeli, ale w pionie. Tym samym w drugim wierszu musieliśmy usunąć jedną komórkę aby ich liczba sie zgadzała. Dzieje się tak dlatego, że komórka numer 1 została "rozciągnięta" na drugi wiersz i jest wliczana do liczby komórek w nim.

Warto zapamiętać, że liczba komórek w każdym wierszu musi się zgadzać. Niedopuszczalna jest sytuacja gdy w jednym wierszu mamy np. 4 a w drugim 3 komórki (jedyny wyjątek od tej zasady to omówione powyżej łączenie komórek). Oto przykład tabeli gdzie celowo wprowadzono taki błąd:

Widać, że brakuje komórki w prawym dolnym rogu.

Więcej na temat tabel

Umieszczony powyżej artykuł z pewnością nie wyczerpuje tematu zastosowania tabel w języku HTML. Warto więc skorzystać z poniższych odnośników aby dowiedzieć się więcej na ten temat.

Kurs Pawła Wimmera
Kurs Sławomira Kokłowskiego

Ćwiczenia do samodzielnego wykonania

Ćwiczenie 1

Ćwiczenie 2

Ćwiczenie 3

Ćwiczenie 4

Grafika

Details

Category: HTML / XHTML

Created on Wednesday, 21 September 2011 11:38

Written by Jakub Chałupczak

Gafika

Parametry obrazu

W języku HTML posługujemy się w dużej mierze grafiką rastrową (bitmapową). Każdy obraz tego typu składa się z tysięcy małych punkcików różniących się kolorem nazywanych Pikselami



Parametry długość (width) oraz wysokość (height) określamy najczęściej w pikselach. Natomiast parametr DPI (dot per inch) określa ilość pikseli na cal obrazu a tym samym odpowiada za jakość obrazka. Im większy parametr DPI tym bardziej możemy powiększać dany obraz:



Zaobserwuj jak pogarsza się jakość obrazka wraz ze wzrostem jego rozmiaru.
Wydawałoby się, że najlepszym rozwiązaniem jest stosowanie grafik posiadających jak największy parametr DPI. Niestety problemem może stać się wtedy rozmiar pliku, który rośnie drastycznie wraz ze wzrostem rozdzielczości. Tworząc strony internetowe należy znaleźć złoty środek, czyli stosować grafikę jak najlepszej jakości i jak najmniejszym rozmiarze.

Wstawianie rysunku

Rysunek wstawiamy posługując się elementem języka HTML img

<img src="nazwa_obrazka" alt="tekst alternatywny" width="długość" height="wysokość" />

W parametrze src podajemy nazwę oraz ścieżkę dostępu do pliku graficznego

Parametr alt pozwala podać alternatywny tekst gdy obrazek z jakiś powodów się nie wyświetli.

<img src="images/stories/domek.jpg" alt="domek" width="50px" height="50px" />

Rysunek jako tło

Korzystając ze styli CSS może ustawić rysunek jako tło niemal dowolnego elementu HTML W tym celu należy wykorzystać styl background:

<p style="background: kolor tła | url('adres obrazka') | powtarzanie | wyrównanie pionowe | wyrównanie poziome" >

Kolejne parametry w stylu background:

• kolor tła: widoczny gdy obrazek nie wypełnia całego tła danego elementu. Kolor zapisujemy tak samo jak w przypadku tekstu.
• adres obrazka:W nawiasie podajemy położenie obrazka. Może to być adres lokalny np. "/images/obrazek.gif" lub zdalny np. "http://adres.strony/obrazek.gif"
• powtarzanie:przyjmuje wartości
  • repeat Powtarzanie obrazka zarówno w pionie jak i w poziomie
  • repeat-x Powtarzanie obrazka tylko w poziomie
  • repeat-y Powtarzanie obrazka tylko w pionie
  • no-repeat Bez powtarzania
• Wyrównanie pionowe: Przyjmuje wartości: top, center, bottom
• Wyrównanie poziome: Przyjmuje wartości: left, center, right

<p style="background:transparent url('images/stories/domek.jpg') repeat-x top center" > Domek jako tło </p>

Domek jako tło obramowanego akapitu

Zamiast korzystać z stylu background można wykorzystać następujące style uzyskując ten sam efekt:

• background-color
• background-image
• background-repeat
• background-position

np.

<p style="background-color:transparent; background-image: url('images/stories/domek.jpg'); background-repeat: repeat-x; background-position: top center" > Domek jako tło </p>

Domek jako tło obramowanego akapitu

<p style="background:transparent url('images/stories/domek.jpg') no-repeat top right" > Domek jako tło </p>

Domek jako tło obramowanego akapitu

<p style="background:#00CCFF url('images/stories/domek.jpg') no-repeat top right" > Domek jako tło </p>

Domek jako tło obramowanego akapitu

Więcej na temat grafiki

Kurs Pawła Wimmera
Kurs Sławomir Kokłowski

Ćwiczenia do samodzielnego wykonania

Ćwiczenie 1

Ćwiczenie 2

Odsyłacze

Details

Category: HTML / XHTML

Created on Wednesday, 21 September 2011 11:11

Written by Jakub Chałupczak

Odsyłacze

Czym jest odsyłacz?

Można śmiało stwierdzić że bez odsyłaczy nie byłoby Internetu w takim kształcie jakim znamy go dzisiaj. To właśnie dzięki temu elementowi możliwe jest łączenie olbrzymiej ?pajęczyny? globalnej sieci w przejrzystą całość. Działanie odsyłaczy jest niezwykle proste. Pełnia one role interaktywnego spisu treści. Kliknięcie na hiperlinku może przenieść nas do innego miejsca w rozbudowanym dokumencie HTML, odesłać do innego dokumentu, rozpocząć wysyłanie wiadomości email czy otworzyć jakiś plik w aplikacji.

Tworzenie odsyłaczy

Do tworzenia hiperłącz (zwanych również odsyłaczami lub odnośnikami) służy znacznik:

<a href="adres odsyłacza"> Etykieta </a>

"Adres odsyłacza" to miejsce na które wskazuje dany odnośnik. Jedyny element jaki wyświetli przeglądarka internetowa to ?tytuł odsyłacza?, zwany etykietą

<a href="index.php"> Strona Główna </a>

Taki odsyłacz przeglądarka wyświetli w następujący sposób

Strona Główna

Odsyłacze do miejsca w dokumencie

Jak napisałem powyżej odsyłacz może odwoływać się do miejsca w rozbudowanym dokumencie. Aby wykonać taki odsyłacz niezbędna jest kotwica (zwana również flagą). Konstrukcja takiego odsyłacza składa się zawsze z pary którą tworzą kotwica na przykład taka jak ta:

<a id="kotwica" name="kotwica"></a>

oraz odsyłacz wskazujący na nią

<a href="#kotwica"> Etykieta </a>

Kotwica przedstawiona powyżej nie jest wyświetlana w dokumencie. Dlaczego? Nie ma ona etykiety czyli jedynego elementu odsyłacza jaki pojawia się w przeglądarce internetowej. Kotwica nie ma również atrybutu Href, ponieważ nie odsyła ona do żadnego elementu. Z kolei odsyłacz który na nią wskazuje jako adres w parametrze Href ma wpisaną nazwę kotwicy poprzedzoną znaczkiem #. To właśnie ten znaczek (ang. sharp) informuje przeglądarkę internetową, że powinna szukać etykiety o nazwie podanej po znaku # w bieżącym dokumencie.

Jak to działa w praktyce? Na początku tego dokumentu przygotowałem kotwicę:

<a id="poczatek" name="poczatek"> </a>

Ma ona nazwę "początek" i nie ma etykiety (jest niewidoczna). Natomiast w tym miejscu umieściłem link który do niej odsyła (jego kliknięcie przeniesie nas na początek tej strony):

Wróć do początku

Wygląda on w ten sposób:

<a href="#poczatek" >Wróć do początku </a>

Prawda że proste?

Odsyłacze do stron WWW

Oprócz odsyłaczy do etykiet istnieją także odsyłacze do innych dokumentów WWW. Mogą to być zarówno dokumenty znajdujące się na tym samym serwerze jak również umieszczone gdzieś w sieci Internet.

Uniwersytet Jana Kochanowskiego w Kielcach

Po kliknięciu zostaniemy przeniesieni na stronę Uniwersytetu Jana Kochanowskiego. Jak wygląda taki odsyłacz?

<a href="http://pu.kielce.pl" > Uniwersytet Jana Kochanowskiego w Kielcach</a>

Można zauważyć, że zamiast etykiety odwołuje się on po prostu do innej strony WWW. Ciąg znaków http://pu.kielce.pl jest tak zwanym Adresem Absolutnym

Adres absolutny i względny(relatywny)

Jak wcześniej napisałem adres http://pu.kielce.pl jest adresem absolutnym. Oznacza to, że zawiera on pełny adres strony Internetowej do której odsyła hiperłącze. Takie adresy stosujemy gdy odnosimy się do stron znajdujących się w sieci. Natomiast gdy tworzymy serwis WWW o wiele lepiej używać adresów względnych. Jak wygląda taki adres i jak jest interpretowany przez przeglądarkę ?

<a href="index.php" > Strona Główna tego serwisu</a>

Adres taki na pierwszy rzut oka jest dużo prostszy od adresu absolutnego. Odsyła on bowiem jedynie do dokumentów znajdujących się w naszym folderze użytkownika. W tym przypadku serwer wyszuka stronę o nazwie "index.php" która znajduje się w tym samym katalogu co strona aktualnie wyświetlana. Prześledźmy zasadę jego działania na przykładzie następującego katalogu:

Nasz katalog
images
index.html
omnie.html
linki.html

Jak widać nasz katalog zawiera dokumenty "index.html", "omnie.html", "linki.html" oraz folder zawierający grafikę "images". Na stronie index.html chcemy umieścić odnośnik do informacji znajdujących się na stronie omnie.html. Można to zrobić używając odsyłacza relatywnego lub absolutnego.

Odsyłacze absolutne:

<a href="http://adres.mojej.strony.pl/omnie.html" > O mnie</a>

<a href="C:/moje_dokumenty/moja_strona/omnie.html" > O mnie</a>

Odsyłacz względny:

<a href="omnie.html" > O mnie</a>

W obu przypadkach przeglądarka otworzy stronę "omnie.html". Jednak odsyłacz względny jest prostszy i krótszy. Jest też niezależny od nazwy domeny na serwerze.
Za pomocą relatywnych odnośników możemy się dostać również do katalogu "images". Oto przykład:

<a href="/images/opisy_zdjec.html" > Katalog zdjęć </a>

Odsyłacz ten kieruje nas do katalogu "images" a tam z kolei otworzy stronę o nazwie "opisy_zdjec.html".

Więcej informacji na temat odsyłaczy

Więcej informacji na temat odsyłaczy można znaleźć korzystając z następujących kursów do czego serdecznie zachęcam.

Kurs Pawła Wimmera
Kurs Sławomira Kokłowskiego

Ćwiczenia do samodzielnego wykonania

Ćwiczenie 1 - odsyłacze do miejsca w dokumencie

Ćwiczenie 2 - odsyłacze do dokumentu