Loading

wtorek, 16 listopada 2010

HTML dla bloggerów i aukcjonariuszy

Autorem artykułu jest Daniel Frużyński



HTML dla bloggerów i aukcjonariuszy
Podstawy HTML które i Ty możesz poznać łatwo i szybko

Ten mini-poradnik napisałem z myślą o osobach które prowadzą własny blog bądź sprzedają coś na aukcjach internetowych. Tego typu serwisy często oferują możliwość wykorzystania HTML do formatowania tekstu. Niestety nie wszystkie z nich oferują na swych stronach wygodne narzędzia do tego celu, przez co możliwość stworzenia ładnie wyglądającej aukcji czy wpisu w blogu zostaje zarezerwowana dla grona "wtajemniczonych". Teraz i Ty możesz do nich dołączyć!



Podstawowe informacje

Język HTML korzysta z tzw. znaczników. Każdy z nich rozpoczyna się znakiem mniejszości, a kończy znakiem większości:

Podany powyżej znacznik jest nazywany także znacznikiem otwierającym. Nazwa bierze się z faktu, że w HTML większość znaczników należy "zamknąć", używając znacznika otwierającego, którego nazwa poprzedzona jest znakiem slash "/"

kawałek tekstu

Znacznik może posiadać także atrybuty, które służą do ustalenia szczegółów jego działania. Stosowane one są tylko dla znacznika otwierającego; znacznik zamykający nie może mieć atrybutów. Jeżeli jest taka potrzeba, można równocześnie podać kilka atrybutów:

tekst

Znaczniki można zagnieżdzać (czyli umieszczać jeden w drugim). Trzeba tylko pamiętać aby zamykać je w odwrotnej kolejności niż były otwierane - zaczynając od tego który był otwarty jako ostatni. Pomyśl sobie o tym jak o stosie talerzy - zawsze możesz zdjąć z niego tylko ten, który położyłeś tam jako ostatni.

Dobrze

Zła kolejność

Kilka dodatkowych uwag zanim stworzysz swoją pierwszą stronę WWW:


wielkość znaków nie ma znaczenia - zarówno w nazwach znaczników, jak i w atrybutach;
kilka spacji (odstępów) umieszczonych obok siebie jest traktowanych jako jedna spacja;
znaki nowej linii (entery) są traktowane tak jak spacja - nie przenoszą tekstu do kolejnego wiersza, tylko wstawiają odstęp. Uwaga z poprzedniego punktu też się ich dotyczy.


Pierwsza strona WWW

Poniżej znajduje się kod HTML Twojej Pierwszej Strony WWW. Przepisz go w Notatniku, lub w innym edytorze tekstu który nie używa formatowania tekstu, i zapisz na dysku jako plik z rozszerzeniem .html (np. index.html). Edytor MS Word z pakietu MS Office, lub inny podobny nie nadaje się do tego celu gdyż domyślnie zapisuje w pliku informacje o formatowaniu tekstu i wielu innych rzeczach, które są niepożądane.

< html>

< head>

< title>Moja Pierwsza Strona WWW



< body>

To jest Moja Pierwsza Strona WWW





Krótki komentarz do powyższego kodu:


Znacznik < html> rozpoczyna dokument HTML i zawiera w sobie wszystkie inne znaczniki;
Znacznik < head> zawiera wewnątrz informacje o dokumencie HTML, które zazwyczaj nie są wyświetlane przez przeglądarkę. Jedynym wyjątkiem jest zastosowany tutaj znacznik < title>, który zawiera w sobie tytuł strony (jest on wyświetlany na pasku tytułu przeglądarki);
Znacznik < body> zawiera w sobie "ciało" dokumentu HTML, czyli to co się wyświetla w oknie przeglądarki WWW. To co znajduje się wewnątrz tego znacznika jest to ta część którą będziesz umieszczał(a) w opisie aukcji, lub w swoim blogu.


Paragrafy i łamanie linii

Aby utworzyć paragraf (blok) tekstu, należy użyć znacznika

. Znaczników tych nie powinno się zagnieżdżać. Po każdym wstawionym paragrafie przeglądarka wstawi dodatkowy wiersz odstępu. Jeżeli wiersze będą dłuższe niż szerokość okna przeglądarki, zostaną one odpowiednio złamane.

Uwaga: Od tego momentu do każdego fragmentu kodu HTML będę dodawał (w prawej części tabelki) przykład jak on wygląda w przeglądarce WWW.









Paragraf pierwszy



Paragraf drugi



Paragraf pierwszy



Paragraf drugi


Jeżeli chcesz złamać linię w dowolnym miejscu, ale nie chcesz kończyć bieżącego paragrafu, możesz użyć znacznika
. Znacznik ten jest jednym z niewielu które nie wymagają zamykania:









Pierwsza linia


Druga linia
Pierwsza linia

Druga linia


Nagłówki

W języku HTML można korzystać z sześciu predefiniowanych nagłówków. Wstawia się je za pomocą znaczników < h1>, < h2>, < h3>, < h4>, < h5>, < h6>.









Nagłówek h1



Nagłówek h2



Nagłówek h3



Nagłówek h4



Nagłówek h5


Nagłówek h6

Nagłówek h1
Nagłówek h2
Nagłówek h3
Nagłówek h4
Nagłówek h5
Nagłówek h6


Wyrównanie tekstu

Tekst wewnątrz paragrafów (

) i nagłówków (od < h1 > do < h6>) domyślnie wyrównana jest do lewej strony. Można to zmienić poprzez użycie atrybutu align, i wpisanie jako jego wartości sposobu wyrównania: left (do lewej), center (wycentrowane), right (do prawej).









Wyrównanie do lewej



Wyrównanie do środka



Wyrównanie do prawej



Wyrównanie do lewej



Wyrównanie do środka



Wyrównanie do prawej



Pogrubienie, pochylenie, podkreślenie i przekreślenie

Tytułowe formatowanie tekstu można uzyskać poprzez zastosowanie następujących znaczników:


pogrubienie - znacznik < b>;
pochylenie - znacznik < i>;
podkreślenie - znacznik ;
przekreślenie - znacznik ;









Tekst pogrubiony


Tekst pochylony


Tekst podkreślony


Tekst przekreślony


< b>< i>Tekst pogrubiony, pochylony, podkreślony i przekreślony< s>< u>< i>< b>
Tekst pogrubiony

Tekst pochylony

Tekst podkreślony

Tekst przekreślony

Tekst pogrubiony, pochylony, podkreślony i przekreślony


Zmiana parametrów czcionki

Do zmiany parametrów czcionki służy znacznik < font>. Poszczególne parametry kontroluje się za pomocą podania odpowiednich atrybutów:


kolor - atrybut color. Jako jego wartość należy podać angielską nazwę koloru, lub jego kod (więcej na ten temat znajdziesz na innych stronach internetowych):









< font color="red">Tekst czerwony


Tekst zielony


Tekst niebieski
Tekst czerwony

Tekst zielony

Tekst niebieski



wielkość - atrybut size. W HTML można podać wielkość od 1 (najmniejsza) do 7 (największa). Można podać także wielkość jako "+N" lub "-N", aby odpowiednio powiększyć lub pomniejszyć wielkość czcionki o N. Podane wielkości czcionek nie odnoszą się do żadnej określonej miary wielkości czcionek (np. punkty lub piksele), lecz wynikają ze standardu HTML. Każda przeglądarka przypisuje im sama odpowiednie wielkości "fizyczne".









Tekst o wielkości 1


Tekst o wielkości 2


Tekst o wielkości 3


Tekst o wielkości 4


Tekst o wielkości 5


Tekst o wielkości 6


Tekst o wielkości 7


Tekst o wielkości +2


Tekst o wielkości -1


Tekst o wielkości 1

Tekst o wielkości 2

Tekst o wielkości 3

Tekst o wielkości 4

Tekst o wielkości 5

Tekst o wielkości 6

Tekst o wielkości 7

Tekst o wielkości +2

Tekst o wielkości -1



nazwa (krój) czcionki - atrybut face:









Czcionka Arial


Czcionka Times New Roman


Czcionka Courier New


Czcionka Verdana


Czcionka Tahoma


Czcionka Arial

Czcionka Times New Roman

Czcionka Courier New

Czcionka Verdana

Czcionka Tahoma





Listy wypunktowane i numerowane

Listę wypunktowaną tworzy się za pomocą znacznika < ul>. Wewnątrz niego umieszcza się poszczególne punkty, każdy wewnątrz znacznika < li>:









    < li>Punkt pierwszy
  • Punkt drugi

    < li>Punkt trzeci


Punkt pierwszy
Punkt drugi
Punkt trzeci

Listę wypunktowaną tworzy się podobnie jak listę wypunktowaną. Różnica polega jedynie na użyciu znacznika < ol> zamiast < ul>:









< ol>

  • Punkt pierwszy



  • Punkt drugi



  • Punkt trzeci





  • Punkt pierwszy
    Punkt drugi
    Punkt trzeci


    Znaki specjalne

    Język HTML definiuje wiele specjalnych kodów (tzw. encji), za pomocą których można uzyskać znaki które mają specjalne znaczenie dla języka HTML, lub trudno byłoby je uzyskać w inny sposób. Każdy z nich rozpoczyna się znakiem ampersand (&), a kończy średnikiem. Oto te najczęściej używane:


    < -
    > - >
    & - &
    " - "
    © - ©
      - niełamalna (twarda) spacja. Sprawia że dwa wyrazy połączone za jej pomocą zawsze będą w jednym wierszu. Dodatkowo nie jest ona traktowana jako zwykła spacja, czyli po wstawieniu kilku z nich w linii przeglądarka wyświetli wszystkie z nich, a nie tylko jedną. Można to użyć np. do tworzenia wcięć:









       Pierwsza linia


    Druga linia





    Pierwsza linia

    Druga linia






    Podsumowanie

    Po przeczytaniu tego artykułu posiadasz już pewną podstawową wiedzę na temat języka HTML, którą możesz zacząć wykorzystywać w praktyce. Jest to jednak zaledwie wprowadzenie i wiele ciekawych, ale bardziej zaawansowanych tematów zostało pominiętych, jak np. wstawianie tabel, odnośników (linków) do innych stron czy obrazków. Pełny Kurs języka HTML znajdziesz w serwisie Poradnik Webmastera.

    ---

    Artykuł pochodzi z serwisu www.Artelis.pl

    Brak komentarzy:

    Prześlij komentarz