Transcript Slajd 1
Podstawy języka HTML Technologie Informacyjne HyperText Markup Language czyli HTML HTML - język opisujący sposób wyświetlania na ekranie odbiorców treści tekstowej i multimedialnej dokumentów hipertekstowych oraz organizację wzajemnych połączeń między nimi. XHTML – (ang. eXtensible HyperText Markup Language) – język służący do tworzenia stron WWW będący następcą standardu HTML. Dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML, dzięki czemu możliwe jest łatwe łączenie go z innymi językami zgodnymi z XML np. MathML (język służący do opisywania wzorów i symboli matematycznych) Edytory HTML • Windows: – darmowe: EdHTML, edytor znaczników – ezHTML, HateML Pro, kED, PSPad, FOXEdit – płatne: Pajączek, CoreEditor • Linux: – Bluefish, gedit, Kate, Quanta Plus • Mac OS X: – Bluefish, Smultron, Taco HTML Edit Umieszczanie stron na serwerze Darmowe serwery: Adres http://www.cba.pl/ http://60free.ovh.org/ http://freehost.pl/ http://miasto.interia.pl/ 400 MB 60 MB 500 MB 40 MB http://www.lua.pl/ 350 MB http://www.hosting.osemka.pl/ 500 MB http://republika.pl/ Klient FTP: • • • • Rozmiar FileZilla SmartFTP Staff-FTP TotalCommander 30 MB Szablon strony znacznika DeklaracjaOtwarcie wersji języka XML <html> i określenie <!DOCTYPE html przestrzeni nazw PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Deklaracja typu "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> języka XML dokumentu (DTD) <?xml version="1.0" encoding="ISO-8859-2"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> Nagłówek (sekcja <head>) Tytuł strony Zawartość strony (sekcja <body>) Znacznik kończący dokument HTML Znaczniki Budowa podstawowego elementu języka HTML: <nazwa_znacznika atrybut=„wartość”> zwartość </nazwa_znacznika> znacznik otwierającyatrybuty znacznika znacznik zamykający Znaczniki Budowa podstawowego elementu języka HTML: <nazwa_znacznika atrybut=„wartość”> zwartość </nazwa_znacznika> Przykład: <body bgcolor=„silver” align=„center”> Tutaj wpisz jakiś tekst </body> Formatowanie tekstu w dokumentach HTML Akapit i jego atrybuty <p> </p> <p align=„wartość”> ALIGN=left - równanie do lewej ALIGN=center – centrowanie, efekt centrowania można uzyskać również poleceniem <CENTER> .. </CENTER> ALIGN=right - równanie do prawej np. <p>Ten tekst domyślnie wyrówna się do lewej</p> <p align=center>Ten będzie na środku</p> <p align=right>Ten zaś wyrówna się do prawej</p> Ten tekst domyślnie wyrówna się do lewej Ten będzie na środku Ten zaś wyrówna się do prawej Formatowanie tekstu w dokumentach HTML <br />   - przejście do następnej linii – „dodatkowa” spacja Czcionka i jej atrybuty a) wielkość <font> </font> <font size=„a”> gdzie a: 1-7 np. <H1> To jest nagłówek nr 1 </H1> <H2> To jest nr 2 </H2> efekt To jest nagłówek nr 1 To jest nr 2 b) typ <font face=„Arial”> lub <Hx> </Hx> gdzie x: 1-6 Formatowanie tekstu w dokumentach HTML Czcionka i jej atrybuty cd… c) Pozostałe atrybuty czcionki <b> </b> - pogrubienie <i> </i> - kursywa <u> </u> - podkreślenie c) indeksy <sup> </sup> - indeks górny <sub> </sub> - indeks dolny Przydatne znaczniki <pre> </pre> - zachowanie formatowania wprowadzanego teksu zgodnie z pierwotny fomatowaiem jego w kodzie źródłowym <blink> </blink> - miganie tekstu Kolory w języku HTML Sposoby umieszczania kolorów w dokumencie HTML • deklaracja słowna np.: red, green, blue • kod szesnastkowy w postaci #RRGGBB lub skróconej #RGB Przykładowe zastosowania: <body bgcolor="kolor">...</body> <font color="kolor">...</font> Zagnieżdżanie znaczników Przykład nr 1:<br /> <a href=„przyklad.html”><b>Link do strony z przykładami</b></a> <br /> Przykład nr 2:<br /> <b><i>Pogrubiona kursywa</i></b> <br /> Wstawianie odnośników i obrazków Odnośnik: <a href=„przyklad.html”> <b>Link do strony z przykładami</b> </a> Obrazek: <img src=„obrazek.jpg” alt=„przykładowy obrazek” width=„300px”/> Listy wypunktowane i numerowane <ol> <li>Poniedziałek</li> <li>Wtorek</li> <li>Środa</li> </ol> <ul> <li>Koń</li> <li>Krowa</li> <li>Droga na Ostrołękę</li> </ul> Tabele <table border="1px„ cellspacing="5px" cellpadding="20px"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table>