Podstawy HTML 2 - Publiczne Gimnazjum w Trzebieszowie

Transkrypt

Podstawy HTML
1. HTML - to język formatowania dokumentów elektronicznych, który pozwala
uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku
tekstowego, gdzie tekst przeplatany jest komendami (ang. tags) języka.
2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.
np. <html></html>
3. Plik źródłowy jest interpretowany przez "przeglądarkę" , która prezentuje dokument
w jego ostatecznym kształcie.
4. Do tworzenia dokumentów HTML można stosować każdy edytor plików tekstowych.
Typowy dokument HTML zdefiniowany jest poprzez komendy podane poniżej:
Prolog - deklaracja dokumentu
<HTML> - początek kodu HTML
<HEAD> - początek nagłówka
treść nagłówka
</HEAD> - koniec nagłówka
<BODY> - początek części właściwej
zawartość części właściwej
</BODY> - koniec części właściwej
</HTML> - koniec kodu HTML
Przykład
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Strona Gimnazjum w Trzebieszowie</TITLE>
</HEAD>
<BODY>
Witajcie na mojej stronie!
</BODY>
</HTML>
Polecenie: Skopiuj kod do notatnika i zapisz plik jako strona.html
Ustalamy kolor tła strony
<body bgcolor="silver"></body>
<HTML>
<HEAD>
<TITLE> Publiczne Gimnazjum w Trzebieszowie </TITLE>
</HEAD>
<BODY bgcolor="silver">
Witajcie na mojej stronie!
</BODY>
</HTML>
Wprowadzamy nagłówek strony.
Pomiędzy znacznikami <BODY bgcolor="silver"> </BODY> wpisujemy nagłówek strony.
<h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2>
align = "center" - oznacza wyśrodkowanie
h2 - oznacza nagłówek drugiego stopnia.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w
Trzebieszowie </h2>
</HTML>
</BODY>
Wstawiamy linię rozdzielającą
<hr width = "570" size = "4" color = "red"/>
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w
Trzebieszowie </h2>
</HTML>
</BODY>
Wstawiamy zdjęcie
<p align = "center">
<img src = "123.jpg" width = "200" height = "130> </p>
Uwaga! - należy podać ścieżkę dostępu do pliku 123.jpg
<HTML>
<HEAD>
</HEAD>
<body bgcolor="silver">
<h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2>
<p align="center">
<img src="C:\Users\Darek\Desktop\strona\123.jpg.jpg" width="400" height="300"
alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka">
</p>
</BODY>
</HTML>
Wstawiamy listę wypunktowaną
<h3> align = "left"> Nasza szkoła zapewnia:</h3>
<ol>
<li> jeden,
<li> dwa,
<li> trzy.
</ol>
<HTML>
<HEAD>
</HEAD>
<body bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie
</h2><hr width = "570" size = "4" color = "red"/><p align="center">
<img src="C:\Users\Darek\Desktop\strona\123.jpg" width="400" height="300"
alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka"></p>
<h3 align = "left"> Nasza szkoła zapewnia:</h3>
<ol>
<li> jeden</li>
<li> dwa</li>
<li> trzy</li>
</ol>
</BODY>
</HTML>
Akapit i jego atrybuty
Aby zaznaczyć przejście do nowej linii należy zastosować komendę <BR>.
Główną komendą formatującą akapit jest <P>.Jeśli używamy jej poprawnie (tzn. zgodnie ze
specyfikacją HTML), ujmując pomiędzy <P> i </P> całość tekstu akapitu, to możemy
stosować atrybut ALIGN oznaczający:
•
•
•
ALIGN=left - równanie do lewej
ALIGN=center - centrowanie
ALIGN=right - równanie do prawej
Przykładowo:
<P>Ten tekst domyślnie wyrówna się do lewej</P>
<P ALIGN=center>Ten będzie na środku</P>
<P ALIGN=right>Ten zaś wyrówna się do prawej</P>
da w efekcie:
Ten tekst domyślnie wyrówna się do lewej
Ten będzie na środku
Ten zaś wyrówna się do prawej
Hierarchia stron
Łączenie stron poprzez "linki" jest podstawową cechą języka HTML (litera H oznacza
hipertekst czyli dynamiczny system stron). Planując system stron zaczynamy zwykle od
strony głównej, która nazywa się najczęściej index.htm lub index.html (ma to związek z
konfiguracją serwerów HTTP, które przyjmują te nazwy jako nazwy domyślne głównych
dokumentów systemu stron, wtedy w adresie można pominąć nazwę tej strony, kończąc na
nazwie foldera). Połączenie można stworzyć do dowolnej strony w Internecie o znanym
adresie (bezwzględnym). W przypadku stron znajdujących się na tym samym komputerze
adres może być względny, tak samo jak przy adresie pliku z obrazkiem.
Składnia linku ma następującą postać:
<A HREF="adres pliku ze stroną">aktywny napis linku</A>
Zwykły link odsyła do początku strony. Jeśli jest ona bardzo długa, to można odesłać również
do dowolnego punktu strony, pod warunkiem, że zostanie tam umieszczony punkt
orientacyjny o następującej składni:
<A NAME="dowolna nazwa">napis, od którego ma zostać wyświetlona strona</A>
Wracamy do naszej strony
<HTML>
<HEAD>
</HEAD>
<img src="C:\Users\Darek\Desktop\strona\123.jpg" width="400" height="300"
<ol>
</ol>
<li> jeden</li>
<li> dwa</li>
<li> trzy</li>
</BODY>
</HTML>
Przy pomocy programu Paint wykonajcie taki przycisk. Plik zapiszcie pod nazwą przycisk.png
w tym samym katalogu co index.html.
Teraz przygotujmy nową stronę i zapiszmy ją pod nazwą omnie.html
<HTML>
<HEAD>
<TITLE> O mnie</TITLE>
</HEAD>
<BODY bgcolor="silver">
Kim jestem?
</BODY>
</HTML>
Teraz wykonamy połączenie obu stron index.html oraz o mnie.html w taki sposób aby klik na
przycisk powodował otwarcie strony "omnie".
Musimy zmodyfikować kod do postaci
<HTML>
<HEAD>
</HEAD>
<p align=center>
<a href="omnie.html"><img src="C:\Users\Darek\Desktop\strona\przycisk.png"/></A>
</p>
<br>
<p align=center><img src="C:\Users\Darek\Desktop\strona\123.jpg" width="400"
height="300"
<ol>
<li> jeden</li>
<li> dwa</li>
<li> trzy</li>
</ol>
</BODY>
</HTML>
Pamiętajcie o wpisaniu właściwej ścieżki dostępu do przycisku oraz podstrony omnie.html.
Elementy tabelek
Tabelki są bardzo użyteczną strukturą, która pozwala nie tylko tworzyć tabele i zestawienia
ale również budować ogólny szkielet strony, lub dokładnie kontrolować położenie różnych
elementów względem siebie i całości strony.
Tabele definiuje się w trzech krokach:
a. najpierw defiuje się ramy tabeli (TABLE)
b. potem definiuje się wiersz (TR)
c. zaś w wierszu poszczególne komórki (TD lub TH)
Struktura wiersza wraz z zawartymi w niej komórkami powtarzana jest tyle razy ile jest
wierszy w tabeli, zaś powtarzające się komórki tworzą kolumny. Schematycznie wygląda to
tak:
<TABLE>
<TR> <TD>zawartość</TD> <TD>zawartość</TD></TR>
<TR> <TD>zawartość</TD> <TD>zawartość</TD</TR>
<TR> <TD>zawartość</TD> <TD>zawartość</TD></TR>
</TABLE>
W naszym schemacie nie uwzględniliśmy polecenia <TH>...</TH>, bo jak się później
przekonamy jest ono tylko szczególnym przypadkiem polecenia <TD>...</TD>.
W tabelkach szczególnie ważne jest "domykanie" poleceń, ponieważ "otwarta" tabelka (np.
taka gdzie jakiś wiersz się zaczyna a nie kończy) jest zwykle w przeglądarce zupełnie
niewidoczna. Jeśli jest obszerna, to znalezienie odpowiedniego miejsca w kodzie źródłowym
jest bardzo trudne.
Wszystkie elementy struktury tabeli mają wiele opcji, które omówimy sobie poniżej.

Podstawy HTML 2 - Publiczne Gimnazjum w Trzebieszowie

Transkrypt

Podobne dokumenty

Kolor tła: Kolor tła obrazkowy: <body

Wprowadzenie do języka html

Tagi HTML

Robert Kubica DRUGI w Monte Carlo - Polak w Northampton

i-lekcja

KURS HTML1

Potrzebne polecenia

Wycieczka weekendowa do Szkocji

HTML - Zaliczaj.pl

Podstawy języka HTML