PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online: ... EDYTORY GRAFICZNE MS...

31
PODSTAWY JĘZYKA HTML Natalia Kotsyba Filologia Nowogrecka, I rok 16 lutego 2011 r.

Transcript of PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online: ... EDYTORY GRAFICZNE MS...

Page 1: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

PODSTAWY JĘZYKA HTML

Natalia Kotsyba

Filologia Nowogrecka, I rok

16 lutego 2011 r.

Page 2: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

KILKA PODSTAWOWYCH LEKTUR

• Podstawy, czyli pierwsza strona WWW w 15 minut... http://algorytmy.pl/doc/xhtml/index.php?id=100

• Paweł Wimmer „HTML dla początkujących” http://webmaster.helion.pl/index.php/html-dla-

2011-02-16Natalia Kotsyba --- Podstawy HTML

http://webmaster.helion.pl/index.php/html-dla-poczatkujacych

• Interaktywny podręcznik HTML z ćwiczeniami online: http://www.w3schools.com/html/default.asp

• Oficjalna strona konsorcjum WWW i podręczniki http://www.w3c.org/MarkUp/Guide/

2

Page 3: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

FORMATY STRON INTERNETOWYCH

� XHTML, XML (Extended Meta Language), JavaScript (dodatek), PHP (Personal Home Page) i wiele innych

� ale wszystko się zaczyna od HTML (Hyper Text Meta Language)

� dawniej SGML (Structured General Meta Language)

NBNBNBNB: najprostsza strona HTML do jest dowolny plik tekstowy z

2011-02-16Natalia Kotsyba --- Podstawy HTML

NBNBNBNB: najprostsza strona HTML do jest dowolny plik tekstowy z rozszerzeniem .html

Nazwa pliku nie powinna zawierać spacji, polskich znaków diakrytycznych czy innych znaków specjalnych

Domyślna nazwa pliku w katalogu to index.html

Jak podejrzeć źródło html? W Firerox Mozilla poprzez kombinację klawiszy Ctrl+U albo przez menu „widok—zobacz źródło” w innych przeglądarkach internetowych

3

Page 4: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

EDYTORY TEKSTOWE I TEKSTOWO-GRAFICZNE

• Pajączek Pajączek Pajączek Pajączek NxGNxGNxGNxG - w tej chwili wybór numer 1 dla polskiego webmastera, program komercyjnykomercyjnykomercyjnykomercyjny. Oferuje wersje profesjonalną i standardową, w odmianie osobistej (do użytku niekomercyjnego) lub komercyjnej. Moim zdaniem to najlepszy tekstowy edytor HTML i XHTML na świecie.

• CoreEditorCoreEditorCoreEditorCoreEditor - polski, komercyjnykomercyjnykomercyjnykomercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML. Edytor jest następcą bezpłatnego edHTML.

• kEDkEDkEDkED - polski, darmowydarmowydarmowydarmowy edytor, szybki i konfigurowalny, obsługujący XHTML• HateMLHateMLHateMLHateML ProProProPro - polski, darmowydarmowydarmowydarmowy edytor z obsługą (X)HTML.• Tiger98 i TigerII Millenium - komercyjnykomercyjnykomercyjnykomercyjny polski edytor, jednak już bardzo wiekowy.• TigerII MiniPad - darmowydarmowydarmowydarmowy notatnik, wygodny do szybkich poprawek.

2011-02-16Natalia Kotsyba --- Podstawy HTML

• TigerII MiniPad - darmowydarmowydarmowydarmowy notatnik, wygodny do szybkich poprawek.• edHTML - polski, darmowydarmowydarmowydarmowy edytor; jego następcą jest CoreEditor.• Website Pro - polski, darmowydarmowydarmowydarmowy edytor; los nieznany (?).• Zajączek PHP - polski, darmowydarmowydarmowydarmowy edytor, z dobrą obsługą PHP.• Ager Web Edytor - polski, darmowydarmowydarmowydarmowy edytor ze wsparciem dla PHP i JavaScript.• Extra Page - darmowydarmowydarmowydarmowy polski edytor, jednak piszący w "starym stylu".• ezHTML - polski edytor, także darmowydarmowydarmowydarmowy - chyba nie jest już rozwijany.• HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowydarmowydarmowydarmowy.• 1'st Page 2000 - jeden z najpotężniejszych programów webmasterskich, darmowydarmowydarmowydarmowy.• ACE HTML Freeware - darmowydarmowydarmowydarmowy, anglojęzyczny edytor, z obsługą stron kodowych.

(źródło: Paweł Wimmer „Kurs języka HTML - poradnik webmastera”) • no i zwykły notatnik, no i zwykły notatnik, no i zwykły notatnik, no i zwykły notatnik, NotepadNotepadNotepadNotepad++++

4

Page 5: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

EDYTORY GRAFICZNE

� MS Front Page

� Joomla!

� Wiki

i wiele innych

2011-02-16Natalia Kotsyba --- Podstawy HTML

i wiele innych

Pozwalają na przełączenie się z widoku skryptu HTML na widok gotowej strony

5

Page 6: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ZNACZNIKI I PODSTAWOWA SKŁADNIAZNACZNIKI I PODSTAWOWA SKŁADNIAZNACZNIKI I PODSTAWOWA SKŁADNIAZNACZNIKI I PODSTAWOWA SKŁADNIA

• kod HTML składa się ze znaczników (ang. tags), które umieszczamy w nawiasach ostrych < i >

• Niemal każdy znacznik HTML musimusimusimusi zostać zamknięty

2011-02-16Natalia Kotsyba --- Podstawy HTML

zamknięty

• Znacznik otwierający wygląda tak:

<jakis_znacznik>

natomiast zamykający:

<////jakis_znacznik>

6

Page 7: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

STRUKTURA STRONY HTML

� Całość strony powinna być otoczona znacznikami <html> i </html>

W środku mamy:

� <head> (głowa)

2011-02-16Natalia Kotsyba --- Podstawy HTML

� <head> (głowa)

zawiera informacje o stronie, np. jej tytuł, kodowanie, odnośniki do stylów albo same style, itd.

� <body> (ciało) zawiera treść, tzn. samą stronę

� Strona może mieć tylko jedną głowę i jedne ciało, ich kolejność i zawartość nie powinny być mieszane.

7

Page 8: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

HTML/PIERWSZA STRONAHTML/PIERWSZA STRONAHTML/PIERWSZA STRONAHTML/PIERWSZA STRONA

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

<head> <meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-2">

2011-02-16Natalia Kotsyba --- Podstawy HTML

charset=iso-8859-2"> <title> Pierwsza Strona </title>

</head> <body>

<p>Przykładowy tekst.</p> </body>

</html>

8

Page 9: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

MOŻEMY POMYŚLEĆ O STRUKTURZE STRONY JAKO O DRZEWIE

2011-02-16Natalia Kotsyba --- Podstawy HTML

9

Page 10: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

• Przestrzenie pomiędzy znacznikami otwierającym i zamykającym nazywamy sekcjamisekcjamisekcjamisekcjami. W sekcjach można umieszczać inne znaczniki i tekst.

• Pierwsza linijka powyższego kodu (zwanego kodem HTMLkodem HTMLkodem HTMLkodem HTML) przedstawia informację o dokumencie. Mówi ona o tym jaką wersje HTML-azastosowaliśmy. Jest to potrzebne do dalszej interpretacji dokumentu.

• Następnie widzimy znacznik otwierający <html>. Sygnalizuje on rozpoczęcie kodu HTML w dokumencie. W tej sekcji umieszczamy całą resztę kodu HTML. Na końcu dokumentu znajdziemy znacznik zamykający </html>.

• Kolejną rzeczą jest sekcja <head></head>. W niej zawieramy informacje o dokumencie – w tym przypadku o kodowaniu znaków i

2011-02-16Natalia Kotsyba --- Podstawy HTML

• Kolejną rzeczą jest sekcja <head></head>. W niej zawieramy informacje o dokumencie – w tym przypadku o kodowaniu znaków i tytule dokumentu, który zawsze zobaczymy na pasku przeglądarki. W sekcji head możemy umieścić także informacje o autorze dokumentu(czyli strony HTML), opis dokumentu czy słowa kluczowe.

• Po tym przychodzi sekcja <body></body>. Obejmuje ona to, co chcemy umieścić na naszej stronie – czyli informacje o tekście, wstawianych grafikach itp.

• W sekcji body utworzyliśmy akapit za pomocą znaczników <p></p>, w którego sekcji umieściliśmy nasz tekst.

10

Page 11: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ZNACZNIKI UŻYWANE W SEKCJI HEADZNACZNIKI UŻYWANE W SEKCJI HEADZNACZNIKI UŻYWANE W SEKCJI HEADZNACZNIKI UŻYWANE W SEKCJI HEAD• <TITLE> <TITLE> <TITLE> <TITLE> tytuł strony, wyświetlany na górnej belce przeglądarki • <META> <META> <META> <META> służą do definiowania niektórych zachowań przeglądarek i innych agentów www, np.

sposobu interpretowania znaków narodowych (jak np.: ą, ę, à, ò, ù, ì), definiowania słów kluczowych opisujących zawartość strony

• Przykład. Przykład. Przykład. Przykład. Fragment sekcji HEAD strony głównej serwisu www.rockmetal.pl<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta name="description" content="rockmetal.pl (rock i metal po polsku), polskojezycznyserwis poswiecony muzyce rockowej i metalowej"> <meta name="keywords" content="rock metal rockmetal muzyka music heavy thrash death

2011-02-16Natalia Kotsyba --- Podstawy HTML

<meta name="keywords" content="rock metal rockmetal muzyka music heavy thrash deathblack doom gothic gotyk mp3 recenzje wywiady relacje tabulatury taby sample informacje nowosci wiesci gitara guitar koncert koncerty forum rock metal rockmetal rock metal nowości wieści"> <meta http-equiv="expires" content="0"> <title>rockmetal.pl (rock i metal po polsku)</title>...

</head>

NB: polecam użycie kodowania bardziej uniwersalnego, niż iso-8859-2, czyli Unikodu: <meta http-equiv="content-type" content="text/html; charset=utfutfutfutf----8888">

11

Page 12: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

SEKCJA <BODY>SEKCJA <BODY>SEKCJA <BODY>SEKCJA <BODY><body> może zawierać m.in. następujące elementy: • <div> (od ang. division „fragment”), • <img> (od image „obrazek”), • <p> (od paragraph „akapit”), • <h1> (od header „nagłówek”),• <a> (od anchor „kotwica”),• <hr> (horizontal ruler, linia pozioma),• <table> (tabela).

Dla każdego z tych elementów możemy zdefiniować w kodzie różne cechy, np. rozmiar, kolor, tło,

2011-02-16Natalia Kotsyba --- Podstawy HTML

Dla każdego z tych elementów możemy zdefiniować w kodzie różne cechy, np. rozmiar, kolor, tło, obramowanie, itd., w zależności od typu elementu. Jeżeli nie zdefiniujemy wartości atrybutu, to przeglądarka wyświetli wartość domyślną. Np. domyślny kolor tekstu to czarny, domyślny kolor tła – biały, itd.

Jeżeli chcemy zdefiniować kilka atrybutów (cech) dla tego samego elementu, wpisujemy je w środku otwierającego znacznika elementu i rozdzielamy spacją. W zamykającym znaczniku nie musimy powtarzać nazw atrybutów.

Np. tekst o kolorze czerwonym, rozmiarze czcionki 12px, Helvetika:<font color="red" size="12px" face= helvetika" >NASZ TEKST</font>

color, size i face to są atrybuty elementu <font>; "red", "12px", "helvetika" to są niektóre możliwe wartości tych atrybutów.

12

Page 13: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

PODSTAWOWE ZNACZNIKI SŁUŻĄCE PODSTAWOWE ZNACZNIKI SŁUŻĄCE PODSTAWOWE ZNACZNIKI SŁUŻĄCE PODSTAWOWE ZNACZNIKI SŁUŻĄCE FORMATOWANIU TEKSTUFORMATOWANIU TEKSTUFORMATOWANIU TEKSTUFORMATOWANIU TEKSTU� <B> <B> <B> <B> (bold) pogrubienie

� <I><I><I><I> (italic) kursywa

� <U><U><U><U> (underline) podkreślenie

� <FONT><FONT><FONT><FONT> definicja czcionki

color="white|black|red|green|orange|purple|....|000000|...|FFFFFF"

size=1|...|7|+1|...|+7|-1|...|-7

face=arial ce, helvetica ce, arial, helvetica, sans-serif,...

� <H1> ... <H6><H1> ... <H6><H1> ... <H6><H1> ... <H6> (header) nagłówki

2011-02-16Natalia Kotsyba --- Podstawy HTML

<H1> ... <H6><H1> ... <H6><H1> ... <H6><H1> ... <H6> (header) nagłówki

� <SMALL><SMALL><SMALL><SMALL> "mała" czcionka

� <BIG><BIG><BIG><BIG> "duża" czcionka

� <P><P><P><P> (paragraph) akapit

align="right|left|center|justify"

� <BR><BR><BR><BR> (break) wymuszenie łamania linii

&nbsp; (non-breaking space) zapobiega łamaniu linii pomiędzy dwoma słowami

� <PRE><PRE><PRE><PRE> (preformatted text) zachowuje nie-HTMLowe formatowanie tekstu, tzn. końce linii, znaki tabulacji

� <HR><HR><HR><HR> (horizontal ruler) linia pozioma

align="right|left|center|justify”;

size= 1|2|3|... wysokość w pikselach

width=1|2|3|...|100%|... długość w pikselach, lub procentach szerokości elementu zawierającego linię

13

Page 14: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ZAGNIEŻDŻANIE ZNACZNIKÓW

Należy także pamiętać o kolejności wstawiania znaczników. Nie wolno ich "mieszać".

� <i>Lorem <b>ipsum</b>, <b>dolor</b> sit <u>amet</u></i> To jest poprawny zapis.

2011-02-16Natalia Kotsyba --- Podstawy HTML

<u>amet</u></i> To jest poprawny zapis.

� Natomiast <b>Lorem <i>ipsum</b> dolor <b><u>sit</i></u> amet</b> już nie jest poprawny.

14

Page 15: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

SZYBKIE ĆWICZENIE Z FORMATOWANIA

� http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting

2011-02-16Natalia Kotsyba --- Podstawy HTML

15

Page 16: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

DEFINIOWANIE TŁA� Tło (ang. „background”) może być atrybutem całej strony (tzn. ciała)

albo któregoś z jej elementów, np. tabeli czy jej pojedynczych wierszy, kolumn czy komórek, ale także może otaczać tekst.

<body bgcolor="red">

<body bgcolor="#00ffcc">

<body background="zoo/01.jpg"> (ścieżka relatywna)

<body background="c://__images/zoo/01.jpg"> (ścieżka absolutna)

2011-02-16Natalia Kotsyba --- Podstawy HTML

<body background="c://__images/zoo/01.jpg"> (ścieżka absolutna)

� Żeby uczynić tło nieruchomym (działa w Internet Explorerze), tzn. podczas przewijania strony na ekranie przesuwa się tylko tekst, a tło pozostaje nieruchome, do znacznika BODY należy wstawić atrybut BGPROPERTIES=”FIXED”:

