tag-uri

Modul in care se formateaza textul in html. Mai intai ne asiguram ca vom introduce codul html intre tagurile <html> respectiv <body>

Tag-urile paragraf, bold si italic

<html>

<body>

<p>paragraf simplu</p>

<b>text bold </b>

<strong> text bold </strong>

<i>text italic </i>

<em> text italic <em>

</body>

</html>

Efectul in pagina este urmatorul:

paragraf simplu

text bold 
 text bold (sau strong)
text italic 
 text italic (sau em) 

Tag-ul paragraf lasa un spatiu (enter) dupa el. Daca se doreste un text fara nici o formatare , avem tag-ul <span> text de afisat </span>

 

Tag-ul pre

De aici incolo nu vor mai aparea tagurile <html> si <body> dar sa nu le uitati daca incercati intr-un editor

Tag-ul <pre> pastreaza alinierea si sfarsiturile de linie (enter-urile) util cand nu mai doriti sa mai formatati suplimentar textul

<pre>
text    preformatat
care    pastreaza
   alinierea    data    de    autor
</pre>

Pentru inserarea tag-urilor html este util si tag-ul <xmp> </xmp>

http://www.htmlcodetutorial.com/_XMP.html

Tag-ul a – link

 

Tag-ul imagine img

<img src="im.jpg">

afiseaza in browser o imagine, atributul src specificand calea pana la imagine la fel ca si in cazul tagului link <a href=”…

Imaginea im.jpg e bine sa fie in acelasi folder ca si fisierul html care o va contine.

Se poate folosi atributul alt=”un text” pentru a afisa o informatie “un text” atunci cand mouse-ul este deasupra imaginii

<img src="im.jpg" alt="o poza">

atunci cand mouse-ul este deasupra imaginii, langa cursor va aparea textul “o poza”

Putem avea  combinatii intre imagini si link-uri

<a href="http://www.google.com" alt="clic daca vrei sa cauti ceva"><img src="gog.jpg"></a>

astfel imaginea gog.jpg devine un link.

Observati ca de data aceasta tag-ul <img> nu se mai inchide, adica nu avem <img> </img> dar putem avea <img src=”im.jpg”/>.  Sunt cateva tag-uri  care nu se inchid in mod obisnuit, cu un tag de inchidere,  ci precum<br/> sau <hr/> (enter, linie orizontala) se inchid in acelasi tag.  Este optional oricum, fiind un standard introdus mai recent prin XHTML.

 

Observatie resurse

Observatie:
Este bine ca pagina in care lucram si in care editam link-ul sa fie salvata in acelasi folder cu pagina html pe care dorim sa o legam la link. Asta pana apar foarte multe fisiere si atunci avem nevoie sa le grupam pe foldereDorim ca in fisierul index.htm sa introducem un link catre fisierul pagina1.htm
Sa analizam urmatoarele doua situatii:
In folderul Lucru se afla folderele Resurse si Fisiere.
Lucru
– Resurse
– Fisiere1. Fisiereul index.htm se afla in Lucru iar fisierul pagina1.htm se afla in Lucru/Resurse atunci link-ul din index.htm catre pagina1.htm va fi:

<a href="Resurse/pagina1.htm">despre noi</a>

iar un link de la pagina1.htm la index va fi:

<a href="../index.htm">inapoi acasa </a>

observati cele 2 puncte.. insemnand coborarea unui nivel in foldere (ca in TotalCommander sau comanda dos dir), de la nivel Lucru/Resurse la nivel Lucru acolo unde il gaseste pe index.htm.
Cazul se poate generaliza pentru oricate foldere si fisiere

2. Cazul in care ambele fisiere index.htm si pagina1.htm se afla in folderele Fisiere respectiv Resurse, cu alte cuvinte in foldere diferite dar pe acelasi nivel in arborele de foldere.
pentru link-ul din index.htm catre pagina1.htm avem:

<a href="../Resurse/pagina1.htm">despre noi</a>

pentru link-ul din pagina1.htm catre index.htm avem:

<a href="../Fisiere/index.htm"> inapoi acasa</a>

Deci se observa ca se urmareste ajungerea in nodul folder de pornire comun (in cazul nostru Lucru) si apoi se merge pe cale pana se gaseste fisierul dorit.

Acelasi lucru se aplica pentru accesarea oricaror resurse, imagini, stiluri, media

Ex.

<img src="../Fisiere/flower.jpg">

este un tag imagine din fisierul index.htm aflat in Fisiere care isi ia sursa(fisierul imagine flower.jpg) din folderul frate aflat pe acelasi nivel, Resurse.