Budowa dokumentu HTML 5

Transkrypt

1 Podstawy HTML 5 i CSS Budowa dokumentu HTML 5 Na dokument HTML składają się deklaracje: typu dokumentu DTD, nagłówka oraz treści strony. Deklaracja dokumentu DTD określa w jaki sposób przeglądarka reaguje na znaczniki zawarte w treści dokumentu. Nagłówek zawiera deklaracje zestawu ustawień dla strony, może zawierać np. sposób kodowania dokumentu, tytuł strony, słowa kluczowe, opis, itp.. Najważniejszą sprawą jest określenie kodowania w nagłówku dokumentu. Niewłaściwe kodowanie może przykładowo spowodować, że użytkownik przeglądający stronę w miejscu polskich liter będzie widział inne znaki. W treści strony wpisuje się właściwą zawartość strony (znaczniki różnego typu), która będzie widoczna dla użytkownika. Poniżej przykład pustego dokumentu w HTML 5. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="opis strony" /> <meta name="keywords" content="słowa rozdzielone przecinkami" /> <title>tytuł strony</title> </head> <body> Treść strony </body> </html> Wybrane elementy dokumentu HTML Aby wyświetlić na stronie napis Witaj! należy wpisać linię: <p>witaj!</p> Przejście do nowej linii jest wykonywane za pomocą znacznika <br />: Tekst w pierwszej linii.<br />Tekst w drugiej linii. Podobny znacznik bo <br /> to znacznik <wbr />, który ma podobną rolę tylko, że przejście do nowej linii jest opcjonalne, czyli wtedy jeśli zaistnieje taka potrzeba. To jest konstantyno<wbr />politańczykiewicz<wbr />ówna Znacznik <mark> służy do wyróżniania pewnej części tekstu: <p>tekst, w którym jest <mark>bardzo istotna treść</mark>.</p> Ciekawym elementem jest też znacznik <details>, który po naciśnięciu na Szczegóły pokazuje więcej informacji. W opcjonalnym znaczniku <summary> ustawia się tekst, wyświetlany przez przeglądarkę. <section> Jakiś krótki opis. <details> <summary>szczegóły</summary> Więcej tekstu. </details> </section> 1

2 Do wstawiania tytułu można wykorzystać znacznik <hx></hx> gdzie X = 1 6 h1 to najwyższy poziom, a h6 najniższy. Za pomocą znacznika <hgroup></hgroup> można grupować poszczególne nagłówki w dokumencie. Stworzenie odsyłacza (hiperłącza, linku) do strony o nazwie Onet: <a href=" Można także stworzyć odsyłacz do innego dokumentu HTML, który znajduje się w tym samym katalogu: <a href="./inny_dokument.html">inny dokument</a> Aby po naciśnięciu na odsyłacz otworzyło się nowe okno przeglądarki należy dopisać argument target= _blank : <a href=" target="_blank">onet</a> Wyświetlenie pliku graficznego obrazek.jpg, który znajdujące się w tym samym katalogu, w którym dokument HTML wygląda następująco: <img src="./obrazek.jpg" /> Znacznik <figure> służy m.in. do grupowania elementów grafiki i multimediów oraz oznaczania ilustracji powiązanych z danym tekstem. Wewnątrz tego znacznika można dodatkowo umieścić znacznik <figcaption>, który dodaje opis pod wyświetlaną grafiką. <p>dowolny tekst z <a href="#obrazek">linkiem do obrazka</a>.</p> <figure id= obrazek > <img src= obrazek.png /> <figcaption>opis pod obrazkiem</figcaption> </figure> Do wyświetlenia danych w postaci tabeli służy zestaw znaczników: <table> (tabela), <tr> (wiersz), <td> (komórka), <th> (komórka nagłówka tabeli). Wewnątrz tabeli można użyć także znaczników, które umożliwiają podział tabeli na nagłówek <thead>, dane <tbody> i stopkę <tfood>. Poniżej przykład tabeli, z dwoma wierszami i dwoma kolumnami: <table border="1"> <thead> <tr><th>imię</th><th>nazwisko</th></tr> </thead> <tbody> <tr><td>jan</td><td>kowalski</td></tr> <tr><td>adam</td><td>nowak</td></tr> </tbody> <tfood> <tr><td colspan="2">liczba: 2</td></tr> </tfood> </table> Za pomocą atrybutu colspan można rozciągnąć daną komórkę na wybraną liczbę komórek w poziomie. W powyższym przykładzie ostatnia komórka będzie rozciągnięta na szerokość 2 komórek w tabeli. Drugi atrybut to rowspan, który rozciąga komórkę na wybraną liczbę komórek w pionie. Istotnym elementem HTML są formularze, dzięki którym użytkownik może przesyłać dane do serwera. Przykład pustego formularza, który prześle dane z pól formularza dokumentu do skryptu PHP metodą jawną GET: 2

