Tutorial „Crearea paginilor Web folosind limbajul HTML”. Limbaje și tehnologii de programare pentru dezvoltarea web Ministerul Educației din Regiunea Moscova

Bună prieteni! Cei dintre voi care mi-ați citit blogul în mod repetat știți că am spus de multe ori: nu este nevoie să aveți abilități speciale de programare pentru a fi online.

Da, este adevărat și nu mă întorc în cuvintele mele, ci doar pentru că există servicii speciale și. Dacă nu le utilizați, atunci pentru a crea o resursă web și a o completa, trebuie să cunoașteți limbaje de programare.

Vrei să știi ce limbi sunt necesare pentru a crea un site web? Atunci citeste!

Câteva puncte de bază

Pentru a începe dezvoltarea unui site web, trebuie să utilizați mai multe limbi simultan. Cu toate acestea, nu se poate spune că oricare dintre ele este mai bun sau mai rău decât ceilalți. Un avantaj asupra celorlalți se poate manifesta doar atunci când se rezolvă o anumită problemă.

Alegerea unuia sau celuilalt depinde complet de nivelul de calificare al programatorului, deoarece este rar să găsești un specialist care să cunoască toate limbile simultan.

În primul rând, vreau să spun că un limbaj de programare este o sintaxă de bază care vă permite să creați o resursă web.

Baza absolut oricărui site web este. Această sintaxă este responsabilă pentru marcarea hipertextului. Toți dezvoltatorii web sunt obligați să o cunoască, precum și tabla înmulțirii.

Chiar dacă se folosesc soluții gata făcute, cunoștințele de bază sunt pur și simplu necesare. Folosind codul html, se realizează întregul proces de creare a unei resurse Internet și conținutul acesteia. Dar folosind numai acesta, puteți crea doar un site web simplu, fără feedback din partea utilizatorului, care oferă informații doar în scop informativ. Acest lucru nu este suficient pentru o resursă dinamică bună!

Limbaje majore de programare

În primul rând, merită evidențiat JavaScript, deoarece este baza tuturor programărilor pe care trebuie să o cunoașteți atunci când creați o resursă web. Dintre platformele software, cele de bază sunt Silver Light și Adobe Flash. Mai mult, acesta din urmă este destul de comun și a fost folosit de dezvoltatorii web de o perioadă relativ lungă de timp.

Aceste limbi sunt folosite pentru a crea site-uri web interactive. Conform previziunilor, Silver Light va înlocui complet Adobe Flash în curând. În cazuri rare, aceste două produse software sunt destul de suficiente pentru a crea un site de internet, dar utilizarea numai a acestora este extrem de nedorită.

Alegerea sintaxei adecvate depinde și de sistemul de operare pe care îl folosește dezvoltatorul. Pentru a crea o resursă web pe sistemul de operare Windows, este adesea folosită o tehnologie dezvoltată de Microsoft – ASP.NET. Vă permite să creați absolut orice resursă web, atât cea mai simplă, cât și cea capabilă să proceseze un număr considerabil de solicitări. Pentru a utiliza ASP.NET, ar trebui să aveți cunoștințe nu la nivel de utilizator, ci ceva mai profunde.

Cea mai populară sintaxă care este solicitată în rândul programatorilor este PHP. Are o mulțime de avantaje, inclusiv viteza și sintaxă simplă. Astăzi, cea mai mare parte a motoarelor este scrisă în PHP.

Când încep să înțeleagă programarea web, mulți oameni aleg Java; este cel mai ușor de înțeles și mai ușor de învățat. Paginile Java Server sunt folosite pentru a crea conținut.

Recent, Ruby a fost folosit foarte des. În plus, popularitatea sa crește în fiecare zi. Eu personal nu l-am folosit încă, dar în timp ce studiam subiectul, am găsit o mulțime de comentarii entuziaste despre el. Dezvoltatorii cu experiență evidențiază Ruby ca fiind cea mai potrivită sintaxă pentru crearea rapidă a site-urilor web, în ​​timp ce vă permite să implementați funcționalitatea necesară a resursei.

Rezultate

Selectarea sintaxei adecvate este necesară pe baza mai multor parametri, și anume:

• Tipul de sistem de operare utilizat;
• Complexitatea și dinamismul site-ului în curs de creare;
• Arsenalul existent al propriilor cunoștințe.

Ți-am spus de ce limbaje de programare ai putea avea nevoie atunci când creezi o resursă web și să le folosești pe toate simultan sau să dai preferință unuia depinde de tine.

Sper că acest material ți-a fost de folos și vei fi bucuros să împărtășești acest articol prietenilor tăi de pe rețelele de socializare. Nu uitați să vă abonați la actualizările blogului. Pe curând!

Cu sinceritate! Abdullin Ruslan

Introducere

1. Informații de bază

1.1 Despre limbajul html

1.2 Crearea unui site web

1.3 Fundamente

1.4 Structura documentului

1.5 Etichetele corpului documentului

1.6 Lista etichetelor HTML de bază

2. Informații suplimentare

2.1 Listează etichete

2.3 Grafice în cadrul unui document

2.4 Adăugarea de stiluri la un document

2.5 Etichete html speciale

2.6 Formulare HTML

2.7 Cadre HTML

2.8 Tabele HTML

2.9 Optimizarea graficii pentru web

2.10 Bazele CSS

3. Descrierea creării site-ului

3.1 Pregătire

3.2 Crearea unei pagini de start

3.3 Crearea unei a doua pagini

3.4 Crearea unei pagini cu o descriere a orașului

3.5 Pagina foto

3.6 Pagina Programe

3.7 Pagina de mulțumiri

Concluzie

Lista literaturii folosite

Introducere

Această teză este dedicată limbajului HTML. Folosind acest limbaj, sunt create fișiere cu extensia *.htm și *.html, care sunt pagini Web. Site-urile de internet sunt formate din ele.

La teză este atașat un site web ca exemplu a ceea ce poate fi creat folosind HTML.

Întreaga lucrare este împărțită în 3 secțiuni. Prima secțiune este dedicată în întregime descrierii principalelor etichete HTML. Vă va oferi toate informațiile de care aveți nevoie despre cum să creați pagini web simple. A doua secțiune conține informații despre cum să îmbunătățiți aspectul documentului și să construiți capacități suplimentare în el. Și a treia secțiune conține o descriere a modului în care a fost creat site-ul atașat acestei teze. Descrie în detaliu o lună și jumătate de muncă grea pentru crearea site-ului, vorbește despre diverse erori în timpul creării și corectarea acestora, despre dificultățile apărute și despre metodele de eliminare a acestora.

După citirea acestei lucrări, oricine, chiar și cei complet nefamiliarizați cu programarea, va putea înțelege elementele de bază ale programării HTML. Și cei care știu ar putea găsi ceva nou pentru ei înșiși.

1.1 Despre limbă HTML

Hyper Text Markup Language (HTML) este un limbaj standard conceput pentru crearea de documente hipertext în mediul WEB. Documentele HTML pot fi vizualizate de diferite tipuri de browsere WEB. Când un document este creat folosind HTML, un browser WEB poate interpreta HTML pentru a evidenția diferitele elemente ale documentului și pentru a le procesa mai întâi. Utilizarea HTML permite formatarea documentelor astfel încât să poată fi prezentate folosind fonturi, linii și alte elemente grafice pe orice sistem care le vizualizează.

Majoritatea documentelor au elemente standard, cum ar fi un titlu, paragrafe sau liste. Folosind etichete HTML, puteți desemna aceste elemente, oferind browserelor WEB informațiile minime pentru afișarea acestor elemente, păstrând în același timp structura generală și completitudinea informațională a documentelor. Tot ceea ce este necesar pentru a citi un document HTML este un browser WEB care interpretează etichetele HTML și afișează documentul pe ecran în forma pe care i-o oferă autorul.

În cele mai multe cazuri, autorul documentului determină strict aspectul documentului. În cazul HTML, cititorul, pe baza capacităților browserului WEB, poate, într-o anumită măsură, controla aspectul documentului (dar nu și conținutul acestuia). HTML vă permite să marcați locul unde ar trebui să apară un titlu sau un paragraf într-un document utilizând o etichetă HTML și apoi permite browserului WEB să interpreteze acele etichete. De exemplu, un browser WEB poate recunoaște începutul unei etichete de paragraf și poate prezenta documentul în forma dorită, în timp ce altul nu are această capacitate și prezintă documentul într-o singură linie. Utilizatorii unor browsere WEB au, de asemenea, posibilitatea de a personaliza dimensiunea și tipul fontului, culoarea și alți parametri care afectează afișarea documentului.

Etichetele HTML pot fi împărțite aproximativ în două categorii:

1. Etichete care determină modul în care va fi afișat corpul documentului în ansamblu de către browser-ul WEB.

2. Etichete care descriu proprietățile generale ale documentului, cum ar fi titlul sau autorul documentului.

Rețineți că principalul avantaj al HTML este că documentul poate fi vizualizat pe diferite tipuri de browsere web și pe diferite platforme.

1.2 Creare Site-ul web

Documentele HTML pot fi create folosind orice editor de text sau editori și convertoare HTML specializate. Alegerea editorului care va fi folosit pentru a crea documente HTML depinde numai de confortul și preferințele personale ale fiecărui autor.

De exemplu, editorii HTML, cum ar fi Netscape Navigator Gold de la Netscape, vă permit să creați documente grafic folosind tehnologia WYSIWYG (What You See Is What You Get). Pe de altă parte, majoritatea instrumentelor tradiționale de creare a documentelor au convertoare care vă permit să convertiți documentele în format HTML.

Toate etichetele HTML încep cu „<" (левой угловой скобки) и заканчиваются символом ">" (paranteză cu unghi drept). De obicei, există o etichetă de început și o etichetă de final. De exemplu, aici sunt etichete de titlu, care definesc textul din interiorul etichetelor de început și de sfârșit care descriu titlul documentului:

Eticheta de sfârșit arată la fel ca eticheta de început și diferă de aceasta printr-o bară oblică înainte de textul dintre parantezele unghiulare. În acest exemplu, eticheta - despre completarea textului titlului.

Unele etichete precum

(etichetă care definește un paragraf) nu necesită o etichetă de final, dar utilizarea acesteia oferă textului sursă al documentului o lizibilitate și o structură îmbunătățite.

HTML nu face distincție între majuscule și minuscule, așa că exemplul de mai sus ar putea arăta astfel:

Atenţie! Spațiile suplimentare, file-urile și returnările de transport adăugate la textul sursă al unui document HTML pentru o mai bună lizibilitate vor fi ignorate de browserul WEB atunci când interpretează documentul. Un document HTML poate include elementele de mai sus numai dacă sunt plasate în interiorul etichetelor

ȘI

. Mai multe detalii despre etichete

Se va scrie mai jos.
 
Când un browser WEB primește un document, acesta determină modul în care documentul trebuie interpretat.  Prima etichetă care apare în document trebuie să fie eticheta .  Această etichetă spune browserului WEB că documentul dvs. este scris folosind HTML.  Un document HTML minim ar arăta astfel:
 
Corpul documentului...
 
Antetul documentului .  Eticheta pentru capul documentului trebuie utilizată imediat după etichetă și nicăieri altundeva în corpul documentului.  Această etichetă reprezintă o descriere generală a documentului.  Evitați să plasați orice text în interiorul etichetei .  Eticheta de pornire plasat imediat înaintea etichetei 
 
Atenţie!  Din punct de vedere tehnic, etichetele de început și de sfârșit, cum ar fi , Și opțional.  Dar este recomandat să le folosiți, deoarece utilizarea acestor etichete permite browserului WEB să separe cu încredere partea antet a documentului și partea semantică în sine.
 
Titlul documentului , situat în interior -etichete, așa cum se arată în exemplul de mai sus.  Titlul documentului nu apare atunci când documentul în sine este afișat în fereastră.
2.7.1.  Crearea unei pagini web în editorul FrontPage 2003
 
Paginile web sau documentele hipertext (documente html) sunt fișiere text marcate cu etichete folosind HTML (HyperText Markup Language).  HTML nu este un limbaj de programare, este un limbaj de marcare sau un format de hipertext.  Etichetele sunt folosite pentru a marca un document.  Etichetele sunt incluse în paranteze unghiulare.  Practic, etichetele sunt împerecheate, adică.  Există etichete de deschidere și de închidere.
 
Limbajul de marcare HTML vă permite să formatați textul unei pagini web, să plasați obiecte grafice și imagini pe ea, să inserați înregistrări audio și diverse elemente multimedia, precum și scripturi (JavaScript, VBScript) și să creați legături hipertext.
 
O pagină web începe și se termină cu etichete asociate Și.  Etichetele pereche sunt plasate între aceste etichete , (capul paginii web), între care sunt plasate etichete pereche  pentru titlul paginii web și, de asemenea, introduceți diverse meta-taguri pentru cuvinte cheie, descrieri ale conținutului paginii etc.
 
Apoi vin etichetele , (corpul paginii web), conținutul sau conținutul paginii este plasat între aceste etichete.
 
De exemplu, dacă introduceți text marcat cu etichete în editorul Notepad sau Notepad++: 

 

 

 

 

 
Acest site este dedicat învățământului la distanță în informatică, telecomunicații și e-business 

 

 
și salvați-l cu extensia html, vom obține un document html care este afișat în fereastra browserului și arată ca cel prezentat în figură.
 
 
Orez.  1.
 
Paginile web (documente hipertext) sunt fișiere care au o adresă unică și sunt afișate de browsere.
 
Paginile WWW pot fi:
 
static;
 
dinamic;
 
interactiv.
Paginile statice sunt fișiere statice (text introdus, tabele, imagini etc.) care sunt create folosind limbajul de marcare HTML și au extensia .html sau .htm.
 
Paginile web dinamice sunt pagini web generate sau generate (create) în procesul de executare a unei cereri de utilizator.  Aceste pagini sunt scrise în PHP, ASP etc.  și au extensiile .php, respectiv .aspx.  Paginile dinamice sunt create de un așa-numit motor (Content Management System) sau un program special de pe server, care, pe baza solicitărilor utilizatorilor, generează o pagină web din datele stocate pe server într-o bază de date.
 
Paginile web interactive sunt pagini web care includ formulare (create în PHP, JavaScript și VBScript etc.), prin care se fac schimb de date între utilizator și server.
 
Paginile web sunt create folosind diverse editori html: Microsoft Prima pagina Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor etc.
 
Pentru a învăța cum să creați pagini web și site-uri, este recomandabil să folosiți un editor în limba rusă.  Editorul FrontPage include vrăjitori care facilitează crearea unui site web și șabloane de pagini web care conțin marcajul (structura) și designul necesare pentru a crea rapid pagini web.
 
Algoritmul pentru crearea paginilor web în editorul FrontPage 2003 este descris în detaliu pe pagină
În programul exemplu pentru informatică și TIC pe tema „Tehnologii de comunicare” sunt alocate doar 12 ore și se propune crearea unei pagini Web folosind șabloane.  Sunt alocate 8 ore la tema „Tehnologii multimedia”, dar dacă într-o instituție de învățământ informatica se studiază la nivel propedeutic deja în clasele a 5-a, a 6-a și a 7-a, atunci este indicat să se transfere studiul tehnologiilor multimedia la cursul propedeutic. și apoi puteți crește timpul pentru studiul tehnologiilor de comunicare, sau mai bine zis, puteți adăuga subiectul „Crearea de site-uri web în HTML” în clasa a VIII-a.
Este recomandat să începeți să stăpâniți tehnologia de creare a site-urilor web cu limbajul de marcare hipertext HTML în programul Notepad, care este baza fundamentală în această direcție.  Desigur, este imposibil să înveți întreg limbajul HTML în 8 ore, dar poți arăta scopul și aplicarea etichetelor principale ale limbajului.  Dacă un student devine interesat de tehnologia de creare a site-urilor web, el poate continua să studieze materialul independent sau în cursuri, cluburi sau opțiuni adecvate.
Manualul metodologic prezentat a fost supus unor teste repetate în clasa a VIII-a a gimnaziului nr. 441 din districtul Frunzensky din Sankt Petersburg și include material pentru orele teoretice și practice, a căror implementare este demonstrată mai întâi printr-un proiector, iar apoi elevii efectuează independent. pe un computer, folosind fișe pentru lecție.
Pentru elevii care au finalizat rapid munca planificată în lecție, sunt oferite sarcini suplimentare.
Materialul este stăpânit în mod eficient atunci când elevii, împreună cu profesorul, finalizează un proiect comun, de exemplu, pe o temă din istoria Sankt-Petersburgului „Teatrele Dramatice din Sankt Petersburg”, apoi, ca o lucrare finală, își creează propriul mic proiect, folosind ca șablon un site web creat împreună cu profesorul.
Ca test, studenții răspund la întrebările testului despre cunoștințele etichetelor HTML și prezintă un site web creat de ei înșiși.
Principalele obiective ale pregătirii: formarea interesului cognitiv, dezvoltarea abilităților intelectuale și creative în domeniul tehnologiilor Web.


Educational:
formarea unui sistem de cunoștințe privind tehnologia de creare a site-urilor web;
 
predarea limbajului de marcare hipertext HTML pentru crearea de site-uri web;
 
introduceți etapele activităților proiectului. 


Educational:
dezvoltarea abilităților creative de auto-exprimare prin crearea de site-uri web;
 
dezvoltarea capacității de a compara, de a căuta analogi și de a transfera cunoștințe într-o nouă arie de tehnologii web;
 
dezvolta abilitati de calculator 

Educational:
dezvolta o atitudine conștiincioasă față de muncă;
 
promovează un sentiment de camaraderie și responsabilitate personală pentru site-ul creat;
 
cultivați gustul artistic și estetic;
 
pentru a educa un utilizator de internet competent și corect. 


Lectia 1
1. Informații generale despre site-urile Web și HTML
Publicațiile de pe World Wide Web sunt implementate sub formă de site-uri web.  Un site web este structurat ca o revistă care conține informații despre un anumit subiect sau problemă.  Așa cum o revistă este formată din pagini tipărite, un site Web este format din pagini Web de computer conectate prin hyperlinkuri.  Paginile web pot conține text, imagini, tabele, obiecte multimedia și dinamice.  Site-urile web pot fi create folosind HTML.
HTML – Limbajul de marcare hipertext  -
 limbaj de marcare hipertext.  HTML nu este în niciun caz un limbaj de programare; este responsabil doar de aranjarea elementelor (text, imagini) în fereastra browserului.  HTML este limbajul pentru crearea site-urilor Web pe World Wide Web.  Limbajul HTML este format din comenzi simple - etichete.  Etichetele controlează prezentarea informațiilor pe ecran atunci când este redat un document HTML.  Etichetele sunt incluse în paranteze unghiulare<>…și există pereche și nepereche (single<>).
Un document HTML este un fișier text cu extensia . html sau. htm, care conține un set de etichete.
Browser – un program pentru vizualizarea paginilor Web.  Sunt utilizate pe scară largă browserele Microsoft Internet Explorer, Opera etc.. Când un browser primește un document HTML, îl analizează, construiește un model obiect al documentului și apoi afișează rezultatul pe monitor.
2. Structura documentului HTML
3. Formatarea caracterelor
Se afișează caracterele dintre următoarele etichete:
Opțiuni de font
Text inclus între etichete 
……..
 are o dimensiune, culoare și caractere date.  Pentru aceasta sunt folosite următoarele atribute: DIMENSIUNE = valoare de la 1 la 7 și CULOARE= culoare (aqua, negru, albastru, fuchsia, gri, verde, lime, maro, bleumarin, măsline, violet, roșu, argintiu, teal, galben, alb), fiecare culoare are propriul cod hexazecimal de la 000000 la FFFFFF.
Dacă textul conține mai multe spații între cuvinte sau caractere de tabulatură, browserul afișează un singur spațiu pe ecran.  Dacă sunt necesare spații suplimentare, atunci între cuvinte trebuie să adăugați un caracter primitiv.
O singură etichetă 

întrerupe fluxul de text și inserează o linie goală.  Mai multe dintre aceste etichete adaugă mai multe linii goale.  Spația dintre linii este simplă.
4. Sarcina practică nr. 1.
Crearea primului document HTML „Teatrele Dramatice din Sankt Petersburg”, lucrând cu fonturi, stabilind culoarea și dimensiunea fontului.  Stăpânirea tehnologiei de lucru.

Lectia 2
1. Formatarea textului în paragrafe
Tag - începe un paragraf pe un rând nou.  Un nou paragraf este separat de cel anterior prin spațiere dublă între rânduri.
Alinierea textului la paragrafe:
2. Setați culoarea întregului text și fundal dintr-un document
Descris în eticheta de început a corpului documentului 

TEXT=culoarea textului >.

3. Titluri la diferite niveluri
Etichete ….
 formatează textul conținut în acestea.  Valorile n variază de la 1 la 6, textul fiind afișat de la mai mare la mai mic.  Etichete ….
 poate avea atribute ALIGN=CENTRU, STÂNGA, DREAPTA.
4. Liste simple
5.Sarcina practică nr. 2
Formatarea textului în paragrafe, culoarea de fundal, titluri de diferite niveluri, liste.

Lecția #3
1. Inserarea graficelor
Toate browserele acceptă formate .gif,
.jpg. Aceste formate sunt raster. GIF– acceptă transparență și animație, potrivite pentru imaginile desenate manual. JPG– pentru imagini color, potrivite pentru imagini și fotografii scanate, nu acceptă animația.
O singură etichetă 
 inserează elemente grafice într-un flux de text oriunde:
>

Atribute opționale ale etichetei :
Pentru a păstra imaginea centrată, puteți folosi eticheta 
……./

2. Sarcina practică nr. 3
Inserarea și formatarea graficelor.  Creare independentă de pagini web pentru teatre de teatru.

Lecția #4

Comunicarea cu alte documente este organizată prin etichete<A>….

>

textul hiperlinkului .


><
IMG SRC
=’numele fișierului grafic’ >

2. Sarcina practică nr. 4
Proiectarea unei liste de teatre pe pagina principală glavn.htm, sub formă de hyperlinkuri către paginile Web corespunzătoare ale teatrelor.

Lecția #5
1. Tabele
Ele sunt folosite nu numai pentru aranjarea datelor în celule, ci și în scopul poziționării fragmentelor de text și imagini unul față de celălalt.
Folosind tabele, este convenabil să creați navigare pe site.
Un exemplu de tabel cu două rânduri (rânduri) care conține două celule:
Celulele tabelului pot conține text sau imagini, precum și text cu etichete HTML și hyperlinkuri.  Nu trebuie să lăsați celulele tabelului necompletate; trebuie să plasați cel puțin un spațiu care nu se întrerupe
Atributele de bază ale etichetei 
Și 
 
setați parametrii de tabel, rând sau celulă:

ALIGN=stânga, dreapta, centru – aliniere (
,
, 
)

BGCOLOR=’culoare’ – culoarea de fundal (
, ,
)

HSPACE=valoare – spațiu liber la stânga și la dreapta tabelului în pixeli (
)
VSPACE=valoare - spațiu liber deasupra și sub tabel în pixeli (
)
WIDTH=valoare – lățimea tabelului (celulă) – în pixeli sau ca procent (
, 
)

ÎNĂLŢIME =
 valoare – înălțimea tabelului (celulă, rând) – în pixeli sau ca procent (
,
)
BORDER= valoare – grosimea chenarului din jurul tabelului și a celulelor acestuia, valoarea implicită=1, dacă valoarea=0, atunci nu există chenar (
, 

, , 
)

BORDECOLOR=’culoare’ – culoarea cadrului ( >)
VALIGH=jos, mijloc, sus – aliniați conținutul pe verticală ( 
)

2. Sarcina practică nr. 5
Crearea navigării pe site sub forma unui tabel cu un rând

Lecțiile nr. 6 și nr. 7
1. Secțiune antet , meta etichete
Secțiunea antet de pe fiecare pagină specifică informații despre documentul care este utilizat pentru a-l afișa.  Text inclus între etichete ,
 apare în bara de titlu a ferestrei browserului.
