Witamy na pierwszym polskim blogu o Howrse w zupełnie nowym wydaniu! Zapraszamy na naszą grupę ogłoszeniową na Facebooku - banner z odnośnikiem na bocznej kolumnie.

piątek, czerwca 14

Objaśnienie HTML!

Przy wprowadzaniu zmian westernowych, usunięto znaczki HTML. Rozczarowało to osoby, które nie znają się na kodach. Suwaczki zaczęły znikać i trzeba było z nich zrezygnować. Opiszę tutaj jak ładnie odnowić prezentację z jedną lub wieloma ramkami oraz podam na nie gotowe kody.

UWAGA!
Jeśli napis znajduje się w nawiasach kwadratowych "[ ]" to liczbę lub tekst wpisujemy, usuwając te nawiasy.

Jeśli napis znajduje się w nawiasach "( )" nie usuwaj nawiasów i tekst lub liczbę wpisz w nie.

Pogrubiony tekst należy zamienić na własny według polecenia.

W kodzie jest napis "zapis koluru z palecie rbg" . Co to jest ta paleta?  Są tam zapisane kody do poszczególnych kolorów. W naszym kodzie potrzebny będzie, aby ustalić kolor czcionki.

Kod na 1 ramkę i objaśnienia.
Kod:
<div style="width: [szerokość obrazka]px; height: [wysokość obrazka]px; margin: auto; text-align: center; background-image: url(link do obrazka/tła); background-attachment: scroll; background-color: transparent; background-position: 0% 0%; background-repeat: repeat repeat;" align="center">


<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px; text-align: justify; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]"><div style="text-align: justify;"><h2 style="text-align: center;"><span style="color: rgb(37, 37, 37); font-size: x-small;">Tu wpisz tekst.<br>Tu wpisz tekst&nbsp;</span></h2></div></font></div>


Kod na 2 ramki.
Kod:
<div style="width: [szerokość obrazka] px; height: [wysokość obrazka] px; margin: auto; text-align: center; background-image: url(link do obrazka/tła); background-attachment: scroll; background-color: transparent; background-position: 0% 0%; background-repeat: repeat repeat; " align="center">

<div style="width: [szerokość ramki] px; height: [wysokość ramki]px; margin-top: [położenie względem wysokości]p x; margin-left: [położenie względem lewej strony]px; text-align: justify; line-height: 13pt; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none; letter-spacing: 1px;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]" color="[kolor czcionki z palety rbg]"><div style="text-align: center;">Tu wpisz tekst.<br>Ramka pierwsza.</div></font></div>

<font style="text-shadow: 0px 0px 1px;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]"><div style="width: [szerokość ramki] px; height: [wysokość ramki] px; margin-top: [położenie względem wysokości]  px; margin-left: [położenie względem lewej strony]px; text-align: justify; line-height: 13pt; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none; letter-spacing: 1px;"><div style="text-align: center;">Tu wpisz tekst.<br>Ramka druga.</div></div></font></font></div>

Kod na 3 ramki.
Kod:
<div style="background-image: url(link do obrazka/tła ); width: [szerokość obrazka]px; height: [wysokość obrazka] px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px;"></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><font face="[nazwa czcionki]" size="[rozmiar czcionki]">Tu wpisz tekst.<br><br>Ramka pierwsza.</font></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left:  [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><span style="font-family: [nazwa czcionki];  font-size: x-small;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki];  font-size: x-small;"><br style="font-family: [nazwa czcionki]; font-size: x-small;"><span style="font-family: [nazwa czcionki] ; font-size: x-small;">Ramka druga.</span></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><p style="text-align: center;"></p><div style="text-align: left;"><span style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka trzecia.</span></div></div>

Kod na 4 ramki.
Kod:
<div style="background-image: url(link do obrazka/tła ); width: [szerokość obrazka]px; height: [wysokość obrazka] px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px;"></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><font face="[nazwa czcionki]" size="[rozmiar czcionki]">Tu wpisz tekst.<br><br>Ramka pierwsza.</font></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left:  [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><span style="font-family: [nazwa czcionki];  font-size: x-small;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki];  font-size: x-small;"><br style="font-family: [nazwa czcionki]; font-size: x-small;"><span style="font-family: [nazwa czcionki] ; font-size: x-small;">Ramka druga.</span></div></div>

<div style="width: [szerokość ramki]px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><p style="text-align: center;"></p><div style="text-align: left;"><span style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka trzecia.</span></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka czwarta!</span></div></div></div>

Podstawowe znaczniki HTML:
1. <font style="text-shadow: 0px 0px 1px;">
Pozwala ustawić cień.
2. <font color="#FF0000">
Pozwala ustawić kolor. "#FF0000" oznacza kolor na palecie rbg.
3. <face="Ashley">
Pozwala ustawić dowolną czcionkę. W miejsce "Ashley" należy wpisać nazwę czcionki.

Wyśrodkowanie: <center>TEKST</center>

Pogrubienie tekstu
Kod: <b>Pogrubiony tekst</b>

Podkreślenie tekstu
Kod: <u>Podkreślony tekst</u>

Kursywa
Kod: <i>Pochylony tekst</i>

Przekreślenie
Kod: <s>przekreślony tekst</s>

Migający tekst:
Kod: <blink>Migający tekst</blink>

UWAGA! Wyżej wymienione znaczniki, nie zawsze działają!

Jeśli trudno jest Ci załapać kod to możesz zostawić komentarz, a ja w miarę możliwości spróbuję odpowiedzieć.

Mam nadzieję, że pomogłam.
BellaSwan22

38 komentarzy:

  1. [położenie względem wysokości]- co to oznacza?
    Czy to jest odległość ramki od dolnej krawędzi obrazka czy nie wiem...

    OdpowiedzUsuń
    Odpowiedzi
    1. To jest odległość od górnej krawędzi prezentacji do górnej krawędzi ramki.

      Usuń
  2. http://i-love-howrse.blogspot.com/2012/03/prezentacje-html-nowe-kody.html
    Takie coś znalazłem na blogu... :) Nie wiem akurat, czemu razy 2, ale w sumie... Zobaczymy, kto lepiej wyjaśnił. :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Mój post jest aktualizacją starego. Nowe kody i inne tłumaczenie (:

      Usuń
  3. Mam pytanie, czy w tym nowym przepisie został już poprawiony kod na trzy ramki? Uważam, że poprzedni (autorstwa Lenlivv) nie był prawidłowy, co moje znajome próbujące na nim pracować również potwierdzają. Musiałam sobie dopiero wypracować na jego podstawie własny, "domowy".

    Bello, spróbowałam z kodem na jedną ramkę i za nic nie daje się wyrównać tekstu do lewej. Możliwe, że wina mojego starego komputera albo moja, bo po prostu jestem głupia. ;3 Chyba powinnam odnaleźć znacznik od tego w htmlu...

    Na razie wracam do starych kodów html, tj. do napisanych przez Lenlivv! C:

    OdpowiedzUsuń
    Odpowiedzi
    1. Wszystkie kody są sprawdzone. Mi działają normalnie (:

      Usuń
    2. Okej, no to jeszcze popróbuję. Przepraszam za "raban" c;

      Usuń
    3. A jeśli chodzi o wyrównanie tekstu to trzeba w HTML'u znaleźć "text-align: center;" i zamiast 'center' wpisać 'left' lub 'right' (;

      Usuń
  4. Nie rozumiem jednego-jak zrobić ramkę(nie HTML tylko ramkę)?

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli chodzi o ramkę na grafice to zapraszam do zakładki "Prezentacje".

      Usuń
  5. Gdy zrobiłam kod HTML to tekst wyszedł jakiś pogrubiony, co mam robić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wyłączyć opcje pogrubienia lub to może być taka czcionka.

      Usuń
    2. A jak się wyłącza? Bo nie bardzo wiem...

      Usuń
    3. Zaznaczasz cały tekst i klikasz pierwszy kwadracik z literką "B", podczas edytowania prezentacji (:

      Usuń
    4. Ja nie ufam tym kwadracikom! Zwykle wychodzi zielony tekst. XD

      Usuń
    5. To przez cień xD Niestety odkryłam to dopiero pod kilkunastu zabawach z tym kodem xD Musisz znaleźć "< ont style="text-shadow: 0px 0px 1px;">" i dopisać #000000 (jeśli chcesz czarny xD) Trochę opóźniony zapłon...

      Usuń
  6. Dla mnie lepsze było wcześniejsze... Ale to może z powodu , że znałam inne kody(np. text-shadow) i sama je dodawałam , a pogrubienie itp. przecież można dodać w trakcie pisania w ramkach?

    OdpowiedzUsuń
    Odpowiedzi
    1. Można, ale jak robisz prezentacje na strefa.pl to tam wszystko za pomocą HTML'u.

      Usuń
  7. Belluś, a wiesz, jak to zawsze było czasami "Pod względem dolnej krawędzi", wiesz o co mi chodzi, że na minusie jak było... To teraz już tego nie ma, nie? XD

    OdpowiedzUsuń
    Odpowiedzi
    1. Czasami może być ramka na minusie, np. margin-top: -569px. Jeśli o ty Ci chodziło (:

      Usuń
  8. ...<div style="width: [szerokość ramki] px; height: [szerokość ramki]px; margin-top...
    2 razy szerokość ramki? A gdzie wysokość? Beznadzieny ten kod...

    OdpowiedzUsuń
    Odpowiedzi
    1. Tam, gdzie jest napisane "height", powinniśmy wpisać wysokość (a nie szerokość). Drobna pomyłka. ;)

      Usuń
  9. W kodzie na 4 ramki w pierwszym wierszu też jest położenie ale co mam w nim wpisać, skoro chodzi o tło?

    OdpowiedzUsuń
  10. położenie względem wysokości i położenie względem lewej strony co to jest? I mi zamiast całej prezki wychodzi pół :///

    OdpowiedzUsuń
  11. co się dzieje ramki wychodzą mi pod tłem ;(

    OdpowiedzUsuń
  12. Teraz, jak zostało zmienione, to nie działa na howrse. U.U I trudniejsze.

    OdpowiedzUsuń
  13. Mam chrome i enter robi mi niestworzone rzeczy co zrobić?

    OdpowiedzUsuń
  14. To najlepszy poradnik, który "wpadł" w moje ręce! W końcu znalazłam coś, co jest dla mnie zrozumiałe. =]

    Wielkie dzięki!

    oli2001

    OdpowiedzUsuń
  15. Da się ustawić wielkość czcionki ?
    Jeśli tak, to jak ?

    OdpowiedzUsuń
    Odpowiedzi
    1. font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]">
      Tam gdzie masz "rozmiar czcionki", wpisujesz jakąś cyfrę. Polecam 4-6. Z większymi często tworzy się bałagan.

      Usuń
  16. Czy w presce z jedną ramką zwiększyć czcionkę dla danego wyrazu, np. nicku? I czy mogę zmniejszyć odległość między linijkami, bo mam te odstępy naprawdę duże?

    OdpowiedzUsuń
  17. Mi nie działał ze starych kodów kod na 3 i 4 ramki, a teraz nie działa kod na 4 ramki ! http://www.howrse.pl/joueur/fiche/?id=1527426
    Proszę o pomoc...

    OdpowiedzUsuń
  18. Nie działa mi.. spacje przed [ też mam usunąć?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie, przed nie usuwaj, ale po owszem. Jeśli nawet potem kod nie będzie działał, napisz do mnie na Howrse (nick Lionette).

      Usuń
  19. Co to znaczy ''Położenie względem wysokości''?

    OdpowiedzUsuń
  20. Co znaczy ''położenie względem wysokości''?

    OdpowiedzUsuń
  21. Czy w każdym [...] Trzeba wpisać swój tekst? Chodzi o wymiary itp...

    OdpowiedzUsuń