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.

Identyfikator elementu14

W pliku tekst.html odnajdź i zmień odpowiednie fragmenty kodu:

...
<h1 id="style">Style formatowania</h1>
...
<h2 id="fizyczne">Style fizyczne:</h2>
...
<h2 id="logiczne">Style logiczne:</h2>
...
<h2 id="edycji">Style edycji:</h2>
...

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

Hiperłącze w dokumencie (do identyfikatora)

W pliku tekst.html dopisz przykład.

  <hr/>
  <h2>Hiperłącza w dokumencie:</h2>
  <ul>
   <li><a href="#style">Style formatowania</a></li>
   <li><a href="#fizyczne">Style fizyczne</a></li>
   <li><a href="#logiczne">Style logiczne</a></li>
   <li><a href="#edycji">Style edycji</a></li>
  </ul>
  <h1>Style formatowania</h1>

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

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 id - identyfikator elementu strony o wartości nazwy. Identyfikator musi zaczynać się od litery. Po niej mogą się znajdować: cyfry lub inne litery, myślniki, podkreślenia, dwukropki oraz kropki. W nazwach lepiej nie używać: wielkich liter, znaków specjalnych (np.: \ / : * ? " < > |), spacji i polskich liter (ą, ć, ę, ł, ń... itd.).
  15. Elementy: <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>,<wbr>.