Secțiunea antet conține de obicei un număr de etichete. 
 cu diverse atribute care oferă informații suplimentare (metainformații) despre site-ul web:



>
 - - (este indicat tipul tabelului de coduri ( Windows-1251, Koi8-Rși altele) utilizate la pregătirea părții de text a documentului.
- informatii despre

Acum tot ce rămâne este să deschideți fișierul creat în browser și să priviți rezultatul.  Pentru a face acest lucru, puteți utiliza browserul Microsoft Internet Explorer care vine cu Windows sau orice alt browser instalat pe computer, făcând dublu clic pe fișierul index.html sau trăgând fișierul pe pictograma browserului.  Deschide-l și vezi ceva de genul acesta:

Astfel, am creat o pagină Web în Notepad, deși puțin nedescriptivă, dar care conține deja un titlu mare și un paragraf de text care este rupt automat în rânduri și conține un fragment cu caractere aldine.
Ce este o etichetă?
Acum să vorbim mai multe despre structura paginii.  Să ne uităm la fragment:
Aici vedem textul care apare pe pagină ca antet, inclus într-o etichetă „h1”.  Ce este o etichetă în HTML?

Etichetă HTML sunt cuvinte și simboluri obișnuite cuprinse între paranteze unghiulare, de exemplu „h1”, „p”, „corp”.  Deci, eticheta „h1” este eticheta de deschidere, eticheta „/h1” este eticheta de închidere, iar textul dintre acestea se numește conținutul etichetei.

De asemenea, eticheta „h1” și eticheta „/h1” se numesc etichete asociate.  Împreună, eticheta de deschidere plus conținutul plus eticheta de închidere formează un element de document HTML.  Există, de asemenea, elemente formate dintr-o etichetă de deschidere:

Deci, eticheta „h1” asociată definește elementul de antet de la primul nivel.  Există șase niveluri de titluri în total, acestea sunt elementele „h1” - „h6”.
Elementele pot fi bloc sau inline (text). Elemente de bloc efectuează formatarea structurală a paginii.  Elementele bloc sunt întotdeauna afișate pe o nouă linie pe pagină și sunt indentate față de elementele adiacente. Elemente în linie efectuați formatarea directă a textului sau formatarea logică.  Elementul h1 este un element bloc.
Urmează , care creează un paragraf pe pagina HTML.  Conținutul acestei etichete va deveni textul acestui paragraf.  Elementul „p” este, de asemenea, un element de bloc și, după cum putem vedea, începe pe o linie nouă și există o indentare între titlul h1 și paragraf.
În interiorul unui paragraf există un care își afișează conținutul cu caractere aldine.
Această etichetă „puternică” este imbricată în conținutul etichetei „p”.  Aceasta înseamnă că conținutul etichetei puternice va apărea ca parte a paragrafului.  Aceste etichete imbricate sunt numite filiale, iar etichetele în care sunt imbricate alte etichete sunt apelate părinţi.  Deci, eticheta „puternică” este eticheta secundară, iar eticheta „p” este eticheta părinte.  Acest tip de imbricare a etichetelor este destul de comună în HTML.
Când imbricați etichetele, ar trebui să urmați o singură regulă: ordinea etichetelor de închidere ar trebui să fie ordinea inversă a etichetelor de deschidere.  Acestea.  etichetele și conținutul lor trebuie să fie complet imbricate în alte etichete.  Dacă încălcați această regulă, este posibil ca pagina WEB să nu fie afișată corect.
Apropo, element puternic este un element inline.  Și după cum vedem, nu se fac rupturi de linie sau indentări la afișarea acestui element.  Și este foarte important de menționat că, conform regulilor limbajului HTML, elementele inline nu pot avea etichete imbricate.
Este posibil să fi observat că eticheta de deschidere „h1” conține ceva text în plus față de titlu: align="center". Acest atributul etichetei, care specifică parametrii acestuia.  Fiecare atribut are un nume, urmat de semnul = și apoi valoarea lui, cuprinsă între ghilimele:

În cazul nostru specific, atributul align al etichetei h1 specifică alinierea textului.  Deci, centrul de valori îi spune browserului că conținutul etichetei h1 ar trebui să fie centrat.
Atributele pot fi obligatorii sau opționale. Atribute obligatorii trebuie să fie conținute în etichete fără greș.  A atribute optionale pot fi omise, caz în care iau valoarea implicită.
Structura WEB - pagini.  Etichete HTML de bază.
Pentru a afișa corect pagina în browser, următoarele etichete asociate trebuie să fie prezente în codul html: html, cap și corp.
În primul rând, tot codul dvs. HTML ar trebui să fie inclus în etichetele „html” și „/html”.  Ei spun browserului că pagina conține cod html.
În plus, codul paginii trebuie să conțină secțiuni antetȘi corp document.  Secțiunea antet, numită și antet, constă dintr-o pereche de etichete „head” și conținutul acesteia.  Această secțiune conține informații despre parametrii paginii care nu sunt afișați pe ecran și sunt necesari doar de browser.  În exemplul nostru, secțiunea antet este:
Corpul documentului este evidențiat folosind etichetele „body” și „/body”.  Tot conținutul paginii este plasat aici, ceea ce va fi afișat în browser.
Pentru a rezuma cele de mai sus, orice pagină HTML are următoarea structură:

Metadatele paginii HTML
Sunt apelate informațiile de serviciu care se află în antetul paginii și care îi specifică parametrii metadate.  Sunt apelate etichete HTML care specifică metadate meta etichete.  În pagina noastră mică, metadatele sunt următoarele linii de cod:
În primul rând, aceasta este eticheta „title”, care specifică titlul paginii WEB.  Acest nume este afișat în bara de titlu a ferestrei browserului WEB.  În plus, conținutul etichetei „title” este folosit de motoarele de căutare pentru a indica un link către acest document în rezultatele căutării prin cuvinte cheie.  Prin urmare, încercați să oferiți un titlu interesant care să conțină cuvinte cheie pentru a atrage mai mulți vizitatori.
Următoarea metaetichetă îi spune browserului codarea documentului nostru.  În acest caz, am creat pagina noastră web în codificare utf-8.  Am transmis informațiile de codare către browser folosind atributul „conținut” al etichetei „meta”.
Este foarte important să setați codificarea astfel încât browserul să afișeze corect conținutul paginii noastre.  Dacă observați, metaeticheta nu are o etichetă de închidere.  Aceasta este așa-numita etichetă unică sau un element constând dintr-o etichetă de deschidere.  În general, folosind metaeticheta puteți seta mulți parametri care sunt importanți atât pentru browser, cât și pentru motoarele de căutare.
tip de document HTML (doctype)
Rămâne să luăm în considerare o etichetă a primei noastre pagini WEB, care se află chiar la începutul codului html: „!doctype html”.  Această etichetă specifică versiunea limbajului HTML în care este scrisă pagina și versiunea acesteia.
Este necesar ca browserul să înțeleagă după ce standard să afișeze pagina web.  , și diferă în funcție de versiunea limbii în care este scris codul html.  Da, eticheta noastră !doctype html indică versiunea în limba HTML5.
Deci, să rezumam:
1. Aproape toate paginile WEB sunt un fișier text.  Le puteți crea folosind orice editor de text.  În acest articol am învățat creați pagini WEB folosind regulat Blocnotes.
2. HTML este un limbaj, care este folosit pentru a crea pagini web.  HTML este un acronim pentru HyperText Markup Language.
3. Paginile WEB constau din etichete html si continutul acestora.  Etichetele constau din caractere și un nume în interiorul lor.  Numele etichetelor pot fi scrise atât cu litere mari (majuscule), cât și cu litere mici (mici).  Spațiile și întreruperile de rând nu sunt permise între caractere și numele etichetelor, precum și în interiorul numelor etichetelor.  Există etichete se dubleazăȘi singur, precum și etichetele pot fi cuibărit unul în celălalt.
4. Etichetă de deschidere + conținut + formular etichetă de închidere element.  Există, de asemenea, elemente formate dintr-o etichetă de deschidere.  HTML are bloc elemente şi litere mici.  Elementele bloc sunt întotdeauna afișate pe o linie nouă și sunt indentate deasupra și sub elementele adiacente.  Elementele inline oferă formatare logică pentru text.