HTML

Z PHPEdia.pl
Skocz do: nawigacji, wyszukiwania

HTML to podstawowy i najbardziej rozpowszechniony język, wykorzystywany do tworzenie statycznych dokumentów na potrzeby Internetu. Wykorzystując zdefiniowane znaczniki pozwala opisywać strukturę dokumentu, która następnie jest odpowiednio interpretowana przez przeglądarkę.

HTML to język znacznikowy, oparty na XML. Nazwa HTML to akronim od słów Hyper Text Markup Language (hipertekstowy język znaczników).

Podstawy dla HTML i całego Internetu, stworzone zostały w ośrodku naukowo-badawczym CERN, przez Tima Bernersa-Lee. W 1980 r. stworzył on prototyp hipertekstowego systemu informacyjnego, który miał być wykorzystywany do organizowania i udostępniania dokumentów związanych z badaniami naukowymi. Dokumenty można było łączyć poprzez stworzenie łącza między nimi. Choć oba dokumenty znajdować się mogły fizycznie w różnych miejscach, jeśli były one udostępnione w jednej sieci, użytkownik mógł się przenosić miedzy nimi.

W 1990 r. Tim Berners-Lee i Robert Cailliau stworzyli projekt WorldWideWeb (www).

Podstawowy kod strony HTML.

Według aktualnie obowiązującej specyfikacji HTML 4.01, podstawowy kod HTML strony www wygląda następująco (dla polskich stron www):

Niepoprawny język.

Musisz wybrać język w następujący sposób: <source lang="html4strict">...</source>

Języki obsługiwane w podświetlaniu składni:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 </head>
 <body>
 </body>
</html>

Omówienie kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - znacznik ten powinien się znaleźć na samym początku dokumentu. Informuje on przeglądarkę, która wersja języka HTML została użyta do sformatowania dokumentu.

<html></html> - para znaczników informujących przeglądarkę, że wywołany przez nią dokument zawiera kod HTML i znaczniki w nim użyte powinny być interpretowane zgodnie ze specyfikacją języka HTML.

<head></head> - para znaczników odpowiedzialnych za sekcję informacji o dokumencie. Informacje zawarte w tej sekcji nie są wyświetlane przez przeglądarkę (wyjątkiem jest informacja zawarta między znacznikami <title></title>). W obrębie sekcji HEAD umieszczane są znaczniki meta (tzw. meta-tagi) oraz odwołania do kaskadowych arkuszy stylów CSS. Również w tej sekcji często pojawia się kod JavaScript.

<title></title> - para znaczników, która informuje przeglądarkę, że tekst znajdujący się między nimi należy wyświetlić na pasku tytułu.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> - znacznik meta (tzw. meta-tag) informujący przeglądarkę, że plik przez nią wywołany jest plikiem z zawartością, zawartość ta jest tekstem i do jej wyświetlenia musi być użyty zestaw znaków języka polskiego.

<body></body> - para znaczników odpowiedzialnych za treść strony. Wszelkie dane, które mają zostać wyświetlone przez przeglądarkę muszą zostać umieszczone w sekcji BODY.

Znaczniki

Język HTML do opisania struktury dokumentu posługuje się poleceniami, których budowa jest ściśle określona. Polecenia te ograniczone są znakami < oraz > i zwykle występują w parach. Znacznik zamykający różni się od znacznika otwierającego ukośnikiem poprzedzającym nazwę polecenia.

Znaczniki można pogrupować na kilka zasadniczych grup.

Podstawowe elementy strony

<!-- --> - znacznik komentarza; tekst powinien być umieszczony po znakach <!-- i przed znakami -->.

<!-- Przykładowy komentarz -->

<p></p> - znaczniki paragrafu; między tymi znacznikami powinny być umieszczane akapity tekstu.

<p>Przykładowy tekst akapitu.</p>

<br> - znacznik interlinii; wprowadza on złamanie wiersza.

<p>Przykładowy<br>
tekst<br>
łamany<br>
interlinią</p>

<div></div> - znaczniki warstwy; definiują one sekcję dokumentu, której właściwości można zmienić kaskadowymi arkuszami stylu CSS. Znaczniki te są elementami blokowymi, to znaczy - obejmującymi tekst o więcej niż jednej linii.

