HTML dla zielonych.docx

HTML dla zielonych

W tym rozdziale dowiesz się...

·         Czy tworzenie stron internetowych naprawdę jest tak trudne jak mówią?

·         Który edytor (X)HTML wybrać: Pajączek, CoreEditor, Ager Web Edytor, EdHTML, ezHTML, HateML Pro, kED, PSPad, Web Edit, Bluefish, gedit, Kate, Quanta Plus, SCREEM, Smultron, Taco HTML Edit?

·         Czy Twój edytor HTML obsługuje polskie znaki? Co zrobić, jeśli nie ma polskich liter w dokumentach HTML?

·         Jak wygląda typowy dokument HTML (XHTML)? Co to są podstrony?

·         W jaki sposób wpisuje się tekst na stronach WWW? Jakie są zasady poprawnego wpisywania znaków interpunkcyjnych w tekście komputerowym?

·         Co to są znaczniki HTML?

·         W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?

·         W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst? Co to są atrybuty HTML?

·         W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?

·         W jaki sposób pochylić tekst na stronie WWW (kursywa)?

·         W jaki sposób podkreślić tekst na stronie WWW?

·         W jaki zmienić rozmiar czcionki na stronie WWW?

·         W jaki sposób zmienić kolor czcionki na stronie WWW?

·         W jaki zmienić rodzaj czcionki na stronie WWW?

·         W jaki sposób zmienić wygląd tekstu na stronie WWW?

·         W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

·         W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW?

·         W jaki sposób określić ustawienie obrazka (grafiki, zdjęcia) na stronie WWW?

·         W jaki sposób ustawić obrazek (grafikę, zdjęcie) lub inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?

·         Do czego służą odsyłacze (hiperłącza, linki, odnośniki hipertekstowe)?

·         Jak wstawić link (odsyłacz, hiperłącze, odnośnik hipertekstowy) na stronie WWW?

·         Jak wstawić adres e-mail na stronie WWW?

·         W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy (graficzny), czyli klikalny przycisk?

·         Czego unikać, aby Twoja strona WWW nie odstraszała internautów?

Zaczynamy!

Widzę, że jesteś "zielony/zielona"... ale nic się nie martw. Jeśli koniecznie chcesz "zmienić kolor", przeczytaj umieszczony poniżej tekst. Pozwoli Ci on, stworzyć Twoją pierwszą stronę internetową, nawet w ciągu jednego dnia. Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Napisanie krótkiej strony internetowej jest prostsze niż Ci się wydaje. Zatem nie trać już czasu na wymówki typu: Ja się niczego nie nauczę! i tym podobne, bo to nieprawda. Zacznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

Wyjaśnienie

W większości miejsc tego kursu jest mowa o języku HTML, jednak tak naprawdę nauczysz się tutaj stosować język XHTML, który jest jego następcą i zarazem aktualnym standardem. Określenie "HTML" będzie dalej używane raczej w znaczeniu ogólnego języka opisującego strukturę dokumentów stron WWW. Nie musisz się jednak obawiać, że Twoja strona nie będzie działać prawidłowo, ponieważ przedstawiane tutaj polecenia są napisane w taki sposób, aby były poprawne również w języku HTML i prawidłowo prezentowane także w starszych przeglądarkach internetowych. Sam język XHTML 1 nie różni się diametralnie od swojego poprzednika - m.in. właśnie dlatego często stosuje się zapis "(X)HTML", co sugeruje, że strona jest poprawna pod względem obu tych języków - a więc za jednym zamachem nauczysz się zasad zarówno XHTML jak i HTML. Czytając ten kurs, poznasz zasady projektowania stron WWW zgodnie z najnowszymi technologiami, a jednocześnie działających także w starszych przeglądarkach.

Źródła

Opis tutaj zawarty, został opracowany na podstawie następujących specyfikacji:

·         HTML 4.01 Specification

·         XHTML 1.0 The Extensible HyperText Markup Language

·         XHTML 1.1 - Module-based XHTML

Edytory

Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. Dokument (X)HTML, czyli (Extensible) Hypertext Markup Language - (Rozszerzalny) Hipertekstowy Język Oznaczania, jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę. Poniżej znajdziesz listę popularnych edytorów HTML (kolejność wg licencji i alfabetycznie). Informacje częściowo zostały zaczerpnięte ze stron producentów.

