HTML edytory, formularze, CSS Wrocław, dn. 16 maja 2006 roku HTML edytory, formularze, CSS prowadzący: Piotr Chojnacki

HTML – niezbędne pojęcia

Czym jest strona WWW? Strona WWW – dokument napisany w języku HTML i w takiej postaci przechowywany w serwerze WWW. Zawiera hipertekst uzupełniony elementami graficznymi i multimedialnymi. Osoba zainteresowana obejrzeniem danej strony może ją pobrać z serwera, posługując się przeglądarką zainstalowaną we własnym komputerze.

Czym jest język HTML? Język HTML – (Hypertext Markup Language - Hipertekstowy Język Oznaczania) język przeznaczony do opisywania dokumentów hipertekstowych, prezentowanych i odczytywanych następnie w sieci WWW za pomocą przeglądarki. Poszczególne elementy składowe strony WWW, takie jak tytuły, akapity, obrazy, dźwięki, łączniki z innymi dokumentami, adresy stron WWW są wyróżniane w tym języku za pomocą znaczników, które pełnią funkcję poleceń dla przeglądarki. Dzięki temu hipertekst może być opisany z użyciem bardzo prostego edytora tekstowego.

Czym jest dokument HTML? Dokument HTML – dokument napisany w języku HTML. Taki dokument można utworzyć w najprostszym edytorze tekstu, np. w Notatniku, programie ze środowiska Windows zapisując go z rozszerzeniem .htm lub .html. Do odczytywania dokumentów HTML służą przeglądarki.

Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu i dobre chęci. Jak wcześniej wspomnieliśmy dokument HTML jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu i wstawiania grafiki. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę.

Edytory

Edytor znaczników ezHTML 2.0 Alef (darmowy): Edytory Edytor znaczników ezHTML 2.0 Alef  (darmowy): http://ezhtml.bydnet.com.pl/ ezHTML jest łatwy i intuicyjny w obsłudze oraz posiada wiele zaawansowanych narzędzi edycyjnych. Na uwagę zasługują np. Zakładki HTML, które umożliwiają dostęp do wszystkich możliwości języka HTML, umieszczone na nich zostały wszystkie istotne znaczniki, a także "czarodzieje" i inne kreatory, w znakomity sposób przyśpieszające pracę. Dużym atutem jest również fakt, iż jest to program całkowicie darmowy. Wraz z programem dołączene są Tagik - do sprawdzania poprawności kodu HTML oraz Kartograf - służący do seryjnego wstawiania obrazków.

Edytory EdHTML 5.01 (darmowy) http://bs.binboy.org/ EdHTML programem wspomagającym tworzenie stron WWW (HTML, xHTML, WML) z wykorzystaniem języków PHP, PERL i JavaScript. Wspiera również CSS (CSS1, CSS2) i bazę danych MySQL. Posiada bardzo wiele funkcji ułatwiających wstawianie określonych (szablonowych) elementów, znacznie przyspieszając powstawanie strony. Zawiera wbudowanych szereg szablonów gotowych witryn, rozbudowany kurs HTML, a także pomoc do komend PHP, MySQL czy C++. Jest szybki, mały i można go dowolnie konfigurować.

Edytory CoreEditor 1.0.2 (płatny) http://bs.binboy.org/ Licencje: EDUCATION (darmowa), HOME (49zł), PROFESSIONAL(99zł) lub ENTERPRISE(229 zł) CoreEditor jest następcą cieszącego się sporą popularnością, darmowego EdHTML-a. Wspiera kilkadziesiąt różnych kompilatorów, ponad sto schematów kolorowania składni. Sprawdza się również jako edytor dla piszących dokumenty w TeX. Największy nacisk w programie położono na wsparcie XHTML, CSS, PHP, JavaScript i MySQL, choć również sprawdza się jako edytor do Pascala, C czy Javy. Sporo kreatorów, szablonów i gotowych do wykorzystania funkcji usprawnia pracę nad kodem.

Edytory Pajączek (płatny) www.pajaczek.pl Zawiera ponad 40 różnych schematów kolorowania składni, obsługuje serwery FTP oraz oferuje synchronizację serwisów. Wspiera pracę grupową oraz posiada zaawansowane narzędzia edycji dla różnych języków (PHP, XHTML, XML, JavaScript) i zarządzania witrynami. Warto zauważyć, że pomimo adresowania programu do profesjonalistów Pajączka cechują bardzo przejrzysty interfejs użytkownika i duża wygoda pracy.

HTML – składnia

Język HTML Dokument HTML zawiera tekst, który ma być umieszczony na stronie i polecenia (zwane znacznikami, „tagami”), które stanowią informacje dla przeglądarki, jak ten dokument ma być wyświetlony na ekranie. Polecenia, dla odróżnienia od zwykłego tekstu umieszcza się w nawiasach < >. Prawie każde polecenie języka HTML składa się z dwóch części – otwierającej i zamykającej. Różnią się one tym, że część zamykająca poprzedzona jest znakiem /. Polecenia informują przeglądarkę, co ma zrobić z tekstem, a parametry tych poleceń, jak ma to być zrobione.

Budowa dokumentu HTML <HTML> <HEAD> <TITLE> tytuł strony </TITLE> </HEAD> <BODY> treść strony </BODY> </HTML> <html> <head> <title> tytuł strony </title> </head> <body> </body> </html>

Polskie znaki – znaczniki meta (kilka wybranych). <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250"> Polecenia te są deklaracją strony kodowej, czyli sposobu, w jaki będą kodowane znaki na naszej stronie WWW. Zamiast charset=iso-8859-2 można wpisać: charset=windows-1250, ale jest to mocno odradzane, ponieważ polecenie takie deklaruje inną stronę kodową, podczas gdy w całym niemal polskim Internecie przyjęto standard kodowania iso-8859-2. <meta name="description"content="tu wpisz krótki opis strony"> <meta name="keywords"content="tu wpisz słowa kluczowe">

Poprawność kodu Deklaracja typu dokumentu: Specyfikacja HTML 4.01: www.w3.org/TR/html4, opracowana przez organizację W3C: http://www.w3.org określa elementy i atrybuty, które spełniają dotychczasowe standardy pisania w języku HTML. Deklaracja typu dokumentu: Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane (nie deprecated) oraz nie pojawiają się w dokumentach z ramkami. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co w Strict DTD plus elementy i atrybuty zdeprecjonowane <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Wybrane polecenia <I> ustalenie wyróżnienia czcionki – kursywa ustalenie wyróżnienia czcionki – pogrubiona <U> ustalenie wyróżnienia czcionki – podkreślona <CENTER> ustawienie tekstu i grafiki na środku strony <BR> zmiana wiersza – przeniesienie tekstu o jeden wiersz w dół   dodatkowy odstęp – wprowadzenie dodatkowej spacji < > " " & & <strike> wypisuje przekreślony tekst

Zagnieżdżanie znaczników Na jeden fragment tekstu może wpływać więcej niż jeden znacznik - i wtedy mówimy o znacznikach zagnieżdżonych. Jednak zawsze należy zachować w takim przypadku kolejność domykania znaczników - jako ostatni musi być domknięty ten, który został otwarty pierwszy. Podobnie, jako pierwszy domykać zawsze trzeba ten znacznik, który był otwarty ostatnio. Tak, więc poprawna będzie konstrukcja: Fragment <B> ważnego tekstu <I> możemy wyróżnić </I> pogrubieniem </B>. natomiast błędna będzie Fragment <B> ważnego tekstu <I> możemy wyróżnić </B> pogrubieniem </I> .

Polecenia z parametrami Polecenie Parametr Wybrane wartości parametrów Znaczenie < FONT > SIZE 1-7 ustalenie wielkości czcionki COLOR white, green, blue, red, purple, yellow, navy, olive ustalenie koloru czcionki < A > HREF „plik.html” wstawienie odnośnika < P > ALIGN wprowadzenie akapitu poprzedzonego interlinią center ustawienie akapitu na środku strony right wyrównanie akapitu do prawego marginesu left wyrównanie akapitu do lewego marginesu justify wyrównanie akapitu do prawego i lewego marginesu

Polecenia z parametrami… Polecenie Parametr Wybrane wartości parametrów Znaczenie < BODY > BGCOLOR ustawienie koloru tła TEXT ustawienie koloru tekstu LINK ustawienie koloru odnośnika VLINK ustawienie koloru „odwiedzonego” odnośnika < H1 – 6 > ALIGN ustawienie w nowym wierszu tytułu poziomu od 1 (największy rozmiar czcionki) do 6 center ustawienie tytułu na środku right wyrównanie tytułu do prawego marginesu left wyrównanie tytułu do lewego marginesu justify wyrównanie tytułu od prawego do lewego marginesu <HR> align, center, right, left, color, size linia

Polecenia z parametrami… Polecenie Parametr Wybrane wartości parametrów Znaczenie < IMG > SRC „plik.gif” pobieranie obrazka z pliku ALIGN left ustawienie obrazka po lewej stronie tekstu right ustawienie obrazka po prawej stronie tekstu top ustawienie obrazka u góry middle ustawienie obrazka w środku bottom ustawienie obrazka na dole ALT „objaśnienie” WIDTH liczba pikseli szerokość obrazka HEIGHT liczba pikseli wysokość obrazka   HSPACE liczba pikseli odległość obrazka od tekstu w pionie   VSPACE liczba pikseli odległość obrazka od tekstu w poziomie 

Indeksy dolne i górne Indeksy dolne i górne można uzyskać stosując znaczniki: <SUP> .. </SUP>, który oznacza indeks górny lub <SUB> .. </SUB>, który oznacza indeks dolny jako przykład mogą posłużyć następujące wzory: a <SUP> 2 </SUP> + b <SUP> 2 </SUP> = c <SUP> 2 </SUP> 3x<SUB>1</SUB><SUP>2</SUP> = e <SUP> 2 log <SUB> 3 </SUB>x<SUB>1 </SUB></SUP>

Tabela i lista <TABLE> <TR>      <TD>...</TD>     <TD>...</TD> </TR> <TR>      <TD>...</TD>     <TD>...</TD> </TR> </TABLE> <UL type="rodzaj"> <LI>Punkt pierwszy <LI>Punkt drugi <LI>Punkt trzeci </UL> <OL type=”rodzaj numeracji”> <LI>Punkt pierwszy <LI>Punkt drugi <LI>Punkt trzeci </OL>

Formularze

Formularz Dzięki formularzom, które są umieszczane bezpośrednio na stronie WWW, można uzyskać wiele informacji o użytkownikach odwiedzających nasz serwis. Służą one również do zamawiania różnych towarów w sklepach internetowych, chociaż wtedy należy dodatkowo zadbać o bezpieczeństwo przesyłanych danych. Zajmiemy się prostym formularzem pocztowym.

Formularz… Ramy formularza: <FORM ACTION="mailto:adres e-mail gdzie wysłać formularz" METHOD="post">      (Tutaj umieszcza się pola formularza) </FORM> lub <FORM ACTION="mailto:adres e-mail?Subject=temat" METHOD="post">      (Tutaj umieszcza się pola formularza) </FORM>

Formularz… pole tekstowe, pole wyboru, lista rozwijana <FORM>      <INPUT TYPE="text" NAME="nazwa"> </FORM> lub <FORM>      <INPUT NAME="nazwa"> </FORM> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z formularzem.

Formularz… pole tekstowe, pole wyboru, lista rozwijana <FORM>      <INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość">Tu wpisz opis pola </FORM> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem. Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

Formularz… pole tekstowe, pole wyboru, lista rozwijana <FORM>      <SELECT NAME="nazwa">           <OPTION>Tu wpisz pierwszą możliwość           <OPTION>Tu wpisz drugą możliwość           (...)      </SELECT> </FORM> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również wpisane możliwości odpowiedzi).

Formularz… wysyłanie <FORM>      <INPUT TYPE="submit" VALUE="wartość"> </FORM> gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij kwerendę".

CSS

Co to są style? Jest to potężne narzędzie do formatowania stron WWW (CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów). Dają one ogromne możliwości manipulowania wyglądem dokumentów i zwiększają efektywność narzędzi. Dodatkowo nie powodują problemów w przeglądarkach, które ich nie obsługują. Styl jest zespołem poleceń formatujących i pozwala zmieniać wygląd pojedynczych elementów strony lub nawet całej serii dokumentów.

Dlaczego warto używać styli? Style stały się już praktycznie podstawowym narzędzie formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania, będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji stylów. Widać już nawet różnice pomiędzy IE4 a IE5! Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.

Dlaczego warto używać styli? Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku! Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.

Wstawianie styli styl lokalny: <SELEKTOR style="cecha: wartość; cecha2: wartość2...">...</SELEKTOR> rozciąganie stylu: <SPAN style="cecha: wartość; cecha2: wartość2...">...</SPAN> wydzielone bloki: <DIV style="cecha: wartość; cecha2: wartość2...">...</DIV>

zewnętrzny arkusz styli: wewnętrzny arkusz styli: Wstawianie styli zewnętrzny arkusz styli: <HEAD> (...) <LINK REL="Stylesheet" HREF="ścieżka dostępu do pliku *.css" TYPE="text/css"> (...) </HEAD> wewnętrzny arkusz styli: <HEAD> <STYLE TYPE="text/css"> <!-- SELEKTOR { cecha: wartość; cecha2: wartość2... } SELEKTOR2 { cecha: wartość; cecha2: wartość2... } (...) --> </STYLE> (...) </HEAD> import arkusza styli: <STYLE TYPE="text/css"> <!-- @import url(adres zewnętrznego arkusza stylów); --> </STYLE>

Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak: Kaskadowość styli Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony, stylów z różnych źródeł. Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to zaś może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak: Styl lokalny (inline) Rozciąganie stylu (SPAN) oraz wydzielone bloki (DIV) Wewnętrzny arkusz stylów Zewnętrzny arkusz stylów oraz import arkusza stylów

Kaskadowość styli Można jednak świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet, jeśli ma niższy priorytet

Selektory SELEKTOR.klasa { cecha: wartość } klasy selektorów: SELEKTOR.klasa { cecha: wartość } Np.: p.bialy {color:white;} Np.: .bialy {color:white;} użycie: <p>jakiś paragraf</p> użycie: <p class=’’bialy’’>jakiś paragraf</p> selektor identyfikatora : SELEKTOR#identyfikator { cecha: wartość } Np.: p#bialy {color:white;} użycie: <p id=’’bialy’’>jakiś paragraf</p>

Omówienie podstawowych poleceń formatowania SELEKTOR { font-size: rozmiar } xx-smal - najmniejsza x-small - mniejsza small - mała medium - średnia large - duża x-large - większa xx-large - największa bądź px, em, in itp. SELEKTOR { font-family: rodzaj, rodzaj1, rodzaj2,... } SELEKTOR { font-style: styl } Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa) italic - czcionka pochylona oblique - również czcionka pochylona (podobna jak poprzednio)

Omówienie podstawowych poleceń formatowania SELEKTOR { font-weight: waga } normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji SELEKTOR { color: kolor } SELEKTOR { text-decoration: dekoracja } none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie SELEKTOR { text-align: wyrównanie } left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie).

Omówienie podstawowych poleceń formatowania SELEKTOR { text-indent: wcięcie } SELEKTOR { background-color: kolor } SELEKTOR { background-image: url(ścieżka dostępu do obrazka) } SELEKTOR { background-repeat: powtarzanie } Natomiast jako "powtarzanie" należy wpisać: repeat - powtarzanie tła w obu kierunkach (domyślnie) repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)

Omówienie podstawowych poleceń formatowania SELEKTOR { margin-top: rozmiar } SELEKTOR { margin-bottom: rozmiar } SELEKTOR { margin-left rozmiar } SELEKTOR { margin-right: rozmiar } SELEKTOR { padding-top: rozmiar } SELEKTOR { padding-bottom: rozmiar } SELEKTOR { padding-left: rozmiar } SELEKTOR { padding-right: rozmiar } SELEKTOR {height : wysokość } SELEKTOR { width: szerokość }

Pseudoklasy a.odnosnik:link {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:visited {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:active {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:hover { color: black; background: none; text-decoration: none; font-size: 16px; }

Dziękuję koniec części teoretycznej Większość materiałów zawartych w tej prezentacji opiera się na kursie http://www.kurshtml.boo.pl Prezentację jak i materiały do tego wykładu można znaleźć na stronie: www.piotrchojnacki.pl (strona główna) www.di.piotrchojnacki.pl ( bezpośrednio dydaktyka informatyki)