Home » Articole » Articole » Calculatoare » Dezvoltarea web » HTML » Pagini web: body, header, footer, div, span

Pagini web: body, header, footer, div, span

postat în: HTML 0

Corpul (Body)

Tot conținutul pe care dorim să îl avem pe ecran pentru pagini web ar trebui să fie cuprins de un set de etichete pentru corp (body). Secțiunile antet (header), conținut, subsol (footer) și div (o etichetă universală derivată din „diviziune”) sunt exemple de ceea ce putem pune în etichetele noastre body, pe care le vom vedea în următorul exemplu. Rețineți că utilizarea acestor etichete nu ne împiedică să vedem conținut care nu se află în corp. Etichetele sunt folosite pentru a ghida interpretul în modul de afișare a documentului.

Dacă nu se află în mod specific în etichetele <head>, browserele pot alege să afișeze orice conținut care nu este imbricat corespunzător în moduri diferite.

Antet (Header), Subsol (Footer)

Etichetele antet și subsol sunt noi în HTML5. Au fost adăugate datorită volumului de site-uri care definesc o secțiune de sus și de jos a paginilor lor. Permiterea acestor etichete să ușureze definirea și găsirea acelor părți ale aspectului. Antetul și subsolul ar trebui să fie imbricate în etichetele dvs. body, dar nu sunt o cerință. Pentru exemplul nostru, vom pune un titlu de ecran în antet și un drept de autor în subsol:

<body>
<header>
<h1>Aceasta este prima noastră
pagină!</h1>
</header>
Salut Lume
<footer>
&copy; 2022 Numele tău aici
</footer>
</body>

După salvarea fișierului și reîmprospătarea browserului, ar trebui să vedeți propoziția noastră în stânga sus, urmată de Salut Lume și apoi © 2022 Numele tău aici. Am făcut textul de titlu foarte mare, împachetându-l în etichete <h1>. H1 înseamnă titlul unu, cel mai mare titlu în mod prestabilit. De asemenea, putem folosi h2 până la h6 pentru a accesa stiluri suplimentare. La fel ca într-un document scris, folosim aceste titluri pentru a distinge diferitele părți ale textului nostru. Browserul dvs. aplică un stil prestabilit pentru ca h1 să arate așa cum arată pe ecran. Mai târziu, vom vedea cum să înlocuim acest stil prestabilit pentru a face ca titlurile noastre să arate așa cum ne dorim. Folosirea acestor titluri ne permite să identificăm rapid diferite porțiuni de conținut nu numai pentru cititor, ci și pentru motoarele de căutare, care de obicei consideră conținutul din aceste etichete ca indicatori ai despre ce este vorba despre site-ul dvs., reducând eforturile noastre SEO ulterior.

Div/Span

În timp ce <p> ne ajută să ne împărțim textul, avem nevoie și de un mecanism pentru a separa diferite părți de conținut, așa cum facem când folosim antetul și subsolul. Acest lucru ne va permite să definim mai mult decât un punct de sus, mijloc și jos pentru pagina noastră. Pentru a face acest lucru, putem include acele secțiuni în etichete <div>. Div înseamnă divide — definește o secțiune de conținut care ar trebui tratată ca separată de alt conținut. Span este foarte asemănător cu div, cu excepția faptului că ar trebui să identifice conținutul în linie, adică materialul care se află într-un bloc de text. În cele din urmă, un div va plasa o întrerupere de linie înainte și după etichetele sale, în timp ce un span nu va face asta. În afară de aceasta, aceste etichete sunt echivalente din punct de vedere funcțional. Deși aceste etichete par foarte simple acum, ele sunt foarte utile atunci când creați machete complexe și sunt etichetele pe care le vom folosi cel mai des.

Deși div și span sunt eficiente pentru stil, ar trebui să ne străduim să folosim cel mai bun set de etichete disponibile, astfel încât browserele, utilizatorii și roboții să poată înțelege site-ul nostru și aspectul acestuia, cum ar fi <header> și <footer> pe care le avem deja utilizate în codul nostru. Rețineți că nu toate acestea sunt acceptate în toate browserele. Dacă vă întrebați ce browsere vor funcționa cu ce etichete, puteți consulta caniuse.com pentru a vedea ce este disponibil.

Pentru a crea organizarea site-ului nostru, vom adăuga câteva secțiuni conceptuale în fișierul nostru. Veți observa că aspectul nu merge de fapt la stânga sau la dreapta pe măsură ce ne etichetăm div-urile (totul se va organiza de sus în jos). Acest lucru se datorează faptului că trebuie să adăugăm CSS pentru efectul complet. Vom prelua acest exemplu din nou mai târziu pentru a adăuga CSS-ul necesar pentru a crea aspectul dorim:

<body>
<header>
<h1>This is our first page! </h1>
</header>
<div id="left">
un meniu aici
</div>
<div id="content">
Salut Lume
</div>
<div id="right">
și ceva conținut la dreapta
</div>
<footer>
&copy; 2022 Numele tău aici
</footer>
</body>

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Articol publicat sub licență CC BY-NC-SA 3.0

Rețele de comunicații 5G
Rețele de comunicații 5G

Descoperă cum 5G transformă lumea și pregătește-te să fii parte din viitor.

Nu a fost votat 14.32 lei32.94 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Filosofia tehnologiei blockchain - Ontologii
Filosofia tehnologiei blockchain – Ontologii

O incursiune în ontologiile și implicațiile tehnologiei revoluționare blockchain.

Nu a fost votat 0.00 lei13.17 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Ghid pagini Facebook – Campanii de promovare pe Facebook
Ghid pagini Facebook – Campanii de promovare pe Facebook

Ghidul complet pentru succesul pe Facebook – Descoperă strategii eficiente de promovare!

Nu a fost votat 19.11 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *