Kurs HTML dla zielonych.pdf

(860 KB) Pobierz
HTML / HTML dla zielonych - Kurs HTML dla
zielonych
W tym rozdziale dowiesz się...
Kurs języka HTML dla zupełnie początkujących. Napisz własną stronę WWW nawet w ciągu jednego
dnia i wprowadź ją do internetu za darmo. Stworzenie strony WWW jest naprawdę proste.
Zapraszam!
Zaczynamy!
Czy tworzenie stron internetowych naprawdę jest tak trudne jak mówią?
Edytory HTML
Który edytor HTML wybrać: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus,
SCREEM, Smultron?
Ramy dokumentu
Jak wygląda typowy dokument HTML? Co to są podstrony?
Wpisywanie tekstu
W jaki sposób wpisuje się tekst na stronach WWW? Jakie są zasady poprawnego wpisywania znaków
interpunkcyjnych w tekście komputerowym?
Znaczniki
Co to są znaczniki HTML?
Koniec linii
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?
Akapit
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst?
Co to są atrybuty HTML?
Tekst pogrubiony
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?
Tekst pochylony
W jaki sposób pochylić tekst na stronie WWW (kursywa)?
Tekst podkreślony
W jaki sposób podkreślić tekst na stronie WWW?
Wielkość czcionki
W jaki sposób zmienić rozmiar czcionki na stronie WWW?
Kolor czcionki
W jaki sposób zmienić kolor czcionki na stronie WWW?
Rodzaj czcionki
W jaki sposób zmienić rodzaj czcionki na stronie WWW?
Łączenie parametrów
W jaki sposób zmienić wygląd tekstu na stronie WWW?
Kolor tła oraz tekstu
W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?
Wstawienie obrazka
W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW?
Ustawienie obrazka
W jaki sposób określić ustawienie obrazka (grafiki, zdjęcia) na stronie WWW?
Wyśrodkowanie obrazka
W jaki sposób ustawić obrazek (grafikę, zdjęcie) lub inne elementy na środku ekranu (wyśrodkowanie,
centrowanie)?
Odsyłacz do podstrony
Do czego służą odsyłacze (hiperłącza, linki, odnośniki hipertekstowe)?
Odsyłacz do adresu internetowego
Jak wstawić link (odsyłacz, hiperłącze, odnośnik hipertekstowy) na stronie WWW?
Odsyłacz pocztowy
Jak wstawić adres e-mail na stronie WWW?
Odsyłacz obrazkowy
W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy
(graficzny), czyli klikalny przycisk?
Jak zrobić dobrą stronę
Czego unikać, aby Twoja strona WWW nie odstraszała internautów?
Gotowiec HTML
Potrzebujesz na jutro gotowej, profesjonalnie wyglądającej strony HTML (gotowiec) i to zupełnie za
darmo?
Podsumowanie
HTML
Powtórka
HTML
Quiz
HTML
Ćwiczenia
HTML
Zaczynamy!
Czy tworzenie stron internetowych naprawdę jest tak trudne jak mówią?
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.
Ź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
HTML5 - A vocabulary and associated APIs for HTML and XHTML
Differences from HTML4
Unicode Character Database
Edytory HTML
Który edytor HTML wybrać: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta
Plus, SCREEM, Smultron?
Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i
oczywiście dobre chęci. Dokument HTML, czyli Hypertext Markup Language - 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.
Bluefish (darmowy)
★★★☆☆
Szybki i lekki edytor dla webmasterów-programistów. 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.
Brackets (darmowy)
★★★★☆
Lekki, a zarazem bardzo zaawansowany i nowoczesny edytor tekstu przeznaczony przede wszystkim
dla webmasterów. Dzięki podglądowi na żywo bezpośrednio w przeglądarce można na bieżąco
weryfikować efekty zmian wprowadzanych w tworzonym kodzie HTML i CSS. Dodatkowo
obsługuje instalowanie wielu darmowych rozszerzeń, które pozwalają znacznie zwiększyć możliwości
programu i jeszcze lepiej dopasować go do własnych potrzeb.
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: HTML, XHTML, 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 [American Standards Committee for Information Interchange]
oraz sprawdzanie pisowni.
Linux
Bluefish (darmowy)
★★★☆☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa.
Brackets (darmowy)
★★★★☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Linuksa.
gedit (darmowy)
★★★☆☆
Oficjalny edytor środowiska
GNOME [GNU Network Object Model Environment],
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 [K Desktop Environment].
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 [K Desktop Environment].
Podświetla składnię m.in.: HTML,
XHTML, 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 [Concurrent Versions System].
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 [Concurrent Versions
System].
Posiada wbudowany eksplorator struktury dokumentu. Integruje się z innymi aplikacjami.
Zawiera narzędzie wyszukiwania i zamiany w wielu plikach jednocześnie.
Mac OS X
Smultron (płatny)
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.
Bluefish (darmowy)
★★★☆☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Mac OS X.
Brackets (darmowy)
★★★★☆
Oprócz wersji dla systemu Windows (opis powyżej) edytor ten dostępny jest także dla Mac OS X.
Jeśli nie wiesz, który edytor HTML będzie dla Ciebie odpowiedni albo wolisz poszukać programu
obcojęzycznego, zobacz: Ranking edytorów HTML (online). Dodatkowe opisy i porównania wraz z plikami
do ściągnięcia znajdziesz również np. w serwisie DobreProgramy.pl lub w magazynie Komputer Świat.
Jaki edytor HTML wybrać?
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 (jest to tzw.
funkcja kolorowania
składni)
- 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żyjesz np.
windowsowskiego Notatnika
(popularny
Notepad),
to
polskie znaki diakrytyczne (czyli popularne "ogonki") mogą zostać błędnie zapisane - 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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin