INFORMATICS

The Best

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
< &lt; mniejsze niż
> &gt; większe niż
(c) &copy; symbol praw autorskich
á &aacute; małe a z akcentem akutowym
ŕ &agrave; 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ą
ń &ntilde; 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 &Oslash; utworzy duże o z ukośnikiem, jak w słowie CŘPENHAGEN .

Spacja nierozdzielająca - wpisywana za pomocą obiektu &nbsp; 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:

  • Kurs języka HTML - poradnik webmastera
  • "Webmaster" - miesięcznik
  • pl.comp.www - FAQ
  • To i owo - o HTML, DHTML, edytorach HTML STATOM - opis składni języka HTML
  • tonet - linki
  • Chmurka - linki
  • webdesign.art.pl - poradnik
  • web resources - linki, kurs HTML
  • CSS2 - przewodnik
  • HTML Zone - kurs HTML i wielu innych języków
  • Webmaster - m.in. przykłady i linki
  • WEB-AREA.org - m.in. kursy, skrypty i linki

  • Search