Podstawowe tagi HTML
Tagi czyli znaczniki języka HTML to polecenia dla przeglądarki opisujące sposób wyświetlania strony, formatowania oraz dane dla robotów sieciowych. Znaczniki nie są wyświetlane na stronie, jest to tylko kawałek kodu, który wpływa na sposób w jaki strona wyświetli się u użytkownika. Tagi zawierają zdefiniowane polecenia ujęte w ostry nawias: < nazwa_znacznika >
Aby zobaczyć przykłady zastosować zobacz nasz kurs HTML.
W podanej poniżej tabeli są tylko te najczęściej używane znaczniki, ich atrybuty oraz przykłady zastosowań.
Tag | nazwa | przykład kodu | wygląd w przeglądarce | ||||||
---|---|---|---|---|---|---|---|---|---|
<!-- | komentarz | <!--to jest komentarz, który nie będzie widoczny na stronie--> | niewidoczny na stronie | ||||||
<A - | kotwica, link | <A HREF= "http://freeware.info.pl" >Odwiedź naszą stronę</A> | Odwiedź naszą stronę | ||||||
<B> | bold, pogrubiony | <B>Przykład</B> | Przykład | ||||||
<BIG> | big, wielki (text) | <BIG>Przykład</BIG> | Przykład | ||||||
<BODY> | ciało dokumentu HTML | <BODY>Zawartość Twojej strony</BODY> | Zawartość Twojej strony | ||||||
<BR> | przejście do następnej linii | Pierwsza linia tekstu<BR>druga linia tekstu | Pierwsza linia tekstu druga linia tekstu |
||||||
<CENTER> | centrowanie | <CENTER>To zostanie wycentowane</CENTER> | To zostanie wycentowane |
||||||
<EM> | istotny fragment tekstu | Ten fragment <EM>zostanie wyróżniony</EM> tagiem EM | Ten fragment zostanie wyróżniony tagiem EM | ||||||
<EMBED> |
osadzony obiekt | <EMBED src="dzwiek.mid" width="100%" height="60" align="center"> | |||||||
<FONT> | czcionka | <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000"> Przykład</FONT> | Przykład | ||||||
<FORM> | formularz | <FORM
action= "mailto:twoja@domena.pl"> Name: <INPUT name="Nazwa" value="" size="10"><BR> Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM> |
|||||||
<H1> | nagłówek 1 | <H1>Przykład nagłówka 1</H1> | Przykład nagłówka 1 |
||||||
<H2> | nagłówek 2 | <H2>Przykład nagłówka 2</H2> | Przykład nagłówka 2 |
||||||
<H3> | nagłówek 3 | <H3>Przykład nagłówka 3</H3> | Przykład nagłówka 3 |
||||||
<H4> | nagłówek 4 | <H4>Przykład nagłówka 4</H4> | Przykład nagłówka 4 |
||||||
<H5> | nagłówek 5 | <H5>Przykład nagłówka 5</H5> | Przykład nagłówka 5 |
||||||
<H6> | nagłówek 6 | <H6>Przykład nagłówka 6</H6> | Przykład nagłówka 6 |
||||||
<HEAD> | Sekcja nagłówkowa dokumentu HTML | <HEAD>Zawiera elementy niewidoczne na stronie: opis, tytuł słowa kluczowe itp</HEAD> | Nic się nie wyświetla na stronie | ||||||
<HR> | pozioma linia | <HR> | tekst nad linią tekst pod linią |
||||||
<HTML> | Sekcja definiująca stronę | <HTML><HEAD><META> <TITLE> Tytuł strony</TITLE> </HEAD><BODY> zawartość strony</BODY></HTML> | Twoja strona | ||||||
<I> | kursywa | <I>tekst pochylony</I> | Tekst pochylony | ||||||
<IMG> | obrazek | <IMG SRC="obrazek.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="tekst alternatyny dla obrazka"> | |||||||
<INPUT> | Pole edycyjne formularza |
<FORM METHOD=post ACTION= "/cgi-bin/przyklad.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Wyślij"> </FORM> |
|||||||
<INPUT> | Pole edycyjne formularza |
<FORM METHOD=post ACTION= "/cgi-bin/przyklad.cgi"> Wprowadź komentarz:<BR> <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=16 MAXLENGTH=100> </TEXTAREA><BR> <INPUT type="Submit" VALUE="Wyślij"> <INPUT type="Reset" VALUE="Wyczyść"> </FORM> |
|||||||
<INPUT> | Pole edycyjne formularza (opcje) | <FORM METHOD=post ACTION="/cgi-bin/przyklad.cgi"> <CENTER> Wybierz opcje: <SELECT> <OPTION >option 1 <OPTION SELECTED> option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> <INPUT type="Submit" VALUE="wyślij"> </CENTER> </FORM> |
|||||||
<INPUT> | Pole edycyjne formularza (opcje) | <FORM METHOD=post ACTION= "/cgi-bin/example.cgi"> Wybierz opcje:<BR> <INPUT type="radio" name="option"> Option 1 <INPUT type="radio" name="option" CHECKED> Option 2 <INPUT type="radio" name="option"> Option 3 <BR> <BR> Wybierz opcje:<BR> <INPUT type="checkbox" name="selection"> Selection 1 <INPUT type="checkbox" name="selection" CHECKED> Selection 2 <INPUT type="checkbox" name="selection"> Selection 3 <INPUT type="Submit" VALUE="Wyślij"> </FORM> |
|||||||
<LI> | pozycja z listy | przykład 1: <MENU> <LI type="disc">pozycja 1 <LI type="circle">pozycja 2 <LI type="square">pozycja 3 </MENU> przykład 2: <OL type="i"> <LI>pozycja 1 <LI>pozycja 2 <LI>pozycja 3 <LI>pozycja 4 </OL> |
Przykład 1:
|
||||||
<LINK> | link | Odwiedź naszą <A HREF= "http://freeware.info.pl" >stronę</A> | Odwiedź naszą stronę | ||||||
<MENU> | menu | <MENU> <LI type="disc">pozycja 1 <LI type="circle">pozycja 2 <LI type="square">pozycja 3 </MENU> |
|
||||||
<META> | meta | <META name="Description" content="Tu
opis Twojej strony"> <META name="keywords" content="tu, słowa, kluczowe, twojej, strony"> |
to nie wyświetla się na stronie | ||||||
<META> | meta | <META HTTP-EQUIV= "Refresh" CONTENT="4;URL= http://www.domena.com/"> | to nie wyświetla się na stronie | ||||||
<META> | meta | <META http-equiv="Pragma" content="no-cache"> | to nie wyświetla się na stronie | ||||||
<META> | meta | <META name="rating" content="General"> | to nie wyświetla się na stronie | ||||||
<META> | meta | <META name="ROBOTS" content="ALL"> | to nie wyświetla się na stronie | ||||||
<META> | meta | <META NAME="ROBOTS" content= "NOINDEX,FOLLOW"> | to nie wyświetla się na stronie | ||||||
<OL> | Lista | Lista uporządkowana, numerowana <OL> <LI>pozycja 1 <LI>pozycja 2 <LI>pozycja 3 <LI>pozycja 4 </OL> Lista uporządkowana
<OL type="a">
<OL type="I"> |
Lista uporządkowana
Lista uporządkowana
Lista uporządkowana, cyfry rzymskie
|
||||||
<OPTION> | lista opcji | <FORM METHOD=post ACTION= "/cgi-bin/example.cgi"> <CENTER> Wybierz opcję: <SELECT> <OPTION>opcja 1 <OPTION SELECTED> opcja 2 <OPTION>opcja 3 <OPTION>oopcja 4 <OPTION>opcja 5 <OPTION>opcja 6 </SELECT><BR> </CENTER> </FORM> |
|||||||
<P> | akapit | Przykład 1:<BR> <BR> <P align="left"> To jest przykład<BR> zastosowania znacznika <BR> początku akapitu.<BR> <BR> Przykład 2:<BR> <BR> <P align="right"> To jest przykład<BR> zastosowania znacznika <BR> początku akapitu.<BR> <BR> Przykład 3:<BR> <BR> <P align="center"> To jest przykład<BR> zastosowania znacznika <BR> początku akapitu. |
Przykład 1: Przykład 2:
Przykład 3: |
||||||
<SMALL> | mniejszy rozmiar tekstu | <SMALL> Przykład</SMALL> | Przykład | ||||||
<STRONG> | większy rozmiar tekstu | <STRONG> Przykład</STRONG> | Przykład | ||||||
<TABLE> | tabela | Przykład 1: <TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>kolumna 1</TD> <TD>kolumna 2</TD> </TR> </TABLE> Przykład 2: <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD BGCOLOR="#CCCCCC"> kolumna 1</TD> <TD BGCOLOR="#CCCCCC"> kolumna 2</TD> </TR> <TR> <TD>komórka 1</TD> <TD>komórka2</TD> </TR> </TABLE> |
Przykład 1:
|
||||||
<TD> | zawartość komórki w tabeli | <TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%"> <TR> <TD>kolumna 1</TD> <TD>kolumna 2</TD> </TR> </TABLE> |
|
||||||
<TITLE> | tytuł dokumentu | <TITLE>Tytuł dokumentu HTML</TITLE> | Ten tytuł wyświetla się na pasku tytułowym przeglądarki. | ||||||
<TR> | wiersz tabeli | <TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%"> <TR> <TD>kolumna 1</TD> <TD>kolumna 2</TD> </TR> </TABLE> |
|
||||||
<U> | podkreślenie | <U>Przykład</U> | Przykład | ||||||
<UL> | lista |
Lista nieuporządkowana <BR> Przykład 1:<BR> <BR> <UL> <LI>pozycja 1 <LI>pozycja 2 </UL> <BR> Przykład 2:<BR> <UL type="disc"> <LI>pozycja 1 <LI>pozycja 2 <UL type="circle"> <LI>pozycja 3 <LI>Lpozycja 4 </UL> </UL> |
Lista nieuporządkowana Przykład 1:
|