Wst p do j zyka HTML. Krzysztof Szafran (IInf UW) Warszawa, 18 pa¹dziernika Warszawa, 18 pa¹dziernika / 20

Wielkość: px

Rozpocząć pokaz od strony:

Download "Wst p do j zyka HTML. Krzysztof Szafran (IInf UW) Warszawa, 18 pa¹dziernika Warszawa, 18 pa¹dziernika / 20"

Marta Wojciechowska
5 lat temu
Przeglądów:

1 Wst p do j zyka Krzysztof Szafran IInf UW Warszawa, 18 pa¹dziernika 2017 Warszawa, 18 pa¹dziernika / 20

2 Spis tre±ci 1 Czym jest? Znaczniki Strona Strkuktura i parametry strony Sekcja head Tworzenie struktury strony Linki (odsyªacze) Obrazki Warszawa, 18 pa¹dziernika / 20

3 Czym jest? Standardowy, sformalizowany j zyk opisu (tworzenia) stron internetowych. Przegl darka internetowa czyta pliki zapisane w -u i pokazuje je jako strony internetowe. Warszawa, 18 pa¹dziernika / 20

4 Czym jest? Podstawowe wªasno±ci: J zyk oparty na znacznikach. Opisuje struktur strony. Pozwala na umieszczanie odno±ników do zasobów, równie» zewn trznych. Pozwala na umieszczanie obrazów, animacji, d¹wi ków, lmów i innych typów danych. Warszawa, 18 pa¹dziernika / 20

5 Czym jest? Dokument Podstawowe wªa±ciwo±ci: Zwykªy plik tekstowy bez informacji formatuj cych. Zawiera tre± strony oraz wplecione w ni znaczniki (tekstowe). Przygotowywany dowolnym edytorem tekstowym. W systemie Windows np. Notatnik albo Notepad++ Pod Linuksem np. vim, emacs, kedit, gedit,... Specjalizowane edytory wspomagaj ce tworzenie dokumentów. Amaya, Bluefish, Pajaczek,... Warszawa, 18 pa¹dziernika / 20

6 Czym jest? Dokument Schemat pracy z dokumentem : Otwieramy ten sam plik edytorem i przegl dark. Zmian dokonujemy edytorem (pami tamy o save). Efet zmiany obserwujemy w przegl darce (pami tamy o reload). Warszawa, 18 pa¹dziernika / 20

7 Znaczniki Znaczniki Tekst pozbawiony znaczników Przegl darka ignoruje znaki ko«ca wiersza i wielokrotne spacje. Tekst: Pierwszy wiersz tekstu. Drugi wiersz tekstu. Trzeci wiersz tekstu. zostanie pokazany z pomini ciem struktury: Pierwszy wiersz tekstu. Drugi wiersz tekstu. Trzeci wiersz tekstu. Aby j zachowa, nale»y u»y odpowiednich znaczników! Warszawa, 18 pa¹dziernika / 20

8 Znaczniki Znaczniki Znaczniki sªu» do deniowania ró»nych elementów (cz ±ci) strony: akapitów, nagªówków (tytuªów), list (wylicze«), tabel, obrazków, odsyªaczy, innych obiektów. Do deniowania ró»nych elementów sªu» odpowienie (ró»ne) znaczniki. Warszawa, 18 pa¹dziernika / 20

9 Znaczniki Znaczniki Sposób u»ycia znaczników Znacznik jest napisem uj tym w nawiasy k towe, np. <p>. Zwykle elementy strony deniowane s przez par znaczników obejmuj cych tekst b d cy tre±ci elementu, np. <p > Tekst akapitu... </p > Denicje elementów nie mog zachodzi na siebie, zapis <a > <b > </a > </b > nie jest poprawny. Warszawa, 18 pa¹dziernika / 20

10 Znaczniki Znaczniki Sposób u»ycia znaczników Istniej znaczniki niewyst puj ce parami, np. <br /> - koniec linii. Poza nazw znaczniki mog zawiera atrybuty uzupeªniaj ce albo modykuj ce ich znaczenie, np. znacznik < table >... </ table > deniuje tabel bez ramki, dosuni t do lewej kraw dzi okna. Uzyskanie ramki wymaga doddania atrybutu border a wycentrowanie tabeli wewn trz okna, atrybutu align, któremu nadano warto± center. < table border = ''1 '' align = '' center ''>... </ table > Warszawa, 18 pa¹dziernika

11 Strona Struktura strony Struktura strony Element <html> - obejmuje caª stron. Nagªówek <head> - metainformacje o stronie. Tre± strony <body> - to, co ma by widoczne na stronie.. Ka»dy z tych elementów mo»e wyst pi tylko jeden raz. <html > <head >... </ head > <body >... </ body > </ html > Warszawa, 18 pa¹dziernika

12 Strona Parametry strony Deklaracja DOCTYPE DOCTPE - podaje informacj o formalnej denicji u»ytej wersji html-a. <! DOCTYPE html PUBLIC " -// W3C // DTD 4.01 Transitional // EN " " http: // www. w3. org / TR / html4 / loose. dtd " > Wyst puje przed znacznikiem <html>. Jest niezb dna przy werykacji poprawno±ci opisu strony - Warszawa, 18 pa¹dziernika

13 Strona Sekcja <head> Znaczniki w sekcji <head> Tytuª strony wy±wietlany w nagªówku okna przegl darki: < title > Tytul widoczny na pasku przegladarki </ title > Kodowanie (i typ zawarto±ci) strony (uwaga na cudzysªowy): < meta http - equiv =" content - type " content =" text / html ; charset = utf -8 " > Typowe kodowania: utf-8, iso , Windows Informacja o autorze strony: < meta name = '' Author '' content = ''Jan Kowalski ''> Link do arkusza stylów (nieobowi zkowy): < link href =" styl. css " rel =" stylesheet " > Warszawa, 18 pa¹dziernika

14 Akapity i ko«ce linii Akapit - znaczniki <p> i </p>. Koniec wiersza - znacznik <br />. Pami tamy o wymaganych parach znaczników. <p > tekst akapitu... tekst akapitu... tekst akapitu... tekst akapitu... tekst akapitu... tekst akapitu... <br / > tekst akapitu... tekst akapitu... tekst akapitu... </p > Sekcja tekstu - znaczniki <div> i </div>. Warszawa, 18 pa¹dziernika

15 Nagªówki Nagªówki sªu» do dzielenia strony na cz ±ci. Jest 6 poziomów nagªówków - odpowiadaj im znaczniki od <h1> do <h6>. Przegl darka pokazuje je pismem powi kszonym i wytªuszczonym - im mniejszy numer, tym wi ksze pismo. Do ozmaczania tytuªu caªej strony u»ywa si znacznika <h1>. <h1 > Tekst naglowka 1 - go poziomu </ h1 > <h2 > Tekst naglowka 2 - go poziomu </ h2 > <h3 > Tekst naglowka 3 - go poziomu </ h3 > <h4 > Tekst naglowka 4 - go poziomu </ h4 > <h5 > Tekst naglowka 5 - go poziomu </ h5 > <h6 > Tekst naglowka 6 - go poziomu </ h6 > Warszawa, 18 pa¹dziernika

16 Listy Lista numerowana - znaczniki <ol>, </ol>. Lista nienumerowana (wypunktowana) - znaczniki <ul>, </ul>. Lista skªada si z elementów listy - znacznik <li>, </li>. Ten znacznik mo»e wyst powa tylko wewn trz elementu <ol> albo <ul>: <ol > <li > Element 1 </ li > <li > Element 2 </ li > <li > Element 3 </ li > </ol > Warszawa, 18 pa¹dziernika

17 Proste tabele Tabela - znaczniki <table>, </table>. Wiersz tabeli - znaczniki <tr>, </tr>. Komórka wiersza - znaczniki <th>, </th> oraz <td>, </td>. Opisanie nawet maªej tabeli wymaga sporo pracy: < table > <tr > <th > A </th > <th > B </th > <th > C </th > </tr > <tr > <td > 1 </td > <td > 2 </td > <td > 3 </td > </tr > </ table > Tabela cz sto wymaga dodania atrybutów do znacznika <table>. Warszawa, 18 pa¹dziernika

18 Inne u»yteczne elementy tekstu <em> Wzmocnienie(emfaza) </em>. <strong> Silne wyró»nienie </strong>. <q> Cytat </q>. <blockquote> Cytat blokowy (dªugi) </blockquote>. <cite> Cytowanie (podanie»ródªa) </cite>. <abbr> Skrót </abbr>. <code> Fragment tekstu programu </code>. Warszawa, 18 pa¹dziernika

19 Linki (odsyªacze) Aktywny dost p do zasobów. Link (odsyªacz, odno±nik) - tekst albo obrazek na stronie, w który mo»na klikn. Cel odno±nika - etykieta albo adres (lokalny albo sieciowy) zasobu (strony, pliku, itp.). Etykieta - <a name="nazwa_etykiety"></a> <a href = '' http: // www. uw. edu. pl ''> Uniwersytet Warszawski </a > <a href = '' pliki / plik. pdf ''> Plik do pobrania </a > <a href = ''# top ''>Go to top </a > Warszawa, 18 pa¹dziernika

20 Obrazki Rózne formaty graki - JPG, GIF, PNG, SVG < img src = '' obrazki / obrazek1. jpg '' alt = '' Pierwszy obrazek ''/> < img src = '' http: // www. uw. edu. pl / obrazki / obrazek2. svg '' alt = '' Drugi obrazek ''/> Atrybut src - adres lokalny pliku albo peªny adres internetowy. Atrybur alt - obowi zkowy, tekstowy opis obrazka, wy±wietlany gdy obrazek nie mo»e by pokazany. Obrazek jako link: <a href =" default." > < img src =" smiley. gif " alt =" Obrazek smiley " > </a > Warszawa, 18 pa¹dziernika

Podobne dokumenty

Technologie Informacyjne

Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje