Termin wykonania zadania: 30.04.2020 r.
Dzień dobry :-)
Zadanie 8
Na początek trochę teorii i ćwiczeń
Ćwiczenie 1
Tytuły
W dokumentach często wprowadzamy tytuły, zwane też śródtytułami lub nagłówkami. Służy do tego polecenie <hx> </hx>. Znak h oznacza heading, natomiast x to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash).
Uwaga: Powszechnie używany termin "nagłówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł" lub "śródtytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.
Dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń h1, h2, h3, h4, h5, h6
<h1>Tytuł stopnia pierwszego</h1>
<h2>Tytuł stopnia drugiego</h2>
<h3>Tytuł stopnia trzeciego</h3>
<h4>Tytuł stopnia czwartego</h4>
<h5>Tytuł stopnia piątego</h5>
<h6>Tytuł stopnia szóstego</h6>
I przykład dla <h3> i <h4>:
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Oczywiście te polecenia wprowadzamy do znanej nam już konstrukcji dokumentu:
<html>
<head>
<title>Moja strona</title>
</head>
<body>
<h1>Tytuł stopnia pierwszego</h1>
<h2>Tytuł stopnia drugiego</h2>
<h3>Tytuł stopnia trzeciego</h3>
<h4>Tytuł stopnia czwartego</h4>
<h5>Tytuł stopnia piątego</h5>
<h6>Tytuł stopnia szóstego</h6>
</body>
</html>
Ćwiczenie 2
Akapit i wiersz
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </p>.
Przykład:
<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>
Efekt:
To jest treść pierwszego akapitu
To jest treść drugiego akapitu
Niekiedy zdarza się, że chcemy przełamać tekst (przenieść do linii poniżej), nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <br>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.
To jest pierwszy wiersz<br>
To jest drugi wiersz<br>
To jest trzeci wiersz<br>
To jest czwarty wiersz<br>
Rezultat:
To jest pierwszy wiersz
To jest drugi wiersz
To jest trzeci wiersz
To jest czwarty wiersz
Ćwiczenie 3
Pozioma linia
Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <hr> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony czy bloku, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta.
Ćwiczenie 4
Atrybuty czcionki
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - wyróżnienie (pogrubienie) i emfazę (pochylenie). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia:
To jest tekst normalny
<strong>To jest tekst pogrubiony</strong>
<em>To jest tekst pochylony</em>
Efekt działania tych poleceń:
To jest tekst normalny
To jest tekst pogrubiony
To jest tekst pochylony
Ćwiczenie 5
Wielkość i kolor czcionki
W starszych specyfikacjach HTML istniały specjalne polecenia definiujące wielkość i kolor czcionki. W HTML 4.01 już ich nie ma, natomiast atrybuty te zostały przeniesione do stylów, za pomocą których można uzyskać znacznie bogatsze efekty. W tym miejscu podaję jedynie proste przykłady. Wiecej na ten temat w rozdziale o stylach.
Przykładowo, chcąc określić wielkość czcionki w akapicie, możemy napisać:
<p style="font-size:xx-large">Treść akapitu</p>
Albo:
<p style="font-size:x-small">Treść akapitu</p>
Zaleca się stosowanie imiennych wielkości absolutnych i relatywnych czcionek, jak xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger, które są najbardziej elastyczne.
O definiowaniu za pomocą stylów rozmaitych atrybutów czcionek - krojach, stylach, wielkości, wariantach - napiszę w rozdziale o własnościach czcionek.
Podobnie, zmienił się sposób określania kolorów czcionek, na przykład:
<p style="color: darkgreen; ">Treść akapitu w kolorze darkgreen</p>
Co w efekcie da:
Treść akapitu w kolorze darkgreen.
O definiowaniu kolorów za pomocą stylów przeczytasz w rozdziale o kolorach.
Na koniec kilka dobrych i ważnych rad
W HTML zalecane jest stosowanie małych znaczników - w XHTML, który jest kontynuacją języka HTML, małe znaczniki są już obowiązkowe, zatem lepiej jest się przyzwyczajać do właściwych technik.
Nie pisz więc:
<H1>Nasze zajęcia internetowe</H1>
lecz:
<h1>Nasze zajęcia internetowe</h1>
Domykaj zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak <img>, <hr> czy <br>.
Nigdy nie pisz:
<p>Wykonałem ćwiczenie i wysłałem do sprawdzenia.
lecz zawsze:
<p>Wykonałem ćwiczenie i wysłałem do sprawdzenia.</p>
Wprawdzie HTML 5 ponownie dopuszcza niezamykanie znaczników, jednak zdaniem wielu autorów należy unikać tej maniery i zamykać je.
Wstawianie zdjęć odbywa się poprzez:
Zwróć uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współczesnych standardach, choć nie było egzekwowane w starszych.
Nie pisz zatem:
<img src=fotka.jpg alt=fotka z wakacji>
lecz
<img src="fotka.jpg" alt="fotka z wakacji">
(Wstawienie fotografii o nazwie fotka.jpg i nadanie jej tytułu fotka z wakacji)
Nie:
<a href=http://www.onet.pl>Portal Onet.pl</a>
lecz
<a href="http://www.onet.pl">Portal Onet.pl</a>
(Wstawienie adresu internetowego)
Nie:
<p style=color: blue; >Tekst w kolorze niebieskim.</p>
lecz
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
(Określenie koloru tekstu)
Nigdy nie mieszaj znaczników, nie twórz z nich "przekładańca". Gdy np. otworzysz znacznik wyróżnienia tekstu <strong>, a potem znacznik emfazy <em>, to najpierw zamknij emfazę </em>, a dopiero potem zamknij wyróżnienie </strong> (gdy zakładasz skarpetkę, a potem but, to potem najpierw musisz zdjąć but, aby móc zdjąć skarpetkę). Chodzi o to, aby poprawnie zagnieżdżać jedne znaczniki w drugich.
Nie pisz więc:
<strong><em>Jakaś tam treść</strong></em>
lecz
<strong><em>Jakaś tam treść</em></strong>
Zadanie do realizacji: w stworzonym w poprzednim zadaniu tekście w oparciu o powyższe ćwiczenia wprowadź różne wielkości tytułów, wielkości i kolory czcionki, akapity i wiersze, linię poziomą, wykorzystaj atrybuty czcionki.
Przypominam o umieszczniu nowych elemenyów w strukturze strony i właściwym jej zapisaniu.
W razie pytań i niejasności prosze o kontakt.
Termin wykonania zadania: 30.04.2020 r.
Pozdrawiam i życzę miłej pracy, Krzysztof Duda.
