Ćwiczenie 2 Tekst podstawowe znaczniki.

Wielkość: px

Rozpocząć pokaz od strony:

Download "Ćwiczenie 2 Tekst podstawowe znaczniki."

Eugeniusz Brzeziński
8 lat temu
Przeglądów:

1 Ć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.

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

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

3 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ć...

5 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ć...

6 Widok w przeglądarce internetowej..

7 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 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.

"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>.

9 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 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ć.

"left" - wyrównanie do lewej 4. "right" - wyrównanie do prawej 5.

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

13 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 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.

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

14 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:

Ten znacznik wyróŝnia tekst - jest pochyły. Znacznik <strong>...</strong>.

15 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:

A ten znacznik pomniejsza czcionkę. Znacznik <fieldset>...</fieldset>. Dodaje ramkę do obejmowanego tekstu.

16 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>

Składnia wygląda tak: <dl> </dl> <dt>termin 1</dt> <dd>objaśnienie terminu 1</dd> <dd>inne objaśnienie terminu 1</dd>

17 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 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:

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

18 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 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>

"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.

19 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.

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

Podobne dokumenty

Tekst podstawowe znaczniki

Wyświetlanie Tekst podstawowe znaczniki Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki