Add Item10. Scharakteryzuj język HTML – znaczniki, arkusze stylów, mechanizmy rządzące interfejsem aplikacji i sposobem jego obsługi od strony użytkownika.
Główne cechy
• prosty język, którego polecenia – znaczniki – „przeplatają” się z tekstem dokumentu
• opisuje strukturę logiczna dokumentu – „drzewo”, którego kształt wyznaczają wystąpienia znaczników
• umozliwia tworzenie tzw. dokumentów hipertekstowych zawierających odsyłacze – hiperłacza – do innych zasobów
• w zasadzie nie służy do określania wyglądu dokumentu – do tego celu należy używać kaskadowych arkuszy stylów (CSS)
• oficjalny standard języka wciąż bywa „luźno interpretowany” przez przeglądarki – specyficzne „rozszerzenia” i ograniczenia
Dokument HTML = tekst + znaczniki
Dwa typy znaczników:
<nazwa> … </nazwa> - znacznik „pojemnik”
<nazwa> - znacznik pojedynczy
Przykłady: <body> … </body> – zawiera cała treść dokumentu <br> – poleca „złamanie” linii tekstu
Uwagi:
• nazwy znaczników należy pisać małymi literami – zgodność z XHTML
• nie należy pomijać znaczników zamykających (</nazwa>) nawet tam, gdzie dopuszcza to standard języka HTML – zgodność z CSS oraz XHTML.
Ogólna postać dokumentu
deklaracja typu dokumentu
<html>
<head> nagłówek </head>
<body> treść </body>
</html>
• deklaracja typu dokumentu – określa używaną wersje języka HTML
• nagłówek – informacje opisujące dokument np.
o tytuł:<title> … </title> - element wymagany
o dane uzupełniające nagłówek HTTP dokumentu – np. użyte kodowanie znaków, określenie języka dokumentu itp.
o dodatkowe informacje o dokumencie – np. data utworzenia czy autor (użyteczne dla serwerów, przeglądarek i wyszukiwarek)
• treść – zawartość dokumentu (wyświetlaną w oknie przeglądarki)
Prosty przykład
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<title>Strona domowa Jaśka Kowalskiego</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="description" content="Jasiek Kowalski homepage">
</head>
<body>
Mam na imię Jaś, mam 16 lat i chodzę do…
…Interesuje mnie żeglarstwo i wspinaczka skałkowa.
</body>
</html>
Lista wszystkich możliwych deklaracji DOCTYPE dla stron w języku HTML lub XHTML
Podstawowe elementy tekstu dokumentu
Akapity i znaki nowej linii:
• <p> treść </p> – powoduje wyświetlenie treści jako osobnego akapitu i dodanie stosownego odstępu przed oraz po nim
• <br> – wymusza zmianę wiersza
Przykład 1:
<p> To jest pierwszy akapit. </p>
<p> Natomiast to jest drugi akapit. </p>
To jest pierwszy akapit.
Natomiast to jest drugi akapit.
Przykład 2:
<p> To jest pierwsza linia. <br>
Natomiast to jest druga linia. </p>
To jest pierwsza linia.
Natomiast to jest druga linia.
Nagłówki:
<hn> … </hn> nagłówek poziomu n (1…6)
Przykład:
<h1> Nagłówek poziomu 1 </h1>
<h2> Nagłówek poziomu 2 </h2>
<h3> Nagłówek poziomu 3 </h3>
<h4> Nagłówek poziomu 4 </h4>
<h5> Nagłówek poziomu 5 </h5>
<h6> Nagłówek poziomu 6 </h6>
Nagłówek poziomu 1
Nagłówek poziomu 2
Nagłówek poziomu 3
Nagłówek poziomu 4
Nagłówek poziomu 5
Nagłówek poziomu 6
Wyodrębnianie fragmentów tekstu
Grupowanie blokowe:
• <div> zawartość </div>
zawartość – fragment treści dokumentu, który ma być potraktowany jako osobny „blok”; w szczególności, jego początek i koniec polecają przeglądarce zmienić wiersz (nie są dodawane odstępy pionowe).
Grupowanie wewnętrzne:
• <span> tekst </span>
tekst – wyodrębniany „wewnętrzny” (niebędący blokiem) fragment dokumentu; bez zastosowania stylów CSS znacznik nie wpływa na sposób wyświetlania tekstu przez przeglądarkę
Wyodrębnianie fragmentów tekstu – przykłady:
<p>To jest zwykły tekst.
<div style="color: purple; background-color: white;">
To jest wyróżnienie.
</div>
I znowu zwykły tekst.</p>
To jest zwykły tekst.
To jest wyróżnienie.
I znowu zwykły tekst.
<p>To jest zwykły tekst.
<span style="color: purple; background-color: white;">
To jest wyróżnienie.
</span>
I znowu zwykły tekst.</p>
To jest zwykły tekst. To jest wyróżnienie. I znowu zwykły tekst.
w przedstawionych wyżej przykładach zastosowałem dla zmiany koloru czcionki i tła style: style="color: purple; background-color: white;",o stosowaniu styli jeszcze się pouczymy:), a tymczasem proszę zwrócić jedynie uwagę na różnicę w zastosowaniu <div>…</div> i <span>…</span>.
Wyróżnienia w tekście – „style wbudowane”
Wyróżnienia logiczne:
• <em> … </em> – emfaza (domyślny sposób wyróżnienia: kursywa)
• <strong> … </strong> – wyraźne uwypuklenie (wytłuszczenie)
• <cite> … </cite> – krótki cytat (kursywa)
• <samp> … </samp> – tekst przykładowy (czcionka o stałej szerokości)
Przykład:
<p> To jest tekst <em>wyróżniony</em>,
a to<strong>uwypuklony</strong>.
Tak wygląda <cite>cytat</cite>,
a tak - <samp>tekst przykładowy.</samp> </p>
To jest tekst wyróżniony, a touwypuklony. Tak wygląda cytat, a tak - tekst przykładowy.
Uwaga: style wbudowane: <span> … </span> + style CSS
Wyróżnienia fizyczne:
• <i> … </i> – kursywa
• <b> … </b> – wytłuszczenie
• <tt> … </tt> – czcionka o stałej szerokości
• <sub> … </sub> – indeks dolny
• <sup> … </sup> – indeksgórny
Przykład:
<p> To jest <i>kursywa</i>, a to
<b>wytłuszczenie</b>, czcionka o
<tt>stałej szerokości </tt>oraz indeksy:
<sub>dolny</sub> i <sup>górny</sup></p>
To jest kursywa, a to wytłuszczenie, czcionka o stałej szerokości oraz indeksy: dolny i górny
Wyróżnienia w tekście – cytaty blokowe
Cytat blokowy:
• <blockquote> tekst </blockquote> – zwiększa marginesy wokół tekstu
Przykład:
<p> To jest zwykły tekst w akapicie.
To jest zwykły tekst w akapicie.</p>
<blockquote>
To jest cytat. To jest cytat.
To jest cytat. To jest cytat.
</blockquote>
<p> To znowu zwykły tekst w akapicie.
To znowu zwykły tekst w akapicie.</p>
To jest zwykły tekst w akapicie. To jest zwykły tekst w akapicie.
To jest cytat. To jest cytat. To jest cytat. To jest cytat.
To znowu zwykły tekst w akapicie. To znowu zwykły tekst w akapicie.
Listy
• <ul> elementy listy </ul> – lista
• <li> … </li> – element listy
Przykład:
<ul> <li>kolory:<ul>
<li>czerwony</li>
<li>zielony</li>
<li>niebieski</li></ul>
</li> <li>dzwieki:<ul>
<li>szelest</li>
<li>brzek</li>
<li>gwizd</li>
</ul></li></ul>
• kolory:
o czerwony
o zielony
o niebieski
• dzwieki:
o szelest
o brzek
o gwizd
Listy definicji:
• <dl> definicje </dl> – lista definicji
• <dt> … </dt> – definiowany termin
• <dd> … </dd> – definicja
