Podstawy HTML

Download Report

Transcript Podstawy HTML 

Natalia Kotsyba
PODSTAWY JĘZYKA HTML
Filologia Nowogrecka, I rok
16 lutego 2011 r.
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-dlapoczatkujacych
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
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)
NB: 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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
EDYTORY TEKSTOWE I TEKSTOWO-GRAFICZNE
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Pajączek NxG - w tej chwili wybór numer 1 dla polskiego webmastera, program komercyjny.
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.
CoreEditor - polski, komercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML.
Edytor jest następcą bezpłatnego edHTML.
kED - polski, darmowy edytor, szybki i konfigurowalny, obsługujący XHTML
HateML Pro - polski, darmowy edytor z obsługą (X)HTML.
Tiger98 i TigerII Millenium - komercyjny polski edytor, jednak już bardzo wiekowy.
TigerII MiniPad - darmowy notatnik, wygodny do szybkich poprawek.
edHTML - polski, darmowy edytor; jego następcą jest CoreEditor.
Website Pro - polski, darmowy edytor; los nieznany (?).
Zajączek PHP - polski, darmowy edytor, z dobrą obsługą PHP.
Ager Web Edytor - polski, darmowy edytor ze wsparciem dla PHP i JavaScript.
Extra Page - darmowy polski edytor, jednak piszący w "starym stylu".
ezHTML - polski edytor, także darmowy - chyba nie jest już rozwijany.
HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowy.
1'st Page 2000 - jeden z najpotężniejszych programów webmasterskich, darmowy.
ACE HTML Freeware - darmowy, anglojęzyczny edytor, z obsługą stron kodowych.
(źródło: Paweł Wimmer „Kurs języka HTML - poradnik webmastera”)
no i zwykły notatnik, Notepad+
4
Natalia Kotsyba --- Podstawy HTML
2011-02-16
EDYTORY GRAFICZNE
MS Front Page
 Joomla!
 Wiki
i wiele innych
Pozwalają na przełączenie się z widoku skryptu
HTML na widok gotowej strony

5
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ZNACZNIKI 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 musi zostać
zamknięty
• Znacznik otwierający wygląda tak:
<jakis_znacznik>
natomiast zamykający:
</jakis_znacznik>
•
6
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)
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
HTML/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">
<title> Pierwsza Strona </title>
</head>
<body>
<p>Przykładowy tekst.</p>
</body>
</html>
8
Natalia Kotsyba --- Podstawy HTML
2011-02-16
MOŻEMY POMYŚLEĆ O STRUKTURZE STRONY
JAKO O DRZEWIE
9
Natalia Kotsyba --- Podstawy HTML
•
•
•
•
•
•
2011-02-16
Przestrzenie pomiędzy znacznikami otwierającym i zamykającym
nazywamy sekcjami. W sekcjach można umieszczać inne znaczniki i
tekst.
Pierwsza linijka powyższego kodu (zwanego kodem HTML) przedstawia
informację o dokumencie. Mówi ona o tym jaką wersje HTML-a
zastosowaliś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
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ZNACZNIKI UŻYWANE W SEKCJI HEAD
<TITLE> tytuł strony, wyświetlany na górnej belce przeglądarki
•
<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. 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), polskojezyczny
serwis poswiecony muzyce rockowej i metalowej">
<meta name="keywords" content="rock metal rockmetal muzyka music heavy thrash death
black 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=utf-8">
11
Natalia Kotsyba --- Podstawy HTML
2011-02-16
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,
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
PODSTAWOWE ZNACZNIKI SŁUŻĄCE
FORMATOWANIU TEKSTU
<B> (bold) pogrubienie

<I> (italic) kursywa

<U> (underline) podkreślenie

<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> (header) nagłówki

<SMALL> "mała" czcionka

<BIG> "duża" czcionka

<P> (paragraph) akapit
align="right|left|center|justify"

<BR> (break) wymuszenie łamania linii
&nbsp; (non-breaking space) zapobiega łamaniu linii pomiędzy dwoma słowami

