poniedziałek, 6 grudnia 2010

Podstawowe elementy języka HTML

BAZOWY KOD PUSTEJ STRONY WWW

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>TYTUŁ STRONY</title>

<meta http-equiv="Content-Type" content-"text/html; charset-iso-8859-2">

</head>

</body>

</html>

BAZOWY KOD PUSTEJ STRONY WWW (XHTML)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1/strict.dtd">

<html xhtml=http://www.w3.org/1999/xhtml"  xml:lang="pl" lang="pl">

<head>

<title>TYTUŁ STRONY</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

</head>

<body>

</body>

</html>



PODSTAWOWE ELEMENTY JĘZYKA HTML
ELEMENTPRZYKŁADOPIS
<!DOCTYPE>Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR?html4/strict.dtd">

Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/framset.dtd">

XHTML DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Definiuje typ dokumentu. Deklaracja ta powinna pojawić się jako pierwszy element kodu HTML. Informuje ona przeglądarkę, z którą wersją języka HTML ma do czynienia.

<html><html>

<head>

</head>

<body>

<p>Zawartość dokumentu…</p>

</body>

</html>
Informuje przeglądarkę, że plik zawiera kod HTML. Strona WWW napisana w języku XHTML (bardziej bardziej sformalizowanej odmianie HTML, której bliżej do uniwersalnego języka znaczników XML) musi zawierać w elemencie<HEAD>dodatkowe parametry następującej postaci:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<body><body>

<p>Oto treść dokumentu.</p>

</body>
Definiuje zawartość dokumentu.
<h1>do<h6><h1>To jest nagłówek poziomu 1</h1>

<h2>To jest nagłówek poziomu 1</h2>

<h3>To jest nagłówek poziomu 3</h3>

<h4>To jest nagłówek poziomu 4</h4>

<h5>To jest nagłówek poziomu 5</h5>

<h6>To jest nagłówek poziomu 6</h6>
Definiuje nagłówki
<p><p>To jest akapit.</p>

<p>To jest kolejny akapit</p>
Definiuje akapit.
<br><p>W tym akapicie<br> />

Zła-<br />

Mano wiersz</p>
Wprowadza w akapicie złamanie wiersza.
<hr><p>Znacznik hr wprowadza linię poziomą:</p>

<hr />

<p>między akapitami</p>
Umożliwia wstawienie na stronie linii poziomej.
<!--><!—KomentarzàZnacznik stosowany do wstawiania w kodzie HTML komentarza (komentarz jest ignorowany przez przeglądarką). Komentarz jest pomocny przy wyjaśnieniu funkcji kodu, ale ma jeszcze jedną niezwykle istotną rolę- pozwala wprowadzać do kodu skrypty.

sobota, 4 grudnia 2010

TABLICE HTML

Myślę, że komuś się przyda.



PROSTE FORMATOWANIE TEKSTU:
ELEMENT
PRZYKŁAD
OPIS
<b>
<b>tekst jest pisany czcionką pogrubioną</b>
Wprowadza formatowanie fizyczne-tekst pogrubiony
<strong>
<strong>ten teks też jest pisany czcionką pogrubioną</strong>
Wprowadza formatowanie logiczne-tekst pogrubiony
<i>
<i>tekst pisany kursywą</i>
Wprowadza formatowanie fizyczny – kursywa
<em>
<em>ten tekst będzie wyróżniony</em>
Wprowadza formatowanie logiczne-tekst przypominający kursywę
<big>
<big>tekst wyświetlany czcionką powiększoną</big>
Definiuje tekst o większym rozmiarze czcionki niż tekst otaczający
<small>
<small>tekst wyświetlany czcionką pomniejszoną</small>
Definiuje tekst o mniejszym rozmiarze czcionki niż tekst otaczający
<sup>
W tekście umieszczono indeks<sup>dolny</sup>
Definiuje indeks dolny
<sub>
W tekście umieszczono indeks<sub>górny</sub>
Definiuje indeks górny
<bdo>
<bdo dir=”rtl”>tekst będzie pisany na opak!</bdo> efekt:
!kapo an ynasip eizdęb tsket
Zmienia kierunek tekstu. Wymagany atrybut dir
<dfn>
<dfn>teks ten stanowi termin definicji</dfn>
Formatuje dany teks tak aby się wyróżniał od pozostałego
<pre>
<pre>tekst prze formatowany</pre>
W tekście umieszczonym w elemencie pre zachowane zostają odstępy i łamania wierszy. Tekst będzie wyświetlany czcionką o stałej szerokości.
<code>
<code>tekst kodu programu<code>
Stosowany do prezentacji kodu programu. Tekst będzie wyświetlany o stałej szerokości.
<tt>
<tt>
Stosowany do prezentacji kodu programu.
<kbd>
<kbd>tekst pisany czcionką komputerowa
Stosowany do prezentacji kodu programu.
<var>
<var>zmienna</var>
Stosowany do prezentacji kodu programu- wskazuje nazwę zmiennej
<Samp>
<samp>tekst przykładowy<samp>
Stosowany do prezentacji kodu programu lub tekstu przykładowego


środa, 1 grudnia 2010

KURS HTML cz.3

Zapraszam na 3 część tutorialu:




KONIEC LINII




Powyższy znacznik (br)
stosuje się gdy chcemy natychmiastowo zakończyć linię. Zapytasz zapewne: Po co go stosować, nie można po prostu nacisnąć Enter i przenieść kursor tekstowy do następnej linii? Otóż nie można. Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji - zobacz: Znaki specjalne). Na przykład jeśli wpiszesz w edytorze taki tekst:
To jest pierwsza linia...
a to jest druga linia.
w przeglądarce pojawi się:

To jest pierwsza linia... a to jest druga linia.


Linia zostanie zakończona automatycznie tylko wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast zakończyć linię, możemy to zrobić, stawiając w miejscu gdzie ma być ona zakończona, znacznik
. Np. wpisanie w edytorze:
To jest pierwsza linia...

a to jest druga linia.
spowoduje wyświetlenie tekstu:

To jest pierwsza linia...
a to jest druga linia.


Jeśli postawisz obok siebie więcej niż jeden znacznik
, możesz "zejść" kilka linijek niżej, np. wpisanie:
To jest pierwsza linia...



...a to jest kolejna linia.
spowoduje wyświetlenie:

To jest pierwsza linia...


...a to jest kolejna linia.


Zwróć uwagę, że samego znacznika
nie widać na ekranie przeglądarki. Widać jedynie efekty jego działania, tzn. zakończenie linii.

Znacznik
nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)!
PARAGRAF
Tu wpisz treść paragrafu

Paragraf (czyli nowy akapit) to pewien ustęp w tekście. Następujące po sobie paragrafy, są rozdzielone linijką przerwy. Treść paragrafu (akapitu) należy wpisać pomiędzy znacznikami
oraz
. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w paragrafach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii:

, można po prostu objąć wybrany fragment tekstu paragrafem, a efekt będzie identyczny. Dzięki temu strona będzie wyglądała estetyczniej i łatwiej będzie można odszukać na niej interesujące informacje.

Paragraf jest bardzo ważny w składni HTML, ponieważ pozwala w określony sposób sformatować tekst na ekranie (ułożyć go w podany sposób). Robi się to podając atrybuty znacznika. Atrybut wpisuje się zawsze wewnątrz znacznika otwierającego - bezpośrednio po jego nazwie (oddzielony od niej spacją), a przed znakiem zamknięcia nawiasu ostrego, czyli przed ">". Każdy znacznik ma ściśle określone atrybuty, które obsługuje. W przypadku paragrafu można zastosować m.in. następujące:

1. Wyrównanie tekstu do lewej strony (domyślnie):
Treść paragrafu
lub
Treść paragrafu


2. Wyrównanie tekstu do prawej:
Treść paragrafu


3. Wyśrodkowanie tekstu:
Treść paragrafu


4. Justowanie tekstu (wyrównanie do obu marginesów jednocześnie):
Treść paragrafu


We wszystkich przypadkach czcionką podkreśloną zostały zaznaczone właśnie atrybuty znacznika.
W miejsce tekstu: Treść paragrafu, należy wpisać tekst, który ma zostać sformatowany w sposób określony przez parametr.

Przykład:

ALIGN="left",
wyrównanie do lewej,
wyrównanie do lewej (ALIGN="left"),
(ALIGN="left")...

ALIGN="right",
wyrównanie do prawej,
wyrównanie do prawej (ALIGN="right"),
(ALIGN="right")...

ALIGN="center",
wyśrodkowanie,
wyśrodkowanie (ALIGN="center"),
(ALIGN="center")...

justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify")...
TEKST POGRUBIONY
Tu wpisz tekst

Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"), który się wewnątrz niego znajduje. Podobna funkcja jest zwykle dostępna w zwykłych edytorach (np.: WordPad), podczas tworzenia normalnego dokumentu tekstowego.

Przykład:
Ten tekst jest pogrubiony (wytłuszczony)

TEKST POCHYLONY
Tu wpisz tekst

Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").

Przykład:
Ten tekst jest napisany pismem pochylonym, czyli kursywą

TEKST PODKREŚLONY
Tu wpisz tekst

Pozwala podkreślić fragment tekstu (ang. "underline").

Przykład:
Ten tekst jest podkreślony

WIELKOŚĆ CZCIONKI
Tu wpisz tekst

gdzie jako "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa).

Przykład:
Czcionka o rozmiarze 1
Czcionka o rozmiarze 2
Czcionka o rozmiarze 3 (domyślna)
Czcionka o rozmiarze 4
Czcionka o rozmiarze 5
Czcionka o rozmiarze 6
Czcionka o rozmiarze 7

KOLOR CZCIONKI


gdzie jako "kolor" można wpisać:
black (czarny)
white (biały)
silver (srebrny)
gray (szary)
maroon (kasztanowy)
red (czerwony)
purple (purpurowy)
fuchsia (fuksja)
green (zielony)
lime (limonowy)
olive (oliwkowy)
yellow (żółty)
navy (granatowy)
blue (niebieski)
teal (zielonomodry)
aqua (akwamaryna)



Edytory HTML posiadają często specjalny selektor kolorów, za pomocą którego można w prosty sposób wybrać barwę o dowolnym odcieniu.