Kurs HTML w pigułce, przeznaczony dla osób które prowadzą swojego bloga lub sprzedają na aukcjach (i nie tylko).
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 informacjeJę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 |
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 h3Nagłówek h4 Nagłówek h5 Nagłówek h6 |
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 |
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 |
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
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> |
|
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> |
|
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.
----------
Daniel Frużyński jest to uznany specjalista w dziedzinie tworzenia oprogramowania i stron internetowych. Na codzień pracuje w dużek firmie telekomunikacyjnej jako Software Developer. W wolnym czasie dużo czyta i zajmuje się swoją stroną www.poradnik-webmastera.com
----------
Ten artykuł pochodzi z serwisu Artykularnia.pl - źródła darmowych artykułów do przedruku!
Źródło: Daniel Frużyński