1 / 15

Podstawy języka HTML

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.

teague
Download Presentation

Podstawy języka 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. Podstawy języka HTML Technologie Informacyjne

  2. 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. eXtensibleHyperTextMarkupLanguage) – 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)

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

  4. Umieszczanie stron na serwerze Darmowe serwery: Klient FTP: • FileZilla • SmartFTP • Staff-FTP • TotalCommander

  5. Szablon strony Otwarcie znacznika <html> i określenie przestrzeni nazw języka XML Deklaracja wersji języka XML <?xml version="1.0"encoding="ISO-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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> Deklaracja typu dokumentu (DTD) Nagłówek (sekcja <head>) Tytuł strony Zawartość strony (sekcja <body>) Znacznik kończący dokument HTML

  6. Znaczniki Budowa podstawowego elementu języka HTML: <nazwa_znacznikaatrybut=„wartość”> zwartość </nazwa_znacznika> znacznik otwierający atrybuty znacznika znacznik zamykający

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

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

  9. Formatowanie tekstu w dokumentach HTML <br /> - przejście do następnej linii &nbsp–„dodatkowa” spacja Czcionka i jej atrybuty a) wielkość <font> </font> <font size=„a”> gdzie a: 1-7 lub <Hx> </Hx> gdzie x: 1-6 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”>

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

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

  12. Zagnieżdżanie znaczników Przykład nr 1:<br /> <ahref=„przyklad.html”><b>Link do strony z przykładami</b></a> <br /> Przykład nr 2:<br /> <b><i>Pogrubiona kursywa</i></b> <br />

  13. Wstawianie odnośników i obrazków Odnośnik: <ahref=„przyklad.html”> <b>Link do strony z przykładami</b> </a> Obrazek: <imgsrc=„obrazek.jpg” alt=„przykładowy obrazek” width=„300px”/>

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

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

More Related