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>
Name:
Email:
<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"> 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>


Wybierz opcje:

<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>
Wybierz opcje:
Option 1
Option 2
Option 3

Wybierz opcje:
Selection 1
Selection 2
Selection 3
<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:
  • pozycja 1
  • pozycja 2
  • pozycja 3


Przykład 2:

  1. pozycja 1
  2. pozycja 2
  3. pozycja 3
  4. pozycja 4
<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>
  • pozycja 1
  • pozycja 2
  • pozycja 3
<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">
<LI>pozycja  1
<LI>pozycja  2
<LI>pozycja  3
<LI>pozycja  4
</OL>



Lista uporządkowana, cyfry rzymskie

<OL type="I">
<LI>pozycja  1
<LI>pozycja  2
<LI>pozycja 3
<LI>pozycja  4
</OL>

Lista uporządkowana
  1. pozycja  1
  2. pozycja  2
  3. pozycja  3
  4. pozycja  4

 

Lista uporządkowana

  1. pozycja  1
  2. pozycja  2
  3. pozycja  3
  4. pozycja  4

 

Lista uporządkowana, cyfry rzymskie

  1. pozycja  1
  2. pozycja  2
  3. pozycja  3
  4. pozycja  4
<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>
Wybierz opcję:

<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:

To jest przykład
zastosowania znacznika
początku akapitu.

Przykład 2:

To jest przykład
zastosowania znacznika
początku akapitu.

Przykład 3:

To jest przykład
zastosowania znacznika
początku akapitu.

<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:

 

kolumna 1 kolumna 2

 



Przykład 2:

kolumna 1 kolumna 2
komórka 1 komórka 2
<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>

kolumna 1 kolumna 2

<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>

kolumna 1 kolumna 2

<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:

  • pozycja 1
  • pozycja 2


Przykład 2:

  • pozycja 1
  • pozycja 2
    • pozycja 3
    • pozycja 4