20. Przewijana ramka

Dziś postaram się opisać nieco bardziej skomplikowany pomysł, jak usprawnić swojego chomika. Nie sprawi on jednak problemu osobom posiadającym podstawową wiedzę na temat języka html. Jeżeli kompletnie nie masz pojęcia o html'u, polecam przejrzeć poprzednie wpisy (Archiwum), począwszy od pierwszego. Osobiście uważam, że to co zaraz opiszę, nie jest aż tak trudne, żeby tego nie zrozumieć. A zatem czytaj dokładnie i powoli ;-)

Tym razem zajmę się czymś, co możesz zaobserwować na profilu aisha80. Chodzi o to przewijane miejsce otoczone zieloną ramką. Fajne prawda? Pozwala zaoszczędzić sporo miejsca, a po drobnej kosmetyce, nabiera też całkiem przyzwoitego wyglądu :)

Oto przykład o czym mówię:

To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80.

Myślę, że jak uruchomisz swoją wyobraźnię, będziesz wiedział jak wykorzystasz taki "gadżet" na swoim profilu. Zacznę od bardzo podstawowego kodu:

<div style="overflow: auto; width: 350px; height: 250px;" id="main">Tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst,</div>

Zwróć uwagę na znaczniki:
width: - to jest szerokość naszego pojemnika, określana w pikselach.
height: - to jest wysokość naszego pojemnika, określana w pikselach.
Pobaw się tymi wartościami, zmieniając nieznacznie liczby, aby zobaczyć jaki będzie efekt. Przedstawiony wyżej podstawowy kod, w praktyce wygląda tak:

Tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst,

Generalnie to już wszystko - pojemnik gotowy do wstawienia w edycję swojego profilu. Po wstawieniu, szybko jednak zauważysz, że nie da się do niego dodać wyrównania. Ściślej mówiąc, pojemnik można umieścić, albo POD jakąś zawartością, albo NAD. Zauważ, że nie da się zrobić tak jak na profilu aisha80, aby tekst umieszczany był również OBOK naszego pojemnika np. po prawej. Jak widać na podanym profilu, jednak się udało. Mało tego, spróbujemy pójść dalej i dokonamy o wiele większych zmian, niż tylko wyrównanie :-) Do pojemnika nie da się nic wyrównać, musimy go zatem umieścić w tabeli. Nie będę Cię jednak teraz uczył tworzenia tabel w html'u, ale pokażę kod, a następnie objaśnię co za co odpowiada. Nie martw się, to nie będzie takie trudne na jakie wygląda ;-)

Zacznijmy od samego efektu:

Przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst,

To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie. To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie. To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie.












Tak wygląda kod:

<table style="height: 330px;" border="0" width="350" align="left"><tr><td><div id="main" style="border: 2px solid #339999; padding: 10px; overflow: auto; width: 350px; height: 330px; font-size: 12px; font-family: Arial; background-color:#FFFCDA;">Przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, </div></td></tr></table>

Przypatrz się dokładnie - zauważ dwie sekcje: table oraz div
TABLE - to nasza niewidoczna dla przeglądarek tabela. Abyś mógł cokolwiek wstawić OBOK pojemnika, dodano parametr align="left". Parametr ten nie działa w pojemniku div, dlatego użyto tabeli (table)
DIV - to jest właśnie nasz pojemnik.
Widzisz zatem, że umieściliśmy pojemnik w tabeli.

Wspólna cechą tych dwóch znaczników jest wcześniej omawiana wysokość (height) oraz szerokość (width). Jeżeli zamierzasz zmienić te wartości, PAMIĘTAJ, aby były identyczne dla table i dla div.
Jeżeli zatem ustawisz wysokość na 330px to musi być ona taka sama dla table oraz dla div. Oprócz zmian wysokości i szerokości, nic nie zmieniaj w sekcji table, jeżeli nie znasz podstaw html.

Następne znaczniki:

border: 2px
grubość ramki otaczającej pojemnik (tej zielonej). Wpisz zamiast dwójki, jakąkolwiek inną liczbę, aby zmienić grubość określaną w pikselach.