<span></span> - znaczniki sekcji; definiują one w sposób liniowy elementy strony, których właściwości można zmienić kaskadowymi akruszami stylu CSS, bez ingerencji w strukturę dokumentu.

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> - znaczniki nagłówka; największy rozmiarowo nagłówek definiuje para znaczników <h1></h1>, najmniejszy para <h6></h6>.

<hr> - znacznik linii; wprowadza do dokumentu pojedyńczą linię na całej szerokości dokumentu.

Formatowanie tekstu

Zgodnie z zaleceniami W3C, struktura dokumentu powinna być oddzielona od warstwy jego wyglądu. Standardy tworzenia stron www, zakładają, że struktura dokumentu jest określona przez język HTML, a wygląd dokumentu przez kaskadowe arkusze stylu CSS. Jednakże, ze względu na zgodność wsteczną i różnice między HTML 4.01 i XHTML 1.0 w języku HTML występują elementy odpowiedzialne za formatowanie tekstu.

<b></b> - znaczniki pogrubienia tekstu.

<b>Pogrubienie</b>

<i></i> - znaczniki pochylenia tekstu.

<i>Pochylenie</i>

<u></u> - znaczniki podkreślenia tekstu.

<u>Podkreślenie</u>

<sup></sup> - znaczniki indeksu górnego.

Przykładowy tekst<sup>z elementem w indeksie górnym<sup>

<sub></sub> - znaczniki indeksu dolnego.

Przykładowy tekst<sub>z elementem w indeksie dolnym<sup>

<bdo></bdo> - znaczniki zmiany kierunku tekstu; konieczne jest podanie parametru dir, rtl - tekst od prawej do lewej, ltr - tekst od lewej do prawej.

<bdo>tsket ywodałkyzrP<bdo>

<pre></pre> - znaczniki tekstu preformatowanego; w tekście umieszczonym pomiędzy nimi, zachowane zostaną znaki spacji, tabulacji i złamania wierszy, a sam tekst wyświetlony zostanie czcionką o stałej szerokości.

Formularze

Język HTML posiada znaczniki odpowiedzialne za tworzenie formularzy, w których użytkownik czytający dokument może wprowadzać informacje. Formularze są najczęstszą formą pozyskiwania danych od użytkownika, które następnie wykorzystywane są przez języki programowania po stronie serwera, takie jak PHP, ASP czy JSP.

<form></form> - znaczniki definiujące formularz; wymagany jest w nim atrybut dodatkowy action, który informuje przeglądarkę gdzie należy wysłać pobrane przez formularz dane.

<input> - znacznik pola wprowadzania danych; wymagany jest w nim atrybut dodatkowy type, precyzujący typ i formę wprowadzanych danych - text, checkbox, radio, password, hidden, submit, reset, button, file, image.

<textarea> - znacznik definiujący wielowierszowe pole tekstowe.

<select><option></option></select> - znaczniki pola listy rozwijanej (<select></select>) i opcji w liście (<option></option>).

<label></label> - znaczniki etykiety dla elementów formularza.

<fieldset></fieldset> - znaczniki obramowania elementów w obrębie formularza.

<legend></legend> - znaczniki etykiety dla elementu <fieldset>.

Tabele

Zgodnie z zaleceniami W3C tabele powinny być używane wyłącznie do zestawień danych, nie zaś do tworzenia szablonów stron www.

<table></table> - znaczniki tabeli; wewnątrz nich umieszczane są pozostałe znaczniki odpowiedzialne za strukturę tabeli.

<tr><tr> - znaczniki wiersza tabeli.

<td></td> - znaczniki kolumny tabeli; w przypadku skomplikowanych tabel, których część komórek jest ze sobą połączona wymaga zastosowania parametrów colspan (określającego ilość kolumn, które obejmuje komórka) i rowspan (określającego ilość rzędów, które obejmuje komórka).

Listy

<ul></ul> - znaczniki listy nieuporządkowanej.

<ol></ol> - znaczniki listy uporządkowanej (numerowanej).

<li><li> - znaczniki opcji w listach; stosowane w obu rodzajach list.

<dt></dt> - znaczniki definicji terminu.

<dd></dd> - znaczniki wyjaśnienia terminu.

Odnośniki

<a></a> - znaczniki odnośników; wskazują powiązania między plikami; konieczne jest użycie atrybutu dodatkowego href - określającego lokalizację elementu, do którego odwołuje się odnośnik.

Linki

Specyfikacja HTML 4.01
Kurs HTML boo