Kurs HTML - HTML - HTML dla zielonych.pdf - Gotowe kody jak upiekszyc chomika! - casa32

Kurs HTML - HTML - HTML dla zielonych

Strona 1

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, Extra Page,

HateML Pro, kED, Kicia, PSPad, WebSite PRO, Zajączek, 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 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

http://www.kurshtml.boo.pl/html/zielony.print.html

2008-02-07 18:38:34

Kurs HTML - HTML - HTML dla zielonych

Strona 2

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)

http://www.kurshtml.boo.pl/html/zielony.print.html

2008-02-07 18:38:34

Kurs HTML - HTML - HTML dla zielonych

Strona 3

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ę

http://www.kurshtml.boo.pl/html/zielony.print.html

2008-02-07 18:38:34

Kurs HTML - HTML - HTML dla zielonych

Strona 4

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.

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)

http://www.kurshtml.boo.pl/html/zielony.print.html

2008-02-07 18:38:34

Kurs HTML - HTML - HTML dla zielonych

Strona 5

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. Poza tym istnieją przypadki, w których znajomość choćby podstaw

HTML jest wprost niezbędna.

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

http://www.kurshtml.boo.pl/html/zielony.print.html

2008-02-07 18:38:34

Kurs HTML - HTML - HTML dla zielonych.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: