HTML dla bloggerów i aukcjonariuszy

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:
<znacznik>
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 "/"
<znacznik>kawałek tekstu</znacznik>
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:
<znacznik atrybut="wartość" abc="xyz">tekst</znacznik>
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.
<b><u>Dobrze</u></b>
<b><u>Zła kolejność</b></u>
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</title>
</head>
<body>
To jest Moja Pierwsza Strona WWW
</body>
</html>

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 <p>. 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.

<p>Paragraf pierwszy</p>
<p>Paragraf drugi</p>

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 <br>. Znacznik ten jest jednym z niewielu które nie wymagają zamykania:

Pierwsza linia<br>
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>.

<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<h3>Nagłówek h3</h3>
<h4>Nagłówek h4</h4>
<h5>Nagłówek h5</h5>
<h6>Nagłówek h6</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 (<p>) 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).

<p align="left">Wyrównanie do lewej</p>
<p align="center">Wyrównanie do środka</p>
<p align="right">Wyrównanie do prawej</p>

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 <u>;
przekreślenie - znacznik <s>;

<b>Tekst pogrubiony</b><br>
<i>Tekst pochylony</i><br>
<u>Tekst podkreślony</u><br>
<s>Tekst przekreślony</s><br>
<b><i><u><s>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</font><br>
<font color="green">Tekst zielony</font><br>
<font color="blue">Tekst niebieski</font><br>
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".

<font size="1">Tekst o wielkości 1</font><br>
<font size="2">Tekst o wielkości 2</font><br>
<font size="3">Tekst o wielkości 3</font><br>
<font size="4">Tekst o wielkości 4</font><br>
<font size="5">Tekst o wielkości 5</font><br>
<font size="6">Tekst o wielkości 6</font><br>
<font size="7">Tekst o wielkości 7</font><br>
<font size="+2">Tekst o wielkości +2</font><br>
<font size="-1">Tekst o wielkości -1</font><br>

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:

<font face="Arial">Czcionka Arial</font><br>
<font face="Times New Roman">Czcionka Times New Roman</font><br>
<font face="Courier New">Czcionka Courier New</font><br>
<font face="Verdana">Czcionka Verdana</font><br>
<font face="Tahoma">Czcionka Tahoma</font><br>

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>:

<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

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>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

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ęć:

<p>   Pierwsza linia<br>
Druga linia</p>

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

Zobacz takze:
Kuchnia otwarta na świat
Efektywne Zarządzanie Firmą - Business Intelligence, ER
Jak filozofia chińska stała się tym, czym jest?
Poszukiwanie pracy w Irlandii
Zalety materaców i poduszek wypełnionych łuską gryki. Z