#339999
kolor ramki. Zamiast tego możesz wpisać dowolny kolor z tabeli podstawowych kolorów lub jakikolwiek inny jeżeli potrafisz go zapisać.

padding: 10px
odległość zawartości wnętrza pojemnika od jego krawędzi (ramki). Zmień liczbę 10 na inną, aby zobaczyć różnicę.

font-size: 12px
wielkość czcionki. Zmień liczbę 12 na inną, aby zmienić rozmiar tekstu zawartego w pojemniku.

font-family: Arial
rodzaj czcionki. Zmień Arial na inną, np. Verdana. Podstawowe rodzaje czcionek, opisywałem tutaj.

background-color:#FFFCDA
kolor tła pojemnika. Zmień #FFFCDA na inny kolor, korzystając z tabeli podstawowych kolorów. Możesz podać tu dowolny kolor jaki tyko zechcesz.

Reszty nie zmieniaj, jeżeli nie znasz podstaw html'a.
Powyższy pojemnik możesz zastosować na dowolnej stronie internetowej, lub w portalu chomikuj.pl w edycji swojego profilu. Pojemnik nie będzie działał w rozmowach chomikowych, jak również w edycji folderów!

Jeżeli masz w związku z tym jakieś pytania lub uwagi, zostaw proszę swój komentarz.

18. Co to jest link?

Myślę, że zanim przejdę do opisywania nieco trudniejszych zagadnień, warto sobie zdefiniować niektóre pojęcia używane w języku html.
Co to jest link?
Takie właśnie pytanie otrzymałem już parę razy od piszących do mnie użytkowników portalu chomikuj.pl. Jak widać nie wszystkim ta definicja jest jeszcze znana, zatem pozwolę sobie to wyjaśnić i nieco omówić.

Link, nazywany również, hiperłączem, odnośnikiem lub odsyłaczem, jest swego rodzaju odwołaniem zamieszczonym w dokumencie, lub stronie internetowej. Po kliknięciu w link, przenosimy się na stronę lub miejsce z którym był skojarzony.
Link może być używany w tekście, lub obrazku (zdjęciu grafice itp).

Kiedy stosujemy linki?
Linki stosujemy wtedy, kiedy chcemy skierować kogoś na inną stronę lub podstronę w internecie. Posłużę się tutaj przykładami, aby lepiej to zrozumieć.

To jest link do podstrony niniejszego bloga, opisującej przykład zastosowania linków w połączeniu z obrazkami, zdjęciami lub grafiką.

Jak wygląda zwykły, typowy kod dla odnośnika tekstowego?

<a href="link do strony">Widoczny tekst</a>

Teraz zamieńmy to na konkretny przykład. Jako link do strony, podamy adres do portalu chomikuj.pl czyli:
http://www.chomikuj.pl
natomiast jako widoczny tekst, wpiszemy:
Twoje nieograniczone miejsce na pliki

Przykład:
Twoje nieograniczone miejsce na pliki

Używanie linków, odnośników, czy tak zwanych hiperłącz do innych stron, jest dość powszechne w Internecie i myślę, że opanowanie kodu html potrzebnego do jego wstawienia, nie sprawi Ci wielkiego kłopotu.

Warto przeczytać:
- Jak zrobić, aby obrazek również był linkiem prowadzącym do innej strony?.

16. Jak wstawić obrazek

Często w rozmowach chomikowych, chcemy w jakiś sposób sformatować nasz tekst, aby wyglądał nieco inaczej niż tylko zwykły napis. Formatowanie tekstu, omówiłem już wcześniej. Teraz chcemy coś więcej. Spróbujemy wstawić obrazek, oraz nauczyć się paru "sztuczek" z tym związanych.



Zwykły podstawowy kod html do wstawienia obrazka na stronie, wygląda tak:

<img src="ścieżka do obrazka" alt="tekst alternatywny" />

Przykład:


Parę objaśnień odnośnie kodu.

