Krótki samouczek języka HTML od MobilePL <center>OBIEKT NA ŚRODKU</center> <p>TEN TEKST JEST OBNIŻONY O LINIJKĘ</p> <b>POGRUBIENIE</b> <i>TEKST POCHYLONY</i> <a href="adres odnośnika">TWÓJ TEKST DO ODNOŚNIKA</a> <a href="adres odnośnika np. folderu... strony."><img src="adres obrazka odnośnika" /></a> <img src="adres obrazka" width="100" height="100" /> /\ /\ .____________||____________||__________. |Szerokość obrazka | Wysokość obrazka | |__________________|___________________| .___________________________________. |Tutaj możesz wprowadzić także: | |<b style= dla pogrubienia, czy | |<i style= dla przechylenia czcionki| |__||_______________________________| \/ <span style="font-family:'Monotype Corsiva';font-size:24px;color:#00CC33;">TEN TEKST JEST OKREŚLONY WYBRANĄ CZCIONKĄ, WIELKOŚCIĄ ORAZ KOLOREM</span> /\ /\ /\ ._______________________||____________________||____________||__________________________. |Czcionkę możesz zmienić kopiując| rozmiar możesz |tabelę kolorów masz zamieszczoną | |wybraną nazwę z programu WORD | zmienić np.na 20 |w pliku WORD o nazwie kolory HTML | |________________________________|___________________|__________________________________| ---"RAMKA I JEJ WŁAŚCIWOŚCI"--- .________________________________________________________. | wyskokość ramki | grubość ramki| Szerokość ramki | |___________||_____|______||______|__||__________________| \/ \/ \/ <table style="height: 400px;" border="0" width="810"> <tbody> <tr> <td align="center"> TUTAJ MOŻESZ WPROWADZIĆ DOWOLNY KOD, ALE PAMIĘTAJ ABY PO ZAKOŃCZENIU WPROWADZANIA DLA TEJ RAMKI KODÓW ZAMKNĄĆ JĄ... TYM</td> <td align="center"> OTO SĄSIADUJĄCA RAMKA, TAK JAK W POPRZEDNIEJ NIE ZAPOMNIJ O ZAMKNIĘCIU</td> </tr> </tbody> </table> ================WŁAŚCIWOŚCI <tr>tworzy ramki piętrowe</tr> <td>tworzy ramki sąsiadujące</td> *info Najlepiej dla ramek różnego rzędu, tworzyć cały kod z osobna tzn. tak jak powyżej lub tym samym kodem zmieniając jedynie <td align="center"> na <tr align="center">tym samym dla tego kodu stosując odpowiednie zakończenie względem tego polecenia</tr> /\ .________||______________________________. |Możesz użyć także: "left" lub "right" | |w zależności jak chcesz, aby dany efekt | |był położony w danej ramce. | |________________________________________| *Pamiętaj, że wklejanie kodów ze stron z dodatkami może przerwać Twój kod ramki, ponieważ może zawierać to samo polecenie ramki. W takim przypadku musisz usunąć z pobranego kodu jedne z w/w poleceń tak, aby nie popsuć dodatku. Jest to trochę skomplikowane, ale możliwe :) ---"Tło strony"--- ._________________________________________________. ._____________________________________________________________________________________|TUTAJ MOŻESZ WPROWADZAĆ KODY RAMEK, OBRAZÓW ITD. | | Szerokość tła | Wyskość tła | Tutaj wklej adres tła | TU nie musisz |Pamiętaj, aby dostosować wysokość i szerokość tła| | | | | nic zmieniać |względem zawartości strony. | |____________||_______|______||___________|________________||_________|__________||___|__||_____________________________________________| \/ \/ ` \/ \/ \/ <div style="border: 0px none; width: 810px; height: 220px; background-image: url(http://); text-align: center;"> </div> /\ ._______||__________________. |Wstaw to na samym końcu | |edytowanego pola,do momentu| |gdzie chcesz, aby było dane| |tło. Aby kontynuować innym | |tłem,należy wprowadzić całą| |komendę zaraz po jej | |poprzednim zakończeniu. | |___________________________| *info Pamiętaj o umieszczeniu kodu tła na samym początku edytora HTML ----------------------"inne przydatne"---------------------- *WYSKAKUJĄCY 1 KOMUNIKAT <p><script type="text/javascript"><!--alert("Tutaj wpisz swój tekst")// --></script></p> ----------------------------------------------------------------------------------------- *Teraz pokażę Ci, jak wykonać inną wersję komunikatu systemowego z opcjami wyboru - potwierdzenia wejścia na stronę (OK) lub jej opuszczenia (ANULUJ). Oto kod do skopiowania i wklejenie na swój profil, zgodnie z wyżej zamieszczonym opisem: <p> <script type="text/javascript"><!--function Info() {if (!confirm("Twój tekst, nic innego nie zmieniaj poza tym tekstem między apostrofami")) history.go(-1);return " "}document.writeln(Info())// --></script></p> ----------------------------------------------------------------------------------------- *Przesunięcie od prawej o 40px, oczywiście masz możliwość zmiany right na left lub center - co znaczy od której strony ma być przesunięty obiekt. :40px na miejsce przez Ciebie wybrane w danym miejscu <span style="padding-right:40px;"> cały tekst lub pełny kod </span> ----------------------------------------------------------------------------------------- OPRACOWAŁ: MOBILEPL 1) Tworzenie linków tekstowych 2) Tworzenie linków obrazkowych 3) Wstawianie grafiki 4) Rodzaje czcionek 5) Wielkość czcionki 6) Kolor czcionki 7) Tekst pogrubiony 8) Tekst pochylony 9) Tekst podkreślony 10) Łączenie styli formatujących tekst 1) 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 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: HTML: <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 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: 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> Dobrym pomysłem na wykorzystanie linków obrazkowych na 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" /> Krok po kroku, jak umieścić obrazek w opisie swojego Chomika: Przejdź na stronę Chomikuj.pl i zaloguj się do swojeg...
Mirun321