<PRE> (preformatted text) zachowuje nie-HTMLowe formatowanie tekstu, tzn. końce linii, znaki tabulacji

<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
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.

Natomiast <b>Lorem <i>ipsum</b> dolor
<b><u>sit</i></u> amet</b> już nie jest
poprawny.
14
Natalia Kotsyba --- Podstawy HTML
2011-02-16
SZYBKIE ĆWICZENIE Z FORMATOWANIA

http://www.w3schools.com/html/tryit.asp?file
name=tryhtml_formatting
15
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)
 Ż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”>
 Więcej o kolorach i ich kodach: http://algorytmy.pl/doc/xhtml/?id=108

16
Natalia Kotsyba --- Podstawy HTML
2011-02-16
KOLORY „IMIENNE”
17
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ZMIANA 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
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
KOLOR 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>
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ODSYŁACZE (LINKI)
Dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron
Etykieta (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 name="nazwa_etykiety">
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce
w Internecie i pozwala skoczyć do niego za pomocą
kliknięcia na niej myszką.
<a href="miejsce_docelowe">Tekst, na którym należy
kliknąć</a>
Przykład:
<a href="http://www.pcworld.pl">Tutaj znajdziesz
miesięcznik PC World Komputer</a>
20
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ODSYŁACZE DO ETYKIET
<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
stronie, wystarczy użyć samej nazwy etykiety,
czyli:
<a href="#nazwa_etykiety">Tekst, na którym
należy kliknąć</a>
21
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ODSYŁACZE DO POCZTY ELEKTRONICZNEJ
<a href="mailto:imie_nazwisko@adres">Tutaj
kliknij</a>
<a
href="mailto:[email protected]?cc=jan.kowal@
firma.pl&amp;
[email protected]&amp;subject=Bard
zo ważny list&amp;
body=Witajcie Panowie">Wyślij pocztę</a>

22
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>
• Odsyłacz do strony w innym katalogu, równorzędnym w
hierarchii:
<a
href="../katalog_równorzędny/nazwa_strony.html">Jeszc
ze 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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
WSTAWIANIE GRAFIKI DO DOKUMENTU
<img src="plik_graficzny" alt="nazwa
alternatywna"/>
 Obrazek może być traktowany jako część ciągu
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
OKREŚ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
<img src="obrazek1.gif" alt="dom" align="right"
vspace="50" hspace="40" />
Atrybuty jednak są uznawane za przestarzałe i
zamiast nich należy raczej stosować arkusze stylów
25
Natalia Kotsyba --- Podstawy HTML
2011-02-16
ODSYŁACZ OD GRAFIKI

<a href="http://algorytmy.pl"><img
src="/g/logo.gif" width="120" height="60"
alt="algorytmy.pl" border="0" /></a>

Przećwicz na
http://www.w3schools.com/html/html_images.
asp
26
Natalia Kotsyba --- Podstawy HTML
2011-02-16
LISTY
uszeregowane informacje
 nieuszeregowane informacje
 definicje
 Różne rodzaje list mogą być zagnieżdżane (np. lista wypunktowana
wewnątrz numerowanej).
Przykład. Implementacja listy nieuporządkowanej (wypunktowanej)
przedstawionej wyżej.
<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
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.
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
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. Lista definicji
Kałuża
Akwen wodny pozbawiony znaczenia strategicznego.
Łyżka
Ręczny manipulator żywieniowy.
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
Natalia Kotsyba --- Podstawy HTML
2011-02-16
RODZAJE LIST, ICH ATRYBUTY I WARTOŚCI
ATRYBUTÓW
<UL> (unordered list) lista wypunktowana
 type="disc|square|circle"
<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
 start=1|2|3|... numer pierwszego elementu listy
<LI> (list item) element listy
 value=1|2|3|... numer aktualnego elementu listy
<DL> (definition list) lista definicji
<DT> (definition term) termin
<DD> (definition description) definicja
30
Natalia Kotsyba --- Podstawy HTML
2011-02-16
PODSUMOWANIE

Które z elementów wymienionych w zadaniu
domowym są częścią sekcji <head>, a które
należą do <body>?
31