HTML Czyli Publikowanie w Internecie Publikowanie w sieci

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: W 3 C • Ostatnia wersja 4. 01 (z 1999 roku) • 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: ogonki 97 • <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 • <h 1> </h 1> nagłówek 1 go 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 Nx. G - 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. » Core. Editor - polski, komercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML. Edytor jest następcą bezpłatnego ed. HTML. » k. ED - polski, darmowy edytor, szybki i konfigurowalny, obsługujący XHTML, PHP i Java. » Hate. ML Pro - polski, darmowy edytor z obsługą (X)HTML. » Tiger 98 i Tiger. II Millenium - komercyjny polski edytor, jednak już bardzo wiekowy.

Edytory HTML » » » » ed. HTML - polski, darmowy edytor; jego następcą jest Core. Editor. 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 Java. Script. Extra Page - darmowy polski edytor, jednak piszący w "starym stylu". ez. HTML - 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. » Hot. Dog - silny amerykański edytor, komercyjny. » Coffee. Cup 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 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: – Front. Page – firmy Microsoft, komercyjny – Nvu – spolszczona wersja http: //www. nvu. pl/ – Edytor dołączony do Mozilla Suite (composer)

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. b 7. pl/index. html