Dokument hipertekstowy laboratorium II Podstawy HTML
Cel zajęć Poznanie podstawowych znaczników HTML umożliwiających zamieszczanie treści na stronie Stworzenie podstawowej strony
Struktura strony <!DOCTYPE html> <html> <head> <title>moja strona!</title> </head> <body> </body> </html>
Meta <head> <title>moja strona!</title> <meta charset="utf-8"> <meta name="description" content="dokument hipertekstowy"> <meta name="keywords content="html,css,javascript"> <meta name="author" content="ewa Turska-Zębik"> </head>
Paragraf i przełamanie linii <p>klapaucjusz myślał, myślał, wreszcie zmarszczył się i rzekł:</p><p> Dobrze. Niech będzie o miłości i śmierci, ale wszystko to musi być wyrażone językiem wyższej matematyki, a zwłaszcza algebry tensorów. Może być również wyższa topologia i analiza. A przy tym erotycznie silne, nawet zuchwałe, i w sferach cybernetycznych. <p> Klapaucjusz myślał, myślał, wreszcie zmarszczył się i rzekł: Dobrze. Niech będzie o miłości i śmierci, ale wszystko to musi być wyrażone językiem wyższej matematyki, a zwłaszcza algebry tensorów. Może być również wyższa topologia i analiza. A przy tym erotycznie silne, nawet zuchwałe, i w sferach cybernetycznych.
Paragraf i przełamanie linii <p> Przez ogród mój szatan szedł smutny śmiertelnie<br>i zmienił go w straszną, okropną pustelnię... <br>z ponurym, na piersi zwieszonym szedł czołem<br>i kwiaty kwitnące przysypał popiołem, <br>trawniki zarzucił bryłami kamienia<br>i posiał szał trwogi i śmierć przerażenia...</p> Przez ogród mój szatan szedł smutny śmiertelnie I zmienił go w straszną, okropną pustelnię... Z ponurym, na piersi zwieszonym szedł czołem I kwiaty kwitnące przysypał popiołem, Trawniki zarzucił bryłami kamienia I posiał szał trwogi i śmierć przerażenia...
Wyróżnienie w tekście <b> pogrubienie, brak semantycznego znaczenia <strong>ważne słowo w tekście <p>ze względów estetycznych ostatni wyraz jest <b>pogrubiony</b>.</p> <p>numer alarmowy to <strong>112</strong>.</p> Ze względów estetycznych ostatni wyraz jest pogrubiony. Numer alarmowy to 112.
Wyróżnienie w tekście <i> pojęcie techniczne, wyrażenie z obcego języka, nastrój <em> odmienna wymowa, położenie nacisku na dane słowo <p>lubię oglądać filmy <i>(ale w zasadzie to chyba wolę czytać książki</i>.</p> <p>lubię <em>sama</em> rozwiązywać problemy.</p> Lubię oglądać filmy (ale w zasadzie to chyba wolę czytać książki. Lubię sama rozwiązywać problemy.
Wyróżnienie w tekście <blockquote> cytat blokowy <q> cytat liniowy <blockquote> Pytasz, co w moim życiu z wszystkich rzeczą główną,<br> Powiem ci: śmierć i miłość - obydwie zarówno. </blockquote> <p>w swym wierszu Jan Lechoń stwierdza - <q> Pytasz, co w moim życiu z wszystkich rzeczą główną, Powiem ci: śmierć i miłość - obydwie zarówno</q>.</p> Pytasz, co w moim życiu z wszystkich rzeczą główną, Powiem ci: śmierć i miłość - obydwie zarówno. W swym wierszu Jan Lechoń stwierdza - Pytasz, co w moim życiu z wszystkich rzeczą główną, Powiem ci: śmierć i miłość - obydwie zarówno.
Nagłówki <h1> - <h6> <h1>filmy</h1> <h2>seriale</h2> <h2>dokumenty</h2> <h2>programy</h2> <h3>podróżnicze</h3> <h3>kulinarne</h3> <h3>popularnonaukowe</h3> <h4>pogromcy mitów</h4> <h5>odcinek 1</h5> <h5>odcinek 2</h5> <h4>jak to jest zrobione?</h4>
Listy <ul> Lista nieuporządkowana <ol> Lista uporządkowana <dl> Lista opisowa <li> Element listy
Lista nieuporządkowana <ul> <li>cyberiada</li> <li>cień wiatru</li> <li>lśnienie</li> <li>klub Dumas</li> </ul>
Lista uporządkowana <ol> <li>włącz piekarnik</li> <li>wstaw ciasto</li> <li>piecz około 30 minut</li> <li>wyłącz pikarnik</li> </ol>
Lista opisowa <dl> description list <dt> definiowany termin/nazwa <dd> definicja, opis terminu/nazwy
Lista opisowa <dl> <dt>infografia<dt> <dd>informacja prasowa wyrażona lub ilustrowana fotografią</dd> <dt>infotainment</dt> <dd>gatunek dziennikarski, łączący w sobie informację i rozrywkę</dd> </dl>
Odsyłacze <a> - odsyłacz <a href=""></a> <a href="http://www.epi.uj.edu.pl">strona EPI</a> <a title="zobacz stronę EPI" href="http://www.epi.uj.edu.pl">strona EPI</a> <a target="_blank" title="zobacz stronę EPI" href="http://www.epi.uj.edu.pl">strona EPI</a>
Media <img> - obrazek: jpg, gif, png <img src="logo.jpg"> <img src="logo.jpg" alt="logotyp EPI"> <a title= Przejdź na stronę główną href="http://www.epi.uj.edu.pl"> <img src="logo.jpg" alt="logotyp EPI"> </a>
Tabele <table> <tr> - wiersz <td> - kolumna/komórka <th> - nagłówek komórek tabeli
Tabele
<table> <caption>spis książek</caption> <tr> <th>autor</th> <th>tytuł</th> <th>cena</th> </tr> <tr> <td>stanisław Lem</td> <td>dzienniki gwiazdowe</td> <td>36,90 zł</td> </tr> <tr> <td>carlos Ruiz Zafón</td> <td>cień wiatru</td> <td>40,00 zł</td> </tr> </table>
<td> - colspan i rowspan colspan="" - określa liczbę kolumn, którą komórki powinny zająć <table> <tr> </tr> <tr> </tr> </table> <td colspan="2">kolumna 1 + Kolumna 2</td> <td>komórka 1</td> <td>komórka 2</td>
<td> - colspan i rowspan rowspan="" - ustawia liczbę wierszy, którą komórki powinny objąć <table> </table> <tr> </tr> <tr> </tr> <td>wiersz 1 - Kolumna 1</td> <td rowspan="2">wiersz 1 - Kolumna 2</td> <td>wiersz 2 - Kolumna 1</td>
Ćwiczenie Proszę otworzyć plik zadanie1.txt Proszę utworzyć nowy plik.html Na podstawie poznanych dzisiaj znaczników, proszę przeformatować tekst umieszczony w pliku zadanie1.txt, tak aby stał się treścią strony internetowej. Proszę sprawdzić, czy plik nie zawiera błędów składniowych. Gotowy plik proszę przesłać na adres: ewa.turska@uj.edu.pl
Zadanie Na podstawie poznanych dzisiaj znaczników, proszę stworzyć stronę na dowolnie wybrany przez siebie temat. Strona nie powinna zawierać błędów składniowych.