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

Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat $2,99$11,97 Selectează opțiunile
Criptomonede
Criptomonede

Odată cu popularitatea crescândă a pieței criptovalutelor, și numărul mare de criptomonede nereglementate (câteva sute), o atenție mai mare este acordată acum acestei activități de guverne și alte părți interesate din întreaga lume. De notat capitalizarea de piață totală a … Citeşte mai mult

Nu a fost votat $0,00 Selectează opțiunile
Căutarea, extragerea, organizarea și evaluarea informațiilor
Căutarea, extragerea, organizarea și evaluarea informațiilor

Informația, ca și concept, include o mare diversitate de sensuri în contexte diferite, de la cele zilnice până la cele tehnice. Conceptul de informație este strâns legat de noțiunile de restricție, comunicare, control, date, forme, educație, cunoaștere, înțelegere, stimul mental, … Citeşte mai mult

Nu a fost votat $3,99$9,61 Selectează opțiunile

Lasă un răspuns

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