Przeciek.michalin.pl

Czcionka pogrubiona

< B > < /B >
Przykład:

To jest czcionka pogrubiona

Czcionka pochylona
< I > < /I >
Przykład:

To jest czcionka pochylona

Czcionka podkreślona
< U> < /U >
Przykład:

To jest czcionka podkreślona

Czcionka o stałej szerokości

< TT > < /TT >
Przykład:

To jest czcionka monotypiczna, o stałej szerokości znaku

Czcionka przekreślona
< STRIKE > < /STRIKE >
Przykład:

Czcionka przekreślona

Indeks górny

< SUP > < /SUP >
Przykład:< ^{Czcionka z superskryptem}

Indeks dolny
< SUB > < /SUB >
Przykład:

_{Czcionka z subskryptem}

Czcionka migająca
< BLINK > < /BLINK >
Przykład:

To jest czcionka migająca
– jest to rozszerzenie Netscape’a, nie znajdujące się w specyfikacji HTML 3.2.

Duża czcionka
< BIG > < /BIG >
Przykład:

Duża czcionka

Mała czcionka
< SMALL > < /SMALL >
Przykład:

Mała czcionka

Cytat
< CITE > < /CITE >
Przykład:

To jest cytat (citation)

Czcionka wyróżniona nr 1
< STRONG > < /STRONG >
Przykład:

To jest czcionka mocno wyróżniona

Czcionka wyróżniona nr 2
< EM > < /EM >
Przykład:

To jest czcionka wyróżniona

Kod
< CODE > < /CODE >
Przykład:

To jest kod (code)

Czcionka wprowadzana z klawiatury
< KBD > < /KBD >
Przykład:

< KBD >Czcionka z klawiatury

Zmienna
< VAR > < /VAR >
Przykład:

Zmienna (variable)

Czcionka bazowa
Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić:

Oznacza ono, że od momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości.

Kolory czcionki
Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru.

< FONT COLOR="nazwa_koloru" > < /FONT >
Wielkość czcionki
Czcionka może mieć dowolną wielkość. Wystarczy objąć fragment tekstu parą znaczników < FONT SIZE="xx" > < /FONT >.

Czcionka normalna ma przypisaną wartość 3.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Wstęp

Rozszerzenia języka HTML dodają potężne narzędzie do formatowania dokumentów internetowych – style. Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu tekstu. Style są obecnie częściowo interpretowane przez przeglądarki Netscape Communicator od 4 i Internet Explorer od 3.

Budowa stylu
Ogólne polecenie stylu ma postać selektor { cecha: wartość }. Selektorem jest po prostu polecenie języka, np. P, H1, itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.

Przykłady:

P {font-family: Times}
Selektorem jest P, cechą – rodzina czcionek, wartością – Times.

H2 {color: #FF0000}
Selektorem jest H2, cechą – kolor, wartością – kolor czerwony.

Możemy oczywiście łączyć ze sobą różne cechy i wartości.

Selektor { cecha1: wartość1; cecha2: wartość2 }
H1 {font-size: 35pt; color: red; font-family: Arial}

Przykłady
Przykładami mogą być nagłówki, odnośniki, wyróżnione fragmenty teksty na stronach kursu oraz strony zawarte na serwerze ASMODEUS.

Wstawianie stylów
Styl Lokalny

Netscape Communicator może całkowicie błędnie wyświetlać niektóre elementy. Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony. Typowym zastosowaniem jest nadanie określonych atrybutów akapitowi.

< p >Treść akapitu< /p >
Na przykład:

Treść akapitu

Pozioma linia z kilkoma atrybutami (tylko IE4)

< hr >
Arkusz zewnętrzny

Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Przykładowy arkusz wygląda następująco:

Wywołanie arkusza styli jest umieszczanew sekcji HEAD i wygląda następująco:

Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).

Zagnieżdżanie arkusza

Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami i .

Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej.

Proszę zwrócić uwagę na wiersz , czyli znaki komentarza obejmujące definicję. Ukrywają one definicję przed przeglądarkami nie interpretującymi stylów. Style definiujemy w „klasyczny” sposób, za pomocą zestawu Selektor { cecha: wartość}.Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których stosuje się unikatowe style. Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej jest oczywiście stosować dołączanie wspólnego, zewnętrznego arkusza stylów.

Importowanie arkusza

Każdą stronę można opisać za pomocą importowanego arkusza stylów. Funkcję tę realizuje na razie jedynie Internet Explorer 4. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD:

Można podać zarówno adres względny, jak i bezwzględny. Można więc sobie wyobrazić ujednolicenie wyglądu różnych witryn poprzez wykorzystanie imortowanych stylów, umieszczonych na czyimś serwerze. Możliwe jest łączenie różnych definicji, np. uzupełnienie ustaleń importowanego arkusza stylów o własne definicje różnych elementów (style zagnieżdżane). W przypadku konfliktu pierwszeństwo mają ustalenia własne.

Identyfikatory ID

Identyfikatory ID służą do przypisywania konkretnego, unikatowego stylu jednemu elementowi w dokumencie.Przykładowo, jeśli w definicji stylu zagnieżdżonego (w ramach HEAD) zdefiniujemy styl w postaci:

#1 { font-size: 20pt}
w tekście dokumentu będziemy mogli zastosować definicję

Jakaś tam treść

Blok wydzielony

Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest wygodny, a doświadczenia z dynamicznym HTML, wprowadzanym intensywnie od momentu pojawienia się Internet Explorera 4, wskazują, że jest to jedno z podstawowych narzędzi. Bloki wydzielamy za pomocą polecenia

Przykładem niech będą wyróżnione w tym kursie polecenia języka HTML. które zostały objęte znacznikiem DIV (kolor pomarańczowy).

Wydzielane bloki są podobne w działaniu do SPAN, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Wstęp

Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML, aczkolwiek powoduje wolniejsze wczytywanie stron. Błędna konstrukcja dokumentu z wieloma ramkami może spowodować niepożądane efekty. Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty, dowiązane do poszczególnych pozycji spisu.

Struktura strony
Podstawową rolę pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Znaczniki są umieszczane w ramach NOFRAMES i są interpretowane przez przeglądarki nie akceptujące ramek.

Znaczniki
Kluczowe znaczenie ma para znaczników . Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.

Zwróćmy uwagę na parę znaczników , o której będziemy mówić później. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki innej niż Navigator i Internet Explorer. Jeśli natomiast czytelnik strony używa Navigatora lub Internet Explorera, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki.

Znacznik służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości, o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.

Parametr FRAMESET
Aby konstrukcja mogła działać, konieczne jest podzielenie strony, pionowe lub poziome. Służy do tego parametr COLS=”x,y”, umieszczany w otwierającym znaczniku FRAMESET. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość.

Parametr FRAME
Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML. Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:

Jeśli przywoływany plik jest spory objętościowo możemy użyć parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać:

Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić parametr SCROLLING=n. Gdy użyjemy parametru SCROLLING=auto, suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.

Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru

W ten sposób zabezpieczymy ramkę przed skalowaniem.

Ramki w kolumnach i wierszach
Możliwe jest dość dowolne mieszanie definicji kolumn i wierszy, co pozwala np. na utworzenie strony, w której znajdują się trzy wiersze, wiersz środkowy jest podzielony na trzy, a wiersz ostatni na dwie kolumny (łącznie 6 ramek) Oczywiście należy dość ostrożnie zwiększać liczbę ramek, gdyż może to ujemnie wpłynąć na czytelność strony.

Odsyłacze
Aby odsyłacze działały w sposób taki, że strony ładowane są do okna inne niż te, w którym znajdują się odsyłacze należy wykożystać nazwę ramki, którą umieszczamy przy jej definicji. Dzięki temu strony bęzą ładowane do odpowiedniej ramki. Wykonuje się to za pomocą paramertu TARGET=nazwa ramki, w którym podajemy nazwę ramki do której ma być ładowana strona.

Zwróćmy uwagę na cztery zastrzeżone nazwy w przypadku parametru TARGET.

TARGET=”_blank”
TARGET=”_self”
TARGET=”_parent”
TARGET=”_top”
W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna. W drugim przypadku nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny dla bieżącego dokumentu. W czwartym przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą „górę”.

NOFRAMES
NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce. Posiadacz starszej przeglądarki zobaczyłby pustą stronę, gdyby między nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. Najczęściej są to informacje z ramki, któa zawierała odnośniki do innych stron.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników < P >< /P >. Jeśli wlewamy do edytora HTML tekst z innego źródła, musimy objąć każdy z akapitów osobną parą znaczników. Akapity są w przeglądarce oddzielane dodatkową interlinią, która uwypukla podział.

Możemy też posłużyć się pojedynczym znacznikiem < BR >, umieszczanym na końcu akapitu, który pozwoli oddzielić od siebie akapity, nie wprowadzając interlinii.

Kilka spacji obok siebie jest zamienianych na pojedynczą spację. Na tej samej zasadzie ignorowane są również tabulatory. Można jednak wstawiać znak tzw. niełamliwej spacji ( ), który pozwala wstawić kilka kolejnych spacji.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Definiując możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony.

Parametr BACKGROUND=”obrazek.gif” pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce.

Parametr BGCOLOR=”kolor” pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce.

Parametr TEXT=”kolor” pozwala określić kolor tekstu w dokumencie.

Możemy również określić kolory odsyłaczy. LINK=”kolor” określa standardowy kolor odsyłacza. VLINK=”kolor” określa kolor odsyłacza, który został co najmniej raz użyty, ALINK=”kolor” określa kolor aktywnego odsyłacza. Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli nie ustawisz tych parametrów przeglądarka przyjmie standardowe kolory.

Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN=”xx” spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo. Ta sama przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN=”yy” spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Definiując możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

Najważniejszym elementem jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki.

Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT.

Oto kilka poleceń, które można umieścić w .

Polecenie spowoduje regularne odświeżanie strony co x sekund.

Polecenie spowoduje automatyczne wczytanie nowej strony po x sekundach. Tylko niektóre przeglądarki interpretują to polecenie.

Polecenie jest deklaracją strony kodowej dokumentu. Inna postać to charset=iso-8859-2. Nowe przeglądarki dla Windows (Navigator/Communicator, Internet Explorer) potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną deklaracją.

Polecenie definiuje bazowy adres dokumentu.

Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze.Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność. W takiej sytuacji wygodnym rozwiązaniem jest podanie w nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę.

Polecenie ma określać hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy.

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, m.in. tytuł strony.

Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

W praktyce wygląda to następująco:

Informacje o dokumencie

Treść dokumentu

Uwaga: znaczniki nie powinny być umieszczane
na stronie zawierającej ramki, w ramach FRAMESET.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Nasuwa się pytanie po co stworzono specjalne edytory HTML? Odpowiedź jest prosta. Zamiast pracowicie wpisywać ręcznie znaczniki, wystarczy nacisnąc kombinację klawiszy a odpowiedni tag sam się pojawi. Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak tabele, odsyłacze, ramki czy formularze. Niektóre wspomagają użytkownika przez wypisywanie dopuszczalnych parametów, które mogą wystąpic przy odpowiednim znaczniku

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/

Do utworzenia takiej strony nie jest potrzebne nic więcej niż… zwykły edytor tekstów. Może to być najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej.

Gdyby ktoś chciał przygotowywać swój dokument w środowiska Windows, może się posłużyć Notatnikiem, w którym może zapisywać tekst od razu w kodach Windows 1250, mając do użytku wbudowaną w środowisko polską klawiaturę. Jednak aby zapisywać pliki w innych standardach kodowania potzrebne są nakładki, które pozwalają na konwersję pliki do odpowiedniego standardu. Takim programem może być program Ogonki, który jest dostępny w internecie bezpłatnie.

Uwaga: zalecane jest stosowanie międzynarodowego, uniwersalnego standardu ISO-8859-2

Dokument HTML jest więc najzwyczajniejszym plikiem tekstowym, który zawiera jednak pewne osobliwe znaczniki, zwane z angielska „tagami”. „Tagi”, których jest kilkadziesiąt, stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle określone litery. Na przykład

jest otwierającym znacznikiem akapitu. Większość znaczników składa się z części otwierającej oraz zamykającej, która zawiera dodatkowo tzw. ukośnik (slash) np:

– znacznik zamknięcia akapitu.

Do zbudowaniu dokumentu HTML potrzeba jest jedynie znajomość języka. Powszechnie przyjętym standardem jest zatwierdzony w styczniu 1997 roku HTML 3.2. Netscape Communications i Microsoft upowszechniają jednak własne rozszerzenia, które interpretują wyłącznie ich przeglądarki. Autorzy stron powinni pamiętać, że stosowanie rozszerzeń, choć są poprawnie interpretowane przez najnowsze przeglądarki, wykracza poza przyjęty standard języka.

Uwaga: formalnie zalecane jest stosowanie wyłącznie języka wchodzącego w skład specyfikacji HTML 3.2. Jest to oczywiście zalecenie, a nie bezwzględny przymus stosowania, którego ignorowanie pociąga za sobą jakiekolwiek sankcje.

——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/