Darmowa wyszukiwarka plików w serwisie Chomikuj.pl

1. Tworzenie linków tekstowych

Aby utworzyć link tekstowy na Chomikuj.pl, musimy posłużyć się językiem HTML, czyli językiem, którego używa się do tworzenia stron internetowych.

Kod HTML do tworzenia linków tekstowych wygląda następująco:

<a href="adres strony">widoczny tekst</a>

W miejsce "adres strony" należy wpisać pełny adres internetowy strony, do której ma prowadzić link (w naszym przykładzie będzie to: http://chomikuj.pl/).

Natomiast w miejsce "widoczny tekst" należy wpisać krótki opis, który będzie widoczny na ekranie i po kliknięciu którego nastąpi przejście pod wskazany adres (w naszym przykładzie będzie to: Darmowy dysk internetowy).

Przykład:

<a href="http://chomikuj.pl/">Darmowy dysk internetowy</a>

Lista miejsc w serwisie Chomikuj.pl, w których można umieszczać linki:

• Informacje o Chomiku (Profil)
• Opisy plików
• Opisy folderów
• Komentarze do plików
• Chomikowe rozmowy (ShoutBox)

2. Tworzenie linków obrazkowych

W serwisie Chomikuj.pl można spotkać obrazki, które po kliknięciu zachowują się jak linki, czyli przenoszą nas w inne miejsce w sieci – są to tak zwane linki obrazkowe (inaczej: linki graficzne). Utworzenie takich "graficznych przycisków" sprowadza się do połączenia kodu odpowiedzialnego za wyświetlanie linków tekstowych, czyli: <a href="...">...</a>, z kodem, który wyświetla grafikę, czyli: <img src="..." alt="..." />.

Kod HTML do tworzenia linków obrazkowych prezentuje się następująco:

<a href="adres strony"><img src="adres obrazka" alt="krótki opis obrazka" /></a>

W miejsce "adres strony" należy wpisać pełny adres internetowy strony, do której (po kliknięciu obrazka) chcemy się przenieść (w naszym przykładzie będzie to: http://chomikuj.pl/ebooki-download).

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w naszym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/free.png).

Natomiast zamiast "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki. Dzięki temu także w ich przeglądarkach będzie możliwość używania linków obrazkowych, mimo iż grafika nie zostanie wyświetlona. W naszym przykładzie, tym opisem będzie: Darmowy transfer plików.

Przykład:

HTML:

<a href="http://chomikuj.pl/ebooki-download"><img src="http://chomikuj-wyszukiwarka.eu/graphics/free.png" alt="Darmowy transfer plików" /></a>

Efekt:

Dobrym pomysłem na wykorzystanie linków obrazkowych w portalu Chomikuj.pl, jest utworzenie oryginalnego "przycisku kierującego do Chomika", który można umieszczać zamiast standardowego np. w "Chomikowych rozmowach" lub na forum czy blogu. Ponieważ te standardowe przyciski praktycznie niczym się od siebie nie różnią – zastosowanie własnego (z oryginalną grafiką) z pewnością zwiększy liczbę osób, które będą zainteresowane odwiedzeniem Twojej spiżarni.

3. Wstawianie grafiki

Kod HTML do wstawiania grafiki na Chomikuj.pl:

<img src="adres obrazka" alt="krótki opis obrazka" />

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w naszym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/ptak.png).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w naszym przykładzie będzie to: Ptak).

Przykład:

HTML:

<img src="http://chomikuj-wyszukiwarka.eu/graphics/ptak.png" alt="Ptak" />

Efekt:

Jak umieścić obrazek w opisie swojego Chomika (krok po kroku):

1. Zaloguj się na swoim koncie w serwisie Chomikuj.pl jako właściciel

2. Umieść wybrany obrazek w dowolnym, niezahasłowanym folderze swojego Chomika

3. Kliknij na jego miniaturkę prawym przyciskiem myszy i wybierz "kopiuj adres odnośnika" lub "kopiuj skrót"

4. Przejdź do edycji ustawień swojego Chomika klikając na

5. W zakładce "Informacje o Chomiku" kliknij przycisk (zobacz screen)

6. W miejscu, w którym ma zostać umieszczony obrazek – wpisz kod: <img src="" alt="" />

7. Umieść kursor myszy pomiędzy dwoma cudzysłowami (fragment kodu: src="") i wklej ze schowka skopiowany wcześniej adres obrazka ("CTRL + V" lub prawy przycisk myszy i "Wklej")

8. Następnie pomiędzy dwoma cudzysłowami (fragment kodu: alt="") wpisz kilka słów opisujących obrazek

9. Zaakceptuj zmiany w zawartości HTML poprzez kliknięcie przycisku

10. Zapisz zmiany w opisie Chomika klikając przycisk

W podobny sposób można wklejać elementy graficzne także w "Chomikowych rozmowach" lub w opisach plików i folderów. Należy jednak pamiętać, że umieszczanie zbyt wielu obrazków, może znacząco wydłużyć czas ładowania strony i utrudnić/uniemożliwić przeglądanie zawartości Chomika!

Wymiary grafiki

Jeżeli chcemy zdefiniować wymiary naszej grafiki na Chomikuj.pl, musimy umieścić wewnątrz znacznika <img /> dwa następujące atrybuty: width="..." (aby określić szerokość) oraz height="..." (aby określić wysokość). W miejsce kropek należy wpisać konkretne wymiary w pikselach (przykład poniżej).

HTML:

<img src="http://chomikuj-wyszukiwarka.eu/graphics/krajobraz.jpg" alt="Krajobraz" width="290" height="180" />

Efekt:

Uwaga: Jeżeli w serwisie Chomikuj.pl nie określimy wymiarów naszej grafiki, to podczas wczytywania strony, treść naszego Chomika będzie się rozjeżdżać! Oczywiście aby grafika nie była zniekształcona, należy podawać jej rzeczywiste wymiary w pikselach (atrybuty width="..." oraz height="..." nie służą do zmiany wymiarów grafiki!). Jeżeli chcemy zmienić wymiary naszej grafiki, powinniśmy posłużyć się programem graficznym, takim jak na przykład ten darmowy edytor zdjęć online.

Obramowanie grafiki

Aby nadać naszej grafice obramowanie, trzeba umieścić wewnątrz znacznika <img /> następujący styl CSS: style="border:g s k;", gdzie zamiast "g" należy podać grubość obramowania w pikselach (np.: 6px), zamiast "s" wpisać styl obramowania (np.: solid), a "k" zastąpić kodem koloru, który określi kolor naszego obramowania (np.: #28679B). Zobacz cały kod w poniższym przykładzie.

HTML:

<img src="http://chomikuj-wyszukiwarka.eu/graphics/krajobraz.jpg" alt="Krajobraz" width="290" height="180" style="border:6px solid #28679B;" />

Efekt:

Inne style obramowania:

style="border:3px dotted #0099FF;"

style="border:3px dashed #FF0080;"

style="border:3px double #33C133;"

style="border:3px groove #808080;"

style="border:3px ridge #FFA448;"

style="border:3px inset #B00000;"

style="border:3px outset #2F76BD;"

Uwaga: Wygląd obramowania (oprócz stylu solid «lity») jest zależny od używanej przeglądarki.

4. Rodzaje czcionek

Czasami chcielibyśmy (w "Informacjach o Chomiku" lub w "Chomikowych rozmowach") napisać coś czcionką inną niż ta, która została ustawiona przez twórców strony Chomikuj.pl. W takiej sytuacji najlepiej użyć styli CSS, dzięki którym możemy określić rodzaj czcionki, jej wielkość, kolor, grubość itp.

Poniżej znajduje się kod HTML akapitu (<p>...</p>), wraz ze stylem CSS (style="..."), który określa rodzaj czcionki:

<p style="font-family:rodzaj czcionki;">Treść akapitu</p>

W miejsce "rodzaj czcionki" należy wpisać nazwę czcionki (w naszym przykładzie będzie to: Georgia).

Uwaga: Jeżeli nazwa czcionki składa się z więcej niż jednego wyrazu, należy ją objąć w znaki apostrofu (np.: 'Comic Sans MS', 'Monotype Corsiva', 'Times New Roman', 'Courier New').

Natomiast w miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką Georgia).

Przykład:

<p style="font-family:Georgia;">To jest tekst napisany czcionką Georgia</p>

Nazwy wybranych czcionek:

• Arial
• 'Arial Black'
• 'Arial Narrow'
• 'Arial Unicode MS'
• Verdana
• Tahoma
• 'Trebuchet MS'
• Georgia
• 'Courier New'
• 'Times New Roman'
• 'Palatino Linotype'
• 'Lucida Sans Unicode'
• 'Comic Sans MS'
• 'Microsoft Sans Serif'
• Mistral
• 'Monotype Corsiva'
• 'Tw Cen MT'
• 'Tw Cen MT Condensed'
• Impact
• 'Book Antiqua'

Uwaga: Jeżeli użytkownik czytający Twój tekst, nie będzie posiadał danej czcionki w swoim systemie, tekst zostanie mu wyświetlony czcionką domyślną (najprawdopodobniej 'Times New Roman'). Poza tym nie każda czcionka potrafi poprawnie zapisać polskie znaki (ą, ę, ć, ś, ń, ó, ż, ź, ł) w standardzie ISO.

5. Wielkość czcionki

Kod HTML akapitu, wraz ze stylem CSS, który określa wielkość czcionki:

<p style="font-size:wielkość czcionki;">Treść akapitu</p>

W miejsce "wielkość czcionki" należy wpisać konkretną wielkość czcionki wyrażoną w pikselach [px] (w naszym przykładzie wielkość czcionki będzie wynosiła: 18px).

Natomiast w miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką o wielkości 18 pikseli).

Przykład:

<p style="font-size:18px;">To jest tekst napisany czcionką o wielkości 18 pikseli</p>

6. Kolor czcionki

Kod HTML akapitu, wraz ze stylem CSS, który określa kolor czcionki:

<p style="color:kolor czcionki;">Treść akapitu</p>

W miejsce "kolor czcionki" należy wpisać nazwę koloru (np. black, red, green, blue). Zaleca się jednak określanie kolorów za pomocą kodu heksadecymalnego (HEX). Zapis heksadecymalny składa się z sześciu cyfr poprzedzonych znakiem # (krzyżyk). W naszym przykładzie tekst będzie koloru czerwonego (red), a jego zapis heksadecymalny będzie wyglądał następująco: #FF0000.

W miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką w kolorze czerwonym).

Przykład:

<p style="color:#FF0000;">To jest tekst napisany czcionką w kolorze czerwonym</p>

Podstawowa paleta kolorów:

Rozszerzona paleta kolorów (próbnik kolorów):

Próbnik kolorów umożliwia wybór koloru z całej dostępnej dla internetu palety barw. Podczas doboru koloru przy użyciu pola i pionowego suwaka wyświetlane są wartości współrzędnych, które zmieniają się wraz ze zmianami koloru. Jeżeli znasz wartości liczbowe opisujące wybrany kolor, możesz je wpisać w odpowiednie pola.

Wybrany kolor wyświetlany jest w kwadratowym polu po prawej stronie suwaka, a jego zapis heksadecymalny (HEX) w polu tekstowym oznaczonym znakiem krzyżyka (#). Pamiętaj, aby umieszczać ten znak (bez spacji) przed każdym sześciocyfrowym kodem koloru (przykład poprawnego zapisu: #F70C8D).

7. Tekst pogrubiony

Aby pogrubić jakiś fragment tekstu, należy objąć go zaprezentowanymi poniżej znacznikami HTML:

<strong>Tutaj wpisz swój tekst</strong>

Przykład:

<strong>Ten tekst został pogrubiony</strong>, a ten tekst nie został pogrubiony

8. Tekst pochylony

Aby napisać coś pismem pochyłym, należy dany fragment tekstu umieścić pomiędzy znacznikami:

<i>Tutaj wpisz swój tekst</i>

Przykład:

<i>Ten tekst jest napisany pismem pochyłym</i>, a ten tekst – pismem prostym

9. Tekst podkreślony

Aby podkreślić jakiś fragment tekstu na Chomikuj.pl, należy użyć następujących znaczników HTML:

<u>Tutaj wpisz swój tekst</u>

Przykład:

<u>Ten tekst został podkreślony</u>, a ten tekst nie został podkreślony

10. Łączenie elementów formatujących tekst

Jeżeli chcemy, aby nasz tekst na Chomikuj.pl miał kilka cech wyglądu naraz, należy połączyć ze sobą wybrane style CSS i/lub znaczniki HTML.

Rodzaj czcionki + Wielkość czcionki + Kolor czcionki + Pogrubienie

<p style="font-family:rodzaj czcionki; font-size:wielkość czcionki; color:kolor czcionki;"><strong>Tutaj wpisz swój tekst</strong></p>

W miejsce "rodzaj czcionki" należy wpisać nazwę czcionki (w naszym przykładzie będzie to: 'Times New Roman').

W miejsce "wielkość czcionki" należy wpisać wielkość czcionki wyrażoną w pikselach [px] (w naszym przykładzie wielkość czcionki będzie wynosiła: 24px).

W miejsce "kolor czcionki" należy wpisać kod koloru (więcej o kolorach znajdziesz w punkcie szóstym tego poradnika). W naszym przykładzie tekst będzie koloru różowego (#FF0080).

Przykład:

<p style="font-family:'Times New Roman'; font-size:24px; color:#FF0080;"><strong>Ten tekst ma cztery cechy wyglądu</strong></p>

Szablony do formatowania tekstu na Chomikuj.pl:

W odpowiedzi na dziesiątki pytań o łączeniu znaczników HTML oraz stylów CSS, prezentuję poniżej kilka gotowych szablonów, dzięki którym możesz w łatwy sposób formatować swój tekst na stronach serwisu Chomikuj.pl. Wystarczy skopiować któryś z poniższych kodów i wpisać we wskazanym miejscu swój tekst.

Jeżeli chcesz, możesz modyfikować style CSS, zmieniając np. wielkość lub kolor czcionki. Możesz także dodawać lub usuwać znaczniki HTML. Zanim jednak przystąpisz do tego drugiego, zapoznaj się z przedstawionymi poniżej podstawowymi zasadami pisowni języka HTML.

Podstawowe zasady pisowni języka HTML:

Język HTML to głównie pary znaczników, z których każdy umieszczony jest w nawiasie ostrokątnym. Znaczniki (tagi) mają różną funkcję, np. <p>...</p> to akapit, a <u>...</u> – podkreślenie tekstu.

Znaczniki HTML dzielą się na otwierające (np.: <i>, <u>) oraz zamykające (np.: </i>, </u>). Znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak znacznik otwierający. Pomiędzy znacznikami otwierającym i zamykającym umieszczamy tekst, który chcemy sformatować (np. <i>Formatowany tekst</i>).

Znaczniki HTML można zagnieżdżać. Oznacza to, że jeden element HTML (np. <p>...</p>) może zawierać inne elementy (jak np. <u>...</u> i <strong>...</strong>). Prawidłowo zagnieżdżone znaczniki wyglądają następująco: <p><u><strong>Formatowany tekst</strong></u></p>.

Jeżeli masz jakieś pytania – pisz śmiało TUTAJ.

1.

<span style="font-family:Tahoma, sans-serif; font-size:15px; color:#524f42;">Tutaj wpisz swój tekst</span>

2.

<span style="font-family:Arial, sans-serif; font-size:18px; color:#D20000;"><strong><i>Tutaj wpisz swój tekst</i></strong></span>

3.

<span style="font-family:Georgia, serif; font-size:22px; color:#006DAE;">Tutaj wpisz <u>swój tekst</u></span>

4.

<span style="font-family:'Monotype Corsiva', cursive; font-size:32px; color:#FF6C00;">Tutaj wpisz swój tekst</span>

5.

<span style="font-family:'Comic Sans MS', cursive; font-size:22px; color:#00C126;">Tutaj wpisz swój tekst</span>

6.

<span style="font-family:Verdana, sans-serif; font-size:18px; color:#A40052;"><i>Tutaj <strong>wpisz</strong> <u>swój</u> tekst</i></span>

7.

<span style="font-family:'Times New Roman', serif; font-size:28px; color:#E2BF47;"><i>Tutaj wpisz swój tekst</i></span>

8.

<span style="font-family:'Courier New', monospace; font-size:20px; color:#0097FB;">Tutaj <strong>wpisz</strong> swój tekst</span>

Zobacz, gdzie w portalu Chomikuj.pl można umieszczać formatowany tekst:

• Informacje o Chomiku (Profil)
• Opisy plików
• Opisy folderów
• Komentarze do plików
• Chomikowe rozmowy (ShoutBox)

11. Ustawianie tekstu i grafiki

11.1 Grafika z lewej, tekst z prawej strony

Takie ustawienie elementów na Chomikuj.pl, jest często stosowane w "Opisach plików", kiedy razem z tekstem umieszczamy miniaturkę okładki, np. książki.

<img style="float:left; margin:0 10px 0 0;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/okladka-ksiazki.jpg).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Okładka książki).

Przykład:

HTML:

<img style="float:left; margin:0 10px 0 0;" src="http://chomikuj-wyszukiwarka.eu/graphics/okladka-ksiazki.jpg" alt="Okładka książki" />
<span style="font-family:Tahoma; font-size:13px;">Tekst, Tekst, Tekst...</span>

Efekt:

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, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst.

11.2 Grafika z prawej, tekst z lewej strony

W ten sposób można ustawiać elementy np. w "Opisach folderów".

<img style="float:right; margin:0 0 0 10px;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/lost.png).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Lost).

Przykład:

HTML:

<img style="float:right; margin:0 0 0 10px;" src="http://chomikuj-wyszukiwarka.eu/graphics/lost.png" alt="Lost" />
<span style="font-family:Tahoma; font-size:13px;">Tekst, Tekst, Tekst...</span>

Efekt:

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.

11.3 Grafika nad tekstem, całość z lewej strony (domyślnie)

Takie ustawienie na Chomikuj.pl, można stosować w "Opisach plików", kiedy razem z tekstem umieszczamy miniaturkę okładki o dużych wymiarach (np. okładka albumu muzycznego).

<img src="adres obrazka" alt="krótki opis obrazka" />
<p style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/shakira.png).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Shakira).

Przykład:

HTML:

<img src="http://chomikuj-wyszukiwarka.eu/graphics/shakira.png" alt="Shakira" />
<p style="font-family:Tahoma; font-size:13px;">Tekst, Tekst, Tekst...</p>

Efekt:

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.

11.4 Grafika i tekst wyśrodkowane

Wyśrodkowanie tekstu i grafiki na Chomikuj.pl, bardzo dobrze prezentuje się w "Informacjach o Chomiku" oraz w "Opisach folderów".

<p style="text-align:center; margin:0px;"><img src="adres obrazka" alt="krótki opis obrazka" /></p>
<p style="text-align:center; margin:0px; font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/kelly-rowland.png).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Kelly Rowland).

Przykład:

HTML:

<p style="text-align:center; margin:0px;"><img src="http://chomikuj-wyszukiwarka.eu/graphics/kelly-rowland.png" alt="Kelly Rowland" /></p>
<p style="text-align:center; margin:0px; font-family:Tahoma; font-size:13px;">Tekst, Tekst, Tekst...</p>

Efekt:

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, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst, Tekst.

Tworzenie efektownych okładek CD/DVD

Jak można zauważyć, powyższe okładki wyglądają jakby były umieszczone w pudełkach na CD/DVD. Do uzyskania takiego efektu potrzebny jest specjalnie przygotowany plik graficzny w formacie PSD (do pobrania na moim Chomiku) oraz program Photoshop do jego edycji.

Sam proces tworzenia takiej okładki jest bardzo prosty i zajmuje raptem kilka minut – polega na umieszczeniu we wspomnianym pliku PSD wybranej przez nas okładki płyty, nadaniu wszystkim elementom grafiki odpowiednich wymiarów i zapisaniu całości w formacie PNG.

12. Dodatki na Chomikuj.pl

Jeżeli chcesz, aby Twoje konto na Chomikuj.pl w jakiś sposób się wyróżniało, skorzystaj z gotowych komponentów (dodatków) dla stron www. Większość takich dodatków pełni funkcję informacyjną (np.: imieniny, prognoza pogody, status Gadu-Gadu, adres IP komputera, wyniki Lotto itp.). Są również dodatki, których jedynym zadaniem jest upiększenie naszej strony (Chomika), do takich należą np. animowane obrazki. Sam zdecydujesz, które dodatki bardziej Ci odpowiadają.

Co ważne, aby umieścić dodatek na swoim Chomiku, wcale nie trzeba znać języka HTML! Wystarczą podstawowe umiejętności korzystania z komputera typu "kopiuj-wklej".

Poniżej znajduje się lista popularnych serwisów, które oferują różnego rodzaju dodatki za darmo. Znajdziesz tam m.in.: animowane napisy, kalendarze, kursy walut, sondy, zegary, mini gry online, liczniki odwiedzin i wiele innych, mniej lub bardziej funkcjonalnych dodatków i widgetów.

Ciekawe strony z dodatkami na Chomika:

• Generator animowanych banerów flash
• Generatory i flash zabawki
• Tworzenie animowanego tekstu
• Generator świecącego tekstu
• Animowane napisy i grafika
• Zegary flash (cyfrowe i analogowe)
• Zegary flash na stronę
• Wspaniała pogoda – nowy sposób oglądania pogody
• Licznik odwiedzin z lokalizatorem kraju
• Liczniki odwiedzin i inne komponenty
• Darmowe statystyki bez rejestracji
• Widgety, komponenty, gadżety
• Dodatki i gadżety na stronę
• Sondy internetowe (bez rejestracji)

Aby umieścić dodatek w opisie swojego Chomika:

1. Wejdź na stronę jednego z wyżej wymienionych serwisów oferujących dodatki

2. Dostosuj wybrany dodatek do swoich potrzeb, postępując zgodnie z instrukcją danego serwisu

3. Wygeneruj i skopiuj kod HTML wybranego dodatku

4. Przejdź do edycji ustawień swojego Chomika klikając na

5. W zakładce "Informacje o Chomiku" kliknij przycisk (zobacz screen)

6. Następnie w miejscu, w którym ma zostać umieszczony dodatek – wklej skopiowany wcześniej z danego serwisu kod HTML

7. Zaakceptuj zmiany w zawartości HTML poprzez kliknięcie przycisku

8. Zapisz zmiany w opisie Chomika klikając przycisk

W podobny sposób można umieszczać na Chomiku również filmy z takich serwisów jak np. YouTube.

Uwaga: Aby umieścić film z YouTube w opisie swojego Chomika – na stronie z wybranym filmem kliknij kolejno: "Udostępnij" oraz "Umieść", następnie (co ważne) zaznacz pole wyboru: "Użyj starego kodu umieszczanego na stronie" i dopiero wtedy skopiuj wygenerowany kod HTML.

13. Szablony do opisu plików

Dzięki poniższym szablonom możesz, w łatwy sposób, tworzyć atrakcyjne i w pełni profesjonalne opisy swoich plików przechowywanych w serwisie Chomikuj.pl – takich, jak: filmy, albumy muzyczne i ebooki. Szablony zostały tak skonstruowane, aby nawet osoby całkowicie nieznające języka HTML, miały szansę, bez większych problemów, sobie z nimi poradzić (zwróć uwagę na przykłady i wyróżnione w nich kolorem pomarańczowym fragmenty kodu – jest to treść, którą trzeba zamieniać).

*Ważne: Aby opisy plików, sporządzone przy użyciu poniższych szablonów, były na Chomikuj.pl prawidłowo wyświetlane (bez efektu rozstrzelenia), należy pousuwać z nich wszystkie niepotrzebne spacje i przejścia do nowej linii, znajdujące się pomiędzy zamykającymi a otwierającymi znacznikami HTML (.../>▌<...). Prawidłowo wykonany kod opisu, przy użyciu szablonów, powinien wyglądać tak, jak w poniższych przykładach, gdzie cała treść jest w jednej, nieprzerwanej, a jedynie automatycznie zawiniętej linii (bez użycia klawisza Enter).

* Dotyczy wyłącznie serwisu Chomikuj.pl. Nie jest to zasada pisowni języka HTML.

13.1 Szablon do opisu filmów

Przykładowy opis filmu:

Wygląd:

Kod HTML:

<img style="float:right;" src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/intruz.png" title="Intruz (The Host)" alt="Intruz (The Host)" width="238" height="300" /><div style="font-family:Arial, Helvetica, sans-serif; clear:left; padding:8px 0 0;"><h4 style="font-family:Verdana, Geneva, sans-serif; font-size:16px; line-height:24px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/informacje-o-filmie.png) no-repeat; padding:0 0 0 26px; margin:0 0 6px;">Informacje:</h4><ul style="list-style:square; font-size:13px; line-height:17px; padding:0 0 0 22px; margin:0;"><li style="float:none;">Gatunek: <strong>Thriller, Science fiction</strong></li><li style="float:none;">Produkcja: <strong>USA</strong></li><li style="float:none;">Premiera: <strong>22 marca 2013 (Świat)</strong></li><li style="float:none;">Dialogi: <strong>Lektor PL</strong> <img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polska-flaga.gif" title="Film z polskim lektorem" alt="Polska flaga" width="24" height="12" /></li><li style="float:none;">Wideo: <strong style="color:#CA0B0B;">1280x720</strong></li><li style="float:none;">Dźwięk: <strong style="color:#CA0B0B;">Dolby Digital AC3</strong></li></ul><h4 style="font-family:Verdana, Geneva, sans-serif; font-size:16px; line-height:24px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/opis-filmu.png) no-repeat; padding:0 0 0 26px; margin:8px 0 0;">Opis filmu:</h4><p style="font-size:13px; line-height:17px; margin:6px 0 0;">„The Host” jest kolejnym filmem opartym na powieści autorki „Zmierzch” – Stephenie Meyer. Niedaleka przyszłość. Ziemię skolonizowali kosmici tzw. Dusze, które wnikają w ciała ludzi zabijając w nich świadomość. Pozostała jedynie grupka uciekinierów, której śladem podążają łowcy. Jedną z nich jest 21-letnia sierota Melanie Stryder, która wkrótce pada ofiarą obcych. W jej ciało zostaje wszczepiona dusza – Wagabunda. Rozpoczyna się walka z czasem... Czy dziewczynie uda się odzyskać swoje dawne życie oraz utraconą miłość – Jareda? Czy odnajdzie swoich bliskich?</p><p style="font-size:13px; line-height:17px; padding:3px 0; margin:8px 0 17px; border-top:1px dashed #524F42; border-bottom:1px dashed #524F42;"><strong>Obsada:</strong> Saoirse Ronan, Jake Abel, Max Irons, William Hurt, Boyd Holbrook i inni.</p><div style="text-align:center; clear:both;"><img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polski-lektor.png" title="Film z polskim lektorem" alt="Polski lektor" width="166" height="40" /></div></div>

Kod szablonu do opisu filmów:

<img style="float:right;" src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/okladka-filmu.png" title="Polski tytuł filmu (Oryginalny tytuł filmu)" alt="Polski tytuł filmu (Oryginalny tytuł filmu)" width="238" height="300" />
<div style="font-family:Arial, Helvetica, sans-serif; clear:left; padding:8px 0 0;">
  <h4 style="font-family:Verdana, Geneva, sans-serif; font-size:16px; line-height:24px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/informacje-o-filmie.png) no-repeat; padding:0 0 0 26px; margin:0 0 6px;">Informacje:</h4>
  <ul style="list-style:square; font-size:13px; line-height:17px; padding:0 0 0 22px; margin:0;">
    <li style="float:none;">Gatunek: <strong>np.: Komedia, Thriller, Science fiction ...</strong></li>
    <li style="float:none;">Produkcja: <strong>np.: USA, Wielka Brytania, Polska ...</strong></li>
    <li style="float:none;">Premiera: <strong>np.: 28 lipca 2013 (Świat)</strong></li>
    <li style="float:none;">Dialogi: <strong>np.: Lektor PL, Film PL, Napisy PL, Dubbing PL ...</strong> <img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polska-flaga.gif" title="Film z polskim lektorem" alt="Polska flaga" width="24" height="12" /></li>
    <li style="float:none;">Wideo: <strong style="color:#CA0B0B;">np.: 780x560, 1280x720 ...</strong></li>
    <li style="float:none;">Dźwięk: <strong style="color:#CA0B0B;">np.: MP3, Dolby Digital AC3 ...</strong></li>
  </ul>
  <h4 style="font-family:Verdana, Geneva, sans-serif; font-size:16px; line-height:24px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/opis-filmu.png) no-repeat; padding:0 0 0 26px; margin:8px 0 0;">Opis filmu:</h4>
  <p style="font-size:13px; line-height:17px; margin:6px 0 0;">Tutaj wpisz opis filmu.</p>
  <p style="font-size:13px; line-height:17px; padding:3px 0; margin:8px 0 17px; border-top:1px dashed #524F42; border-bottom:1px dashed #524F42;"><strong>Obsada:</strong> Tutaj wpisz nazwiska odtwórców głównych ról.</p>
  <div style="text-align:center; clear:both;"><img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polski-lektor.png" title="Film z polskim lektorem" alt="Polski lektor" width="166" height="40" /></div>
  <div style="text-align:center; clear:both;"><img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polski-film.png" title="Polski film" alt="Polski film" width="166" height="40" /></div>
  <div style="text-align:center; clear:both;"><img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polskie-napisy.png" title="Film z polskimi napisami" alt="Polskie napisy" width="166" height="40" /></div>
  <div style="text-align:center; clear:both;"><img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/polski-dubbing.png" title="Film z polskim dubbingiem" alt="Polski dubbing" width="166" height="40" /></div>
</div>

13.2 Szablon do opisu albumów muzycznych

Przykładowy opis albumu muzycznego:

Wygląd:

Kod HTML:

<img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/red-taylor-swift.png" title="Red - Taylor Swift" alt="Red - Taylor Swift" width="300" height="300" /><h4 style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:26px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/cd-info.png) no-repeat; padding:0 0 0 28px; margin:9px 0 0;">Informacje:</h4><ul style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:square; padding:0 0 0 28px; margin:0;"><li style="float:none;">Tytuł: <strong>Red</strong></li><li style="float:none;">Wykonawca: <strong>Taylor Swift</strong></li><li style="float:none;">Data wydania: <strong>22 października 2012</strong></li><li style="float:none;">Rodzaj muzyki: <strong>Pop</strong></li><li style="float:none;">Format: <strong>MP3 (320 kbps)</strong></li></ul><h4 style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:26px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/lista-utworow.png) no-repeat; padding:0 0 0 28px; margin:7px 0 0;">Lista utworów:</h4><ol style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:decimal; padding:0 0 0 28px; margin:0;"><li style="float:none;">State of Grace</li><li style="float:none;">Red</li><li style="float:none;">Treacherous</li><li style="float:none;">I Knew You Were Trouble</li><li style="float:none;">All Too Well</li><li style="float:none;">22</li><li style="float:none;">I Almost Do</li><li style="float:none;">We Are Never Ever Getting Back Together</li><li style="float:none;">Stay Stay Stay</li><li style="float:none;">The Last Time (feat. Gary Lightbody of Snow Patrol)</li><li style="float:none;">Holy Ground</li><li style="float:none;">Sad Beautiful Tragic</li><li style="float:none;">The Lucky One</li><li style="float:none;">Everything Has Changed (feat. Ed Sheeran)</li><li style="float:none;">Starlight</li><li style="float:none;">Begin Again</li></ol>

Kod szablonu do opisu albumów muzycznych:

<img src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/okladka-cd.png" title="Tytuł albumu muzycznego - Wykonawca" alt="Tytuł albumu muzycznego - Wykonawca" width="300" height="300" />
<h4 style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:26px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/cd-info.png) no-repeat; padding:0 0 0 28px; margin:9px 0 0;">Informacje:</h4>
<ul style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:square; padding:0 0 0 28px; margin:0;">
  <li style="float:none;">Tytuł: <strong>Tytuł albumu</strong></li>
  <li style="float:none;">Wykonawca: <strong>Wykonawca(y) albumu</strong></li>
  <li style="float:none;">Data wydania: <strong>Wpisz datę wydania</strong></li>
  <li style="float:none;">Rodzaj muzyki: <strong>Gatunek muzyczny, np. Jazz</strong></li>
  <li style="float:none;">Format: <strong>Podaj format utworów, np.: MP3 (192 kbps), WMA, OGG itp.</strong></li>
</ul>
<h4 style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:26px; background:url(http://chomikuj-wyszukiwarka.eu/komponenty/grafika/lista-utworow.png) no-repeat; padding:0 0 0 28px; margin:7px 0 0;">Lista utworów:</h4>
<ol style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:decimal; padding:0 0 0 28px; margin:0;">
  <li style="float:none;">Utwór nr 1</li>
  <li style="float:none;">Utwór nr 2</li>
  <li style="float:none;">Utwór nr 3</li>
  <li style="float:none;">Utwór nr 4</li>
  <li style="float:none;">Utwór nr 5</li>
  <li style="float:none;">Utwór nr 6</li>
  <li style="float:none;">Utwór nr 7</li>
  <li style="float:none;">Utwór nr 8</li>
  <li style="float:none;">Utwór nr 9</li>
  <li style="float:none;">Utwór nr 10</li>
  <li style="float:none;">Utwór nr 11</li>
  <li style="float:none;">Utwór nr 12</li>
  <li style="float:none;">Utwór nr 13</li>
  <li style="float:none;">Utwór nr 14</li>
  <li style="float:none;">Utwór nr 15</li>
  <li style="float:none;">Utwór nr 16</li>
  <li style="float:none;">Utwór nr 17</li>
  <li style="float:none;">Utwór nr 18</li>
  <li style="float:none;">Utwór nr 19</li>
  <li style="float:none;">Utwór nr 20</li>
</ol>

13.3 Szablon do opisu ebooków

Przykładowy opis ebooka:

Wygląd:

Kod HTML:

<img style="border:1px solid #524F42; float:left; margin:0 15px 0 0;" src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/gates-of-paradise.png" title="Gates of Paradise" alt="Gates of Paradise" width="185" height="280" /><ul style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:square inside; padding:0; margin:0;"><li style="float:none;">Autor: <strong>Melissa de la Cruz</strong></li><li style="float:none;">Kategoria: <strong>Fantasy, Romans</strong></li><li style="float:none;">Liczba stron: <strong>368</strong></li><li style="float:none;">Data wydania: <strong>15 stycznia 2013</strong></li></ul><p style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; padding:0; margin:13px 0 0;">Ostatni tom bestsellerowej serii „Błękitnokrwiści” autorstwa Melissy de la Cruz. Schuyler Van Alen ma coraz mniej czasu. Książę Piekieł szturmuje Bramy Raju, coraz bliższy objęcia władzy nad niebem i ziemią. Tym razem u jego boku stoją najpotężniejsi aniołowie, Abaddon i Azrael, znani śmiertelnikom jako Jack i Mimi Force. Bliss i jej wilcza horda mogą przeważyć szalę zwycięstwa na stronę Schuyler, ale czy uda im się dotrzeć na czas? Nie ma triumfu bez poświęcenia, nie ma wygranej bez ofiary... Czy Schuyler jest gotowa na to by pójść w ślady Michaela i uczynić to, co właściwe? Miłość i zemsta, obowiązek i lojalność. Życie i śmierć. Od decyzji jednej osoby mogą zależeć losy całego znanego świata.</p>

Kod szablonu do opisu ebooków:

<img style="border:1px solid #524F42; float:left; margin:0 15px 0 0;" src="http://chomikuj-wyszukiwarka.eu/komponenty/grafika/okladka-ebooka.png" title="Tytuł ebooka" alt="Tytuł ebooka" width="200" height="280" />
<ul style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; list-style:square inside; padding:0; margin:0;">
  <li style="float:none;">Autor: <strong>Wpisz tutaj imię i nazwisko autora</strong></li>
  <li style="float:none;">Kategoria: <strong>np.: Kryminał, Fantastyka, Literatura popularnonaukowa ...</strong></li>
  <li style="float:none;">Liczba stron: <strong>Podaj liczbę stron</strong></li>
  <li style="float:none;">Data wydania: <strong>Wpisz datę wydania, np.: 24 czerwca 2013</strong></li>
</ul>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; padding:0; margin:13px 0 0;">W tym miejscu wpisz opis ebooka.</p>