HTML

HTML

Czyli

Publikowanie w Internecie

Publikowanie w sieci - problemy

• Różne platformy sprzętowe użytkowników

• Różne systemy operacyjne

• Różne programy służące przeglądaniu publikacji

• Rozwiązanie: język niezależny od powyższych parametrów oparty na tekstowych ZNACZNIKACH

HTML - historia• Baza: język SGML (Standard Generalized

Markup Language)

• Oficjalny początek: 1 czerwca 1996 r

• Standaryzacja: W3C

• Ostatnia wersja 4.01 (z 1999roku)

• Aktualnie rozwijany język: XHTML– Rozszerzenie HTMLa– Aktualna wersja 1.1 (maj 2001)

• Przeglądarka internetowa– Mosaic - pierwsza– Netscape– Internet Explorer– Opera– Mozilla

• Dokument HTML– Dokument TEKSTOWY– O wyglądzie zawartości decydują znaczniki

formatujące (TAGi):• <znacznik> Zakres działania danego znacznika</znacznik>

• Znacznik może mieć atrybuty o pewnych wartościach

• Dokument HTML– Dokument TEKSTOWY– O wyglądzie zawartości decydują znaczniki

formatujące (TAGi):• <znacznik> Zakres działania danego znacznika</znacznik>

– Znacznik może mieć atrybuty o pewnych wartościach:• <znacznik atrybut=„wartość”>

• Struktura dokumentu HTML – Znacznik dokumentu HTML to <html>

– Nagłówek strony <head>

– Treść dokumentu <body>

• Struktura dokumentu HTML <html>

<head>

Informacje nagłówkowe o dokumencie, łącznie z tytułem

</head>

<body>

Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp.

</body>

</html>

• Nagłówek dokumentu HTML – <META> - opcjonalne informacje o zawartości dokumentu

• <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2"> kodowanie znaków

– Program konwertujący z windows-1250 na iso -8859-2: ogonki97ogonki97

• <META NAME ="Description" CONTENT="jakaś tam treść"> opis zawartości strony, wyświetlany w wyszukiwarek

• <META NAME="Keywords" CONTENT="jakieś wyrazy kluczowe"> wyrazy kluczowe pomagają w znalezieniu strony za pomocą wyszukiwarek

• <META HTTP-EQUIV="Refresh" CONTENT="x"; URL=http://.../strona.html" > odświeżenie zawartości co x sek., przekierowanie po x sek.

• <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> strona nie jest cache’owana na dysku lokalnym

• <META NAME="Generator" CONTENT="nazwa edytora"> nazwa programu, którym utworzono stronę

– <tilte> -tytuł dokumentu widoczny w pasku przeglądarki

Wybrane tagi formatujące tekst• znacznik akapitu, może mieć m.in. atrybut

align=”x” – układ tekstu, x: left, center, right, justify

• koniec wiersza (złamanie wiersza)

• <hr> linia pozioma,

• <center> </center> centruje dowolny element

• <ol></ol> lista uporządkowana zawierająca elementy wykazu, dodatkowe atrybuty: type – typ wyliczania, np. ”I”, start – wartość od jakiej rozpoczyna numerowanie

• <ul></ul> lista nieuporządkowana– <li></li> element wykazu (listy)

• i indeks dolny i górny

• <h1> </h1> nagłówek 1go stopnia

• pogrubienie, pochylenie, podkreślenie

Wstawiania grafiki do dokumentu• Dokument html jest tekstem więc sam zawierać grafiki nie

może!!

• Grafika umieszczana jest w osobnych plikach

• Dołączenie grafiki do dokumentu realizuje się za pomocą znacznika img i adresu (zwykle względnego) pliku jako wartości atrybutu src<img src=”./katalog/plik”>

• Inne wybrane atrybuty:– Width=, hight=: szerokość i wysokość obrazka

– Align

– Border – szerokość obramowania

Odsyłacze• Powodują wyświetlenie innego dokumentu dostępnego

w sieci• Wykonuje się je za pomocą znacznika kotwicy <a> o

atrybutach:– Name – <A NAME="nazwa_etykiety"> </A> etykieta,

umożliwia skok do konkretnego miejsca dokumentu– Href - <A HREF="miejsce_docelowe">Tekst, na którym

należy kliknąć</A> odesłanie do innego dokumentu• Odesłanie do miejsca oznaczonego etykietą:

<A HREF="strona.htm#etykieta">Tekst</A> • Uruchomienie programu pocztowego i otwarcie nowej wiadomości do

osoby o adresie <A HREF=mailto:imie_nazwisko@adres>Tutaj kliknij</A>

• Zamiast tekstu odsyłacz może stanowić grafika

Edytory HTML• Dowolny edytor tekstowy, np. Notatnik• Specjalizowane edytory tekstowe

» 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.

» 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, PHP i Java .

» HateML Pro - polski, darmowy edytor z obsługą (X)HTML.

» Tiger98 i TigerII Millenium - komercyjny polski edytor, jednak już bardzo wiekowy.

Edytory HTML» 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.

Edytory HTML

» ACE HTML Freeware - darmowy, anglojęzyczny edytor, z obsługą stron kodowych.

» HotDog - silny amerykański edytor, komercyjny.» CoffeeCup HTML Editor - silny, amerykański edytor, komercyjny.

– zadaniem edytorów tekstowych wspierających projektowanie stron WWW jest weryfikacja poprawności składni dokumentu HTML. Oferują one także podgląd strony jednak w trybie graficznym nie ma możliwości edytowania dokumentu.

– zaletą edytorów tekstowych jest tworzenie zwartych dokumentów, w których praktycznie nie występują zbędne znaczniki.

Edytory HTML• Edytory graficzne

– umożliwiają one tworzenie dokumentów HTML bez znajomości składni tego języka.

– dokument formatuje się za pomocą poleceń wprowadzanych myszką a klawiatura może służyć wyłącznie do wprowadzania tekstu.

– Znaki formatujące dostępne są poprzez menu, a częściej używane zebrane są w formie przycisków na paskach narzędziowych

– Wadą edytorów graficznych jest „produkowanie” dużej ilości nadmiarowego kodu HTML, co wpływa negatywnie na czas ładowania strony oraz utrudnia szybką edycję w programach tekstowych

Edytory HTML• Przykładowe edytory graficzne (WYSIWYG) html:

– FrontPage – firmy Microsoft, komercyjny

– Nvu – spolszczona wersja http://www.nvu.pl/

– Edytor dołączony do Mozilla Suite (composer)

http://www.nvu.pl/

Kursy webmasterskie w sieci

• http://webmaster.helion.pl/kurshtml/

• http://algorytmy.pl/doc/xhtml/

• http://www.kurshtml.boo.pl/

• http://kurs.browsehappy.pl/

• http://www.gajdaw.pl/html/index.html

• http://xhtml.b7.pl/index.html

http://webmaster.helion.pl/kurshtml/

http://algorytmy.pl/doc/xhtml/

http://www.kurshtml.boo.pl/

http://kurs.browsehappy.pl/

http://www.gajdaw.pl/html/index.html

http://xhtml.b7.pl/index.html

HTML

Documents

Transcript of HTML