Tekst i hiperłącza

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/tekst.html
Autor:
Radosław Kowaluk

Style tekstu

Wstęp

W swoim folderze roboczym utwórz dokument tekst.html (wykorzystaj plik szablonstrony1.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Tekst i hiperłącza</title>
  <meta charset="utf-8"/>
 </head>
 <body>

 </body>
</html>

Style fizyczne: pogrubienie1, kursywa2, pomniejszenie3, indeks górny4, indeks dolny5.

W pliku tekst.html w elemencie body dopisz kod.

 <body>
  <h1>Style formatowania</h1>
  <h2>Style fizyczne:</h2>
  <p>To jest czcionka <b>pogrubiona</b></p>
  <p>To jest czcionka <i>pochylona</i></p>
  <p>To jest czcionka <small>pomniejszona</small></p>
  <p>To jest <sub>indeks dolny</sub></p>
  <p>To jest <sup>indeks górny</sup></p>
  <hr/>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Fragment tekstu, grupa elementów liniowych6

W pliku tekst.html w elemencie body dopisz kod. Zapisz i odśwież. 

  <hr/>
  <p>To jest <span style="color: red;">
   wyróżniony fragment</span> tekstu</p>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Hiperłącze7 i adres docelowy8 (zasoby9)

W pliku tekst.html dopisz (przed wcześniejszymi przykładami) . Zapisz dokument i odśwież podgląd w przeglądarce, sprawdź działanie hiperłączy.

 <body>
  <h1>Hiperłącza</h1>
  <h2>Hiperłącza globalne:</h2>
  <ol>
   <li><a href="http://www.w3.org/">W3C</a></li>
  </ol>
  <hr/>
  <h1>Style formatowania</h1>

Hiperłącze do zasobu

W pliku tekst.html dopisz przykład. Sprawdź działanie hiperłączy.

  <hr/>
  <h2>Hiperłącza do zasobów:</h2>
  <p>
<a href="akapity.html">Ćwiczenia z akapitów</a>
  </p>
  <hr/>
  <h1>Style formatowania</h1>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

W pliku index.html  w elemencie body dopisz kod. Zapisz i odśwież dokument w przeglądarce. 

 <body>
  <h1>Ćwiczenia z edycji i formatowania<br/>
 stron WWW</h1>
  <h2>Rozwiązania</h2>
  <ul>
   <li>
<a href="akapity.html">Akapity i listy</a>
   </li>
   <li>
<a href="tekst.html">Tekst i hiperłącza</a>
   </li>
  </ul>
  <h2>Szablony</h2>
  <div>
<a href="szablony/szablonstrony1.html">
Szablon strony 1
</a>
<a href="szablony/szablonstrony2.html">
Szablon strony 2
</a>
<a href="szablony/szablonstrony3.html">
Szablon strony 3
</a>
  </div>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Wgrywanie plików na serwer

Sprawdź poprawność kodu (narzędziem Źródło strony) i umieść pliki tekst.html i index.html na serwerze i sprawdź poprawność hiperłączy.

  1. Element <b> - czcionka pogrubiona.
  2. Elementy <i> - czcionka pochylona, kursywa.
  3. Element <small> - czcionka pomniejszona.
  4. Element <sub> - indeks dolny
  5. Element <sup> - indeks górny
  6. Element <span> - grupa elementów liniowych.
  7. Element <a> - tekst hiperłącza.
  8. Atrybut href - adres docelowy hiperłącza. Wartością jest URI
  9. Wartość URI - identyfikator zasobu: adres pliku, e-mail

Elementy liniowe

Hiperłącze do adresu e-mail

W pliku tekst.html dopisz przykład. Sprawdź działanie hiperłączy.

  <hr/>
  <h2>Hiperłącze adresu e-mail:</h2>
  <div>
<a href="mailto:nazwa@serwer.pl">nazwa@serwer.pl</a>
  </div>
  <hr/>
  <h1>Style formatowania</h1>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Style logiczne tekstu: skrót1, cytat2, fragment3, kod4, definicja5, uwypuklenie6, wartość7, tekst z klawiatury8, przykład9, wyróżnienie10.

W pliku tekst.html w elemencie body dopisz kod. 

  <h2>Style logiczne:</h2>
  <p>To jest <abbr>skrót</abbr></p>
  <p>
To jest cytat liniowy <q>fragment kodu (liniowy)</q>
  </p>
  <p>To jest <cite>cytat</cite></p>
  <p>To jest <code>kod programu</code></p>
  <p>To jest <dfn>tekst definicji</dfn></p>
  <p>To jest <em>emfaza tekstu</em> tekstu</p>
  <p>To jest <var>zmienna</var></p>
  <p>To jest <kbd>tekst z klawiatury</kbd></p>
  <p>To jest <samp>tekst przykładowy</samp></p>
  <p>To jest <strong>wyróżnienie</strong></p>
  <hr/>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Style edycji: tekst usunięty11, tekst wstawiony12.

W pliku tekst.html w elemencie body dopisz kod.

  <hr/>
  <h2>Style edycji:</h2>
  <p>To jest <del>tekst usunięty</del></p>
  <p>To jest <ins>wstawka redakcyjna</ins></p>
  <hr/>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Data dodania (lub sunięcia) elementu13

W pliku tekst.html w znaczniku ins dopisz kod. 

<ins datetime="2010-10-21T08:15:30-05:00">wstawka...

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Sposób otwierania hiperłączy14

W pliku tekst.html odnajdź i zmień odpowiedni fragment kodu:

<li><a href="http://www.w3.org/" target="_blank" >W3C</a>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Sprawdź działanie hiperłącza.

Hiperłącza

W plikach index.html i tekst.html dopisz przykładowe hiperłącza do poznanych na zajęciach zasobów, narzędzi. Sprawdź działanie hiperłączy.

Nowe elementy liniowe w HTML5 14

Wgrywanie plików na serwer

Sprawdź poprawność kodu i umieść pliki tekst.html i index.html na serwerze.

Sprawdzanie poprawności stron witryny

Sprawdź poprawność stron witryny narzędziem  validator.w3.org.

  1. Element <abbr> - skrót lub akronim.
  2. Elementy <q> - cytat liniowy (internetowy), może zawierać źródło w atrybucie cite.
  3. Element <cite> - cytat, fragment.
  4. Element <code> - kod np. programu.
  5. Element <dfn> - definicja, wyjaśnienie.
  6. Element <em> - emfaza, uwypuklenie, wyróżnienie
  7. Element <var> - zmienna, wartość.
  8. Element <kbd> - tekst z klawiatury.
  9. Element <samp> - przykład.
  10. Element <strong> - wyróżnienie.
  11. Element <del> - oznacza fragment usunięty, może zawierać datę i czas w atrybucie datetime.
  12. Element <ins> - oznacza fragment dodany, może zawierać datę i czas w atrybucie datetime.
  13. Atrybut datetime - określa datę i czas.
  14. Atrybut target - defiuniuje okno docelowe dla otwieranego pliku. Możliwe wartości: _self (okno aktualne), _blank (nowe okno), _parent (okno rodzica), _top (okno główne), nazwa (okno, ramka o podanej nazwie). Hiperłącza do zasobów z innej lokalizacji powinno się otwierać w nowym oknie.
  15. Elementy: <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>,<wbr>.