Jak zwiększyć atrakcyjność swojego Chomika, Jak zwiększyć atrakcyjność swojego Chomika !
[ Pobierz całość w formacie PDF ]
Jak zwiększyć atrakcyjność swojego Chomikallllllllllllllllllllll1. Tworzenie linków tekstowych
Link (inaczej: hiperłącze, odnośnik lub odsyłacz) – to specjalnie wyróżniony tekst lub grafika, po kliknięciu którego zostajemy przeniesieni do innej strony w sieci.
Aby utworzyć link tekstowy na , 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: ).
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: ).
Przykład:HTML:<a href="http://chomikuj.pl/">Darmowy dysk internetowy</a>
Efekt:Lista miejsc w serwisie , 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 obrazkowychW serwisie 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 będzie więc wyglądał 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: ).
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: .
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 na portalu , 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 grafikiKod HTML do wstawiania grafiki na :
<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:Krok po kroku, jak umieścić obrazek w opisie swojego Chomika:lPrzejdź na stronę i zaloguj się do swojego konta jako właścicielllUmieść wybrany obrazek w dowolnym, niezahasłowanym folderze swojego ChomikallKliknij na jego miniaturkę prawym przyciskiem myszy i wybierz "kopiuj adres odnośnika" lub "kopiuj skrót"llPrzejdź do edycji ustawień swojego Chomika klikając w link llW zakładce "Informacje o Chomiku" kliknij przycisk llW miejscu, w którym ma zostać umieszczony obrazek – wpisz kod: <img src="" alt="" />llUmieść 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")llNastępnie pomiędzy dwoma cudzysłowami (fragment kodu: alt="") wpisz kilka słów opisujących obrazekllZaakceptuj zmiany w zawartości HTML poprzez kliknięcie przycisku llZapisz zmiany w opisie Chomika klikając przycisk lW podobny sposób można też wklejać elementy graficzne w "Chomikowych rozmowach" lub w opisach plików i folderów. Należy jednak pamiętać, że umieszczanie zbyt wielu obrazków może utrudnić innym użytkownikom przeglądanie zawartości Twojego Chomika.
4. Rodzaje czcionekCzasami 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 . 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:HTML:<p style="font-family:Georgia;">To jest tekst napisany czcionką Georgia</p>
Efekt:To jest tekst napisany czcionką Georgia
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ść czcionkiKod 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:HTML:<p style="font-size:18px;">To jest tekst napisany czcionką o wielkości 18 pikseli</p>
Efekt:To jest tekst napisany czcionką o wielkości 18 pikseli
6. Kolor czcionkiKod 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:HTML:<p style="color:#FF0000;">To jest tekst napisany czcionką w kolorze czerwonym</p>
Efekt:To jest tekst napisany czcionką w kolorze czerwonym
Podstawowa paleta kolorów:Nazwa
HEX
Kolor
black
#000000
silver
#C0C0C0
gray
#808080
white
#FFFFFF
maroon
#800000
red
#FF0000
purple
#800080
fuchsia
#FF00FF
green
#008000
lime
#00FF00
olive
#808000
...
[ Pobierz całość w formacie PDF ]