Programare web

Tutorial HTML:Partea a doua – Formatarea textului, linkuri si imagini

Acum că ne-am construit o fundație pe care putem ridica e timpul să trecem la a doua parte din seria tutorialelor HTML în care vom învăța despre formatare, linkuri și imagini.

Dacă ați citit tutorialul anterior ați văzut că am creat primul website în HTML, constând în câteva titluri și un paragraf. Este timpul să îl facem mai interactiv căci în ziua de astăzi nu există website care să nu conțină măcar un link sau vreo imagine. Dar înainte de a ajunge la acest capitol trebuie să discutăm despre formatarea textului.

 

Importanța formatării textului în tipografia web

Adesea când suntem în situația conceperii unui design suntem copleșiți de multitudinea de elemente grafice într-un website. Personal, nefiind un webdesigner, nu cunosc trucuri și nu am format simțul estetic pentru a face design-uri grozave. Tocmai de aceea, pun mare preț pe formatarea textului și elementele de tipografie – să poată citi lumea relaxată conținutul, iar eu voi fi mulțumit. Încerc pe cât posibil să evit repetiții în layout și să deteriorez lizibilitatea – de ex. paragrafele foarte lungi, line-height foarte mic, font-size mic ș.a.

<html>
<body>
<p>
Acest paragraf este ingrosat!</b><br/>
<i>Acest paragraf este inclinat!</i><br/>
<big>Acest text este mare!</big><br/>
<small>Acest text este mic!</small><br/>
<code>acest text are aspectul codului de computer!</code><br/>
Acest text este<sub> subscript</sub> si <sup>superscript</sup>!
</p>
</body>
</html>

Mai sus este un exemplu ce conține cele mai importante taguri de formatare. Tagul <br/> are aceeași trăsătură ca cel <hr/>. Cu ajutorul lui propoziția următoare merge pe un nou rând.

Rezultatul:

Tag-urile de mai sus sunt cele mai comune…de ele vă veți izbi cel mai des. Și acum, câteva tag-uri mai specializate.

  • <cite> – pentru a face referință spre alte informații, cu autor cunoscut de obicei sau unamim cunoscute – cărți, esee, lucrări, un album, un film, o sculptură…v-ați prins cam despre ce e vorba
  • <data>  – pentru a crea legături între conținut și translatarea acestuia în cod mașină

Un ex. pentru <data> luat de pe developers.mozilla.org :

<p>New Products</p>
<ul>
 <li><data value="3967381398">Mini Ketchup</data></li>
 <li><data value="3967381399">Jumbo Ketchup</data></li>
 <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
</ul>
  • <dfn> – pentru a defini un termen
  • <time> – pentru a pune în evidență că acel conținut conține o dată

 

Linkurile și imaginile

Voi incepe cu linkurile care, figurativ spus, sunt mijloacele de transport pe internet. Fie că vrei să mergi de pe o pagină pe alta, fie că vrei să mergi pe un website, trebuie să utilizezi un link. De exemplu, ca să ajungi pe pagina principală a acestui site trebuie să urmezi calea la url-ul https://www.code-it.ro . În HTML lucrurile sunt la fel de simple, așa că, utilizând un simplu tag poți merge de pe o pagină pe alta.

Ca și idee, un URL (Uniform Resource Locator) prezintă un protocol(http, ftp etc.) și este adresa spre locația unde o anumită resursă se află pe Internet. Un hyperlink este ce puteți vedea în exemplul de mai jos, deci tag-ul HTML plus referinta URL. Totuși, un URL poate lua o mulțime de forme, iar în HTML path-ul conținut de <a> poate fi relativ sau absolut(caz în care punem adresa completă).

Printre multitudinea de factori ce determină poziția unei pagini în cautări se află referințele externe spre acea pagină.

De asemenea un link nu se rezumă numai la un mic text pe care când dai clic te duce pe altă pagină. Vom vedea în exemplele următoare că imaginile pot fi la fel de ușor transformate în linkuri.

 

Linkurile

<html>
<body>
<a href=”https://www.code-it.ro/”>Viziteaza Code-IT.ro</a>
</body>
</html>

Rezultatul va fi Viziteaza  Code-IT.ro

Tagul a poate fi utilizat în două moduri:

  • pentru a crea un link către un alt document utilizând atributul href (care, dacă nu mă înșel, înseamnă hyperlink reference)
  • pentru a crea un link către o anumită porțiune din același document. De când există HTML5, atributul name a ieșit din uz fiind înlocuit cu id. Un exemplu simplu:
<!-- creeaza un tooltip pentru sectiunea tips a site-ului -->
<a name="tips">My awesome tip</a> 

<!--creaza un link pentru sectiunea cu acel id sau nume in acelasi document -->
<a href="#tips">Trucuri</a>

Atributul target este din nou important fiindcă ne permite să deschidem un link într-un nou tab al browserului. Dacă nu îl utilizam linkul se va deschide în același tab ( de cele mai multe ori fiindcă depinde și de browser) .

<html>
<body>
<!-- Linkul se va deschide intr-un nou tab -->
<a href=”https://www.code-it.ro/” target=”_blank”>Viziteaza MarianPc.eu</a>
</body>
</html>

Ca notă adițională…e important de reținut să adaugi un trailing-slash ( /  – nu stiu cum i se zice în română), când ai un link către un subfolder. Dacă nu ai, serverul va adauga acel trailing slash și apoi va deschide respectivul subfolder. Mai pe scurt, face doua cereri in loc de una.

 

Imaginile

Ce-ar fi web-ul fara imagini? Mai nimic, căci știm, în unele cazuri o imagine face cât o mie de cuvinte (… adânc … ). Utilizarea ei în HTML este foarte ușoară. Ne trebuie doar path-ul imaginii. Să zicem că am un folder numit websites în care am un index.html și în acest folder un altul care se numește images în care am o imagine website.jpg. Schema de jos poate mai simplifică lucrurile.

  • Websites
    • index.html
    • images
      • website.jpg
  • test
    • natura.jpg

Pentru a adăuga imaginea în fila HTML trebuie să facem astfel:

<html>
<body>
<img src=”images/website.jpg” alt=”Cel mai frumos website”/>
</body>
</html>

Primul atribut specifică sursa imaginii, iar al doilea este de mare ajutor când este vreo problemă cu imaginea. Dacă vizitatorul nu o va vedea măcar va vedea ceva text. Observați că nu am spus websites/images/website.jpg fiindcă index.html e părinte folderului images, care la rândul său e părinte imaginii. Nu există niciun folder websites căruia indexul să-i fie părinte deci în cazul acesta imaginea nu ar fi apărut.

Dar să presupunem că am mai avea vreun folder, ce se numește test(vezi schema de mai sus), iar în acest folder o imagine cu numele natura.jpg. Folderul test nu s-ar afla în websites ci ar fi chiar lângă el. Cum am putea atunci să arătăm imaginea din fișierul index.html ce se află în website. Fișierul index.html clar nu e părinte folderului, de fapt, nici măcar folderul test nu este părinte indexului.

<html>
<body>
<!-- ../ se utilizeaza pentru a iesi in directorul anterior, iar apoi intram
de acolo in folderul test si apoi in imagine -->
<img src=”../test/natura.jpg” alt=”Peisaj montan”/>
</body>
</html>

Atât în acest tutorial, în tutorialul următor vom vorbi despre stiluri, precursoarele atributelor CSS.

Write A Comment