Ścieżka do obrazka - tutaj podajemy bezpośredni link prowadzący do miejsca w którym umieściliśmy nasz obrazek, np. do naszej galerii zdjęć.
Tekst alternatywny - tutaj wpisujesz tekst, który pojawi się, gdy wyświetlanie obrazka będzie niemożliwe. Przykład? serwer nie działa, skasowaliśmy nasz obrazek z galerii, lub przeglądający internet użytkownik, ma włączoną funkcję blokowania obrazków w przeglądarce. Zawsze podawaj tekst alternatywny.




Ok, wstawiliśmy obrazek, ale teraz powstaje problem z tekstem. Zobacz co się dzieje, gdy oprócz obrazka, mamy napisany jakiś tekst.

Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Takie wyrównanie, chyba nie bardzo nam odpowiada. Nie wygląda to dobrze, zatem spróbujmy, dodać style definiujące ustawienie obrazka, względem otaczającego go tekstu.

<img src="ścieżka do obrazka" alt="tekst alternatywny" style="float:left;" />

Przykład:
Wyrównanie do lewej (style="float:left;")
Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Wyrównanie do prawej (style="float:right;")
Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Objaśnienie odnośnie kodu:
style="float:left;" lub style="float:right;" - tym parametrem, definiujemy ustawienie obrazka po lewej stronie względem otaczającego go tekstu. Jeżeli chcemy zrobić odwrotnie, czyli ustawić obrazek po prawej stronie, wpisujemy right zamiast left w definicji stylów.



Teraz idziemy dalej i spróbujemy dodatkowo zmienić odstęp zawartości strony od obrazka.

<img src="ścieżka do obrazka" alt="tekst alternatywny" style="float:left;margin:20px;"/>

Przykład:
Wyrównanie do lewej, ustawiona odległość 20px (pikseli)
Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Objaśnienie odnośnie kodu:
margin:20px; - dodaliśmy parametr definiujący odległość zawartości strony od obrazka. Przykładowa liczba 20 oznacza ilość pikseli o które odsuniemy obrazek od otaczającej go zawartości. Liczbę tą zmieniamy na taką, żeby osiągnąć zadowalający nas efekt.



Jak prawidłowo wyciągnąć LINK prowadzący
do obrazka w chomikuj.pl ?

Chcesz podlinkować obrazek, który masz w galerii, a następnie wkleić go w rozmowy chomikowe, ale nie wychodzi (obrazek się nie pojawia)? Opiszę Ci jak to prawidłowo wykonać, ponieważ nie każdy jak miałem okazję się przekonać, radzi sobie z wyciąganiem linków w chomikuj.pl.

Wchodzimy do folderu gdzie mamy interesującą nas grafikę, obrazek lub zdjęcie.


Klikamy w obrazek, aby uzyskać powiększenie.



Klikamy prawym przyciskiem myszy na linku "Pobierz na dysk", a następnie z menu wybieramy opcję: "Kopiuj adres odnośnika"



Tym sposobem skopiowaliśmy sobie link obrazka do tymczasowej pamięci naszego komputera. Teraz wystarczy wkleić go w omawiane na początku tego wpisu miejsce: "ścieżka do obrazka"

Oto efekt:



UWAGA! przycisk nie zadziała w rozmowach chomikowych! Ten rodzaj przycisku możesz zastosować JEDYNIE w edycji swojego profilu chomikuj.pl. Oczywiście na innych stronach internetowych, przycisk będzie działał w normalny sposób.

15. Wyśrodkowanie tekstu

Jak wyśrodkować tekst w html'u?
Podaję dwa różne znaczniki, które możemy wykorzystać w portalu chomikuj.pl.

<center>...</center>

Tekst, który wstawisz w miejsce kropek, będzie wyśrodkowany.
Sam znacznik center, odnosi się do wyśrodkowania czegokolwiek co wstawimy pomiędzy ramy center.

Przykład:
---To jest tekst wyśrodkowany---

<p align="center">...</p>

Tekst, który wstawisz w miejsce kropek, będzie wyśrodkowany.
Znacznik P odnosi się do całego akapitu. W tym przypadku, wyśrodkujemy cały akapit. Pamiętaj, że akapit (p), tworzy dodatkowy odstęp od tekstu dół-góra. Wypróbuj oba znaczniki, aby zastosować ten, który będzie dla Ciebie bardziej odpowiedni.

Przykład:

---To jest tekst wyśrodkowany---

Powyższe porady możesz zastosować w rozmowach chomikowych, opisach folderów oraz w edycji swojego profilu na chomikuj.pl.

14. Kolor tła dla tekstu

Jak zmienić kolor tła dla tekstu pisanego w rozmowach chomikowych lub edycji swojego profilu w chomikuj.pl?
W języku html, wszelkie formatowanie tekstu, odbywa się za pomocą tzw. znaczników. Znaczniki jakie chcemy zastosować, muszą znajdować się pomiędzy ostrymi nawiasami < oraz >. Jak to będzie wyglądało dla zmiany koloru tła pisanego tekstu?

<span style="color:white;background-color:black;">...</span>

Tekst, który wstawisz w miejsce kropek, będzie napisany kolorem białym (white), a tło pokaże się w kolorze czarnym (black).

Przykład:
Biały tekst na czarnym tle
Żółty tekst na czerwonym tle
Niebieski tekst na żółtym tle


Aby określić kolor, możesz skorzystać z tabeli kolorów.
Powyższe porady możesz zastosować w rozmowach chomikowych, opisach folderów oraz w edycji swojego profilu na chomikuj.pl.

13. Kolor czcionki

Jak zmienić rozmiar czcionki w chomikuj.pl?
W języku html, wszelkie formatowanie tekstu, odbywa się za pomocą tzw. znaczników. Znaczniki jakie chcemy zastosować, muszą znajdować się pomiędzy ostrymi nawiasami < oraz >. Jak to będzie wyglądało dla zmiany koloru czcionki?

<font color="red">...</font>
Tekst, który wstawisz w miejsce kropek, będzie napisany kolorem czerwonym.

Przykład:
Tekst napisany kolorem czerwonym

Jeżeli chcesz zmienić kolor, podmień "red" na dowolny inny z listy szesnastu barw. Zaleca się jednak pisanie barw kodem HEXagonalnym. Dla naszego przykładu (kolor czerwony), będzie wyglądał tak:

<font color="#FF0000">...</font>

Przykład:
Tekst napisany kolorem czerwonym

Dlaczego zaleca się zapisywanie barw kodem HEX ?
Dlatego, ponieważ nie wszystkie przeglądarki właściwie interpretują nazwy własne kolorów. Jeżeli będziesz ustalał(a) jakąkolwiek barwę, rób to kodem HEX.

Oto lista podstawowych kolorów RGB:

NAZWA	WYNIK	KOD HEX
aqua		#00FFFF
gray		#808080
navy		#000080
silver		#C0C0C0
black		#000000
green		#008000
olive		#808000
teal		#008080
blue		#0000FF
lime		#00FF00
purple		#800080
white		#FFFFFF
fuchsia		#FF00FF
maroon		#800000
red		#FF0000
yellow		#FFFF00

Oczywiście kolorów jest znacznie więcej niż podstawowe, więc wątek ten będzie przeze mnie rozwijany w miarę wolnego czasu :-)W przyszłości zamierzam podać tu rozszerzoną paletę barw. Powyższe porady możesz zastosować w rozmowach chomikowych, opisach folderów oraz w edycji swojego profilu na chomikuj.pl .

12. Rodzaje czcionek

Czasami w rozmowach chomikowych, chcielibyśmy zmienić rodzaj czcionki na inną niż jest to ustawione domyślnie. Należy przy tym pamiętać, o bardzo istotnej rzeczy:
używaj tylko i wyłącznie podstawowych czcionek, domyślnie zainstalowanych w Twoim systemie operacyjnym (dla większości pewnie windows).
Jeżeli użyjecie czcionki ją "dogracie" sobie do systemu, Wasza przeglądarka wyświetli Wam ją tak jak trzeba, ale na innym komputerze już nie.
No, chyba że ten ktoś również będzie posiadał u siebie w systemie tą właśnie konkretną czcionkę. Jak się zapewne domyślasz, raczej wątpliwe.
Posługuj się więc tylko podstawowymi czcionkami, najbardziej popularnymi dla chomikuj.pl.
W języku html, wszelkie formatowanie tekstu, odbywa się za pomocą tzw. znaczników. Znaczniki jakie chcemy zastosować, muszą znajdować się pomiędzy ostrymi nawiasami < oraz >. Jak to będzie wyglądało dla zmiany rodzaju czcionki?

<font face="arial">...</font>

Tekst, który wstawisz w miejsce kropek, będzie napisany zadeklarowaną przez Ciebie czcionką.

Przykład:
To jest tekst napisany czcionką: Arial
To jest tekst napisany czcionką: Verdana
To jest tekst napisany czcionką: Times New Roman
To jest tekst napisany czcionką: Courier New
To jest tekst napisany czcionką: Tahoma
To jest tekst napisany czcionką: Trebuchet MS

Czcionki których nazwy składają się z dwóch wyrazów, bierzemy dodatkowo w apostrofy, czyli takie pojedyncze cudzysłowy: 'tekst'

<font face="'Courier New'">...</font>

Korzystanie z innych czcionek niż tu podane, może skutkować tym, że nie wyświetlą się poprawnie w przeglądarkach innych użytkowników.
Powyższe porady możesz zastosować w rozmowach chomikowych, opisach folderów oraz w edycji swojego profilu na chomikuj.pl .

11. Wielkość czcionki

Czas, aby opisać jak zmienić rozmiar czcionki w rozmowach chomikowych. Tutaj jednak mała przestroga. Uważaj na wielkość, jaką zamierzasz użyć w pisaniu na innych profilach. Zbyt duża czcionka, nie wygląda ładnie. Może tez zostać uznana za przejaw spamu, co z pewnością nie będzie mile widziane.
Wielkość czcionki stosuj z umiarem. Oto kod dzięki któremu zmienimy rozmiar naszego tekstu:

<font size="1">...</font>

Tekst, który wstawisz w miejsce kropek, zmieni swój rozmiar.
Wielkość czcionki, określana jest poprzez liczbę jaką widzisz w kodzie.

Przykład:
To jest czcionka o rozmiarze 1
To jest czcionka o rozmiarze 2
To jest czcionka o rozmiarze 3
To jest czcionka o rozmiarze 4
To jest czcionka o rozmiarze 5
To jest czcionka o rozmiarze 6

Większych czcionek staraj się nie używać. Nadmierna wielkość tekstu, nie da Ci gwarancji, że ktoś wejdzie obejrzeć Twój profil. To treść Twoich tekstów i zawartość Twojego Chomika o tym decydują.

8. Tekst podkreślony

Często w rozmowach chomikowych, chcemy w jakiś sposób sformatować nasz tekst, aby wyglądał nieco inaczej niż tylko zwykły napis. Możemy go na przykład pogrubić, podkreślić, zmienić rozmiar, kolor, czcionkę.
Tym razem poznacie kod którym podkreślamy czcionkę w chomikuj.pl .
W języku html, wszelkie formatowanie tekstu, odbywa się za pomocą tzw. znaczników. Znaczniki jakie chcemy zastosować, muszą znajdować się pomiędzy ostrymi nawiasami < oraz >. Jak to będzie wyglądało dla podkreślenia tekstu?

<u>...</u>

Tekst, który wstawisz w miejsce kropek, będzie podkreślony.

Przykład:
To jest tekst podkreślony

Dla dociekliwych, znacznik html określany literką "u", oznacza z angielskiego underline, czyli linia pod tekstem. Omawiany tu znacznik podkreślania tekstu w języku html stosujemy w rozmowach chomikowych lub edycji naszego profilu w chomikuj.pl .