Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 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. Od tej pory będziemy korzystać z szablonu zawartego w ked-zie. Na razie HTML 4.01 Transitional. Wszystkie zadania wykonywane są w edytorze ked. MoŜesz uŝywać dowolnego. WaŜny jest tak naprawdę wynik końcowy. Krok 1. Otwieramy szablon. Na razie będzie to HTML 4.01 Transitional.
Krok 2. Proszę wypełnić podstawowe znaczniki <meta>...</meta>
Krok 3. 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 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ć...
Widok w przeglądarce internetowej..
Krok 5. 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>. 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 6. 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ę: " Proszę wpisać sześć dowolnych nagłówków i odpowiednio je sformatować.
Krok 7. Następnie właściwie ustawić hierarchię rozdziałów i do tytułu wstawić dymek narzędziowy.
Krok 8. 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 9. Znacznik <b>...</b>. Znacznik ten pogrubia zaznaczony tekst. Znacznik <i>...</i>. Ten znacznik pozwala napisać tekst kursywą. Znacznik <em>...</em>. Ten znacznik wyróŝnia tekst - jest pochyły. Znacznik <strong>...</strong>. Ten teŝ wyróŝnia tekst - jest pogrubiony. Z tymi znacznikami proszę wykonać takie formatowanie:
Krok 10. Znacznik <sup>...</sup>. Ten znacznik wstawia indeks górny. Znacznik <sub>...</sub>. A ten wstawia indeks dolny. Znacznik <hr />. Dodaje poziomą linię. Znacznik <big>...</big>. Ten znacznik powiększa czcionkę. Znacznik <small>...</small>. A ten znacznik pomniejsza czcionkę. Znacznik <fieldset>...</fieldset>. Dodaje ramkę do obejmowanego tekstu. W połączeniu ze znacznikiem <legend>...</legend> dodaje opis ramki. Budowa ramki z opisem: <fieldset><legend>opis</legend>treść ramki</fieldset> Tak ma to wyglądać w pliku tekst.html oglądanym w przeglądarce:
Krok 11. 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: <dl> </dl> <dt>termin 1</dt> <dd>objaśnienie terminu 1</dd> <dd>inne objaśnienie terminu 1</dd> <dt>termin 2</dt> <dt>termin 2 bis</dt> <dd>objaśnienie terminu 2 i 2 bis</dd> <dt>termin 3</dt> <dd>objaśnienie terminu 3</dd> <dt>osoba A:</dt> <dd>tekst osoby A</dd> <dt>osoba B:</dt> <dd>tekst osoby B</dd>
Krok 12. 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 13. 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: <ul> <li>punkt 1 <ul> <li>punkt 1.1 <ul> <li>punkt 1.1.1</li> <li>punkt 1.1.2</li> </ul> </li> <li>punkt 1.2</li> </ul> </li> <li>punkt 2</li> </ul>
Składnia listy wyliczeniowej numerowanej zagnieŝdŝonej: <ol> <li>punkt 1 <ol> <li>punkt 1.1 <ol> <li>punkt 1.1.1</li> <li>punkt 1.1.2</li> </ol> </li> <li>punkt 1.2</li> </ol> </li> <li>punkt 2</li> </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. Oceniany będzie plik tekst.html z wykonanymi wszystkimi krokami to znaczy z tekstem sformatowanym zgodnie z kolejnymi krokami.