Windows

Pajączek (shareware - płatny)

Najbardziej znany polski edytor HTML rozwijany od lat. Oferuje szerokie wsparcie dla najnowszych technologii internetowych, z których warto wymienić takie jak HTML, XHTML, XML, PHP, JavaScript, VBScript, Perl, MathML, SVG, SMIL, P3P, ASP i inne. Wsparcie to dotyczy nie tylko ułatwionej edycji plików źródłowych w tych językach - program oferuje bowiem kontekstową dokumentację dla wybranego polecenia języka, przeglądanie za pomocą serwera czy funkcję dynamicznego kodu, która uwalnia od konieczności pamiętania poleceń języka.

CoreEditor (płatny - dostępna wersja DEMO)

Tańszy konkurent Pajączka, następca darmowego EdHTML przepisany zupełnie od nowa. Bardzo dobrze spisuje się jako edytor dla osób programujących w Pascalu, Asemblerze, Delphi, C, Java itd. Niemniej największy nacisk położony został na wsparcie dla takich technologii jak xHTML, CSS, PHP, JavaScript i MySQL.

Ager Web Edytor (darmowy)

Oprócz HTML i CSS, wspiera również programowanie w językach JavaScript i PHP. Posiada generatory do automatycznego podłączenia pluginów takich jak: Media Pleyer, QuickTime, Flash, RealMedia, a także kreatory znaczników HTML, deklaracji CSS oraz skryptów JavaScript. Obsługuje makrokody i encje HTML.

EdHTML (darmowy)

Uniwersalny edytor do HTMLa. Wspiera również XHTML, CSS, JavaScript i PHP. Bardzo dobrze koloruje składnię, pozwala na proste testowanie stron we wbudowanych przeglądarkach, pozwala także na testowanie skryptów PHP nie wychodząc z programu. Program zawiera wiele wbudowanych narzędzi, np. kompresor HTML, konwerter polskich znaków itp. Dzięki szablonom i rozbudowanej pomocy pomaga początkującym webmasterom.

Edytor Znaczników HTML - ezHTML (darmowy)

Dostęp do wszystkich możliwości języka HTML dają zakładki - pomieszczone na nich zostały wszystkie istotne znaczniki. Można także skorzystać z listy znaczników zawierającej wszystkie tagi standardu HTML 4.0. Wiele czynności automatyzują "czarodzieje" i inne kreatory. Warto także zwrócić uwagę na konfigurowalny interfejs (pasek użytkownika, na który można przenieść najczęściej używane polecenia), edytor kolorujący znaczniki oraz inne drobne ułatwienia (np. powtórne wstawienie ostatnio użytego znacznika, podpowiedzi składniowe, automatyczne zamykanie znaczników).

HateML Pro (darmowy)

Edytor przeznaczony zarówno dla początkujących jak i zaawansowanych webmasterów.Wspomaga tworzenie stron z użyciem XHTML, PHP, CSS, SQL (m.in. MySQL, Oracle, MSSQL7, MSSQL2000, Interbase6), JavaScript i VBScript. Posiada wbudowany inspektor tagów, parser HTML i PHP oraz prosty edytor WYSIWYG. Program został również wyposażony w narzędzia mające na celu optymalizację kodu - m.in. narzędzie HTMLTidy służące do sprawdzania poprawności kodu, narzędzie kompresujące kod, oraz możliwość bezpośredniego wysłania kodu do narzędzia Validator W3C. Ułatwieniem dla programistów piszących w PHP jest możliwość bezpośredniego uruchamiania kodu PHP z poziomu programu (bez konieczności uruchamiania serwera).

kED (darmowy)

Edytor plików HTML, CSS, XML, PHP, JavaScript. Edycja wielu dokumentów jednocześnie, rozbudowana edycja tabel (w tym oczyszczanie tabel zapisanych przez MS-Word). Możliwość wyboru dodatkowych zewnętrznych przeglądarek. Wbudowany prosty mechanizm sprawdzania struktury dokumentu - "rysuje" on sprawdzany dokument w postaci drzewa, dzięki czemu łatwiej zobaczyć, czy wszystkie znaczniki są prawidłowo podomykane.

PSPad (darmowy)

Szybki i lekki edytor produkcji czeskiej, jednak radzący sobie z kodowaniem polskich znaków lepiej niż niejeden rodzimy program. Oczywiście posiada polską wersję językową. Uwaga: zaraz po instalacji należy w ustawieniach programu usunąć skróty klawiaturowe kolidujące z kombinacjami służącymi do uzyskania polskich znaków diakrytycznych (np. Alt+L)!
Wspiera m.in. następujące języki: (X)HTML, XML, CSS, JavaScript, PHP, C/C++, Java, Pascal, Perl, Python, RSS, SQL (MySQL, Interbase, MSSQL, Oracle, Sybase), Visual Basic, Assembler. Pozwala korzystać z szablonów dokumentów. Ma wbudowany podgląd dokumentów za pomocą Internet Explorera i Mozilli. Integruje się z zewnętrznymi programami, między innymi edytorem CSS. Obsługuje mechanizm wtyczek. Zawiera narzędzie do kompresji i dekompresji kodu HTML oraz rozbudowany eksplorator kodu z listą funkcji i elementów zawartych w edytowanym dokumencie. Posiada zaimplementowaną funkcję dopasowywania nawiasów, podpowiedzi oraz kreatory znaczników i funkcji, które można samodzielnie tworzyć i modyfikować. Obsługuje makrokody. Zawiera wbudowane narzędzie do porównywania plików oraz wyszukiwania i zamiany w wielu plikach jednocześnie. Przydatną funkcją jest także próbnik kolorów ekranu, tabela znaków ASCII oraz sprawdzanie pisowni.

Web Edit (darmowy)

Wsparcie m.in. języków: HTML i XHTML, CSS, PHP. Zawiera generatory: tabele, formularze, listy, bloki tekstowe, wideo, Flash, obrazy. Inteligentna funkcja podpowiedzi kodu ułatwia wstawianie atrybutów bez potrzeby ich pamiętania. Znajdziemy tutaj również gotowe do użycia przykłady skryptów PHP i JavaScript, wbudowane sprawdzanie składni HTML oraz możliwość instalacji wtyczek.

Linux

Bluefish (darmowy)

Szybki i lekki edytor dla webmasterów-programistów. Posiada również wbudowany graficzny tryb edycji. Wspiera m.in.: HTML, PHP, C, Java, JavaScript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion, Pascal. Zawiera kreatory znaczników HTML, a także specjalne dla szkieletu strony, tabel, ramek, albumów zdjęć itp. Automatyczne domyka znaczniki. Posiada wbudowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie oraz przeglądarkę dokumentacji znaczników i funkcji. Integruje się z innymi aplikacjami. Istnieje polska wersja językowa.

gedit (darmowy)

Oficjalny edytor środowiska GNOME, cechujący się prostotą. Wspiera m.in.: C, C++, Java, HTML, XML, Python, Perl. Automatycznie dodaje wcięcia linii kodu oraz dopasowywuje nawiasy. Obsługuje wtyczki, np.: statystyki dokumentu, integracja z zewnętrznymi aplikacjami, makrokody, lista znaczników.

Kate (darmowy)

Wchodzi w skład środowiska KDE. Dostępna również uproszczona wersja pod nazwą KWrite. Podświetla składnię, dopasowuje nawiasy oraz automatyczne dodaje wcięcia linii kodu. Obsługuje autouzupełnianie, a także mechanizm wtyczek. Wbudowana jest funkcja sprawdzanie pisowni oraz konwersja kodowania znaków.

Quanta Plus (darmowy)

Wchodzi w skład środowiska KDE. Podświetla składnię m.in.: (X)HTML, XML, XSLT, CSS, JavaScript, Java, PHP, C/C++, C#, Python, Perl, SQL (MySQL, PostgreSQL), Assembler, ASP, JSP, Pascal. Dopasowuje i automatycznie domyka nawiasy, jak również dodaje wcięcia linii kodu. Zawiera liczne kreatory znaczników, zaawansowane autouzupełnianie, podpowiedzi i automatyczne zamykanie znaczników. Umożliwia podgląd dokumentu w kilku trybach oraz przeglądarkach (Konqueror, Firefox, Mozilla, Netscape, Opera, Lynx). Posiada edytor znaczników i atrybutów, a także zaawansowany eksplorator struktury dokumentu. Załączona jest dokumentacja dla języków HTML, CSS, JavaScript, PHP. Zawiera szablony dokumentów i skryptów. Obsługuje wtyczki oraz integruje się z innymi aplikacjami. Posiada zintegrowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie, porównywania plików oraz edytor map odsyłaczy. Wspiera CVS. Wbudowana jest funkcja sprawdzania pisowni.

SCREEM - Site CRreation and Editing EnvironMent (darmowy)

Zawiera eksplorator linków z możliwością sprawdzenia martwych odnośników. Udostępnia kreatory, autouzupełnianie, podpowiedzi i automatycznie zamykanie znaczników. Obsługuje szablony dokumentów (interpretuje pliki programu Dreamweaver). Wspiera CVS. Posiada wbudowany eksplorator struktury dokumentu. Integruje się z innymi aplikacjami. Zawiera narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie.

Mac OS X

Bluefish (darmowy)

Oprócz wersji dla systemu Linux, edytor ten dostępny jest także dla Mac OS X. Opis powyżej.

Smultron (darmowy)

Oferuje podświetlanie składni, tworzenie biblioteki snippetów, czyli często używanych bloków kodu. Posiada eksplorator funkcji występujących w edytowanym dokumencie. Obsługuje autouzupełnianie i automatyczne domykanie znaczników. Zawiera wbudowane narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie. Obsługuje AppleScript.

Taco HTML Edit (darmowy)

Obsługuje podświetlanie składni HTML i PHP. Kontroluje poprawność składni. Udostępnia podgląd edytowanych dokumentów - w tym dynamiczny. Zawiera liczne kreatory. Umożliwia zapisywanie często używanych bloków kodów w bibliotece.

Jeśli nie wiesz, który edytor (X)HTML będzie dla Ciebie odpowiedni albo wolisz poszukać programu obcojęzycznego, to dodatkowe opisy i porównania wraz z plikami do ściągnięcia znajdziesz np. w serwisie Onet.pl lub w magazynie Chip.

Z uwagi na fakt, że obowiązującym obecnie standardem jest język XHTML (następca HTML), wskazanym było by zaopatrzyć się w edytor, który wspiera również ten język.

Istnieją również edytory graficzne, tzw. WYSIWYG (ang. What You See Is What You Get, czyli To Co Widzisz Jest Tym Co Otrzymasz). Jest nim choćby FrontPage dostępny w pakiecie biurowym Microsoft Office. Aby się nimi posługiwać, nie musisz wcale znać języka HTML, ponieważ stronę tworzy się w nich jak w zwykłym edytorze tekstu, a cały kod HTML generuje automatycznie program. Ale nie ma nic za darmo (no może oprócz tego kursu :-). Takie edytory nie dają Ci pełnej kontroli nad zawartością strony. Możesz korzystać z bogatych narzędzi, lecz czasami nauka wszystkich możliwości takiego edytora, może zabrać więcej czasu, niż nauka podstaw HTML. Dodatkowo generują "nadmiarowy" kod, co zwiększa objętość strony oraz powoduje, że bardzo trudno ją później modyfikować przy użyciu edytorów tekstowych. Często wywołuje to również nieprawidłowy sposób wyświetlania w niektórych popularnych przeglądarkach internetowych - np. strony tworzone w edytorze FrontPage, najlepiej wyświetlają się w przeglądarce Internet Explorer. Poza tym istnieją przypadki, w których znajomość choćby podstaw HTML jest wprost niezbędna, ponieważ edytory graficzne po prostu nie udostępniają wszystkich możliwości lub uzyskany efekt nie do końca jest zgodny z oczekiwaniami.

Chociaż stronę WWW można napisać w zwykłym edytorze tekstu, absolutnie nie polecam tej metody! Po pierwsze łatwo w ten sposób popełnić błędy literowe w nazwach poleceń HTML, co spowoduje błędy w wyświetlaniu strony. Wyspecjalizowane edytory HTML od razu o nich informują, ponieważ każde poprawne polecenie HTML zwykle jest w nich napisane innym kolorem - niepoprawne komendy nie zmieniają koloru. Cała treść w zwykłym edytorze tekstu jest jednolita, co sprawia, że nie zauważymy błędów.

Jeśli do tworzenia dokumentów HTML używasz np. windowsowskiego Notatnika (Notepad), a nie zainstalujesz odpowiedniej nakładki klawiaturowej (patrz następny punkt) i wykorzystasz przedstawiony dalej na tej stronie szablon dokumentu, to znaki: ą, ś, ź, Ą, Ś, Ź zostaną błędnie zakodowane - w przeglądarce internetowej pojawią się w ich miejscu "krzaczki".

Na różnych forach i grupach dyskusyjnych czasem można spotkać trochę żartobliwe wypowiedzi typu: Prawdziwy webmaster nie używa żadnych dodatkowych edytorów, bo tak jest zbyt łatwo. Nigdy nie wierz w takie "bajki"! Prawdziwego webmastera cechują w największym skrócie: wiedza, zdolności oraz umiejętność wykorzystania właściwych narzędzi, które znacznie ułatwiają, a przede wszystkim przyspieszają pracę. Ponadto, z niezrozumiałych powodów, osoby początkujące (choć nie tylko) często twierdzą, że nie używają edytora HTML, bo chcą się "dobrze" nauczyć języka HTML. Takie rozumowanie jest całkowicie błędne! Czy używając zwykłego długopisu nauczymy się pisać gorzej niż gdybyśmy to robili przy pomocy gęsiego pióra i plamiącego atramentu? Przeciwnie - tekst napisany długopisem będzie wyglądał bardziej estetycznie (brak kleksów :-). Przecież zasady pisowni zawsze są takie same, bez względu na narzędzie jakiego używamy. Podobnie wykorzystanie tekstowych edytorów HTML wcale nie oznacza, że gorzej nauczymy się języka HTML. Przyspieszy to tylko naszą pracę i uchroni od popełnianych błędów składniowych, czyli raczej pozwoli nam jeszcze lepiej poznać język HTML. Większość doświadczonych webmasterów-profesjonalistów wykorzystuje tekstowe edytory HTML i Tobie też radzę jak najszybciej zaopatrzyć się w taki. Im wcześniej to zrobisz, tym lepiej dla Ciebie.

Z powyższych powodów jeszcze raz gorąco zachęcam do zainstalowania edytora HTML - najlepiej jakiegoś polskiego darmowego (freeware) - oferta jest dość bogata, a większość z nich udostępnia zupełnie wystarczające funkcje, aby stworzyć świetną stronę WWW.

Polskie znaki

Ten punkt ma charakter raczej już historyczny. Obecnie prawie wszystkie edytory HTML, szczególnie rodzimej produkcji, doskonale radzą sobie z prawidłowym zapisywaniem polskich znaków w dokumentach HTML. Radzę jednak przynajmniej przejrzeć poniższe informacje, aby w razie problemów nie dać się zaskoczyć, a już obowiązkowo zalecam sprawdzić, czy Twój edytor poprawnie zapisuje polskie litery (możesz to zrobić tutaj - jeśli test wypadnie pomyślnie, spokojnie możesz pominąć czytanie tego punktu).

UWAGA!
W niektórych edytorach HTML konieczne jest wybranie kodowania ISO-8859-2 za pomocą odpowiedniej opcji w menu programu.

Uwagi tutaj zawarte dotyczą praktycznie tylko obcojęzycznych edytorów i to tych mniej zaawansowanych. Również użytkownicy Linuxa nie muszą się o nic martwić, ponieważ system ten standardowo koduje znaki w ISO.

Aby rozpocząć pracę, musisz zaopatrzyć się w czcionki, które pozwolą Ci uzyskać polskie znaki ("ogonki"). Powinny to być koniecznie czcionki w standardzie ISO-8859-2. Jest to powszechnie przyjęty i stosowany w polskim Internecie standard kodowania znaków.

Jeśli chcesz używać obcojęzycznego edytora w Windows, który nie potrafi prawidłowo zapisywać polskich znaków w standardzie ISO, przejdź na Polską Stronę Windowsową, a następnie na podstronę: "Klawiatura ISO-8859-2". Można tam pobrać darmową klawiaturę Izy Kibord (dla systemu Windows 95/98/Me lub NT4/2000/XP) oraz czcionkę PolskieStrony 2000.

Następnie trzeba zainstalować pobraną czcionkę w systemie. Aby to zrobić, należy wybrać:
Menu Start/Ustawienia/Panel sterowania/Czcionki/Plik/Zainstaluj nową czcionkę...,
a potem odszukać czcionkę na dysku i kliknąć OK.

W Windows XP aby dotrzeć do apletu "Czcionki", należy wybrać:
Menu Start/Panel sterowania/Wygląd i ...