Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Czy jeżeli ludożerca je nożem i widelcem - to postęp?

Zajęcia specjalizacyjne: III klasa TI
HTML

Ćwiczenie 3 - Tekst

Zadania do wykonania:

Ćwiczenie 3 poświęcone jest formatowaniu tekstu za pomocą znaczników. Ażeby uzyskać pożądany wygląd tekstu musimy posłużyć się określonymi znacznikami.

Ćwiczenie polega na uzyskaniu właściwego tekstu, należycie wyglądającego w przeglądarce, zapisanego w jednym pliku tekst.html.

Proszę postępować zgodnie z kolejnymi poleceniami...

Wpisywanie tekstu w edytorze kED bez pomocy znaczników spowoduje, że w przeglądarce będzie niekończący się ciąg linijek z tekstem i nic nie pomogą ENTERY-y...

Żeby już nie powtarzać części nagłówkowej, od tej pory będziemy korzystać z szablonu zawartego w kED-zie. Na razie HTML 4.01 Transitional.

Krok 1

Proszę wypełnić podstawowe znaczniki <meta>...</meta>

Krok 2

Treść tekstów wpisywanych w sekcji <body>...</body> jest dowolna, ale żeby usprawnić pracę, kED ma gotowe wstawki, z których można skorzystać...

Krok 3

Krok 4

Proszę wpisać tekst o długości kilkunastu linijek lub wstawić trzy wstawki. Bez żadnych znaczników. W edytorze za pomocą ENTER-a podzielić na krótkie linijki. i tak zostawić...

Krok 5

Krok 6

1. Znacznik: <p>...</p>. Obejmuje akapit tekstu. Następujące po sobie akapity oddzielone są linijką przerwy. W akapicie można wyrównywać tekst za pomocą atrybutu <p align="sposób">...</p>. Atrybut align jest zdeprecjonowany, ale tutaj z niego skorzystamy...


  1. sposób:
  2. "center" - wyśrodkowanie
  3. "left" - wyrównanie do lewej
  4. "right" - wyrównanie do prawej
  5. "justify" - wyrównanie do obu marginesów

Znacznik <p>...</p> nie może zawierać innych elementów blokowych, w tym innych znaczników <p>...</p>.

2. Znacznik: <br />. Przenosi tekst do nowej linii.

Proszę wpisać kolejnych kilkanaście linijek lub kilka wstawek i tak je sformatować używając znacznika <p>...</p> i jego atrybutów oraz znacznika <br />, ażeby uzyskać akapity.

Krok 7

Krok 8

3. Znacznik <hn>...</hn> (n=1...6). Nadaje tytuły częściom tekstu tworząc nagłówki. Najwyższym jest <h1>...</h1>, a najniższym <h6>...</h6>. W nagłówku można wyrównywać tekst za pomocą atrybutu <hn align="sposób">...</hn>. Atrybut align jest zdeprecjonowany, ale tutaj z niego skorzystamy...


  1. sposób:
  2. "center" - wyśrodkowanie
  3. "left" - wyrównanie do lewej
  4. "right" - wyrównanie do prawej
  5. "justify" - wyrównanie do obu marginesów

Nagłówki należy umieszczać we właściwej kolejności dzieląc tekst na Rozdziały, Podrozdziały, Paragrafy itd...

W znaczniku <hn> można umieszczać atrybut title służący jako dymek narzędziowy, który pojawi się po najechaniu kursorem. Znacznik ma postać: <hn title="opis">.

W treści atrybutu title="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać encję: &quot;

Proszę wpisać sześć nagłówków i odpowiednio je sformatować.

Krok 9

Krok 10

Następnie właściwie ustawić hierarchię rozdziałów i do tytułu wstawić dymek narzędziowy.

Krok 11

Krok 12

4. Znacznik <div>...</div>. Polecenie to dodaje do dokumentu blok, przez co możemy nadać mu jakiś rodzaj formatowania. W znaczniku <div>...</div> można wyrównywać tekst za pomocą atrybutu <div align="sposób">...</div>. Atrybut align jest zdeprecjonowany, ale tutaj z niego skorzystamy...


  1. sposób:
  2. "center" - wyśrodkowanie
  3. "left" - wyrównanie do lewej
  4. "right" - wyrównanie do prawej
  5. "justify" - wyrównanie do obu marginesów

Ten znacznik może zawierać inne znaczniki, w tym inne <div>...</div>.

Ponownie umieszczamy fragment tekstu w pliku tekst.html i formatujemy go za pomocą znacznika <div>...</div> i jego atrybutów.

Krok 13

5. Znacznik <b>...</b>. Znacznik ten pogrubia zaznaczony tekst.

6. Znacznik <i>...</i>. Ten znacznik pozwala napisać tekst kursywą.

7. Znacznik <em>...</em>. Ten znacznik wyróżnia tekst - jest pochyły.

8. Znacznik <strong>...</strong>. Ten też wyróżnia tekst - jest pogrubiony.

Z tymi znacznikami proszę wykonać takie formatowanie:

Krok 14

9. Znacznik <sup>...</sup>. Ten znacznik wstawia indeks górny.

10. Znacznik <sub>...</sub>. A ten wstawia indeks dolny.

11. Znacznik <hr />. Dodaje poziomą linię.

12. Znacznik <big>...</big>. Ten znacznik powiększa czcionkę.

13. Znacznik <small>...</small>. A ten znacznik pomniejsza czcionkę.

14. Znacznik <fieldset>...</fieldset>. Dodaje ramkę do obejmowanego tekstu. W połączeniu ze znacznikiem <legend>...</legend> dodaje opis ramki.

Budowa ramki z opisem:

  1. <fieldset><legend>Opis</legend>Treść ramki</fieldset>

Tak ma to wyglądać w pliku tekst.html oglądanym w przeglądarce:

Krok 15

15. Znaczniki <dl>...</dl>, <dt>...</dt> i <dd>...</dd>. Tworzą listę słownikową - termin i jego definicja albo listę dialogową - osoba i jej tekst. Składnia wygląda tak:


  1. <dl>
  2. <dt>termin 1</dt>
  3. <dd>objaśnienie terminu 1</dd>
  4. <dd>inne objaśnienie terminu 1</dd>
  5. <dt>termin 2</dt>
  6. <dt>termin 2 bis</dt>
  7. <dd>objaśnienie terminu 2 i 2 bis</dd>
  8. <dt>termin 3</dt>
  9. <dd>objaśnienie terminu 3</dd>
  10. <dt>osoba A:</dt>
  11. <dd>tekst osoby A</dd>
  12. <dt>osoba B:</dt>
  13. <dd>tekst osoby B</dd>
  14. </dl>

W pliku proszę wykonać takie listy słownikowe:

Krok 16

16. Znaczniki <ul>...</ul> i <li>...</li>. Tworzą listę wyliczeniową nienumerowaną. Można dodać atrybut <ul type="rodzaj">...<ul>. Atrybut type jest zdeprecjonowany, ale tutaj z niego skorzystamy...


  1. rodzaj:
  2. "disc" - koło (domyślny)
  3. "circle" - okrąg
  4. "square" - kwadrat

Składnia listy wyliczeniowej:


  1. <ul type="rodzaj">
  2. <li>punkt pierwszy</li>
  3. <li>punkt drugi</li>
  4. <li>punkt trzeci</li>
  5. </ul>

Proszę wykonać takie listy wyliczeniowe:

Krok 17

17. Znaczniki <ol>...</ol> i <li>...</li>. Służą do tworzenia list wyliczeniowych numerowanych. Można dodać atrybuty <ol type="rodzaj numeracji" start="n">...</ol>. Jeśli numerowanie jest od początku nie trzeba podawać atrybutu start. Atrybuty type i start są zdeprecjonowane, ale tutaj z nich skorzystamy...


  1. rodzaj numeracji:
  2. "1" - numeracja według liczb arabskich (domyślnie)
  3. "I" - według dużych liczb rzymskich
  4. "i" - według małych liczb rzymskich
  5. "A" - według dużych liter
  6. "a" - według małych liter

  1. n:
  2. wykaz numerowany z podaniem początkowego numeru
  3. nawet jeśli numerowanie jest według liter

Składnia listy wyliczeniowej numerowanej:


  1. <ol type="rodzaj numerowania" start="n">
  2. <li>punkt pierwszy</li>
  3. <li>punkt drugi</li>
  4. <li>punkt trzeci</li>
  5. </ol>

Składnia listy wyliczeniowej nienumerowanej zagnieżdżonej:


  1. <ul>
  2. <li>punkt 1
  3. <ul>
  4. <li>punkt 1.1
  5. <ul>
  6. <li>punkt 1.1.1</li>
  7. <li>punkt 1.1.2</li>
  8. </ul>
  9. </li>
  10. <li>punkt 1.2</li>
  11. </ul>
  12. </li>
  13. <li>punkt 2</li>
  14. </ul>

Składnia listy wyliczeniowej numerowanej zagnieżdżonej:


  1. <ol>
  2. <li>punkt 1
  3. <ol>
  4. <li>punkt 1.1
  5. <ol>
  6. <li>punkt 1.1.1</li>
  7. <li>punkt 1.1.2</li>
  8. </ol>
  9. </li>
  10. <li>punkt 1.2</li>
  11. </ol>
  12. </li>
  13. <li>punkt 2</li>
  14. </ol>

Można łączyć oba rodzaje list: nienumerowane i numerowane.

W ćwiczeniu proszę wykonać kilka wykazów numerowanych zwykłych, wykazów z podaniem numeru początkowego, zagnieżdżonych i zagnieżdżonych mieszanych:

Krok 18

Krok 19

Krok 20

Krok 21


Oceniany będzie plik tekst.html z wykonanymi wszystkimi krokami to znaczy z tekstem sformatowanym zgodnie z kolejnymi instrukcjami.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki