246901-D761J_082.her

1. Ramy dokumentu

<html>

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Tu wpisz tytuł strony</title>   
    </head>
    <body>

                Tu wpisuje się treść strony

    </body>
</html>


2. Podstawowe znaczniki

<b>Ten tekst zostanie wytłuszczony.</b> Tutaj już nie ma pogrubienia

<i>Ten tekst zostanie pochylony.</i>

<u>Ten tekst zostanie podkreślony.</u>

<b><u><i>Ten tekst dostał wszystko.</i></u></b>


3. Podstawowe znaczniki cd.

To jest pierwsza linia <br> a to jest druga linia

Ten tekst jest dalej w drugiej linii.

Spacja

&nbsp;

Dwie spacje

&nbsp;&nbsp;

 


4. Akapit.

<p> To jest akapit</p>

<p align="left">A to akapit wyrównany do lewej strony                                                                                                                                                            </p>

<p align="right">                                                                                                                                                            A to akapit wyrównany do prawej strony</p>

sprawdź:

            center

            justify


5. Wszystko o czcionce.

<font color="red" size="5" face="arial"> ten tekst jest  czerwony ma rozmiar 5 i czcionkę arial</font>

<font color="#00FF00" size="5" face="arial"> ten tekst jest  zielony ma rozmiar 5 i czcionkę arial</font>

kolor można zapisać jako RGB

 

zadanie:

 


5. Tło.

może być kolorem:

<body bgcolor="red">

może być obrazkiem:

<body background="nazwa_obrazka.jpg">

 

Zadanie:

Ustawić takie tło:


6. Wstawianie obrazka.

<img src="nazwa_obrazka.jpg">

zmniejszenie rozmiaru obrazka do 1/4 rozmiaru pierwotnego

<img src="nazwa_obrazka.jpg" width=50%>

obrazek do prawej

<img src="nazwa_obrazka.jpg" align=right>


7. Odsyłacz.

<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>

odsyłacz do adresu internetowego:

<a href="http://www.wp.pl">to jest odsyłacz do wp</a>

odsyłacz do poczty:

<a href="mailto:moja_poczta@wp.pl">to jest odsyłacz naszej poczty</a>

odsyłacz do gg:

<a href="gg:123456">to jest odsyłacz do nr gg</a>

odsyłacz w całkiem nowym oknie:

<a href="http://www.wp.pl" target="_blank">to będzie w nowym oknie</a>

odsyłacz obrazkowy:

<a href="http://www.wp.pl"><img src="obrazek.jpg"></a>

 


7. Linie poziome.

<hr>

linia pozioma czerwona:

<hr color=red>

linia pozioma o dowolnym kształcie:

<hr color=green width="30%" size=10 align=right>


 

Zadanie:

 

 


8. Tytuły.

<h1> to jest wielki tytuł</h1>

 

Zadanie:

 


9. Tabelki.

<table>

    <tr>

         <td>A</td> <td>B</td>

    </tr>

    <tr>

         <td>C</td> <td>D</td>

    </tr>

</table>

A B
C D

ramka wokół tabelki

<table border=1>

tło ramki

<table bgcolor=red>

tło komórki

<td bgcolor=red>

szerokość i wysokość tabelki

<table width=500 height=200>

odległość między komórkami

<table cellspacing="1">

margines komórek

<table cellpadding="1">

zadanie:

Łączenie kolumn:

<table border="1" width="30%">
<tr>
     <td width="100%" colspan="2" align="center">A</td>
</tr>
<tr>
    <td width="50%" align="center">B</td>
    <td width="50%" align="center">C</td>
  </tr>
</table>

 

A

B C

Łączenie wierszy:

<table border="1" width="30%">
 <tr>
     <td width="50%" rowspan="2" align="center">A</td>
     <td width="50%" align="center">B</td>
 </tr>
 <tr>
    <td width="100%" align="center">C</td>
 </tr>
</table>

 

A B
C

zadanie:

 

 


 

10. Dymek narzędziowy
<Hn TITLE="Tu podaj opis">...</Hn>
 



11. BLOKADA PRZEŁAMANIA WIERSZA

<NOBR> Tutaj wpisz tekst</NOBR>
 


12. Wyróżnienie
Zwykłe

            (emfaza): <EM>...</EM>
Mocne

            (mocna emfaza): <STRONG>...</STRONG>
 


13. Index
górny

        <SUP>...</SUP>


dolny:

         <SUB>...</SUB>
 


14. Ramka z Legendą
<FIELDSET>
    <LEGEND>opis</LEGEND>
    Jakiś tekst
</FIELDSET>



15. Wypunktowanie
<UL type=rodzaj>
    <LI>Punkt pierwszy
    <LI>Punkt drugi
    <LI>Punkt trzeci
</UL>

gdzie jako "rodzaj" należy podać:
"disc" (domyślny) - koło,
"circle" - okrąg
"square" - wypełniony kwadrat.
 


16. Numerowanie
<OL TYPE="rodzaj numeracji">
    <LI>Punkt pierwszy
    <LI>Punkt drugi
    <LI>Punkt trzeci
</OL>

gdzie jako "rodzaj numeracji" należy podać:
"1" (domyślny) - numeracja według liczb arabskich,
"I" - według dużych liczb rzymskich,
"i" - według małych liczb rzymskich,
"a" - według małych liter
"A" - według dużych liter.
 

<OL START="n">
    <LI>Punkt pierwszy
    <LI>Punkt drugi
    <LI>Punkt trzeci
</OL>
Zmiana koloru <UL style="color: red">
 


17. Ramki

 

Szkielet strony z ramkami:

<FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
  <FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="spis.html">
  <FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="home.html">
  <NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>
</FRAMESET>

 

<frameset rows="80,*" border="0" frameborder="0" framespacing="0">
            <frame name="banner" noresize="noresize" scrolling="no" frameborder="0" src="banner.html" />
            <frameset cols="180,*" border="0" frameborder="0" framespacing="0">
                            <frame name="spis" noresize="noresize" frameborder="0" src="spis.html" />
                            <frame name="strona" noresize="noresize" frameborder="0" src="home.html" />
            </frameset>
            <noframes><body><a href="spis.html">Spis treści</a></body></noframes>
</frameset>
 

Przewijanie zawartości ramki:

<FRAME SCROLLING="typ">

gdzie jako "typ" należy podać:

a.       "yes" - umożliwia przewijanie zawartości ramki,

b.       "no" - ramka nie będzie przewijana

c.       lub "auto" - ramka będzie przewijana (pojawią się suwaki), gdy jej zawartość nie zmieści się w całości na ekranie (domyślnie).

 

Zabezpieczenie przed zmianą rozmiarów ramki:

<FRAME NORESIZE>

Taka ramka nie będzie skalowana, czyli nie będzie możliwa zmiana jej rozmiarów przez przeciągnięcie myszką.

 

Dodatkowe marginesy:

<FRAME MARGINWIDTH="x" MARGINHEIGHT="y">

gdzie "x" oznacza szerokość marginesu poziomego, a "y" oznacza wysokość marginesu pionowego (w pikselach).

 

 Schowanie obramowania dzielącego ramki:

<FRAME FRAMEBORDER="typ">

gdzie jako "typ" należy wpisać:

a.       "0" (lub "no") - schowanie obramowania,

b.       "1" (lub "yes") - pokazanie obramowania (domyślnie).

 


18. Style

a. style lokalne

<p style="color: red">To jest jakiś tekst</p>

 

 

 

<span style="color: red">
<b>To jest pogrubienie (element wyświetlany w linii) w ramach SPAN</b>,
a to jest zwykły tekst - również wewnątrz span.
</span>

 

b. wydzielone bloki

<div style="background-color: yellow">
<span style="color: red">
<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>,
a to jest zwykły tekst - również wewnątrz DIV i SPAN.
</span>
To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.
<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>

 

c. wewnętrzne arkusze stylów

<style type="text/css">
h6 { color: red }
</style>

 

d. zewnętrzny arkusz stylów

<head>
(...)
<link rel="Stylesheet" type="text/css" href="style.css" />
(...)
</head>

 

przykład 1

* SELEKTORY: */
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #003868;
background-color: #80B8E8;
margin: 6mm;
}

p
{
text-align: justify;
}

pre, code
{
font-size: 8pt;
}

 

przykład 2

FONT {
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

TD {
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}


P {
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

DIV {
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

INPUT {
BACKGROUND-COLOR: #333333;
COLOR: #CC0000;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

TEXTAREA {
BACKGROUND-COLOR: #333333;
COLOR: #CC0000;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

SELECT {
BACKGROUND-COLOR: #333333;
COLOR: #CC0000;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

FORM {
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
}

BODY {
BACKGROUND-IMAGE: url(bar.gif);
SCROLLBAR-FACE-COLOR:#600000;
SCROLLBAR-HIGHLIGHT-COLOR:#600000;
SCROLLBAR-3DLIGHT-COLOR:#CC0000;
SCROLLBAR-DARKSAHDOW-COLOR:#000000;
SCROLLBAR-SHADOW-COLOR:#CC0000;
SCROLLBAR-ARROW-COLOR:#FF0000;
SCROLLBAR-TRACK-COLOR:#000000;
}

A:link {
COLOR: 999999;
FONT-SIZE: 12px Verdana, Helvetica;
TEXT-DECORATION: navy;
}

A:active {
COLOR: C5C5C5;
FONT-SIZE: 12px Verdana, Helvetica;
TEXT-DECORATION: underline;
}

A:visited {
COLOR: 999999;
FONT-SIZE: 12px Verdana, Helvetica;
TEXT-DECORATION: underline;
}

A:hover {
COLOR: 00FF00;
FONT-SIZE: 12px Verdana, Helvetica;
TEXT-DECORATION: underline overline;
}
 

 

**********

a:link {cecha: wartość; cecha: wartość} - wygląd odsyłacza na stronie
a:visited {cecha: wartość; cecha: wartość} - wygląd odwiedzonego hiperłącza
a:hover {cecha: wartość; cecha: wartość} - link po najechaniu myszką
a:active {cecha: wartość; cecha: wartość} - link aktywny