Am creat această pagină (acest fişier) cu copy-paste aplicat unei pagini care a fost creată cu Far Manager.
Apoi am deschis această pagină şi am scris-o în Open Office.
Am salvat această pagină ca document HTML peste fişierul creat mai sus.

Paginile care se deschid cu link-uri mai jos şi care arată ce se execută pentru o secvenţă HTML au fost create cu copy-paste aplicat unei pagini care a fost creată cu Far Manager şi apoi au fost editate cu NotePad++


EXEMPLUL 1

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<html>
<head>
    (titlu, alte informatii....)  
</head>
<body>
    (Continutul paginii - text, imagini)   Acesta este un <b>exemplu</b>.
</body>
</html>
PAGINA REZULTAT



EXEMPLUL 2

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
<p>Aceasta este prima mea pagina de web !</p>
</body>
</html>

PAGINA REZULTAT






EXEMPLUL 3

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>

PAGINA REZULTAT





EXEMPLUL 4

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<body bgcolor="#000000" text="#FFFFFF">
A
<body>

PAGINA REZULTAT





EXEMPLUL 5

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<body bgcolor="#000000" text="#FFFFFF">
A
</body>
<p>
<body bgcolor="#FFFFFF" text="#000000">
B
</body></p>

PAGINA REZULTAT


După cum se observă din exemplul 4 şi exemplul 5, culoarea fondului şi culoarea literelor textului se pot defini, pe o pagină, NUMAI o singură dată, la început.
Orice modificare ulterioară este ignorată.







EXEMPLUL 6

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<html>
<head>
<title>Pagina mea !</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
</body>
</html>

PAGINA REZULTAT






EXEMPLUL 7

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<img src="abstract 004.jpg" width="400" height="400">

PAGINA REZULTAT


OBS: 

1. am scris aceeasi linie de program dar fara atributele width si height. 
Am obtinut acelasi reyultat. Probabil ca, daca nu scriu cele doua atribute, imi afiseaya la dimensiunea data a imaginii

1. am scris aceeasi linie de program dar cu alte valori pentru atributele width si height (500 si 300). 
Am obtinut o imagine deformata (mai mica pe inaltime). Deci, in cazul in care imaginea este mai mare decat dimensiunea declarata in site, se afiseaya o imagine distorsionata )cu dimensiunea mai mare redusa prin compresie la dimensiunea din site. 





EXEMPLUL 8

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<font size="3" face="Times, Palatino, serif" 
        color="#FF0000">Exemplul 1</font>

<font size="2" face="Arial, Helvetica, nonserif" 
        color="#008000">Exemplul 2</font>

<font size="5" face="Verdana, Arial, Courier, Times" 
        color="#FF8000">Exemplul 3</font>


<p><H1>
<font face="Arial, Helvetica, nonserif" 
        color="#008000">Exemplul 2</font></H1>
</p>

<p><font size="7">B</font>ine ati venit pe site-ul nostru! </p>



PAGINA REZULTAT




EXEMPLUL 9 – listă neordonată

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<ul>
<li> Merele sunt verzi  </li>
<li> Bananele sunt galbene  </li>
<li> Portocalele sunt portocalii  </li>
</ul>

PAGINA REZULTAT


EXEMPLUL 10 – listă ordonată

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<ol>
<li> Aprindeti pocnitoarea.</li>
<li> Aruncati-o.</li>
</ol>

PAGINA REZULTAT




EXEMPLUL 11 – listă de definiţii

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<dl>
<dt><strong>Paris, Franta</strong></dt>
<dd> Capitala Frantei. Printre atractii se numara 
          turnul Eiffel si catedrala Notre Dame.  </dd>
<dt><strong>Sydney, Australia</strong></dt>
<dd> Capitala statului New South Wales, Australia. 
          Atractii: Opera si podul Harbour.  </dd>
<dt><strong>Londra, Anglia</strong></dt>
<dd> Capitala Angliei. Obiective turistice: Tower Bridge 
          si Big Ben. </dd>
</dl>

PAGINA REZULTAT






EXEMPLUL 12 – listă imbricată

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<ol>
  <li>Capitolul 1
    <ol>
      <li> Sectiunea 1.1</li>
      <li> Sectiunea 1.2</li>
    </ol>
  </li>
  <li>Capitolul 2
    <ol>
      <li> Sectiunea 2.1</li>
      <li> Sectiunea 2.2</li>
      <li> Sectiunea 2.3</li>
    </ol>
  </li>
</ol>

PAGINA REZULTAT




EXEMPLUL 13 – maparea imaginilor – de fapt pe figura incadrata in chenar desenez (dar in rularea programului – aici – nu se văd – 3 figuri geometrice (cerc, dreptunghi si triunghi) pe care, cand am cursorul deasupra lor se deschide o fereastra de comentariu in care se afisează un text.

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

<img src="abstract 004.jpg" width="298"
height="225" border="2" usemap="#forme">



<map name="forme">
  <area shape="circle"
    coords="187,114,50"
	href="javascript:clicked_on('Cerc');"
    title="hai prietene ca am desenat un Cerc">
  <area shape="rect"
    coords="30,22,121,100"
    href="javascript:clicked_on('Dreptunghi');"
    title="Dreptunghi">
  <area    shape="polygon"
    coords="83,125,132,201,31,201"
    href="javascript:clicked_on('Triunghi');"
    title="Triunghi">
<area    shape="default"
    nohref>
</map>

PAGINA REZULTAT


MAI MULTE DESPRE MAPAREA IMAGINILOR AICI


EXEMPLUL 14 – 

Iată ce se întâmplă dacă scriem secvenţa de mai jos într-o pagină

Adresa de email: <input type="text" name="adresa_email"
value="" size="30" maxlength="50">
Adresa de email:

PAGINA REZULTAT

OBSERVATIE pt exemplul de mai sus:

<input type="text" name="xxxx" value="xxxx"
size="xxxx" maxlength="xxxx">

Atributul name este numele elementului, de exemplu email sau varsta.
Atributul value iti permite sa folosesti o valoare predefinita care va aparea in cadru, utilizatorul putand schimba aceasta valoare daca doreste. Acest atribut este optional, nu este obligatoriu sa introduci o valoare (value=""), sau il poti omite complet.

Atributul size specifica latimea campului (numarul de caractere). Daca nu completezi aceasta valoare, browser-ul va folosi dimensiunea standard pentru acest camp.

In sfarsit, atributul maxlength limiteaza numarul de caractere pe care utilizatorul le poate introduce. Daca nu specifici aceasta valoare, utilizatorul poate introduce oricate caractere doreste.