Dupa cum am spus in lectia anterioara, in realizarea unei pagini HTML este foarte importanta structurarea informatiei, pentru ca tocmai acesta este rostul HTML-ului: transmiterea informatiei prin intermediul paginilor de internet.
Headings sau cum pui titlurile intr-o pagina HTML
Cand va ganditi la heading-uri cea mai buna solutie ar fi sa va ganditi la o carte.
Majoritatea cartilor sunt impartite in volume, capitole, titluri, subtitluri etc. La fel se intampla si cu informatia afisata intr-o pagina HTML. Textul care se regaseste intr-o pagina de site este de obicei impartit logic in capitole, titluri, subtitluri si asa mai departe, toate fiind notate cu asa-numitele heading-uri.
Este foarte important de retinut ca HTML, ca un limbaj de afisare a informatiei, trebuie sa fie mereu structurat logic, motoarele de cautare punand mare accent pe acest fapt.
De aceea, heading-urile participa si ele la aceasta structura.
Headingurile sunt elementele definite prin tag-urile: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
<h1> defineste cel mai important heading, in timp ce <h6> defineste cel mai putin important heading.
Spre exemplu, daca avem o carte care este impartita in volume, parti, capitole, titluri, subtitluri, o putem structura intr-o pagina html in felul urmator:
[javascript src=”https://snipt.net/embed/fc5846c10954c25de1e508152363af25/”]Nu am scris chiar toate titlurile pentru ca as imbatrani la acest post, dar presupun ca reusiti sa va faceti o idee despre structura headingurilor.
Paragrafele
Conform dexonline.ro, paragraful reprezinta o diviziune a unui text, mai mica decat capitolul, care incepe din alineat. As adauga eu, din amintirile din liceu, ca intr-un paragraf se scrie despre o idee. Adica nu faci paragrafe doar de dragul de a le face.
Intr-o pagina HTML, paragraful este continut intre elementele <p> si </p>.
Line BReak sau cum treci la o linie noua fara sa inchizi paragraful
Exista momente cand, fie din ratiuni de design, fie din alte ratiuni care mie mi-ar scapa in acest moment, sa ai nevoie ca in cadrul unui paragraf sa “rupi” informatia in mai multe parti. Aici intervine tag-ul <br />. Astfel, daca ai urmatoarea secventa de cod:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. Nulla porttitor, sem sed varius elementum, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
Dupa cum vei putea vedea, introducerea tag-ului <br /> duce la ruperea textului si trecerea la o noua linie.
*
Empty tags, tagurile goale
A se vedea aici si cum arata tag-ul:<em><strong><br /></strong></em>. Asemanator se intampla cu unele elemente care nu au nevoie de un tag de inchidere. Astfel, daca spre exemplu elementele heading si paragraf au nevoie si de tag de deschidere si de tag de inchidere (<em><strong><h1></strong>Heading 1<strong></h1></strong></em>, respectiv <em><strong><p></strong>Paragraf<strong></p></strong></em>), exista unele elemente in limbajul HTML care nu mai au nevoie de un tag de inchidere, acesta fiind superfluu (adica, de prisos…) si, pentru astfel de elemente, “><br />,<hr />,<img />; despre ele vom vorbi pe parcurs).
Ai putea intreba: “De ce sa fie de prisos inchiderea tag-ului?”. Gandeste-te chiar la acest <br />. De ce sa scrii ceva de genul “<br></br>” cand tu nu ai ce sa introduci intre cele doua tag-uri? Nu mai rapid scrii <br />?
Cum citezi corect pe cineva (adica nu cum citeaza Ponta…)
Ca in orice carte (orice carte care plagiaza corect…), exista si zone in care este citat cineva.
Nu as fi vrut sa stau acum sa mentionez ca atunci cand citezi pe cineva (o alta pagina de internet) este bine, mai ales pentru motoarele de cautare sa mentionezi in pagina si sursa citata (cu un link catre acea sursa), dar este important sa stii acest lucru pentru ca in caz contrar motorul de cautare va trage concluzia ca ai plagiat o pagina scrisa anterior…
Cand citezi pe cineva in cadrul unui paragraf, citarea se face in cadrul elementului <q></q>. Multe browsere, atunci cand vor intalni acest element, vor pune automat ghilimele care sa cuprinda textul din el. De aceea sa nu va mirati daca veti vedea textul cuprins de ghilimele cand voi stiati ca nu ati pus ghilimelele respective.
Daca vrei sa citezi un text mai mare (care sa contina mai multe paragrafe) atunci ar fi bine sa te folosesti de elementul <blockquote></blockquote>.
Sa recapitulam
Daca avem urmatorul cod:
[javascript src=”https://snipt.net/embed/2097e62bcad82cd3716687b486683eda/”]Acesta va duce la crearea unei pagini care va arata… de cele mai multe ori… asa:
In lectia urmatoare vom vorbi despre formatarea textelor…
