TD1 Partea 1 - HTML - un limbaj de markup pentru structurarea Doctype și a primelor documente de markup

Scopul acestui tutorial este de a înțelege modul în care sunt scrise paginile web de bază, numite și pagini statice (Web 1.0). O astfel de pagină web conține două părți:

HTML: Fișierul HTML conține structura paginii și conținutul acesteia; pe lângă textul simplu, dă sens textului indicând ceea ce se încadrează într-un paragraf, un titlu etc., folosind etichete (exemplu

CSS: Fișierul CSS este responsabil pentru aspectul acestor elemente (puneți acest paragraf în roz, utilizați fontul „Sans Serif” pentru acest titlu, ...)

Browserul (Firefox, Chrome, Safari, IE/Edge, ...) este software-ul care ne permite să vizualizăm paginile web. Scopul acestui tutorial este de a demitiza modul în care aceste două tipuri de fișiere sunt interpretate de browser. Pentru aceasta, vom crea un site a cărui redare corespunde fișierului target.png, începând de la fișierul index.txt, care conține conținutul aproape „brut” al site-ului care urmează să fie produs.

Mai întâi ne vom dedica specificării structurii (deci HTML) pe care o putem adăuga la conținutul nostru brut. Vom vedea apoi în a doua parte a tutorialului cum se realizează redarea propusă de target.png prin crearea unui fișier CSS.

Transformarea unui document text într-un document HTML

Rolul navigatorului

După cum sa spus anterior, rolul browserului (Firefox, Chrome, Safari, IE/Edge, ...) este de a vizualiza paginile web. Deci, browserul transformă un fișier text care conține HTML/CSS într-un afișaj de aspect, cu imagini ...

1. Pagina TD este o pagină web. Deschideți sursele acestei pagini pentru a vedea codul HTML care este utilizat pentru afișarea acestei pagini (faceți clic dreapta apoi cod sursă sau Ctrl + U).

Pentru a crea o pagină web, creați doar un fișier text și dați-i extensia .html, astfel încât browserul să înțeleagă că ar trebui să-l interpreteze ca un document HTML.

Salvați fișierul index.txt local în folderul HTMLCSS/TD1/.
Faceți o copie index.html a index.txt în același folder.

Deschideți atât fișierele index.txt, cât și index.html în browser.
Ce diferențe de afișare vedeți? De ce ?
Cum sunt afișate întreruperile de linie într-un document HTML ?
Cum este afișat un text HTML înconjurat de și -> ?

Standardul limbajului HTML

Documentul nostru index.html este interpretat ca un document HTML de către browser.

HTML, care înseamnă HyperText Markup Language, este, prin urmare, un limbaj de markup care conține așa-numitele linkuri hipertext către alte documente.

HTML este un standard, adică un limbaj complet descris (nu ezitați să aruncați o privire rapidă asupra specificațiilor sale, un document foarte tehnic, dar cuprinzător).

Să testăm conformitatea index.html la standardul HTML5 folosind validatorul https://html5.validator.nu/. Ce erori sunt indicate ?

Să începem cu greșeala

Validatorul ne spune că se așteaptă să vadă la începutul documentului nostru. Această etichetă este utilizată pentru a declara că documentul este scris în HTML5. Într-adevăr, există mai multe standarde „HTML”: HTML4, XHTML, HTML5, ... Astăzi, oamenii folosesc în principal HTML5 și vom proceda la fel.

Pentru ca documentul să fie valid și recunoscut ca document HTML 5, adăuga eticheta chiar la începutul fișierului.
Reîncercați conformitatea documentului dvs.

Ne spune validatorul Codificarea caracterelor nu a fost declarată.

Codificarea indică modul în care este salvat fișierul (UTF-8, ANSI, iso-8859-15, ...). Dacă majoritatea personajelor sunt înregistrate într-un mod standard, caracterele speciale (accente, œ, ...) pot fi înregistrate într-un mod foarte diferit.

Prin urmare, este necesară specificarea codificării caracterelor pentru ca caracterele speciale de pe pagina dvs. să fie afișate corect. Vom folosi întotdeauna codificarea UTF-8 (și în mod ideal toată lumea ar trebui să o folosească și pe aceasta).

Adăuga deci următoarea linie care declară codificarea în antetul documentului imediat după DOCTYPE.

Deschideți index.html în browser și verificați dacă sunt afișate toate accentele.

Notă: Dacă accentele încă nu funcționează, este pentru cănu e destul să spui că fișierul tău este în UTF-8. Fișierul dvs. trebuie să fie, de asemenea bine înregistrat în UTF-8. De exemplu, în Notepad ++, codificarea este marcată în partea dreaptă jos. Puteți converti fișierul în UTF-8 căutând în meniuri.

Reîncercați conformitatea documentului dvs.

Ultima eroare ne spune despre un element de cap căruia îi lipsește un titlu. Corectați-vă pagina web inserând un titlu după. Ați găsit ce se schimbă pe ecran ?

În acest moment, validatorul indică faptul că fișierul index.html este un document HTML5 valid.

Structura obișnuită a unui document HTML

Etichete HTML

Am văzut în exercițiul precedent primele noastre etichete și. Etichetele sunt folosite pentru a structura documentul. Adnotează textul pe care îl conțin și, prin urmare, adaugă sens. Există două tipuri de etichete:

Cele mai multe etichete cuprinde conținut: încep cu o etichetă de deschidere, apoi conținutul pe care dorim să-l „adnotăm” și se termină cu o etichetă de închidere .
De exemplu, eticheta este utilizată pentru a spune că textul pe care îl cuprinde va fi titlul documentului.

Anumite etichete nu acceptați conținut: ele constau doar dintr-o etichetă de deschidere. Ele sunt, de asemenea, numite etichete cu închidere automată. De exemplu, am văzut farul și vom vedea în curând,
...

Alte exemple:

Structura de bază

Deci, să folosim etichete pentru a crea o bună structură de document HTML de bază:

După linia de declarație lingvistică, documentul este inclus în etichetă și este alcătuit din două părți:

• antetul conține informații despre documentul HTML, cum ar fi
  • una (etichetă obligatorie)
  • una pentru a defini codarea
• corpul conține conținutul real. Vom vedea exemple de etichete în secțiunea Etichete comune.

Un document HTML este ca un copac

Etichetele HTML oferă o structură de copac documentului. În exemplul nostru index.html

arborele este după cum urmează:

• este elementul rădăcină
• și sunt cei doi fii ai elementului
• și sunt doi fii ai elementului
• „Site-ul neoficial al lui Chuck Norris” este fiul elementului .

1. Actualizați pagina index.html astfel încât să respecte structura HTML de mai sus.
   (Trebuie să adăugați etichete și)
2. Reîncercați conformitatea documentului dvs.

Instrumente de dezvoltare web

În restul tutorialului, vom folosi browserul nostru pentru a „inspecta” pagina noastră web. Pentru aceasta vă recomandăm Chrome sau Firefox. Apăsați tasta F12. Instrumentele de dezvoltare au două părți distincte, una dedicată HTML și cealaltă ... CSS. Aceste instrumente sunt excelente pentru a învăța cum să construiți o pagină web.

Există trei moduri de a vă concentra pe un anumit element:

• Un clic dreapta cu mouse-ul în pagina afișată, urmat de un „Inspect/Examine the element”, permite vizualizarea codului HTML corespunzător în instrumentul de dezvoltare.
• Un clic pe instrumentul de dezvoltare vă permite să inspectați o zonă de interes din pagină (prin deplasarea mouse-ului).
• Când plasați mouse-ul peste un element din instrumentul de dezvoltare, acesta îl colorează în pagină.

Familiarizați-vă cu aceste trei tehnici inspectând pagina TD.
De exemplu, faceți clic dreapta pe elementul „există trei moduri ...”, apoi „inspectați elementul”. Instrumentul de dezvoltare trebuie să vă prezinte codul HTML și să vă poziționeze direct

Etichete HTML obișnuite

Comentarii în HTML

Este posibil să adăugați comentarii în HTML. Aceste comentarii nu sunt interpretate de browser și, prin urmare, nu sunt afișate (dar rămân prezente în codul sursă). Prin urmare, acestea sunt informații lăsate de dezvoltatori pentru dezvoltatori. Acestea sunt plasate între etichete și ->:

Există doar comentarii în fișierul index.html, ca atâtea instrucțiuni pentru a le înlocui cu HTML. Le vom explica în următoarele secțiuni.

Titluri de valoare

Vom începe prin a adăuga structură la pagina noastră. Pentru a face acest lucru vom folosi etichetele de conținut

pentru a identifica diferitele secțiuni:

este folosit pentru titlurile documentelor

este utilizat pentru secțiunile de documente

este utilizat pentru subsecțiuni de documente și așa mai departe.

De exemplu, titlul de mai sus este obținut cu următorul cod:

1. Verificați dacă titlul Titluri de valoare chiar deasupra este într-adevăr un

folosind instrumente de dezvoltare făcând clic dreapta pe el. Adăugați eticheta

la elementele index.html marcate cu comentarii: . Adăugați eticheta

la elementele index.html marcate cu comentarii: .

Reîncercați conformitatea documentului dvs.

Elemente de grupare

Paragrafele

Acum utilizați etichetele

în jurul paragrafelor documentului. Paragrafele vă sunt servite de și .

Notă: Dacă faceți clic dreapta urmat de „inspect element” pe acest paragraf, veți vedea că acest text se află într-un paragraf.

Liste

În HTML putem face liste ordonate (numerotate) sau neordonate:

Ceea ce dă atunci când este interpretat de motorul de redare a browserului:

• primul articol neordonat
• al doilea element

1. primul articol comandat
2. al doilea element

1. Folosiți etichete
   și
   • pentru a structura lista cu marcatori în index.html .
     (Nu vă faceți griji cu privire la comentarii încă)
   • Folosiți etichete
     și
     1. pentru a structura lista numerotată în index.html .
     2. Reîncercați conformitatea documentului dvs. (De fapt, ar trebui să-l testați regulat pe cont propriu, dar vă ținem de mână pentru acest prim tutorial)

     Imagine: un exemplu de element încorporat

     Pentru a insera o imagine, puteți utiliza eticheta

     Această etichetă nu are o etichetă de închidere, deoarece nu poate avea conținut (consultați începutul tutorialului). Observăm că are două câmpuri src și alt pe care le numim atribute a etichetei. Atributele sunt găsite mereu în eticheta de deschidere.

     Anterior, mai văzusem o altă etichetă cu un atribut: ce era această etichetă? `cu atributul„ charset ”. ->

     Atributul src trebuie să conțină adresa imaginii. Atributul alt vă permite să adăugați text alternativ pentru browserele care nu le pot afișa (browser bazat pe text Lynx) sau pentru persoanele care nu le pot distinge bine (deficiențe de vedere ușoare sau nevăzătoare). Avertizare, atributul alt este obligatoriu.

     Salvați imaginea chuck-jeune.jpg într-un director de imagini în raport cu fișierul index.html .

     Înlocuiți comentariul cu eticheta care va afișa imaginea anterioară.

     Notă: Puteți utiliza adresa ./images/chuck-jeune.jpg. Aceasta este o adresă relativă: perioada înseamnă „dosarul paginii web curente”. Deci vom merge și vom găsi imaginea în folderul imagini din directorul care conține pagina web index.html .

     Faceți același lucru cu imaginea beware.jpg pentru a o poziționa în locul comentariului .

     Ghici ce ? Este necesar reîncercați conformitatea documentului dvs.

     Elemente semantice

     linkuri externe

     Poate că unul dintre cele mai iconice elemente ale HTML este eticheta. Vă permite să creați legături hipertext (HT în HTML).

     Un link constă în principal dintr-o adresă URL țintă și o etichetă (text pe care se poate face clic adesea subliniat cu albastru):

     Puteți introduce adresa URL completă a țintei (adresa URL în calea absolută), de exemplu:

     sau dați o adresă relativă la pagina curentă (URL în calea relativă), de exemplu:

     Legături interne

     La aceste linkuri externe putem adăuga o parte de legătură internă bazată pe #monancre ancore. Toate etichetele pot lua un atribut id ca în exemplul următor. Avertizare, valoarea acestui atribut trebuie să fie unic în document.

     Apoi putem crea un link către această etichetă adăugând #un_identifier la sfârșitul adresei URL. De exemplu, aici este un link către eticheta de identificare un_identifier internă a paginii web actuale index.html:

     Puteți scurta adresa URL după cum urmează. Dacă nu indicăm documentul, înseamnă că indicăm documentul curent în mod implicit.

     1. Înlocuiți comentariul din index.html cu o etichetă care va indica una dintre primele etichete. Prin urmare, va trebui să adăugați un identificator la această etichetă țintă.
     2. Testați-vă linkurile făcând clic pe ele. Ei trebuie să vă ducă la etichetă cu identificatorul corespunzător.
     3. Test conformitate ...

     Accent

     Eticheta este utilizată pentru a evidenția pasaje importante dintr-un text.

     Tocmai, trebuie să evidențiem faptul că Chuck Norris este foarte puternic în diferite arte marțiale. Pentru a face acest lucru, trebuie să puneți accentul pe propoziția care urmează comentariului: în fișierul index.html .

     Notă: Există un alt tip de accent care se obține cu eticheta .

     Citat

     Iată un exemplu minunat de citat:

     Un cookie nu are „spirit”, este doar un cookie. Dar înainte era lapte, ouă. Și în ouă există o viață potențială.
     Jean Claude Van Damme

     Citatele sunt folosite pentru a identifica un text scurt asupra căruia doriți să atrageți atenția. Acest lucru este folosit în special pentru a arăta că avem „spirit”.

     Consultați codul sursă pentru oferta noastră utilizând Instrumentele pentru dezvoltatori. Care sunt cele două știri etichete utilizate? "și" ->

     Prima etichetă (care începe cu un b) înconjoară citarea completă, în timp ce a doua (care începe cu un c) conține doar referința (autorul, cartea, ...).

     Utilizați aceste două etichete pentru a evidenția citatul chiar la începutul documentului (căutare).

     Ați verificat de-a lungul tutorialului că pagina dvs. HTML rămâne valabilă ?

     Am terminat cu conținutul și structura site-ului nostru. Știm cum să adăugăm structură unei pagini HTML cu etichete specifice.

     În partea 2 a acestui tutorial, vom vedea cum să îmbunătățim aspectul site-ului.

     Romain Lebreton, Nassim Belmecheri, Claire Cariou, Fabien Laguillaumie și Joris Tremoulet 2020, licențiat sub CC-BY-SA 4.0.

     Cod sursă disponibil pe GitHub, site static generat cu Jekyll și găzduit cu amabilitate de GitHub. Structura site-ului web de Luca De Feo

     • Valoarea energetică a hranei pentru cai CFU, calorii și Jouli (partea 1) - Tehnici de
     • Valoarea energetică a hranei pentru cai CFU, calorii și Jouli (partea 2) - Tehnici de
     • Kefir din lapte (origine caucaziană) Originea cuvântului „kéfir” provine din cuvântul turcesc „keif”, al cărui sens este. „Sentiment de bine după ce l-ai băut”. Originar din Caucaz, consumul de chefir, un lapte fermentat de mare valoare nutritivă și igienică, este foarte popular în U.R.S.S. și există de câteva secole. Pregătirea chefirului va rămâne un secret mult timp; deoarece musulmanii din Caucaz credeau că chefirul sau „boabele profetului Mahomed” sau „șampania laptelui” și-au pierdut eficacitatea dacă oamenii din celelalte religii îl foloseau. Abia în secolul al XIX-lea, după aproape 5 secole de neglijare în țările estice, omul refolosește chefirul pentru proprietățile sale terapeutice împotriva tuberculozei. Chiar și astăzi, există mai mulți centenari din Caucaz, secretul lor: un aliment făcut din produse lactate, inclusiv chefir, legume crude, fructe și miere, la care se adaugă aer pur și un ritm de viață. „Gerontologii par acum convinși că laptele, brânza și kefirul (caș acru) ajută la încetinirea proceselor de îmbătrânire.” Oare consumul regulat de kefir ne-ar ajuta să trăim mai bine și mai mult? Boabele de kefir sunt particule gelatinoase obținute din lapte fermentat. amestec simbiotic de drojdii, bacterii, proteine, polizaharide (amidon), minerale și vitamine. aspectul bucăților de conopidă sau coral. Dimensiunea acestora variază de la cea a unui bob de grâu până la cea a unei alune. Kefirul este o fermentație predominant lactică ( prezența bacteriilor) și într-o măsură mai mică, alcoolică (prezența drojdiilor care transformă zahărul (lactoza) în alcool (1 până la 2%) și dioxid de carbon). Kefirul are o consistență ușoară și se bea de obicei ca laptele de unt. găsit sub formă de culturi pure precum iaurtul, dar care conține doar următoarele microorganisme specifice: - Lactobacillus helveticus; - Streptococcus cremoris; - Leuconostoc dextrenicum; - Streptococcus diacetylactis; - Strertococcus kífir; - Saccharomyces fragilis (Torula kéfir); Plicul cu pulbere de 10 grame de cultură de chefir industrial este considerat cultura de kefir pur. Acesta din urmă constă în principal din bacterii și drojdii. Acesta servește ca starter pentru a produce o cantitate mai mare de chefir. Prezența tuturor bacteriilor și drojdiilor care alcătuiesc boabele de chefir îl face un produs mult mai concentrat decât cultura pură (pliculeț praf) în care se găsește doar o parte din componentele enumerate mai sus. Deci, boabele produc un chefir mai potrivit cu cel din ultimele secole și superior culturii pure folosite industrial ca starter. Chefirul tradițional conține o varietate mult mai mare de organisme. Comparativ cu lista de mai sus, boabele de chefir tradiționale pot conține până la 18 specii de Lactobacilli, 7 specii de Streptococcus și Lactococcus, 32 de specii de Drojdie și 2 specii de bacterii din genul Acetobacter. Virtutile kefirului: Kefirului, ca și altor produse lactate fermentate, i se atribuie mai multe calități nutriționale, precum și efecte fiziologice deosebite. Este ușor laxativ: utilizat pentru cazurile de constipație cronică. De asemenea, este eficient împotriva mai multor tulburări intestinale. Are puteri bactericide împotriva microorganismelor deosebit de virulente. De asemenea, crește secreția sucurilor gastrice și intestinale și promovează mișcările peristaltice. Un cunoscut bacteriolog danez, dr. Orla Jenson, crede că chefirul, datorită concentrației sale mai mari de drojdii, este mai hrănitor decât iaurtul și chiar mai benefic pentru flora intestinală. „În consecință, chefirul este un aliment foarte potrivit: - pentru copii cărora le oferă un produs digerabil, hrănitor, plăcut și benefic. - Pentru femeile însărcinate care deseori nu tolerează bine alte alimente, au greață sau suferă de probleme digestive. - Pentru convalescenți, vârstnici sau cu digestie dificilă. -Pentru persoanele tratate cu antibiotice și a căror floră intestinală utilă este distrusă de medicamente. -Pentru persoanele sedentare pentru care este recomandată în special o sursă de hrană echilibrată și digerabilă. EXEMPLU DE APLICARE ÎN CAZ DE BOLI În cazul bolilor foarte grave, este de obicei sigur să luați o mulțime de chefir: dimineața, la prânz și seara. De fiecare dată aproximativ Ѕ litru. Eficacitatea kefirului este maximă în primele 12 ore. Cu toate acestea, este întotdeauna mai bine să vă consultați medicul în prealabil. Se spune că kefirul are efecte benefice asupra sistemului nervos (reduce insomnia, îmbunătățește starea de spirit deprimată); sistemul digestiv (vindecă ulcerele de stomac, reglează consistența sărurilor în urma diareei cauzate de otrăvirea alimentară sau consumul de droguri, ajută la digestie); Sistemul respirator (reduce frecvența atacurilor de astm); țesut sanguin (reduce anemia după 3 săptămâni până la trei luni); Reduce tensiunea arterială după 2 luni, cu exerciții fizice regulate și un litru pe zi de kefir, iar lista poate continua considerabil, dacă se dorește. Pregătirea Kefirului: Spre deosebire de iaurt, prepararea chefirului nu necesită încălzirea laptelui. Putem folosi lapte de vacă sau de capră sau de oaie sau soia (acordați atenție calității prafului de soia utilizat). În mod tradițional, punem chefirul în sticle de piele și, așa cum a fost extras, a fost înlocuit cu lapte proaspăt: fermentarea s-a făcut continuu. Kefirul poate fi păstrat întotdeauna în lapte, într-un recipient închis (un borcan de sticlă). NU LĂSAȚI NICIODATĂ FASOLE KЙFIR FĂRĂ LAPTE SAU APĂ, se va deteriora. Dacă nu aveți suficient lapte, lăsați câteva cu boabele de chefir, chiar dacă aceasta înseamnă aruncarea supernatantului înainte de a adăuga lapte proaspăt. Va fi necesar să clătiți chefirul în prealabil. Metoda: - Acoperiți boabele de chefir cu lapte, respectând următoarele proporții: 250 ml (1 t) Boabe de kefir pentru 1 litru (4 t.) De lapte. `- Închideți recipientul (din sticlă). Nu umpleți până la refuz! - Se lasă să fermenteze la temperatura camerei aproximativ 24 de ore: pentru un gust ușor picant, se lasă să fermenteze o perioadă mai lungă, fără a depăși niciodată 40 de ore. În schimb, pentru un gust mai fin, reduceți timpul de fermentare. - Treceți boabele de kefir printr-o sită (alta decât în ​​metal). Lichidul colectat va fi kefirul de consumat. - Clătiți boabele de chefir, de preferință o dată pe săptămână, cu apă neclorurată. - Acoperiți boabele de chefir cu lapte, respectând măsurile date mai sus. -Reporniți procesul menționat mai sus. În cazul în care chefirul dezvoltă un miros insuportabil, boabele de kefir trebuie clătite în fiecare zi, timp de câteva zile. Oricum, trebuie să clătiți borcanul de fiecare dată când faceți chefir. Pentru informații, iată compoziția kefirului pe bază de lapte 2% și lapte degresat:
     • Anghinare din Ierusalim pentru slăbit
     • Sport cum să vă faceți sesiunea mai eficientă pentru a slăbi

     ---