Znaki specjalne HTML
Można włączyć znaki specjalne do kodu HTML używając specjalnych "znaczników", nazywanych obiektami lub odwołaniami do obiektów.
Zaczynają sie one zawsze znakiem apresand (&) i kończą średnikiem (;). Większość z tych obiektów ma swoje mnemoniki, jak pokazuje tabela.
Znaki specjalne w dokumentach HTML |
||
Znak |
Kod HTML |
Znaczenie |
& | & | apresand |
< | < | mniejsze niż |
> | > | większe niż |
(c) | © | symbol praw autorskich |
á | á | małe a z akcentem akutowym |
ŕ | à | małe a z akcentem grave |
â | $acirc; | małe a z cyrkumfleksem |
ä | $amul; | małe a z umlautem |
ĺ | $aring; | małe a z kółkiem |
ç | $ccedil; | małe c z cedillą |
ń | ñ | małe m z tyldą |
ř | $oaslash; | małe o z ukośnikiem |
ß | $szlig; | mały symbol niemieckiego s |
Aby utworzyć wielka literę w wersji znaków przedstawionych w tabeli, należy zamienić po prostu pierwszą literę znacznika formatującego na wielką. Na przykład znacznik Ø utworzy duże o z ukośnikiem, jak w słowie CŘPENHAGEN .
Spacja nierozdzielająca - wpisywana za pomocą obiektu pozwala wymusić wiele spacji między elementami i zapewnia; że elementy po każdej z jej stron sąsiadują zawsze ze sobą, niezależnie od wielkości okna.
Tekst w ramce
Jak wstawić na stronę www tekst w ramce?
Najprościej poprzez
Do wstawienia tekstu w ramce na stronę WWW najlepiej jest użyć znacznika <fieldset>:
<fieldset>test ramki</fieldset>
Można też dodać do ramki tytuł, umieszczając go wewnątrz znacznika <fieldset> w znaczniku <legend>:
<fieldset><legend>Tytuł</legend> Zawartość ramki</fieldset>
Znaczniki Html
Lista znaczników HTML/XHTML
Dalej >> Znacznik <!--...--> |
Znaczniki HTML/XHTML są podstawowymi cegiełkami z których zbudowana jest każda strona WWW. Poniżej znajdziesz je wszystkie wraz z opisami ich atrybutów. Lista ta przyda Ci się jeżeli poszukujesz szczegółowych informacji na temat wybranego znacznika HTML. Jeżeli natomiast chcesz się nauczyć tego języka, to raczej polecam Ci skorzystanie z Kursu języka HTML - dzięki niemu o wiele łatwiej nauczysz się tego języka (oczywiście możesz skorzystać z poniższej listy, ale to będzie jak nauka języka obcego przy użyciu słownika).
Poniższa lista zawiera posortowane alfabetycznie znaczniki HTML 4.01 / XHTML 1.0. Wartości w kolumnie "DTD" oznaczają w której wersji HTML/XHTML można korzystać z podanego znacznika:
- S - Strict
- T - Transitional
- F - Frameset
Znacznik |
Opis |
DTD |
<!--...--> |
Komentarz |
STF |
<!DOCTYPE> |
Definicja typu dokumentu |
STF |
<a> |
Odnośnik (kotwica) |
STF |
<abbr> |
Skrót |
STF |
<acronym> |
Akronim |
STF |
<address> |
Adres |
STF |
<applet> |
Applet (niezalecany) |
TF |
<area> |
Element mapy odsyłaczy |
STF |
<b> |
Pogrubienie tekstu |
STF |
<base> |
Definicja bazowego adresu URL dla wszystkich odnośników na stronie |
STF |
<basefont> |
Definicja bazowego fontu (niezalecany) |
TF |
<bdo> |
Kierunek wyświetlania tekstu |
STF |
<big> |
Powiększenie tekstu |
STF |
<blockquote> |
Komentarz blokowy |
STF |
<body> |
Ciało dokumentu HTML |
STF |
<br> |
Przejście do nowej linii |
STF |
<button> |
Przycisk |
STF |
<caption> |
Tytuł tabeli |
STF |
<center> |
Centrowanie tekstu (niezalecany) |
TF |
<cite> |
Cytat |
STF |
<code> |
Fragment kodu programu |
STF |
<col> |
Definicja kolumny tabeli |
STF |
<colgroup> |
Definicja grupy kolumn w tabeli |
STF |
<dd> |
Opis definicji |
STF |
<del> |
Tekst skasowany |
STF |
<dfn> |
Definiowane słowo lub wyrażenie |
STF |
<dir> |
Lista katalogu (niezalecany) |
TF |
<div> |
Sekcja w dokumencie |
STF |
<dl> |
Lista definicji |
STF |
<dt> |
Definiowane słowo lub wyrażenie |
STF |
<em> |
Emfaza |
STF |
<fieldset> |
Grupa pól |
STF |
<font> |
Określenie czcionki, jej rozmiaru i koloru (niezalecany) |
TF |
<form> |
Formularz |
STF |
<frame> |
Definicja zawartości ramki na stronie z ramkami |
F |
<frameset> |
Grupa ramek na stronie z ramkami |
F |
<h1> |
Nagłówek poziomu 1 |
STF |
<h2> |
Nagłówek poziomu 2 |
STF |
<h3> |
Nagłówek poziomu 3 |
STF |
<h4> |
Nagłówek poziomu 4 |
STF |
<h5> |
Nagłówek poziomu 5 |
STF |
<h6> |
Nagłówek poziomu 6 |
STF |
<head> |
Definicja informacji o dokumencie |
STF |
<hr> |
Pozioma linia |
STF |
<html> |
Definicja dokumentu HTML |
STF |
<i> |
Tekst pochylony |
STF |
<iframe> |
Ramka pływająca (iframe) |
TF |
<img> |
Obrazek |
STF |
<input> |
Pole formularza (opis ogólny) |
STF |
<ins> |
Tekst wstawiony |
STF |
<isindex> |
Definiuje jednoliniowe pole do wprowadzania tekstu (niezalecany) |
TF |
<kbd> |
Tekst wprowadzony z klawiatury |
STF |
<label> |
Erykieta dla kontrolki formularza |
STF |
<legend> |
Tytuł dla grupy pól |
STF |
<li> |
Element listy |
STF |
<link> |
Odnośnik do zasobu |
STF |
<map> |
Mapa odsyłaczy graficznych |
STF |
<menu> |
Lista typu menu (niezalecany) |
TF |
<meta> |
Informacje meta |
STF |
<noframes> |
Sekcja noframe (dla przeglądarek nie obsługujących ramek) |
TF |
<noscript> |
Sekcja noscript (dla przeglądarek nie obsługujących skryptów) |
STF |
<object> |
Osadzony obiekt |
STF |
<ol> |
Lista numerowana |
STF |
<optgroup> |
Grupa opcji |
STF |
<option> |
Opcja w liście rozwijalnej |
STF |
<p> |
Paragraf |
STF |
<param> |
Parametr dla obiektu |
STF |
<pre> |
Tekst preformatowany |
STF |
<q> |
Krótki cytat |
STF |
<s> |
Tekst przekreślony (niezalecany) |
TF |
<samp> |
Przykład kodu komputerowego |
STF |
<script> |
Skrypt |
STF |
<select> |
Lista wybieralna |
STF |
<small> |
Pomniejszony tekst |
STF |
<span> |
Sekcja w dokumencie |
STF |
<strike> |
Tekst przekreślony (niezalecany) |
TF |
<strong> |
Tekst silnie wyróżniony |
STF |
<style> |
Definicja arkuszy styli CSS |
STF |
<sub> |
Tekst w dolnym indeksie |
STF |
<sup> |
Tekst w górnym indeksie |
STF |
<table> |
Tabela |
STF |
<tbody> |
Ciało tabeli |
STF |
<td> |
Komórka tabeli |
STF |
<textarea> |
Pole do wprowadzania wielu linii tekstu |
STF |
<tfoot> |
Stopka tabeli |
STF |
<th> |
Komórka nagłówka tabeli |
STF |
<thead> |
Nagłówek tabeli |
STF |
<title> |
Tytuł dokumentu HTML |
STF |
<tr> |
Wiersz tabeli |
STF |
<tt> |
Tekst "maszynowy" |
STF |
<u> |
Tekst podkreślony (niezalecany) |
TF |
<ul> |
Lista wypunktowana |
STF |
<var> |
Zmienna (np. w programie) |
STF |
Przydatne strony
Zestaw stron narzędziowych dla osób które projektują strony internetowe
Webmastering
- Xenu – świetne narzędzie do sprawdzania poprawności linków w serwisie internetowym (sprawdzanie, czy nie ma zerwanych linków, prowadzących do nieistniejących już podstron, błędnie opublikowanych linków)
- FreeMind – program do tworzenia mapy myśli, doskonale się sprawdza przy wprowadzaniu burzy mózgów, projektowaniu struktury serwisu
- JMeter – aplikacja, która umożliwia testowanie obciążenia serwera HTTP, symuluje rzeczywiste obciążenie strony przez użytkowników.
- 301url – wtyczka do Firefox, pozwalająca skracać i przerabiać długie i nieprzyjazne adresy URL.
- Fiddler – bardzo przydatny program pozwalający obserwować skrypty wywoływane na danej podstronie (bardzo przydaje się przy sprawdzaniu skryptów statystyk). Opisywałem go w poście Sprawdzanie statystyk – Fiddler
- Greasemonkey – bardzo ciekawa wtyczka do Firefox, za pomocą której można odczytać wiele przydatnych informacji na temat linków prowadzących do naszej strony w sekcji Narzędzia dla Webmasterów Google. Opisywałem jej zastosowanie w poście Teraz możesz dowiedzieć się więcej o swoich linkach
- Copy as HTML Link – wtyczka do Firefox, która kopiuje zaznaczoną frazę w formacie HTML.
- Firebug – pozwala na monitorowanie wywoływanych skryptów, obrazków, kodów na stronie. Przydatny przy znajdywaniu błędów ładowania strony.
- LinkChecker – wtyczka do Firefox sprawdzająca poprawność linków na witrynie.
- Live HTTP Headers – pokazuje nagłówki HTTP w czasie ładowania strony.
- Load Time Analyzer – sprawdza i wizualizuje czas ładowania strony w przeglądarce Firefox.
- SeoQuake – kolejna wtyczka Firefox, narzędzie przydatne dla webmasterów, którzy mają do czynienia z takimi zagadnieniami jak SEO i pozycjonowanie. Pozwala odczytywać wiele informacji o konkurencyjnych stronach z poziomu wyników wyszukiwania Google.
- ServerReplace – wtyczka do Firefox pozwalająca wczytywać tę samą witrynę z poziomu różnych serwerów (np. serwera produkcyjnego i oficjalnego).
- Web Color Names – pozwala szybko określa kod danego koloru na potrzeby strony.
- X-Ray – ciekawa wtyczka do Firefox pozwalająca szybko przeglądać strukturę kodu przeglądanej podstrony.
- XML Developer Toolbar – pozwala używać narzędzia XML z poziomu przeglądarki.
Dostępność i użyteczność strony
- TAW with a click – Niewielkie rozszerzenie do przeglądarki Firefox, instalujące malutki przycisk w przeglądarce, którego użycie pozwala na stwierdzenie, czy odwiedzana strona jest zgodna ze standardami W3C Web Content Accessibility Guidelines (WCAG 1.0)
- http://www.contentquality.com – Strona internetowa, an której możesz przeprowadzić testy dostępności strony internetowej w różnych przeglądarkach internetowych. Po wykonaniu testu tworzony jest raport, który pokazuje problemy dostępności serwisu i sposoby na ich rozwiązanie.
- Openwave - symulator przeglądarki WWW telefonu komórkowego. Przydatne do sprawdzenia, czy możliwa jest przeglądnie naszej stronie za pomocą telefonu komórkowego.
- Opera mini -kolejny symulator przeglądarki telefonu komórkowego MiniOpera. Przeglądarka ta jest dośc często stosowana w urządzeniach mobilnych i telefonach komórkowych.
- RightLynx Lynx Preview Tool – narzędzie do przeglądania stron internetowych w takim samej postaci, w jakiej wyglądają one w przeglądarce tekstowej Lynx
- Accessibility Evaluator – całkiem niezłe moim zdaniem rozszerzenie do Firefox znajdujące problemy związane z dostępnością serwisu
- Accessibility color wheel – Symuluje poszczególne rodzaje słabego widzenia i rekomenduje najlepsze połączenie tekstu tła z kolorem tekstu na stronie
- WebAIM Low Vision Simulation - symuluje wygląd strony w oczach osób słabo widzących
- Web Accessibility Inspector-Pomaga sprawdzić, czy dana strona będzie dostępna dla osób starszych i mających problemy ze wzrokiem
- Vischeck – Pomaga zobaczyć, jak wygląda dana strona w oczach osoby, która nie rozróżnia kolorów.
- TAW Online – Stwierdza stopień zgodności strony ze standardami W3C Web Content Accessibility Guidelines (WCAG 1.0)
- WebAIM Dyslexia Simulation – nie do końca związane z dostępnością stron WWW, obrazuje problemy w czytaniu tekstu przez osoby mające dysleksję.
- WebAIM Distractibility Simulation – narzędzie, które pokazuje problemy, jakie ma osoba z upośledzona ruchowo z nawigowaniem witryny internetowej
- Web Accessibility Toolbar - Umożliwia sprawdzenie realnego czasu potrzebnego na załadowanie się określonej podstrony.
- Jaws – wersja demo najbardziej popularnego oprogramowania udźwiękawiającego, stosowanego przez ludzi niewidomych do oglądania i przeglądania witryn internetowych.
- The Firefox Screen Reader Emulator – rozszerzenie do Firefox, które pozwala sprawdzić, jak dana podstrona prezentuje się w nowoczesnych urządzeniach typu screen reader.
- Browsershots.org/ – serwis pozwala przetestować działanie określonej witryny internetowej w różnych przeglądarkach internetowych (najważniejsze przeglądarki działające na systemach: Windows i Linux i Mac)
- Safari View – wtyczka do Firefox emulująca działanie przeglądarki Safari
- AccessColor – Sprawdza zewnętrzne i wewnętrzne pliki CSS strony internetowej, pozwalając na zbadanie kontrastu pomiędzy kolorem tła witryny i kolorem tekstu na witrynie
HTML: