1 / 10

HTML

HTML. Czyli Publikowanie w Internecie. Przeglądarka internetowa Mosaic - pierwsza Netscape Internet Explorer Opera Mozilla Dokument HTML Dokument TEKSTOWY O wyglądzie zawartości decydują znaczniki (TAGi) formatujące: <znacznik> Zakres działania danego znacznika</znacznik>.

jesse-bush
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. Przeglądarka internetowa • Mosaic - pierwsza • Netscape • Internet Explorer • Opera • Mozilla • Dokument HTML • Dokument TEKSTOWY • O wyglądzie zawartości decydują znaczniki (TAGi) formatujące: • <znacznik> Zakres działania danego znacznika</znacznik>

  3. Struktura dokumentu HTML • Znacznik dokumentu HTML to <html> • Nagłówek strony <head> • Treść dokumentu <body> <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>

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

  5. 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”, value – 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

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

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

  8. Edytory HTML • Dowolny edytor tekstowy, np. Notatnik • Specjalizowane edytory tekstowe • Macromedia HomeSite 5,5 • HTMLowiec 5,0 • NoteTab Light 4.80 • Ace HTML 4 Free • HotDog Pro 6,2 • Under Construction 98 • 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.

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

  10. Edytory HTML • Przykładowe edytory html: • FrontPage – firmy Microsoft, komercyjny • 1'st Page 2000 – firmy EverSoft, darmowy • Pajączek NxG – polski, komercyjny • TigerII – polski, komercyjny • edHTML – polski, darmowy

More Related