Transcript 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: ogonki97 • <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 • <p> </p> znacznik akapitu, może mieć m.in. atrybut align=”x” – układ tekstu, x: left, center, right, justify • <br> 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) • <sub> </sub> i <sup> </sup> indeks dolny i górny • <h1> </h1> nagłówek 1go stopnia • <b></b> pogrubienie, <i>pochylenie, <u>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) 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