� <BODY BACKGROUND=”tło.jpg” bgproperties=”fixed”><BODY BACKGROUND=”tło.jpg” bgproperties=”fixed”><BODY BACKGROUND=”tło.jpg” bgproperties=”fixed”><BODY BACKGROUND=”tło.jpg” bgproperties=”fixed”>

� Więcej o kolorach i ich kodach: http://algorytmy.pl/doc/xhtml/?id=108

16

Page 17: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

KOLORY „IMIENNE”

2011-02-16Natalia Kotsyba --- Podstawy HTML

17

Page 18: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ZMIANA KOLORU TEKSTUZMIANA KOLORU TEKSTUZMIANA KOLORU TEKSTUZMIANA KOLORU TEKSTU� Jeżeli chcemy zmienić kolor tekstu można wstawić do znacznika

BODY któryś z poniższych atrybutów:

� TEXT – określa kolor tekstu na stronie

� LINK – określa kolor tekstu połączeń (standardowo oznaczone kolorem niebieskim)

� VLINK – określa kolor połączeń, które zostały przynajmniej raz

2011-02-16Natalia Kotsyba --- Podstawy HTML

� VLINK – określa kolor połączeń, które zostały przynajmniej raz wybrane (visited link)

� ALINK – określa kolor tekstu połączeń, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy (połączenie aktywne, active link)- standardowo takie połączenia są wyświetlane na czerwono

� <body bgcolor=”blue” text=”#FF0087” link=”#80000”alink=”#FFF786”>

18

Page 19: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

KOLOR POJEDYNCZEGO ZNAKUKOLOR POJEDYNCZEGO ZNAKUKOLOR POJEDYNCZEGO ZNAKUKOLOR POJEDYNCZEGO ZNAKU� Jeżeli do zmiany koloru używa sie znacznika BODY

przekształcenia te dotyczą całego tekstu.

� Istnieje jednak możliwość zmiany barwy pojedynczego znaku. Do tego służy m.in. znacznik <FONT>, który pozwala na zmianę rozmiaru, rodzaju i koloru czcionki, objętego para znaczników <FONT>TEKST</FONT>

2011-02-16Natalia Kotsyba --- Podstawy HTML

objętego para znaczników <FONT>TEKST</FONT>

� Np.: <p>Gdy pójdziemy dziś wieczorem, pokolorujemy miasto na kolor <font color=”red”>CZERWONY</font></p>

� Oczywiście atrybut color może być wykorzystany w znaczniku <FONT> łącznie z SIZE i NAME.

19

Page 20: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ODSYŁACZE (LINKI)Dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stronEtykieta (zwana też zakładką lub kotwicą - ang. anchor) jest

znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście.

<a namenamenamename="nazwa_etykiety">Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce

2011-02-16Natalia Kotsyba --- Podstawy HTML

Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką.

<a <a <a <a hrefhrefhrefhref="miejsce_docelowe">Tekst, na którym należy kliknąć<<<<////a>a>a>a>

Przykład:Przykład:Przykład:Przykład:<a href="http://www.pcworld.pl">Tutaj znajdziesz

miesięcznik PC World Komputer</a>

20

Page 21: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ODSYŁACZE DO ODSYŁACZE DO ODSYŁACZE DO ODSYŁACZE DO ETYKIETETYKIETETYKIETETYKIET

<a href="strona.htm####nazwa_etykiety">Tekst</a>

Uwaga na znak #### oddzielający nazwę strony od nazwy etykiety.

Jeśli tworzymy odsyłacz do etykiety na tej samej

2011-02-16Natalia Kotsyba --- Podstawy HTML

Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli:

<a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a>

21

