Post on 06-Jan-2016
description
Filologia Nowogrecka, I rok16 lutego 2011 r.
Natalia Kotsyba
• 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-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/
2011-02-16Natalia Kotsyba --- Podstawy HTML
2
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 .htmlNazwa pliku nie powinna zawierać spacji, polskich
znaków diakrytycznych czy innych znaków specjalnychDomyślna nazwa pliku w katalogu to index.htmlJak 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
2011-02-16Natalia Kotsyba --- Podstawy HTML
3
• 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+
2011-02-16Natalia Kotsyba --- Podstawy HTML
4
MS Front Page Joomla! Wikii wiele innychPozwalają na przełączenie się z widoku
skryptu HTML na widok gotowej strony
2011-02-16Natalia Kotsyba --- Podstawy HTML
5
• 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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
6
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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
7
<!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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
8
2011-02-16Natalia Kotsyba --- Podstawy HTML
9
• 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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
10
• <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">
2011-02-16Natalia Kotsyba --- Podstawy HTML
11
<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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
12
<B> (bold) pogrubienie <I> (italic) kursywa <U> (underline) podkreślenie <FONT> definicja czcionkicolor="white|black|red|green|orange|purple|....|000000|...|FFFFFF"size=1|...|7|+1|...|+7|-1|...|-7face=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 (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 poziomaalign="right|left|center|justify”;size= 1|2|3|... wysokość w pikselachwidth=1|2|3|...|100%|... długość w pikselach, lub procentach szerokości elementu zawierającego
linię
2011-02-16Natalia Kotsyba --- Podstawy HTML
13
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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
14
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting
2011-02-16Natalia Kotsyba --- Podstawy HTML
15
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
2011-02-16Natalia Kotsyba --- Podstawy HTML
16
2011-02-16Natalia Kotsyba --- Podstawy HTML
17
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”>
2011-02-16Natalia Kotsyba --- Podstawy HTML
18
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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
19
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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
20
<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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
21
<a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a>
<a href="mailto:wimmer@helion.pl?cc=jan.kowal@firma.pl&bcc=jozef.kwiatek@firma.pl&subject=Bardzo ważny list&body=Witajcie Panowie">Wyślij pocztę</a>
2011-02-16Natalia Kotsyba --- Podstawy HTML
22
• 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">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ę.
2011-02-16Natalia Kotsyba --- Podstawy HTML
23
<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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
24
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
2011-02-16Natalia Kotsyba --- Podstawy HTML
25
<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
2011-02-16Natalia Kotsyba --- Podstawy HTML
26
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.
2011-02-16Natalia Kotsyba --- Podstawy HTML
27
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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
28
Listy definicji (<DL>) zasadniczo składają się z par nazwa-definicja (znaczniki <DT> i <DD>)
Przykład. Lista definicjiKał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>
2011-02-16Natalia Kotsyba --- Podstawy HTML
29
<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
2011-02-16Natalia Kotsyba --- Podstawy HTML
30
Które z elementów wymienionych w zadaniu domowym są częścią sekcji <head>, a które należą do <body>?
2011-02-16Natalia Kotsyba --- Podstawy HTML
31