1 / 17

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.

garin
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Czyli Publikowanie w Internecie

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

  3. 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)

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

  5. 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ść”>

  6. Struktura dokumentu HTML • Znacznik dokumentu HTML to <html> • Nagłówek strony <head> • Treść dokumentu <body>

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

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

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

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

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

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

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

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

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

  16. 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)

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

More Related