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 "/"
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:
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 h1Nagłówek h2Nagłówek h3Nagłówek h4Nagłówek h5Nagłó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 < b>< i> | 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>:
| 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 |
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 | Pierwsza 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