
Ciekawe i istotne rozwiązania dla stron www
Prawie każdemu tagowi można przypisać standardowe attributes (własności,cechy). Te atrybuty to: class ="nazwa własna" -służy jako odniesienie do css, id ="nazwa własna" -też używany dla css i javascript, style -za tym atrybutem wpisuje się ustawienia css, title -tekst za tym atrybutem wyświetla się jako tool tip.
Przykładowy zapis : <a href="adres" class="obraz" id="znak" style="background-color:#00FF00;border:solid 1px #000000;" title="Ładny link ">TO TEN LINK </a> TO TEN LINK
Oprócz standardowych, tagi mają również specyficzne atrybuty, które mogą być konieczne lub opcjonalne. Omówię niektóre z tych atrybutów w innym miejscu.
Nie omawiam tutaj tagów wyłącznie istniejących w 'head' oraz tagów przeznaczonych do likwidacji-'deprecated'. Pierwsze omawiam na innej stronie. Z drugimi może być różnie-kolejne wersje przeglądarek mogą je dalej wspierać w najlepsze, ale też zacząć ignorować. W HTML 5 zawarto większość tagów z adnotacją 'deprecated',adnotację zachowując.
Znacznik html <html>. Zewnętrzny tag dokumentu HTML informujacy przeglądarkę,że ma do czynienia z dokumentem HTML. Jest także elementem źródłowym (root element).
Znacznik head <head >.Czołowka,sekcja nagłówkowa dokumentu HTML,niewidoczna na stronie. Zawiera meta-informacje,skrypty,style. Instruuje przeglądarkę skąd wziąć pliki skryptów i stylów. Wymaganym tagiem w head jest jedynie 'title' -tytuł. Head może zawierać poza tym następujące tagi:'meta' ;'link'; 'script';'style';'base'.
Znacznik body <body >. Zawiera wszystkie elementy html tworzące widoczną w oknie przeglądarki treść strony. Może zawierać wszystkie znaczniki tutaj opisane za wyjątkiem 'meta','link','style' 'title' i 'base'
Znacznik div <div>. Określa podział lub sekcję w dokumencie HTML. Bardzo istotny znacznik. Często na bazie elementów'div' tworzy się układ graficzny strony www. Równie często są kontenerami dla innych elementów. Element domyślnie ma szerokość okna przeglądarki. Jego wysokość dostosowuje się do zawartości 'div'. Ten div ma style: <div style="background-color:#FFCC00;border solid 1px;">
Znacznik p <p >. Również istotny znacznik. Organizuje wygląd i układ tekstu, również obrazków w stosunku do tekstu. Może współtworzyć układ graficzny strony. Domyślnie przeglądarki tworzą przestrzeń (margines)nad i pod 'p'. Poza tym domyślnie wygląda jak 'div'-ma szerokość okna przeglądarki i wysokość zależną od zawartości. Ten p ma style: <p style="background-color:#CCCCFF;border solid 1px;">
Znacznik abbr <abbr>. Tworzy tooltip z rozwinięciem skrótu. The W3C zostało założone w 1994 roku.
Znacznik acronym < acronym>. Tworzy tooltip z rozwinięciem akronimu. Spróbujmy to zapisać tkl..
Znacznik address < address>. Zwykle dodawany do nagłówka lub stopki strony. Przeglądarki piszą go kursywą.
Elemiah - GABINET MASAŻU i RELAKSUZnaczniki wyrażeń (phrase tags) Służą głównie do ustalenia wyglądu tekstu. Należą tu : <cite > <em> ;<strong >;<dfn >;<code >;<samp >;<kbd >;<var > .Nie są przeznaczone do likwidacji (deprecated) choć jako tagi prezentacji wchodzą w kompetencje CSS.
Zacznijmy od nie wymienionego wyżej b <b >Po prostu pogrubia tekst, popularny.
Następny,też nie wymieniony to big <big >Oto tekst w tagu 'big'. Nie sądzę,by często był przydatny.
Znacznik cite < cite > Ten tekst jest cytatem.
Znacznik em < em > Ten tekst jest w tagu uwypuklającym, podkreślającym jego znaczenie.
Znacznik code < code > Ten tekst jest w tagu pokazującym kod komputerowy.
Znacznik samp < samp > Ten tekst jest w tagu pokazującym przykład kodu komputerowego.
Znacznik kbd < kbd > Ten tekst jest w tagu 'kbd' ,czyli jest to 'keyboard text'.
Znacznik var < var > Ten tekst jest w tagu 'var' -variable,przedstawia zmienną.
Domyślny wygląd tekstu w powyższych tagach nie jest zbyt zróżnicowany. Sądzę, że można je doskonale wykorzystać dodając styl. Uzyskamy w ten sposób parę tagów kształtujących wygląd tekstu,bez konieczności stosowania 'class' czy "id" do każdego'p' czy 'span'.Przykład niżej. Zastosowany style: <kbd style="color:#009966;font-size:150%; font-weight:bold;">
Znacznik kbd z zastosowaniem atrybutu 'style' : Ten tekst jest w tagu 'kbd' ,czyli jest to 'keyboard text'.
Znacznik : del < del > pokazujący usunięty (deleted) tekst oraz znacznik ins < ins >pokazujący tekst włączony (inserted) Wygląda tak: Ten tekst został usunięty Nie zmieniony dalszy ciąg tekstu A ten tekst został włączony Nie zmieniony dalszy ciąg tekstu. Obydwa tagi mają dwa atrybuty:'cite' oraz 'datetime'. Pierwszy może mieć wartość w postaci adresu strony, na której wyjaśniamy przyczynę usunięcia, (włączenia), drugi- datę dokonania tego czynu. Niestety, przeglądarki ignorują te atrybuty. Podobno silniki wyszukiwarek mogą je używać.
Znacznik blockquote <blockquote> Przeznaczony do pokazywania długich cytatów.
Zauważyć można,że przeglądarka domyślnie zostawia przestrzeń przed i po tym elemencie. Ustala również margines nad i pod blockquote. Teoretycznie tag ma atrybut 'cite' pokazujący źródło cytatu,ale przeglądarki go ignorują.
Znacznik q <q > Przeznaczony do pokazywania krótkich cytatów. Ten tekst jest w tagu 'q' ,czyli jest to 'krótki cytat'.
Internet Explorer go ignoruje,Firefox stawia cudzysłów.
Znacznik tt < tt > Ten tekst jest w tagu 'tt' -teletype, lub mono-spaced tekst.
Znacznik i < i > Ten tekst jest w tagu 'i' -italic,czyli pisany kursywą.
Znacznik small < small > Ten tekst jest w tagu 'small' -czyli mały tekst.
Znacznik pre < pre >
Ten tekst jest w tagu 'pre'. Wyświetlany jest
czcionką o stałej szerokości. Odstępy i końce wierszy
zostały takie,jak w dokumencie źródłowym
Znacznik span < span > Ten tekst jest w tagu 'span', po prostu określajacym jakąś sekcję dokumentu. Domyślny 'span' niczego nie zmienia. Wpisuje się go,by użyć w tym miejscu stylu lub manipulować zawartością, np. używając javascript.
Znacznik sub < sub > Początek tekstu Dalszy ciag tekstu jest w tagu 'sub'. Dalszy ciąg tekstu. Może byc użyty np. w formułach związków chemicznych.
Znacznik sup < sup > Początek tekstu Dalszy ciąg tekstu jest w tagu 'sup'. Dalszy ciag tekstu. Może być użyty np. w przypisach.
Znacznik script < script >
Zapis :
<script type="text/javascript">
kod javascript
</script>
<noscript>Twoja przeglądarka nie wykonuje javascriptu! (Napis pojawi się,jeśli tak jest) </noscript>
Wprowadza na stronę javascript. W tagu może być albo kod javascript albo odniesienie do zewnętrznego pliku javascript przez użycie atrybutu 'src'. Tutaj mamy kod javascript. Jego rezultatem jest napis:'Serdecznie witam użytkowni(ka)czkę Internet Explorer'a. Mamy dzisiaj: tu kod wstawia aktualną datę. Jeśli kod wykryje inną przeglądarkę niż Internet Explorer, pojawi się napis:'Pozdrawiam serdecznie. Mamy dzisiaj:też aktualna data'.
Znacznik br < br > Tworzy koniec wiersza (line break). Można tworzyć
linie tekstu
oraz ustawiać inne elementy typu 'inline' np.obrazki: 
Znacznik button <button >Zapis: <button type="button">tekst albo obrazek </button >
Porównajmy <input type="button" value="tylko tekst" onclick="funkcja javascript" >.W pierwszy znacznik można wpisać np.obrazek,w drugim tylko tekst. Jednak bezpieczniejsze jest używanie drugiego typu z 'input', bo atrybuty z pierwszego przeglądarki różnie traktują.
Nagłówki Tagi nagłówków : od największego <h1 > do najmniejszego <h6 >. Domyślnie przeglądarki ustawiają je od lewej i tworzą proporcjonalne marginesy od góry i od dołu. Najlepiej używać ich wyłącznie zgodnie z przeznaczeniem.
Znacznik hr <hr > w postaci domyślnej:
object;param;embed
Znacznik object < object >Znacznik 'object' jest w zamyśle przeznaczony do wprowadzania na stronę obrazków, audio,video, apletów Java (nie: javascript!), activeX,pdf oraz Flash. Napisałem 'w zamyśle', bo na razie przeglądarki używają innego kodu do załadowania 'object'. Znacznik ma jedna cechę szczególną: jeśli element 'object' nie jest wyświetlony, kod między początkowym i końcowym tagiem 'object' jest wykonywany. Pozwala to na umieszczenie wewnątrz tagu kodu dla różnych przeglądarek. W przykładzie poniżej na stronie wyświetlana jest gra, pobierana łącznie z plikiem .swf Flasha z innej strony. Explorer wyswietla grę wykonując instrukcję w 'object', Firefox robi to samo, ale wykonuje instrukcję zawartą w tagu 'embed'. Tag 'embed' nie należy do 'object'. Tagu 'object' lepiej nie stosować do wyświetlania obrazków.
Znacznik param <param > Znacznik 'param' definiuje ustawienia obiektu w trakcie wykonywania programu (run-time settings). Ilość i atrybuty tagu 'param' zależą od typu obiektu i koncepcji autora strony.
Znacznik embed <embed > Znacznik 'embed' definiuje wbudowaną w stronę zawartość np.plug-in. Znacznik nie należy do elementu 'object'. Jest to nowy tag w HTML 5, ale ponieważ na razie przegladarki ignorują inne pomysły z HTML 5 np.'datalist';nalezy sądzić iż 'embed' to tag już istniejący, wspierany przez przeglądarki,dotychczas nie rekomendowany przez W3C. Tag musi posiadać atrybut 'src'.
Zapis kodu : <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=575 HEIGHT=450> <PARAM NAME=movie VALUE="http://www.dailyfreegames.com/images/files/bird-hunting-game.swf"> <PARAM NAME=quality VALUE=high> <EMBED wmode="transparent" src="http://www.dailyfreegames.com/images/files/bird-hunting-game.swf" quality=high WIDTH=575 HEIGHT=450 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED><param name="wmode" value="transparent" ></object>
Opis gry Jesteś myśliwym polującym na ptactwo.( Strzelasz z łuku). Używaj klawiaturowych strzałek GÓRA i DÓŁ ,by zmieniać kierunek strzelania z łuku. Używaj strzałki PRAWO,by napiąć łuk,LEWO. by zwolnić napięcie. Strzelaj naciskając spację. Strzelaj do wszystkich ptaków za wyjatkiem małych wróbli. Jeśli nie trafisz ptaka,ten przeleci nad strzelcem i narobi mu na głowę .Jesli szósty ptak narobi strzelcowi na głowę,gra jest skończona.Ilość zdobytych punktów wyświetla się za napisem:'Your Score:'Jeśli chcesz grać jeszcze,klikasz:'Play again' Na górze nad strzelcem wyświetla się:score-wynik bieżący,miss-ilość ptaków nie trafionych oraz level-poziom.
image; map; area;
Znacznik img oraz area <img > <area>
Poniżej zapis. Tag 'img' służy do umieszczania obrazków na stronie. Główny atrybut to 'src', przypisujemy mu jako wartość adres folderu lub strony skąd obrazek pobieramy. 'Alt' wyświetla się zastępczo.Używamy dwa atrybuty na raz: id oraz name,bo Firefox nie może obejść się bez 'name', a inne przeglądarki mogą 'name' ignorować. Znacznik 'map' określa obrazek typu image-map, czyli posiadający obszary, kliknięcie których uruchamia jakieś działanie. Obszary owe są określane przez tagi area umieszczane wyłącznie wewnątrz tagu map . 'Area' ma atrybut 'shape', któremu można przypisać np.'rect' (prostokąt) czy 'circle' (koło), podając ich współrzędne. Element 'area' może mieć także atrybut 'href' z przypisaną wartością w postaci adresu strony,obrazka itd.
<img src="images/zegar.jpg" width="139" height="359" alt="zegar" usemap="#idzie" />table;colgroup;col;th;tr;td;caption; thead; tbody ; tfoot ;
Poniżej table z szerokością 100%. To jedno z rozwiązań dla tworzenia strony na bazie table-nasza główna tablica zajmie całą szerokość okna przeglądarki. Naturalnie,table jak każdy element HTML może mieć dowolną pozycję tudzież wygląd ustalony kodem CSS. To dotyczy również każdego elementu składowego tablicy. Tagów 'colgroup' oraz 'col' można użyć do określania stylu kilku kolumn(colgroup) lub jednej kolumny (col). Niestety, Firefox obydwa tagi na teraz ignoruje. Działają w Internet Explorer.Użycie 'th' daje niewiele-w Internet Explorer tytuły kolumn są tylko pogrubione. W Firefox, dodatkowo tytuły są wyrównane do środka. Sądzę, że racjonalne jest używanie do konstrukcji tabeli tagów podstawowych-'table';'tr';'td' z istotnymi atrybutami:'colspan' i 'rowspan';ewentualnie jeszcze tagu 'caption'. Następnie,za pomocą CSS można uzyskać dowolnie przejrzystą i śliczną tabelę.
Tak wygląda zapis:
<table width="100%" border="1">
<caption>Tablica z szerokością 100procent</caption>
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#CC0066;"></colgroup>
<tr>
<th>Projekt</th>
<th>Tytuł</th>
<th>Numer</th>
</tr>
<tr>
<td>Budynek</td>
<td>Biały hotel</td>
<td>2345678</td>
</tr>
<tr>
<td>Most </td>
<td>Trasa morska</td>
<td>3456767</td>
</tr>
</table>
| Projekt | Tytuł | Numer |
|---|---|---|
| Budynek | Biały hotel | 2345678 |
| Most | Trasa morska | 3456767 |
Tablica z 'thead';'tbody' i 'tfoot'. Trzy wymienione znaczniki grupują zawartość wstępu,rozwinięcia i zakończenia tabeli. Użyte bez określenia stylu, niczego nie zmieniają w domyślnym wyglądzie tabeli.Ich stosowanie ma sens,gdy celowe jest zróżnicowanie prezentacji elementów tabeli zawartych między wymienionymi tagami.
Zapis:
<table border="1">
<thead>
<tr>
<th>Zakup</th>
<th>Wydatki zł</th>
</tr>
</thead>
<tbody style="color:#FF3399;height:60px">
<tr>
<td>Słoń</td>
<td>10000</td>
</tr>
<tr>
<td>Porcelana</td>
<td>1400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Suma</td>
<td>11400</td>
</tr>
</tfoot>
</table>
| Zakup | Wydatki zł |
|---|---|
| Słoń | 10000 |
| Porcelana | 1400 |
| Suma | 11400 |
form;fieldset;legend;input;select;option;textarea;label;
form <form> Poniżej przykład 'form' z możliwymi elementami (tagami) składowymi. 'Form' ma tutaj podstawowy atrybut:'action.' Wartością (value), którą przypisujemy atrybutowi może być, jak w przykładzie, adres na który użytkownik może wysyłać wiadomość. Firefox wpisze wiadomość np. w program pocztowy 'Thunderbird' wysyłającego, Internet Explorer wyśle ją, jeśli wysyłający potwierdzi to w pojawiającym się oknie modalnym. Dane woisane za 'subject' wyświetlą się u adresata jako temat. Zapis '20%' między słowami tematu ma zabezpieczać przed przekłamaniami. Atrybut 'tabindex' spowoduje,że treść wyświetli się u adresata w podanej kolejności ( według liczb przypisanych tabindex)
W Form użyłem następujących znaczników (elementów,tagów): Fieldset.On rysuje na stronie prostokąt obejmujący całą form.Legend. wpisuje się tu tytuł całej form.Input Poręczny tag,jeśli wpiszemy odpowiedmią wartość jego atrybutu: type możemy odwzorować go na stronie jako 'text';'radio';'checkbox';'password' także przyciski 'submit';'reset' , poza tym przycisk 'button'. Żeby lista możliwości tagu 'input' była pełna dodajmy 'image';'file' i'hidden' Element 'Select' zawierający znaczniki 'option' tworzy rozwijaną listę pozwalającą wybrać jedną, a jeśli otrzyma atrybut 'multiple'- także kilka opcji z rozwijanej listy. Może też otrzymać atrybut 'selected' z wartością (value)-selected. Tak samo zresztą jak 'checkbox' może mieć atrybut 'checked'.Po otwarciu strony,zarówno checkbox jak odpowiedni 'option' są domyślnie zaznaczone. W form mamy jeszcze element 'textarea' . To prostokąt,w którym użytkownik może coś wpisać
Ostatni z użytych tagów to 'label'. Jest to po prostu tekst obok 'input',tyle że kliknięcie w 'label' zaznacza checkbox,czy radio button do którego label należy. Naturalnie,'form' może zawierać dowolny rodzaj i ilość przedstawionych tu znaczników, w dowolnej kolejności.
<form action="mailto:adres pocztowy?subject=DOTYCZY%20CZEGO" method="post" enctype="text/plain">Znacznik select <select> oraz znacznik option <option>
Możemy również wprowadzać na stronę elementy niezależnie od 'form', np
Miesiąc <select >
<option selected="selected">styczeń</option>
<option >luty</option>
<option >marzec</option>
</select><br>
Znacznik optgroup < optgroup > Używany,jeśli celowe jest pogrupowanie opcji w rozwijanym menu. Sama metka (label) nie jest opcją. Zapis:
<select >
<optgroup label="Miesiące zimowe">
<option value="grudzień">grudzień</option>
<option value="styczeń">styczeń</option>
<option value="luty">luty</option>
</optgroup>
<optgroup label="Miesiące wiosenne">
<option value="marzec">marzec</option>
<option value="kwiecień">kwiecień</option>
<option value="maj">maj</option>
</optgroup>
</select>
ul;li;ol;dl;dt;dd;
Lista nieuporządkowana - unordered list. Może mieć na początku różne znaki.
<ul >Lista uporządkowana-ordered list. Może mieć na początku cyfry,litery duże lub małe.
<ol>Lista definicji. Główny tag to 'dl'. Tag ten zawiera tagi:'dt'-definiowane pojęcie oraz 'dd'-definicję pojęcia.
<dl>Listy wgnieżdżone w listę
<ul>frameset;frame;noframe;
Framest; Frame;Noframe Link do ramek Ramki utworzyłem oddzielnie, jest wybór :albo <body > albo <frame >. Zapis na stronie głównej,która ramki zawiera to u mnie:
<html>
<frameset cols="25%,60%,15%">
<frame src="frame1.html" frameborder=1 style="background-color:#00CC00;"/>
<frame src="frame2.html" frameborder=1 style="background-color:#993333;"/>
<frame src="frame3.html" frameborder=1 style="background-color:#0033CC;"/>
<noframes>
Niestety,Twoja przeglądarka ignoruje 'frame'. Ten tekst pokaże się,jesli przeglądarka ignoruje ramki.
</noframes>
</frameset>
</html>
W ramkach można zamieszczać to samo co na pojedyńczej stronie i tak samo. Mogą istnieć różnice dotyczące określania położenia oraz adresów elementów znajdujących się w ramkach przy stosowaniu CSS oraz Javascript. Nie można użyć tagu 'body' na stronie głównej,na której ramki są wyświetlane jako elementy całej strony. Naturalnie,tu można i trzeba uzyć 'head'. W samych ramkach, czyli'frame' używamy i 'head' i'body'. Przy okazji:Explorer ignoruje powyższy zapis stylu dla ramek,wyświetlane ramki są kolorowe,bo ich 'body' ma atrybut 'bgcolor' z odpowiednia wartością.
Znacznik iframe <iframe > To pojedyńczy znacznik, tworzy na stronie 'pod- okno'-'sub window'.Zapis:
<iframe src ="http://newrider.pl/" width="100%" height="300px">
<p>Twoja przeglądarka ignoruje iframe! </p>
</iframe>
Znacznik marquee <marquee> na koniec. To znacznik poza standardem HTML,ale wykonywany przez przeglądarki. Powoduje ruch tekstu lub obrazka. Nie zalecany do stosowania na stronach www.Zapis tutaj (div naturalnie można pominąć):
<div style="text-align:center; background-color:#005936; padding:5px">
<marquee scrolldelay="50" scrollamount="3" direction="left"
style="border:inset 5; padding:5px; width:50%; background-color:#DEDEDE;
color:#000000; font-family:courier new; font-size:12pt; font-weight:bold">
Chyba opracowanie jest przejrzyste ?
</marquee></div>