Akapity i wyliczenia

Karta pracy 2017/2018

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

Elementy akapitowe

Akapit1

Utwórz następujący dokument (wykorzystaj metodę kopiuj-wklej i plik  szablonstrony1.html).

<!DOCTYPE html>
<html>
 <head>
  <title>Akapity i wyliczenia</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <p>To jest zwykły tekst akapitowy</p>
 </body>
</html>

Zapisz dokument w folderze, pod nazwą akapity.html (pamiętaj o zmianie typu pliku na wszystkie pliki i kodowania na UTF-8) i otwórz dokument w przeglądarce.

Nagłówki2

W źródle pliku akapity.html w elemencie body dopisz kod.

  <p>To jest zwykły tekst akapitowy</p>
  <h1>To jest nagłówek h1</h1>
  <h2>To jest nagłówek h2</h2>
  <h3>To jest nagłówek h3</h3>
  <h4>To jest nagłówek h4</h4>
  <h5>To jest nagłówek h5</h5>
  <h6>To jest nagłówek h6</h6>
 </body>

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

Lista wypunktowana3 i pozycja listy4

W źródle pliku akapity.html w elemencie body dopisz kod.

  <h6>To jest nagłówek h6</h6>
  <ul>
   <li>pierwsza pozycja listy</li>
   <li>druga pozycja listy</li>
   <li>trzecia pozycja listy</li>
  </ul>
 </body>

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

Lista numerowana5

W źródle pliku akapity.html w elemencie body dopisz kod.

  </ul>
  <ol>
   <li>pierwsza pozycja listy</li>
   <li>druga pozycja listy</li>
   <li>trzecia pozycja listy</li>
  </ol>
 </body>

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

Podział wiersza6

W źródle pliku akapity.html  w elemencie p dopisz kod.

  <p>To jest zwykły <br/> tekst akapitowy</p>

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

Grupowanie akapitów7

W źródle pliku akapity.html w elemencie body dopisz kod.

  <p>To jest zwykły <br/> tekst akapitowy</p>
  <div> 
  <h1>To jest nagłówek h1</h1>
  <h2>To jest nagłówek h2</h2>
  <h3>To jest nagłówek h3</h3>
  <h4>To jest nagłówek h4</h4>
  <h5>To jest nagłówek h5</h5>
  <h6>To jest nagłówek h6</h6>
  </div>
  <ul>

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

Styl elementu8

W źródle pliku akapity.html dopisz w elemencie div dopisz kod.

 <div style="background: silver;">

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

Linia9.

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

  </ol>
  <hr/>
 </body>

Wgrywanie plików na serwer

Sprawdzanie poprawność (Narzędziem źródło strony w przeglądarce Firefox)  strony i umieść plik akapity.html na serwerze.

  1. Element <p> - definiuje akapit.
  2. Elementy <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - definiują nagłówki, tytuły części dokumentu.
  3. Element <ul> - definiuje listę wypunktowaną.
  4. Element <li> - definiuje akapit listy.
  5. Element <ol> - definiuje listę numerowaną.
  6. Element <div> - definiuje grupę elementów.
  7. Element <br/> - definiuje podział wiersza (element liniowy).
  8. Atrybut style - definiuje styl CSS elementu. Wartością jest definicja stylu CSS
  9. Element <hr/> - definiuje separator.

Elementy blokowe

Cytat blokowy1

W źródle pliku akapity.html w elemencie body dopisz kod.


  <blockquote>
...
wklejony fragment kodu (blokowy)
– strony internetowej
...
  </blockquote>
 </body>

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

Tekst preformatowany2

W źródle pliku akapity.html w elemencie body dopisz kod.

  </blockquote>
  <pre>
T o j e s t
t e k s t
preformatowany
  </pre>
 </body>

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

Adres3

W źródle pliku akapity.html w elemencie body dopisz kod.

  </pre>
  <address>
Pierwsza linijka adresu
Druga linijka adresu
Trzecia linijka adresu
  </address>
 </body>

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

Lista definicji4, hasło listy5 i wyjaśnienie pojęcia6

W źródle pliku akapity.html w elemencie body dopisz kod.

 </address>
 <dl>
  <dt>Pojęcie 1</dt>
  <dd>Wyjaśnienie pojęcia 1</dd>
  <dt>Pojęcie 2</dt>
  <dd>Wyjaśnienie pojęcia 2</dd>
 </dl>
</body>

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

Lista wielopoziomowa (zagnieżdżona)

W źródle pliku akapity.html w elemencie body dopisz kod.

  </dl>
  <ol>
   <li>pierwsza pozycja listy:
    <ul>
     <li>pierwsza pozycja listy</li>
     <li>druga pozycja listy</li>
     <li>trzecia pozycja listy</li>
    </ul>
   </li>
   <li>druga pozycja listy:
    <ul>
     <li>pierwsza pozycja listy</li>
     <li>druga pozycja listy</li>
     <li>trzecia pozycja listy</li>
    </ul>
   </li>
  </ol>
 </body>

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

Źródło cytatu7

W źródle pliku akapity.html dopisz w znaczniku blockquote dopisz kod.

<blockquote cite="URL źródła cytatu">

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Zmień wartość atrybutu cite na przykładowy adres URL.

Wstawianie znaków i symboli specjalnych8

W źródle pliku akapity.html w elemencie body dopisz kod.

 <p>&sect; &amp; </p>
</body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Zapoznaj się z tabelą kodów i encji. Dopisz w powyższym akapicie kilka innych symboli.

Tytuł elementu9

W źródle pliku akapity.html dopisz w elemencie div dopisz kod.

 <div title="Opis elementu" style=

Zapisz zmiany i odśwież dokument w przeglądarce. Wskaż kursorem grupę nagłówków.

Nowe elementy blokowe w HTML5 10

Wgrywanie plików na serwer

Sprawdzanie poprawność strony narzędziem validator.w3.org i umieść plik akapity.html na serwerze.

  1. Element <blockquote>– zawiera cytowany fragment innej strony internetowej.
  2. Element <pre> – zawiera tekst formatowany „ręcznie” (spacje, akapity).
  3. Element <address> – zawiera informacje teleadresowe.
  4. Element <dl> – grupuje elementy listy definicji.
  5. Element <dt> – zawiera hasło listy definicji.
  6. Element <dd> – zawiera wyjaśnienie hasła listy definicji.
  7. Atrybut cite – zawiera adres źródła cytatu blokowego. Wartością jest URI.
  8. Znaki z poza układu klawiatury umieszczamy w tekście przy użyciu kodów lub encji. Przykładowo: pauza – (&ndash;) spacja nierozdzielająca (&nbdp;).
  9. Atrybut title - definiuje tytuł elementu. Wartością jest tekst.
  10. Elementy: <section>, <nav>, <article>, <aside>, <header>, <footer>, <figure>, <figcaption>, <figure>, <main>