Page 22: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ODSYŁACZE DO POCZTY ELEKTRONICZNEJODSYŁACZE DO POCZTY ELEKTRONICZNEJODSYŁACZE DO POCZTY ELEKTRONICZNEJODSYŁACZE DO POCZTY ELEKTRONICZNEJ

� <a href="mailto:mailto:mailto:mailto:imie_nazwisko@adres">Tutaj kliknij</a>

<a href="mailto:[email protected]?cc=jan.kowal@

2011-02-16Natalia Kotsyba --- Podstawy HTML

href="mailto:[email protected][email protected]&amp;&amp;&amp;&amp;[email protected]&amp;&amp;&amp;&amp;subject=Bardzo ważny list&amp;&amp;&amp;&amp;body=Witajcie Panowie">Wyślij pocztę</a>

22

Page 23: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

HIERARCHIA PLIKÓW

• Odsyłacz do innej strony HTML (w tym samym katalogu):<a href="nazwa_strony.html">Edytor Pajączek</a>Edytor Pajączek• Odsyłacz do innej strony w katalogu podrzędnym<a href="katalog_podrzędny/nazwa_strony.html">Inna

strona</a>

2011-02-16Natalia Kotsyba --- Podstawy HTML

strona</a>• Odsyłacz do strony w innym katalogu, równorzędnym w

hierarchii:<a

href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</a>

Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.

23

Page 24: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

WSTAWIANIE GRAFIKI DO DOKUMENTUWSTAWIANIE GRAFIKI DO DOKUMENTUWSTAWIANIE GRAFIKI DO DOKUMENTUWSTAWIANIE GRAFIKI DO DOKUMENTU

� <img<img<img<img src="plik_graficzny" alt="nazwa alternatywna"/>

� Obrazek może być traktowany jako część ciągu tekstowego albo zostać wyniesionym w lewo czy

2011-02-16Natalia Kotsyba --- Podstawy HTML

tekstowego albo zostać wyniesionym w lewo czy w prawo za pomocą atrybutu align

� <p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="left" border ="0"> </p>

24

Page 25: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

OKREŚLENIE ODLEGŁOŚCI OBRAZU OD TEKSTUOKREŚLENIE ODLEGŁOŚCI OBRAZU OD TEKSTUOKREŚLENIE ODLEGŁOŚCI OBRAZU OD TEKSTUOKREŚLENIE ODLEGŁOŚCI OBRAZU OD TEKSTU

� Na określenie w jakiej odległości powinien znaleźć się od tekstu pozwalają atrybuty HSPACE i VSPACE

� HSPACE – określa odległość z prawej i lewej strony obrazu ( w pikselach), a VSPACE- od górnej i dolnej krawędzi obrazu

2011-02-16Natalia Kotsyba --- Podstawy HTML

krawędzi obrazu

� <img src=<img src=<img src=<img src="obrazek1.gifobrazek1.gifobrazek1.gifobrazek1.gif" alt=alt=alt=alt="domdomdomdom" align=align=align=align="rightrightrightright"vspace=vspace=vspace=vspace="50505050" hspace=hspace=hspace=hspace="40404040" />/>/>/>

� Atrybuty jednak są uznawane za przestarzałe i

zamiast nich należy raczej stosować arkusze stylów

25

Page 26: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

ODSYŁACZ OD GRAFIKI

� <a href="http://algorytmy.pl"><imgsrc="/g/logo.gif" width="120" height="60" alt="algorytmy.pl" border="0" /></a>

2011-02-16Natalia Kotsyba --- Podstawy HTML

� Przećwicz na http://www.w3schools.com/html/html_images.asp

26

Page 27: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

LISTYLISTYLISTYLISTY� uszeregowane informacje

� nieuszeregowane informacje

� definicje

� Różne rodzaje list mogą być zagnieżdżane (np. lista wypunktowana wewnątrz numerowanej).

Przykład. Przykład. Przykład. Przykład. Implementacja listy nieuporządkowanej (wypunktowanej) przedstawionej wyżej.

<UL>

2011-02-16Natalia Kotsyba --- Podstawy HTML

<UL>

<LI> uszeregowane informacje </LI>

<LI> nieuporządkowane informacje </LI>

<LI> definicje </LI>

</UL>

Znacznik <UL> (unordered list) definiuje listę, znaczniki <LI> (list item) –jej elementy.

27

Page 28: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

LISTY USZEREGOWANE

Listę uporządkowaną (numerowaną) można stworzyć przy użyciu znacznika <OL> (ordered list). Przykładem listy numerowanej może być przepis kulinarny, np.:

1. Do filiżanki wsyp łyżeczkę suchych liści herbacianych.

2. Zalej gotującą wodą.

3. Dodaj mleka, cukru lub cytryny do smaku.

2011-02-16Natalia Kotsyba --- Podstawy HTML

3. Dodaj mleka, cukru lub cytryny do smaku.

Przykład. Przykład. Przykład. Przykład. Implementacja listy numerowanej przedstawionej wyżej.

<OL>

<LI> Do filiżanki wsyp łyżeczkę suchych liści herbacianych. </LI>

<LI> Zalej gotującą wodą. </LI>

<LI> Dodaj mleka, cukru lub cytryny do smaku. </LI>

</OL>

28

Page 29: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

LISTY DEFINICJI (<DL>)Listy definicji (<DL>) zasadniczo składają się z par nazwa-definicja

(znaczniki <DT> i <DD>)Przykład. Przykład. Przykład. Przykład. Lista definicjiKałużaKałużaKałużaKałuża

Akwen wodny pozbawiony znaczenia strategicznego.ŁyżkaŁyżkaŁyżkaŁyżka

Ręczny manipulator żywieniowy.może być zdefiniowana w HTML jako:

2011-02-16Natalia Kotsyba --- Podstawy HTML

może być zdefiniowana w HTML jako: <DL><DT><STRONG>Kałuża</STRONG></DT><DD> Akwen wodny pozbawiony znaczenia strategicznego. </DD><DT><STRONG>Łyżka</STRONG></DT><DD> Ręczny manipulator żywieniowy. </DD></DL>

29

Page 30: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

RODZAJE LIST, ICH ATRYBUTY I WARTOŚCI ATRYBUTÓW

<UL><UL><UL><UL> (unordered list) lista wypunktowana

� type="disc|square|circle"

<OL><OL><OL><OL> (ordered list) lista numerowana

� type="1|a|A|i|I" wskazuje na sposób numerowania; poszczególne typy oznaczają kolejno: cyfry arabskie, małe litery alfabetu łacińskiego, duże litery alfabetu łacińskiego, małe cyfry rzymskie, duże cyfry rzymskie

2011-02-16Natalia Kotsyba --- Podstawy HTML

litery alfabetu łacińskiego, małe cyfry rzymskie, duże cyfry rzymskie

� start=1|2|3|... numer pierwszego elementu listy

<LI><LI><LI><LI> (list item) element listy

� value=1|2|3|... numer aktualnego elementu listy

<DL> <DL> <DL> <DL> (definition list) lista definicji

<DT><DT><DT><DT> (definition term) termin

<DD><DD><DD><DD> (definition description) definicja

30

Page 31: PODSTAWY JĘZYKA HTMLnatko/teaching/wk2011s/basicHTML.pdf · online:  ... EDYTORY GRAFICZNE MS Front Page Joomla! Wiki i wiele innych Natalia Kotsyba --- Podstawy HTML 2011-02-16

PYTANIA DO SAMOKONTROLI

� Które z elementów wymienionych w zadaniu domowym są częścią sekcji <head>, a które należą do <body>?

� Które znaczniki definiują formatowanie, a które

2011-02-16Natalia Kotsyba --- Podstawy HTML

� Które znaczniki definiują formatowanie, a które zawartość strony html?

31