Download
1 / 29
320 likes | 482 Views
Tworzenie stron internetowych. Podstawy HTML. „Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro” Św. Izydor z Sewilli. Tomasz Piłka. HTML – historycznie. HTML (Hypertext Markup Language) to język znacznikowy służący do pisania stron WWW.
E N D
Tworzenie stron internetowych Podstawy HTML „Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro” Św. Izydor z Sewilli Tomasz Piłka
HTML – historycznie • HTML (Hypertext Markup Language) to język znacznikowy służący do pisania stron WWW. • Przyjmuje się, że został opracowany przez Tima Bernersa-Lee w roku 1990, • Prawdopodobnie najstarszy dokument HTML dostępny w Internecie został utworzony 13 listopada 1990 roku. Tim Berners-Lee twórca koncepcji WWW (WorldWideWeb) Komputer NeXT, na którym pracowałpierwszy serwer WWW (dziś znajduje się on w muzeum CERN w Meyrin).
HTML • HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. • Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami formatującymi, zapisanymi w formie tzw. znaczników (tags). • Każdy znacznik HTML przyjmuje postać słowa kluczowego otoczonego ostrymi nawiasami (znakami "<" i ">").
HTML • Większość znaczników HTML występuje w parach, na które składają się znacznik otwierający i znacznik zamykający. Znacznik zamykający różni się od otwierającego wyłącznie znakiem ukośnika poprzedzającym słowo kluczowe. • Znaczniki HTML mogą posiadać atrybuty sterujące, które wpływają na ich funkcjonowanie. Atrybuty te są umieszczane wewnątrz znacznika, za słowem kluczowym. • Język HTML dopuszcza też możliwość stosowania komentarzy, będących blokami tekstu ignorowanymi przez programy klientów HTTP (przeglądarki). Komentarze otacza się znakami "<!--" i "-->".
Struktura dokumentu HTML Typ dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tekst</title> </head> <body> </body> </html> Niewidoczna Zawartość pliku Widoczna Zawartość pliku
Elementy nagłówka <head> <title> tytuł strony </title> <base href="http://www.firma.com/dokument.html"> <metaname="Description" content=„opis strony"> <meta name="Keywords" content="lista wyrazów kluczowych"> <metaname="Author" content="nazwisko autora"> <metahttp-equiv="content-type" content="text/html; charset=iso-8859-2"> <metahttp-equiv="Content-Language" content="pl"> <meta http-equiv="Creation-Date” content="Tue, 04 Dec 1993 21:29:02 GMT"> <meta name="Generator" content="nazwa edytora">
Elementy <body> - tło dokumentu • Obraz jako tło <body background=„URL pliku graficznego"> • Kolor tła <body bgcolor="kolor"> "kolor" może być podany „imiennie” (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych) w systemie RGB
Kolory w HTML-u • Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. • Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. • Kolor RGB zapisywany jest w postaci #RRGGBB gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF.
Kolory w HTML-u • Można też używać nazw kolorów. • Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. • Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140.
Elementy <body> - pozioma linia • Linię poziomą wstawiamy za pomocą polecenia <hr>. • Linii możemy nadać atrybuty: • grubość, np.: <hr size=”5”> • długość określoną w pikselach <hr width=”300”> lub w procencie szerokości strony <hr width=”50%”> • wyrównanie na stronie (domyślnie na środku), np.: <hr align=”left”> • Atrybuty można łączyć, np.: <hralign=”right”size=”8”width=”200”>
Formatowanie tekstu - wiersz Polecenie <br> przenosi tekst o jeden wiersz w dół (w ramach akapitu): To jest pierwszy wiersz <br>To jest drugi wiersz <br>To jest trzeci wiersz <br>To jest czwarty wiersz <br> Napisanie kilku kolejnych <br> pozwala poszerzyć pionowy odstęp między elementami (przez wstawianie pustych wierszy): <br><br><br><br>
Formatowanie tekstu - akapity • Aby rozdzielić akapity, należy się posłużyć poleceniem <p> : <p>To jest treść pierwszego akapitu</p> <p>To jest treść drugiego akapitu</p> • Wyrównywanie tekstu w akapicie: • środkowanie <p align=”center”> tekst akapitu </p> • wyrównywanie do prawego marginesu <p align=”right”> tekst akapitu </p> • wyrównywanie do lewego marginesu <p align=”left”> tekst akapitu </p> • wyrównanie jednocześnie do lewego i prawego marginesu <p align=”justify”> tekst akapitu </p>
Formatowanie tekstu - nagłówki <hn> </hn> cyfra n oznacza stopień nagłówka (mamy ich 6). Polecenie wprowadzające nagłówek stopnia pierwszego może wyglądać następująco: <h1> nagłówek pierwszego poziomu </h1>. Nagłówki można wyrównać używając polecenia align: • na środku strony <h1 align=”center”> tytuł </h1> • wyrównywanie do prawego marginesu <h1 align=”right”> tytuł </h1> • wyrównywanie do lewego marginesu <h1 align=”left”> tytuł </h1>
Formatowanie tekstu - czcionka <b> tekst pogrubiony </b> <i> tekst pochylony </i> <u> tekst podkreślony </u> <strike> tekst przekreślony </strike> <tt> tekst maszynowy </tt> <sup> indeks górny </sup> <sub> indeks dolny </sub> <blink> tekst migający </blink> <center> tekst lub obrazek na środku </center>
Formatowanie tekstu - czcionka • Krój czcioki: <font face="nazwa_kroju"> tekst </font> Na przykład: Time Arial Courier • Kolor czcionki: <font color=„kolor"> tekst </font>
Formatowanie tekstu - czcionka • Wielkość czcionki. • wartość absolutna: <font size="x">Tekst </font> Możemy stosować czcionkę o wielkości od 1 do 7 (x = 1...7). Im większa wartość, tym większa czcionka w przeglądarce. • wartość relatywna (względna)- wielkość zmiany. Czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co najwyżej 2. <font size="+x">Tekst </font> <font size="-x">Tekst </font>
Listy (wykazy) wypunktowane <ul type=”disc”> <ul type=”circle”> <ul type=”square”>
Listy (wykazy) numerowane <ol start=”x”> <ol type=”A”> numerowanie wg wielkich liter <ol type=”a”> numerowanie wg małych liter <ol type=”I”> numerowanie wg wielkich liczebników rzymskich <ol type=”i”> numerowanie wg małych liczebników rzymskich <ol type=”1”> numerowanie wg liczebników arabskich
Odsyłacze do stron WWW <a href="adres_strony_internetowej"> nazwa strony </a> Przykład: <a href="http://www.onet.pl"> Portal Onet.pl</a> Wynik: Portal Onet.pl Uwagi: • Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <a href="... "> i </a>. • Adres internetowy jest podawany w cudzysłowie.
Odsyłacze do plików • Odsyłacz do innego pliku HTML (w tym samym katalogu): <a href="nazwa_strony.html” target=”_blank”> Napis </a> • Odsyłacz do innego pliku HTML w katalogu podrzędnym: <a href=”nazwa_katalogu/nazwa_strony.html"> Napis </a> • Odsyłacz do pliku HTML w katalogu równorzędnym: <a href="../nazwa_katalogu/nazwa_strony.html"> Napis</a> • Odsyłacz do pliku tekstowego: <a href=„nazwa_pliku_tekstowego"> Tekst </a> • Odsyłacz do pliku dźwiękowego/filmu: <a href=”nazwa_pliku_multim"> Tekst </a>
Odsyłacze do miejsca na stronie • Oznaczenie miejsca (etykiety) <a name="nazwa_etykiety"> • Odsyłacz do etykiety na tej samej stronie <a href="#nazwa_etykiety"> Tekst lub obrazek, na który klikamy </a> • Odsyłacz do etykiety na innej stronie <a href="strona.htm#nazwa_etykiety"> Tekst lub obrazek, na który klikamy </a>
Odsyłacze do poczty elektronicznej <a href=”mailto:adres@poczty”> tekst lub obrazek, na który klikamy </a> Po kliknięciu zostanie na komputerze klienta uruchomiony standardowy program do obsługi poczty e-mail. Dodatkowe opcje: <a href="mailto:nowak@amu.edu.pl?cc=jan.kowal@firma.pl &subject=List ze strony &body=Witajcie Moi drodzy"> Napisz do mnie </a>
Grafika • Elementy graficzne są wyświetlane na stronie dzięki poleceniu: <img src=”URL_pliku_graficznego” /> • Znacznik img może mieć dodatkowe atrybuty: • width=”szerokość” • height=”wysokość” • alt=”tekst_opisu obrazka” • border=”grubość_obramowania” • align=”top | middle | bottom | left | right” (!) • hspace=”odstępy_poziome” • vspace=”odstępy_pionowe” • Pliki graficzne muszą zostać umieszczone na serwerze razem z plikami html tworzącymi stronę.
Grafika • Na stronie można umieszczać również tzw. mapy obrazkowe, czyli obrazy ze zdefiniowanymi obszarami, których kliknięcia powoduje wyświetlenie innego pliku (są to tzw. hot-spots) przykład • Definicja obrazka będącego mapą: <img src="razem1.gif" usemap="#razem1" border="0"> • Definicja obszarów hot-spots: <map id="razem1" name="razem1"> <area shape="circle" coords="193,86,36" href=„plik1.html" alt="Kubuś Puchatek"> <area shape="rect" coords="114,96,161,157" href=„plik2.html" alt="Kłapouchy"> <area shape="poly" coords="92,72,153,94,144,37" href=„plik3.html" alt="Tygrysek"> <area shape="circle" coords="92,132,24" href=„plik4.html" alt="Prosiaczek"> <area shape="default" nohref="nohref" alt="Moja strona o Kubusiu Puchatku"> </map>
Tabele • Tabela w HTML-u składa się z wierszy (zaznaczanych znacznikiem <tr>) oraz zawartych w nich komórek (wprowadzanych znacznikiem <td>). W komórkach można umieszczać tekst lub grafikę. <table width=”50%” border=”5” > <tr><td> Komórka 11</td> <td> Komórka 12 </td></tr><tr><td> Komórka 21</td> <td> Komórka 22 </td></tr> </table>
Tabele Znacznik <table> może mieć wiele atrybutów, m.in.: • align – określa sposób wyrównania tabeli, • width - określa szerokość tabeli w pikselach albo w postaci procentu szerokości ekranu przeglądarki, • bgcolor - kolor tła we wszystkich komórkach tabeli, • cellpading – ilość wolnej przestrzeni między zawartością komórki a jej brzegiem, • cellspacing – przerwa (w pikselach) między poszczególnymi komórkami, • border - grubość brzegów w pikselach • frame - określa, które części zewnętrznych brzegów tabeli są wyświetlane. • rules - pozwala manipulować wewnętrznymi liniami tabeli.
Tabele Niektóre atrybuty można nadać komórkom lub wierszom tabeli, np.: • Atrybut colspan – umożliwia rozciągnięcie komórki tabeli na więcej kolumn w wierszu <td colspan=”3”> • Atrybut rowspan – umożliwia rozciągnięcie komórki na więcej wierszy w kolumnie <td rowspan=”4”> • Komórkom można nadać kolor tła inny niż kolor tła całej tabeli.
Ramki • Ramki pozwalają na wyświetlenie na stronie innej strony internetowej lub innego pliku. <iframe src=”URL_dokumentu” name=”nazwa_ramki”>tekst dla użytkowników przeglądarek nie obsługujących takich ramek </iframe> • Znacznik iframe może mieć dodatkowe atrybuty: • frameborder=”0|1” • height=”wysokość_ramki” • width=”szerokość_ramki” • marginwidth=”szerokość_marginesu” • marginheight=”wysokość_marginesu” • scrolling=”yes|no|auto” • align=”top | middle | bottom | left | right”>
