Wprowadzenie do HTML
description
Transcript of Wprowadzenie do HTML
![Page 1: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/1.jpg)
Wprowadzenie do HTML
dr inż. Jan Kapała2007
![Page 2: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/2.jpg)
HTML (Hyper Text Markup Language) jest językiem programowania, który umożliwia równoczesne:
• redagowanie tekstu• umieszczanie obrazów w tekście• natychmiastowe przełączanie się między różnymi fragmentami tekstu (tzw linki)• generowanie treści interaktywnej• implementowanie w tekście samodzielnych programów oraz elementów multimedialnych (film, dźwięk )
![Page 3: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/3.jpg)
Kod źródłowy języka HTML pisze się w trybie tekstowym a następnie odtwarza w przeglądarce.
Przyjętym sposobem deklarowania tekstu jako obiektu HTML jest nadanie plikowi tekstowemu z treścią dokumentu rozszerzenia *.html lub *.htm
Do edycji programów HTML (tzw. stron www) używa się specjalnych edytorów tekstowych, które zaznaczają kolorem lub rodzajem czcionki elementy języka (tzw. tagi).
![Page 4: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/4.jpg)
Tag jest instrukcją w postaci słowa umieszczonego w nawiasach ostrych, na przykład: <body> Większość tagów używa się w parach jako tag otwierający i tag zamykający, na przykład: </body> Tag może zawierać różne atrybuty, które określają szczegółowe właściwości i jego sposób działania.
![Page 5: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/5.jpg)
Przeglądarka analizując tekst dokumentu natrafiwszy na tag <html> interpretuje go aż do napotkania tagu </html> który oznacza koniec dokumentu html
Wnętrze dokumentu jest podzielone odpowiednimi tagami na dwie główne części:1. <head> … </head>2. <body> … </body>
![Page 6: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/6.jpg)
Część pliku pomiędzy tagami <head> … </head>powinna zawierać co najmniej tag<title> tytuł strony </title>, między którymi umieszcza się tytuł pokazywany w nagłówku przeglądanej strony. Ponadto może zawierać tzw. metatagi, które są informacją dla robotów sieciowych zbierających informacje do serwisów wyszukujących informacje w internecie (Google, Altavista, Scirus itp.)
![Page 7: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/7.jpg)
Część pliku pomiędzy tagami <body> … </body>Zawiera treść strony www zredagowaną za pomocą innych tagów. Jednym z głównych tagów jest tag formatujacy akapit :<p> tekst akapitu </p>
Akapit modyfikuje się dodatkowymi atrybutamiNa przykład:<p align=right> tekst akapitu align=right </p><p align=left> tekst akapitu align=left </p><p align=center> tekst akapitu align=center </p>
![Page 8: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/8.jpg)
W rezultacie tekst pliku html wygląda tak:<html><head><title> strona testowa</title><head><body><p align=right> tekst akapitu align=right </p><p align=left> tekst akapitu align=left </p><p align=center> tekst akapitu align=center </p></body></html>
A strona wyświetlona w przegladarce tak:
![Page 9: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/9.jpg)
Główne atrybuty taga <body> :Określajace kolor:text kolor tekstubgcolor kolor tłalink kolor odnośnikaalink kolor uruchamianego odnośnikavlink kolor odnośnika odwiedzonego wcześniejInne:background URL(odnośnik) do obrazka stanowiącego tło stronyonload, onunload reakcja na załadowanie i opuszczenie dokumentu przez przeglądarkę
![Page 10: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/10.jpg)
Tekst pliku html (z tekstem testowym)wygląda tak:
<html><head><title> strona testowa </title><head><body text=yellow bgcolor=maroon><p> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris sed massa sit amet leo aliquam tincidunt. Praesent consectetuer justo ut lacus. Fusce dolor. Aliquam ac sapien in quam accumsan dictum. </p>
<p> Nunc vitae leo. Integer tristique tempus ipsum. Mauris id diam. Cras vel odio bibendum ipsum vulputate luctus. Maecenas tellus justo, ultrices non, commodo eget, convallis sit amet, magna. Nam lectus odio, nonummy nec, dictum a, dictum vel, leo. Nullam eu pede in nunc vulputate pharetra. Donec ornare mauris a eros. Maecenas non nunc at orci fringilla pretium. </p>
</body></html>
![Page 11: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/11.jpg)
Plik z poprzedniej planszy po wyświetleniu w przegladarce wygląda tak (dwa akapity):
![Page 12: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/12.jpg)
Tagi definiujące nagłówki:
<h1> </h1> <h2> </h2><h3> </h3><h4> </h4><h5> </h5><h6> </h6>
określają rozmiar tekstu nagłówka wzrastający od <h6> do <h1>
![Page 13: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/13.jpg)
Tekst pliku html razem z obrazem z przeglądarki:
<html><head><title> strona testowa </title><head><body text=yellow bgcolor=green><h1> Lorem ipsum h1</h1><h2> Lorem ipsum h2</h2><h3> Lorem ipsum h3</h3><h4> Lorem ipsum h4</h4><h5> Lorem ipsum h5</h5><h6> Lorem ipsum h6</h6></body></html>
![Page 14: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/14.jpg)
Pliki graficzne (z rozszerzeniem jpg, gif, png) umieszcza się za pomoca tagu <img src=”url obrazka”>:
<html><head><title> strona testowa </title><head><body text=yellow bgcolor=green><h1> Lorem ipsum </h1><p><img src="small.jpg" width=80 border=4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
sed massa sit amet leo aliquam tincidunt.</p></body></html>
![Page 15: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/15.jpg)
Do tagu wprowadzającego obrazek warto dodać się atrybut alt, który podaje tekst wyświetlający się zamiast obrazka, gdy nie jest możliwe jego wyświetlenie (zmienione także sa inne atrybuty):
<html><head><title> strona testowa </title><head><body text=antiquewhite bgcolor=firebrick><h1> Lorem ipsum </h1><p><img src="" width=120 border=2 alt="fraktal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
sed massa sit amet leo aliquam tincidunt.</p></body></html>
![Page 16: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/16.jpg)
W każdym miejscu tekstu można natychmiast przejść do nowej linii tagiem <br>
<html><head><title> strona testowa </title><head><body text=darkred bgcolor=aquamarine><h2> Lorem ipsum</h2><p>Lorem ipsum dolor sit amet,<br> consectetuer adipiscing elit. <br>
Mauris sed massa sit amet leo aliquam tincidunt.</p></body></html>
![Page 17: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/17.jpg)
Lista może być numerowana <ol> </ol> lub nienumerowana <ul> </ul> a każdy element listy oznacza się tagami <li></li>
<html><head><title> strona testowa </title><head><body text=indigo bgcolor=beige><h2> Lorem ipsum</h2><ol><li> Lorem ipsum </li> <li> dolor sit amet </li></ol><ul><li> consectetuer adipiscing elit. </li><li> Mauris sed massa sit amet leo </li><li> aliquam tincidunt. </li> </ul></body></html>
![Page 18: Wprowadzenie do HTML](https://reader036.fdocuments.net/reader036/viewer/2022081822/56815e62550346895dccdf6b/html5/thumbnails/18.jpg)
Większość podstawowych tagów wraz z opisem ich działania oraz stosownymi przykładami można znaleźć na stronie:
http://alchemik.ch.pwr.wroc.pl/tin/kurs_html
oraz na wielu innych stronachmin.http://www.kurshtml.boo.pl/html/zielony.htmlhttp://pl.html.net/tutorials/html