3 <form action="skrypt.php" method="get" name= nazwa_formularza >  </form> Formularz może mieć dodatkowe atrybuty: - autocomplete="on" po ponownym wejściu na formularz przeglądarka uzupełni formularz poprzednio wpisanymi wartościami; - novalidate="novalidate" po wysłaniu formularza, dane z jego pól nie będą walidowane. Wewnątrz formularza można wstawiać różne pola, które są identyfikowane poprzez atrybut name. Każde z tych pól może mieć opcjonalne atrybuty tj.: - required="required" to pole jest wymagane; - autofocus="autofocus" to pole jest aktywne po załadowaniu strony (tylko jeden element na stronie może posiadać ten atrybut) ; - form="nazwa_formularza" za pomocą tego znacznika można powiązać dowolne pole dokumentu z formularzem Poniżej przykłady wybranych pól jakie mogą znaleźć się w formularzu: Pole tekstowe z domyślna wartością Jan : <input type="text" name="imie" value="jan" /> Dodatkowe atrybuty: - pattern="wyrazenie_regularne" umożliwia kontrolę wpisywanych znaków zgodnie z podanym wyrażeniem regularnym. - placeholder="podaj hasło" dodaje tekst do nieaktywnego pola, który znika w momencie jego aktywności. Pole ukryte, którego nie widać na stronie, wysyła się natomiast wraz z formularzem: <input type="hidden" name="ukryta_wartosc" value="tajne" /> Pole wyboru domyślnie zaznaczone wraz z etykietą (label): <input type="checkbox" name="regulamin" checked="checked" /> Akceptuję regulamin Pole opcji domyślnie zaznaczone wraz z etykietą (label): <input type="radio" name="plec" value="m" checked="checked" /> Mężczyzna Pole wyboru jednego pliku: <input type="file" name="plik" /> Dodatkowy atrybut multiple="multiple", pozwala na wybranie kilku plików. Dodatkowe typy pola <input> to: color, date, datetime, datetime-local, , month, number, range, search, tel, time, url, week. Niestety na razie nie są jeszcze w pełni obsługiwane przez wszystkie przeglądarki. Najlepiej radzi sobie z nimi Chrome, Opera i Safari (więcej informacji można znaleźć na stronie: 3

4 Grupowanie pól z opcjonalnym tytułem Płeć : <fieldset> <legend>płeć</legend> <input type="radio" name="plec" value="m" /> Mężczyzna <input type="radio" name="plec" value="k" /> Kobieta </fieldset> Lista rozwijalna z domyślnie wybraną opcją Niebieski : <select name="kolor"> <option>czerwony</option> <option selected="selected">niebieski</option> <option>zielony</option> </select> Za pomocą znacznika <datalist> do pola tekstowego można podłączyć listę z podpowiedziami: <input list="imiona" /> <datalist id="imiona"> <option value="jan" /> <option value="adam" /> <option value="zbyszek" /> <option value="marcin" /> </datalist> Za pomocą pola <output> można wyświetlić zmiany wartości w formularzu w czasie rzeczywistym: <form oninput="wynik.value=parseint(x.value) + parseint(y.value) "> <input type="text" name="x" value="2" /> + <input type="text" name="y" value="3" /> = <output name="wynik" for "x y"></output> </form> Obszar tekstowy z maksymalną liczbą znaków: <textarea name="opis" maxlength="1000">wartość domyślna</textarea> Przycisk do wysyłania formularza o nazwie Wyślij : <input type="submit" value="wyślij" /> Dodatkowe atrybuty tego pola: - formaction="inny_skrypt.php" w przypadku dwóch przycisków wysyłających, przycisk zawierający ten atrybut powoduje zmianę domyślnej akcji formularza; - formmethod="get" - działa podobnie do powyższego atrybutu z tą różnicą, że zmienia metodę wysyłania formularza; - formnovalidate="formnovalidate" działa podobnie jak powyższe atrybuty, wyłącza walidację formularza; - formtarget="_blank" po wysłaniu formularza powoduje otwarcie nowego okna/karty przeglądarki. 4

5 Przycisk obrazkowy, który także wysyła formularz: <input type="image" src="przyc.gif" alt="wyślij" width="48" height="48" /> Więcej informacji o HTML 5 oraz o wcześniejszych jego wersjach można zaczerpnąć odwiedzając stronę Kaskadowe arkusze stylów CSS Elementy dokumentu HTML powinny być formatowane za pomocą standardu CSS (Kaskadowe Arkusze Stylów). Standard tworzą cechy elementów, które są określone przez konkretne wartości. Przykładowo znacznik akapitu w dokumencie HTML można sformatować przez atrybut style, np.: <p style="color: red; font-weight: bold; "> Pogrubiony tekst w kolorze czerwonym </p> Najlepszym rozwiązaniem jest jednak umieszczenie cech wszystkich elementów w osobnym pliku CSS. Aby to osiągnąć należy dołożyć jedną linię w nagłówku dokumentu HTML: <head> [Elementy nagłówka] <link rel="stylesheet" type="text/css" href=" style.css" /> </head> Następnie w dołączonym dokumencie CSS umieszcza się dowolny styl danego elementu strony WWW. Wstawienie poniższego stylu do dokumentu CSS i dołączenie go do dokumentu HTML spowoduje, że tekst zawarty pomiędzy znacznikami <p></p> będzie pogrubiony i pisany czcionką Arial o rozmiarze 12 punktów. p { font: bold 12pt Arial; } Jeśli zachodzi potrzeba ustawienia różnych stylów dla elementów danego typu wtedy grupuje się zestawy stylów w klasy. Poniżej przykład utworzenia dwóch klas dla znacznika <p></p> o nazwie Wazne i Cytat : p.wazne { color: red; font-weight: bold; } p.cytat { color: silver; font-style: italic; } Następnie w dokumencie HTML można wpisać poniższy kod aby tekst Ważna informacja był pogrubiony i w kolorze czerwonym, a Dowolny cytat był pochylony i w kolorze srebrnym: <p class="wazne">ważna informacja</p> <p class="cytat">dowolny cytat</p> Jeśli klika elementów różnych typów będzie posiadało ten sam styl to wystarczy wypisać znaczniki i rozdzielić je przecinkami. Poniżej przykład ustawienia czarnego obramowania o grubości linii równej 1 piksel dla znaczników <table> i <td>: table, td { border: solid 1px black; } Poniżej przykład ustawienia marginesów i odstępów dla danego elementu. Brak marginesu oraz odstęp elementu od ramki ustawiony na 4 piksele uzyskuje się poprzez: div { margin: 0px 0px 0px 0px; padding: 4px 4px 4px 4px; } Więcej informacji o CSS oraz opis pozostałych właściwości można zaczerpnąć odwiedzając stronę 5