Lekcja informatyki Online – rozmieszczenie elementów na stronie WWW

Lekcja informatyki dla młodzieży klas 5/6 szkoły podstawowej. Pamiętaj, że aby zrozumieć omawiane zagadnienia, musisz posiadać wiadomości i umiejętności z naszych poprzednich lekcji informatyki online.

Dziś dowiemy się jak rozmieszczać tekst i grafikę na naszej stronie WWW. Dotychczas zarówno obrazki, jak i tekst domyślnie wyświetlał się po lewej stronie dokumentu. Jak więc zapanować nad jego położeniem? Sprawa jest trochę trudniejsza -ale postaram się przybliżyć Wam najpopularniejsze i najłatwiejsze polecenia HTML umożliwiające umieszczanie prawie dowolne sterowanie położeniem elementów naszej strony internetowej.

Tekst

Położenie tekstu definiuje się następującymi kodami:

<p align=”left”>jestem z lewej strony </p>

<p align=”center”>jestem w środku strony </p>

<p align=”right”>jestem po prawej stronie </p>

<p align=”justify”>zostałem wyjustowany </p>

<li>kod wypunktowanie</li>

Na stronie w przeglądarce wygląda to tak

KOD	WYGLĄD NA STRONIE WWW
left	jestem z lewej strony
center	jestem w środku strony
right	jestem po prawej stronie
justify	zostałem wyjustowany
*wypunktowanie	wypunktowanie

Jak widać polecenia mają standardową budowę (znaczniki + literka p, polecenie align) i są po prostu słowami w j. angielskim

left – lewa

center – środek

right – prawa

justify – justowanie / wyrównanie tekstu, aby pokrywał cały wiersz od lewej do prawej.

Kody te można używać również do obrazków. Jak pamiętacie w miejsce tekstu wklejamy adres obrazka (chcę sobie przypomnieć tą lekcję) . Oto przykład:

KOD	WYGLĄD NA STRONIE WWW
left
center
right
*wypunktowanie

Ćwiczenie

W notatniku stwórz plik HTML, który wyświetli dowolny obrazek z internetu w orientacji

lewa | środek | prawa | wypunktowanie

Rozwiązanie - KOD:

<img src= “http://www.seoposition.eu/seoposition.png” align=”left”/>lub po prostu <img src= “http://www.seoposition.eu/seoposition.png”/>

<p align=”center”><img src= “http://www.seoposition.eu/seoposition.png” /></p> lub <img src= “http://www.seoposition.eu/seoposition.png” align=”center”/>

<p align=”right”><img src= “http://www.seoposition.eu/seoposition.png” /></p>

<li><img src= “http://www.seoposition.eu/seoposition.png” /></li>

No dobrze, ale co robić, jeśli chcę umieścić np. obrazek w konkretnym miejscu mojej strony WWW, a nie jest to a nie lewa strona, ani prawa, ani jej środek ??? Odpowiedź – potrzebujesz umiejętności tworzenia i wstawiania tabel! * Zanim dowiesz się jak wygląda kod HTML tabelek omówmy budowę typowej strony WWW.

Budowa strony WWW*

Typowa strona internetowa składa się z nagłówka (u góry strony – najczęściej z “logiem” – charakterystycznym znakiem graficznym), menu (zbiorem linków do podstron – z lewej lub prawej strony – wg uznania) pola treści (“body” – centralna część strony WWW z jej główną zawartością) i stopki (na samym dole – tam umieszczasz informacje o stronie, autorze itp..)

NAGŁÓWEK
MENU link1 link2 link3	BODY – TREŚĆ STRONY
STOPKA – info o stronie

Jak widzisz całość to poszczególne elementy – tekst, grafika, filmy, skrypty…co tylko chcesz – umieszczone w tabeli. Tylko jak ją zbudować? to sprawa stosunkowo trudna, dlatego też wielu początkujących webmasterów korzysta z programów – edytorów HTML, które automatycznie tworzą / generują dowolne tabele wg upodobania autora. Polecam ci ten sposób. Zauważ również, że jeśli ustawię parametr grubości ramki border na wartość “0″ (nasza kolorowa tabela ma kod <table width=”300″ height=”300″ border=”2″> czyli wysokość i szerokość 300, grubość obramowania 2), oraz usunę kolory tła tabeli, to uzyskam efekt dowolnego ustawienia elementów tekstowych i graficznych naszej strony. Sam zobacz:

NAGŁÓWEK
MENU link1 link2 link3	BODY – TREŚĆ STRONY
STOPKA – info o stronie

TABELA na stronie WWW

Zobaczcie pierwotny kod html poprzedniej pustej tabeli :

nagłówek
menu	body
stopka

<table width=”200″ border=”1″> początek kodu tabeli , szerokość tabeli 200, grubosć obramowania 1

<tr>

<td colspan=”3″> nagłówek</td> Colspan -skrót od “column span” (rozciągnięcie kolumny) – określa ile kolumn ma się rozciągnąć komórka

</tr>

<tr>

<td>menu</td>

<td colspan=”2″> body</td>

</tr>

<tr>

<td colspan=”2″>stopka</td>

</tr>

</table> koniec kodu tabeli

Jak widzicie, jest to trudniejsza konstrukcja poleceń, ale zawsze możecie na własne potrzeby skopiować powyższy kod, lub jak już wspomniałem użyć generatora w jakimś edytorze HTML. Jest ich w sieci bardzo dużo, są darmowe i bardzo pomocne (pamiętaj aby po wklejeniu czerwonego kodu usunąć moje czarne komentarze ) Zauważcie, że komórki to prostokąty, a wielkości tabeli/komórek/wierszy/kolumn definiujemy tak samo jak wielkości obrazków (width=”???” height=”???”) . Podobnie brak zdefiniowania tych wielkości przeglądarka interpretuje jako wartości domyślne (dopasowywując się do zawartości poszczególnych komórek). Jak pamiętacie z lekcji (obraz w komputerze) nowoczesne monitory maja rozdzielczości od 1280x? do 1920x? (fullHD), a te starsze najczęściej 1024×768 (najstarsze 800×600). Tworząc tabelę mającą być szkieletem waszej strony internetowej korzystnie jest wiec uszanować posiadaczy starszych monitorów i definiować parametr tabeli width na nie więcej niż 1024 p. Możesz również zastosować manewr “dopasuj do szerokości automatycznie”, podając w parametrze width=”100%” – cała szerokość danego obszaru (ekranu), width=”90%” – 90 procent ekranu itp…Dzisiejsze popularne serwisy w HTML mają od 760 do 960 p lub stosują wielkości procentowe. Jeśli ciekawi cię ten aspekt poszukaj w internecie informacji o “układach płynnych” – samodopasowujacych się do wielkości monitora. Pamiętaj, że błędem jest uzyskanie paska przewijania poziomego przeglądarki, strony WWW mają określoną szerokość i teoretycznie nieskończona długość (trochę podobnie do rolki papieru toaletowego ).

Więcej o budowie strony internetowej na lekcji ” Moja pierwsza strona WWW ”

mam jedną komórkę, jeden wiersz, jedną kolumnę i szerokość 100%

W. Kozaczkiewicz

———————————————————-

* temat trudniejszy, nieobowiązkowy – tylko dla chętnych !