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 Definicja typu dokumentu STF Odnośnik (kotwica) STF Skrót STF Akronim STF Adres STF Applet (niezalecany) TF Element mapy odsyłaczy STF Pogrubienie tekstu STF Definicja bazowego adresu URL dla wszystkich odnośników na stronie STF Definicja bazowego fontu (niezalecany) TF Kierunek wyświetlania tekstu STF Powiększenie tekstu STF Komentarz blokowy STF Ciało dokumentu HTML STF Przejście do nowej linii STF Przycisk STF Tytuł tabeli STF Centrowanie tekstu (niezalecany) TF Cytat STF Fragment kodu programu STF Definicja kolumny tabeli STF Definicja grupy kolumn w tabeli STF Opis definicji STF Tekst skasowany STF Definiowane słowo lub wyrażenie STF Lista katalogu (niezalecany) TF Sekcja w dokumencie STF Lista definicji STF Definiowane słowo lub wyrażenie STF Emfaza STF Grupa pól STF Określenie czcionki, jej rozmiaru i koloru (niezalecany) TF Formularz STF Definicja zawartości ramki na stronie z ramkami F Grupa ramek na stronie z ramkami F Nagłówek poziomu 1 STF Nagłówek poziomu 2 STF Nagłówek poziomu 3 STF Nagłówek poziomu 4 STF Nagłówek poziomu 5 STF Nagłówek poziomu 6 STF Definicja informacji o dokumencie STF Pozioma linia STF Definicja dokumentu HTML STF Tekst pochylony STF Ramka pływająca (iframe) TF Obrazek STF <input> Pole formularza (opis ogólny) STF Tekst wstawiony STF Definiuje jednoliniowe pole do wprowadzania tekstu (niezalecany) TF Tekst wprowadzony z klawiatury STF Erykieta dla kontrolki formularza STF Tytuł dla grupy pól STF Element listy STF Odnośnik do zasobu STF Mapa odsyłaczy graficznych STF Lista typu menu (niezalecany) TF Informacje meta STF Sekcja noframe (dla przeglądarek nie obsługujących ramek) TF Sekcja noscript (dla przeglądarek nie obsługujących skryptów) STF <object> Osadzony obiekt STF Lista numerowana STF Grupa opcji STF Opcja w liście rozwijalnej STF Paragraf STF Parametr dla obiektu STF Tekst preformatowany STF Krótki cytat STF Tekst przekreślony (niezalecany) TF Przykład kodu komputerowego STF Skrypt STF Lista wybieralna STF Pomniejszony tekst STF Sekcja w dokumencie STF Tekst przekreślony (niezalecany) TF Tekst silnie wyróżniony STF Definicja arkuszy styli CSS STF Tekst w dolnym indeksie STF Tekst w górnym indeksie STF Tabela STF Ciało tabeli STF Komórka tabeli STF Pole do wprowadzania wielu linii tekstu STF Stopka tabeli STF Komórka nagłówka tabeli STF Nagłówek tabeli STF Tytuł dokumentu HTML STF Wiersz tabeli STF Tekst "maszynowy" STF Tekst podkreślony (niezalecany) TF Lista wypunktowana STF 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: