Meniu
AcasăAvarii

Bazele limbajului de programare WEB HTML. HTML: Noțiuni de bază pentru începători

Am decis să acord mai multă atenție începătorilor care doresc să dobândească cunoștințe în domeniul construirii site-urilor web. Profesorul meu m-a împins să fac asta, pentru că a făcut multe greșeli în manualele pentru lucrările de laborator. Aș fi bucuros să mă uit la resursa din care au fost preluate informațiile educaționale și să las acolo câteva rânduri din opinia mea. Dar acum nu este vorba despre asta. În prima mea prelegere voi vorbi despre

Care este structura unui document HTML?

Eticheta indică faptul că structura documentului html începe și se termină. Majoritatea informațiilor pentru browser și motoarele de căutare sunt stocate între etichete. Etichetele conțin titlul paginii noastre. Eticheta indică faptul că informațiile suplimentare sunt destinate utilizatorului și, în mod natural, indică faptul că informațiile pentru utilizator se termină.

Acum hai să explic puțin. Toate etichetele ( tag - element de limbaj de marcare hipertext) sunt împărțite în două tipuri: „singur” și „închidere”. În plus, etichetele sunt incluse în următoarele caractere< и >, ele sunt cele care disting eticheta de textul HTML obișnuit. Să ne uităm la câteva dintre cele mai simple etichete „single”:


— o etichetă care este responsabilă pentru trecerea la o nouă linie în locul în care este instalată această etichetă. Să ne uităm la codul folosind această etichetă.

Primul meu site Bună tuturor!
Și acesta este primul meu site.

Rezultatul poate fi vizualizat.

— o etichetă care desenează o linie orizontală. Această etichetă se aplică elementelor bloc, linia începe întotdeauna pe o linie nouă. Are 5 atribute:

  • align — Determină alinierea liniei. Poate lua valoarea stânga, centru, dreapta.
  • culoare — Setează culoarea liniei.
  • noshade - Desenează o linie fără efecte 3D.
  • dimensiune — Setează grosimea liniei.
  • width — Setează lățimea liniei.

Codați folosind eticheta:

Primul meu site Salut tuturor! Acesta este primul meu site.

Un exemplu vizual poate fi găsit aici.

O altă etichetă „unică” este . Această etichetă este utilizată pentru a stoca informații destinate browserelor și motoarelor de căutare. Motoarele de căutare caută meta-etichete pentru a obține descrieri ale site-urilor, cuvinte cheie și alte date. Aveți voie să utilizați un număr nelimitat de metaetichete, toate trebuie să fie între și . Parametrii oricărei metaetichete sunt de forma „nume=valoare”, care este determinată de cuvintele cheie conținut , nume sau http-equiv . Deoarece metaetichetele sunt destinate mașinilor, nu fac nicio modificare vizuală, așa că voi furniza doar codul sursă:

Această linie indică faptul că creatorul paginii consideră că pagina utilizează codificarea UTF-8. În HTML5 totul a devenit mai simplu pentru a specifica codificarea, tot ce aveți nevoie este următoarea linie:

Există și alte etichete simple (, ,
, , , , , , , , , , , , , ), dar vă voi prezenta puțin mai târziu.

Acum să vorbim despre etichetele de „închidere”. Însuși numele „etichetă de închidere” indică faptul că eticheta necesită o închidere obligatorie. Acest lucru se face pentru a limita clar partea de text pe care o afectează eticheta.

Pentru un exemplu clar, să ne uităm la etichetă, care este folosită pentru a evidenția textul; Etichetele sunt limite care definesc zona de selecție a textului. Iată codul în care au uitat să închidă eticheta din ultima linie:

Primul meu site Bună tuturor! Și acesta este primul meu site.
Salutare tuturor! Și acesta este primul meu site.

După cum puteți vedea, nu este nimic complicat, acum puteți crea mai multe pagini legate între ele.

Etichete pentru evidențierea textului

Există mai multe moduri de a evidenția textul pe o pagină. Acest lucru se poate face folosind stiluri sau puteți folosi etichete. Suntem (deocamdată) interesați de a doua variantă.

— setează fontul la aldine.

— setează stilul fontului italic.

— adaugă o subliniere textului.

— menită să sublinieze textul. Browserele afișează acest text cu caractere cursive.

- taie textul. Această etichetă a fost eliminată din HTML5, este recomandat să o utilizați în schimb

— afișează textul ca text monospațial. Eliminat din HTML5.

— afișează fontul ca superscript. Fontul apare deasupra liniei de bază a textului și la o dimensiune redusă.

— afișează fontul ca indice. Textul este poziționat sub linia de bază a caracterelor rămase în linie și este redus în dimensiune.

— menită să sublinieze textul. Browserele afișează acest text cu caractere aldine.

— reduce dimensiunea fontului cu una în comparație cu textul obișnuit. În HTML, dimensiunea fontului este măsurată în unități convenționale de la 1 la 7, dimensiunea medie implicită a textului este 3. Eticheta reduce textul cu o unitate convențională. Etichetele imbricate sunt permise, iar dimensiunea fontului va fi mai mică cu 1 la fiecare nivel imbricat, dar nu poate fi mai mică de 1.

— mărește dimensiunea fontului cu una în comparație cu textul obișnuit. În HTML, dimensiunea fontului este măsurată în unități de la 1 la 7, dimensiunea medie implicită a textului este 3. Astfel, adăugarea unei etichete crește textul cu o unitate. Etichetele imbricate sunt permise, iar dimensiunea fontului va fi mai mare cu fiecare nivel.

— folosit pentru a evidenția citatele din text. Conținutul containerului este afișat automat în browser între ghilimele.

— conceput pentru a evidenția ghilimele lungi într-un document. Textul marcat cu această etichetă este afișat în mod tradițional ca un bloc aliniat cu umplutură în stânga și în dreapta (aproximativ 40 de pixeli), precum și în partea de sus și de jos.

— definește un bloc de text preformatat. Un astfel de text este de obicei afișat într-un font monospațial și cu toate spațiile între cuvinte. În mod implicit, orice număr de spații dintr-un cod dintr-un rând sunt afișate ca unul singur pe pagina web. Etichetă Vă permite să ocoliți această funcție și să afișați text așa cum este cerut de dezvoltator.

— definește un paragraf de text. Etichetă

Este un element bloc, începe întotdeauna pe o linie nouă, paragrafele de text care se succed sunt separate prin padding. Cantitatea de umplutură poate fi controlată folosind stiluri. Dacă nu există etichetă de închidere, se presupune că sfârșitul paragrafului coincide cu începutul următorului element de bloc.

.... - HTML oferă șase titluri la diferite niveluri, care indică importanța relativă a secțiunii de după titlu. Astfel, eticheta reprezintă cel mai important titlu de nivel, iar eticheta servește pentru a indica titlul de al șaselea nivel și este cel mai puțin important. În mod implicit, titlul de la primul nivel este afișat cu cel mai mare font aldine, iar titlurile de nivel ulterioare sunt mai mici. Etichetele ,..., se referă la elemente de bloc, ele încep întotdeauna pe o linie nouă, iar după ele sunt afișate alte elemente pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu. Eticheta are un atribut de aliniere, care determină alinierea titlului poate lua următoarele valori: stânga - titlu aliniat la stânga, centru - aliniat centrat, dreapta - aliniat la dreapta, justificare - justificat (atât la dreapta, cât și la stânga); . Această valoare funcționează numai pentru anteturile care sunt mai lungi de o linie.

— este un container pentru modificarea caracteristicilor fontului, cum ar fi dimensiunea, culoarea și fontul. Deși această etichetă este încă acceptată de toate browserele, este considerată învechită și se recomandă renunțarea la utilizarea sa în favoarea stilurilor. Eticheta are 3 atribute: culoare — setează culoarea textului, față — determină fontul fontului, dimensiunea — setează dimensiunea fontului în unități convenționale.

— marchează textul ca citat sau notă de subsol pentru alt material. Această evidențiere este utilă pentru schimbarea stilului textului prin CSS și este, de asemenea, folosită pentru a separa codul HTML în elemente structurale. Browserele setează de obicei textul din interiorul unui container să fie italic.

— indică faptul că secvența de caractere este o abreviere. Folosind atributul titlu, abrevierea este descifrată, ceea ce permite acelor persoane care nu sunt familiarizate cu aceasta să înțeleagă abrevierea. În plus, motoarele de căutare indexează versiunea full-text a abrevierei, care poate fi folosită pentru a îmbunătăți clasarea documentului.

În mod implicit, textul inclus în container este subliniat cu o linie punctată.

Mai jos este codul în care am folosit toate aceste etichete:

Primul meu site

HTML și CSS sunt două dintre tehnologiile de bază pentru construirea paginilor Web. HTML oferă structura paginii, CSS aspectul (vizual și sonor), pentru o varietate de dispozitive. Alături de grafică și scripting, HTML și CSS sunt baza construirii paginilor web și aplicațiilor web. Aflați mai multe mai jos despre:

Ce este HTML?

HTML este limbajul de descriere a structurii paginilor Web. HTML le oferă autorilor mijloacele de a:

Publicați documente online cu titluri, text, tabele, liste, fotografii etc.
Preluați informații online prin link-uri hipertext, cu un clic pe un buton.
Proiectați formulare pentru efectuarea tranzacțiilor cu servicii la distanță, pentru utilizare în căutarea de informații, efectuarea rezervărilor, comandarea produselor etc.
Includeți foi de calcul, clipuri video, clipuri audio și alte aplicații direct în documentele lor.
Cu HTML, autorii descriu structura paginilor folosind markup. Elementele limbii etichetează piese de conținut, cum ar fi „paragraf”, „listă”, „tabel” și așa mai departe. Ce este XHTML?

XHTML este un varianta HTML care utilizează sintaxa XML, Extensible Markup Language. XHTML are toate aceleași elemente (pentru paragrafe etc.) ca și varianta HTML, dar sintaxa este ușor diferită. Deoarece XHTML este o aplicație XML, puteți utiliza și alte instrumente XML cu aceasta (cum ar fi XSLT, un limbaj pentru transformarea conținutului XML).

Ce este CSS?

CSS este limbajul pentru descrierea prezentării paginilor Web, inclusiv culorile, aspectul și fonturile. Permite adaptarea prezentării la diferite tipuri de dispozitive, cum ar fi ecrane mari, ecrane mici sau imprimante. CSS este independent de HTML și poate fi folosit cu orice limbaj de marcare bazat pe XML. Separarea HTML de CSS facilitează întreținerea site-urilor, partajarea foilor de stil între pagini și adaptarea paginilor la diferite medii. Aceasta este denumită separarea structurii (sau: conținutului) de prezentare.

Ce este WebFonts? WebFonts este o tehnologie care permite oamenilor să utilizeze fonturi la cerere pe Web, fără a necesita instalare în sistemul de operare. W3C are experiență în fonturi descărcabile prin HTML, CSS2 și SVG. Până de curând, fonturile descărcabile nu au fost comune pe Web din cauza lipsei unui format de font interoperabil. Efortul WebFonts intenționează să rezolve acest lucru prin crearea unui format de font deschis, susținut de industrie, pentru web (numit „WOFF”).

Prelegerea s-a încheiat, sper că cunoștințele dobândite vă vor fi de folos! În următoarea prelegere, vă voi spune ce stochează eticheta, vom învăța cum să efectuăm tot felul de manipulări cu imagini și să ne familiarizăm cu tabelele.

La scrierea acestui articol, descrierea unor etichete a fost preluată de aici

Salutare tuturor!!! Mă bucur că ai decis să cucerești culmile elementelor de bază ale HTML și aceasta este alegerea potrivită. La urma urmei, înainte de a vă crea primul site web, trebuie să cunoașteți elementele de bază ale HTML. Mai mult decât atât, va trebui să te ocupi de codarea HTML pe un site web de mai multe ori. Recomand cu căldură să consultați tutorialele HTML pentru începători de pe blogul meu și vă garantez că, după finalizarea acestui curs, veți putea crea o pagină web sau chiar un site web cu ușurință.

Să începem! Mai întâi, să aflăm
HTML – (din engleză. H ypert ext M arkup Language) este un limbaj de marcare hipertext. A fost dezvoltat pentru prima dată de omul de știință britanic Tim Berners-Lee în 1991-1992. HTML a fost destinat doar să marcheze text, imagini și tabele pe paginile web. Acum, limbaje de programare precum JavaScript și VBScript pot fi de asemenea inserate într-un document HTML.

HTML nu este un limbaj de programare; este destinat doar pentru marcarea documentelor text.

Pentru a învăța HTML, trebuie doar să aveți un browser și un bloc de note standard sau .
Pentru a deschide Standard Notepad, faceți următoarele pe computer: „Start” => „Programe” => „Accesorii” => „Notepad” .

Dacă ați auzit despre programe care simplifică munca de scriere a codului HTML (Microsoft FrontPage, Adobe Dreamweaver), atunci nu vă recomand să le folosiți în această etapă a instruirii. Exersați-vă abilitățile într-un blocnotes standard sau în editorul de text Notepad++ și, atunci când finalizați acest curs, veți putea folosi programe pentru a accelera lucrurile. Abonați-vă la actualizările blogului meu și citiți cum să utilizați Microsoft FrontPage și Adobe Dreamweaver.

Pentru o mai bună înțelegere, am pregătit un exemplu. Privește cu atenție poza:

Explicaţie.

1). Orice document HTML începe cu această linie:

Cu această linie spunem browserului că documentul nostru HTML respectă specificația internațională versiunea 4.01. Datorită acestei linii, pagina ta va arăta la fel.
Nu este necesar să vă amintiți această linie, documentul HTML va funcționa fără ea. Asta doar pentru ca tu să știi ce este.

2).

și este începutul și sfârșitul documentului.

3).
și - șeful documentului. Aici sunt adesea introduse etichete de serviciu suplimentare, una dintre aceste etichete este . Veți afla despre alte etichete de serviciu în lecțiile ulterioare, în această etapă de formare, aceste informații sunt suficiente.

4).

și - titlul documentului.
Iată conținutul documentului, de exemplu, text, imagini, tabele, muzică, filme etc. Veți afla mai multe despre cum să inserați muzică, text, imagini în corpul documentului în lecțiile următoare.

Nota:

Veți citi și auzi adesea cuvântul „etichetă”.
O etichetă este tot ceea ce se află între paranteze< >. De exemplu: , , , ,
,

etc. - toate acestea sunt etichete.
Etichetele nu sunt vizibile la vizualizarea paginii într-un browser, dar tot ceea ce nu este între paranteze va fi afișat în browser la vizualizare.

Există multe etichete și au scopuri diferite.

Există etichete care trebuie închise. De exemplu,
deschide eticheta


și asigurați-vă că închideți eticheta

Și există etichete unice, de exemplu, aceasta
.

O etichetă este un fel de container care poate conține text, imagini și alte etichete...

○ Acordați atenție secvenței corecte a etichetelor de deschidere și închidere:

...

Eticheta pe care am deschis-o prima este închisă ultima, a doua este penultima etc.

○ Iată un exemplu de secvență incorectă a etichetelor de deschidere și de închidere. Cu această comandă, pot apărea erori pe pagina web:

...

Eroarea a fost în și.
Aveți grijă când scrieți cod.

Cod gata.
Așa arată codul HTML obligatoriu standard pentru o pagină web.

Titlul paginii Textul paginii, tabele, imagini, muzică și videoclip.

Nu vă descurajați dacă înțelegeți puțin sau aproape nimic din tot ce este scris mai sus. În a doua lecție va fi mai multă practică și vei putea să scrii totul manual și să vezi cum funcționează HTML.

Continuați cu următoarea lecție

HTML este limbajul de marcare hipertext care a făcut din Internet ceea ce știm și iubim. Datorită acestui instrument minunat, site-urile arată frumos și modern și asigură, de asemenea, ușurința în utilizare. HTML pur și simplu aranjează elementele unei pagini web într-un format ușor de utilizat. Funcția sa este comparabilă cu ceea ce fac oameni precum MS Word sau OpenOffice. Ele transformă o masă fără caracteristici de litere într-un document care conține paragrafe, text aldine, cursive, tabele și chiar imagini. Limbajul HTML face aproximativ același lucru, singura diferență fiind că documentele sale sunt afișate în browser, iar capacitățile acestui instrument sunt mult mai largi decât cele ale unui editor de text. Etichetele sunt folosite pentru marcare - comenzi speciale care descriu structura unei pagini web. Ele sunt incluse în paranteze unghiulare - astfel încât browserul să le poată distinge de cea mai mare parte a textului. În continuare, vom acoperi elementele de bază ale HTML pentru începători.

Editori vizuali

Începătorii care tocmai au pornit pe calea învățării HTML-ului își încep adesea munca cu programe care vă permit să creați site-uri web fără nicio cunoștință. În ele puteți aranja pur și simplu elementele pe ecran așa cum vor fi afișate în browser. S-ar părea că aceasta este sursa harului etern care vă permite să scăpați de majoritatea dezvoltatorilor web. Dar nu totul este atât de simplu, deoarece editorii vizuali au o mulțime de deficiențe care fac imposibilă utilizarea lor în proiecte serioase.

Toate aceste programe creează o mulțime de etichete inutile care fac pagina finală greoaie și suboptimă. Desigur, în era noastră a internetului de mare viteză, acest lucru este mai puțin important decât înainte, dar există o serie de motive pentru care un site web concis și bine scris se dovedește a fi mai practic decât omologul său creat într-un editor vizual. O pagină web realizată într-un astfel de program va fi procesată prost de roboții de căutare, deoarece fiecare kilobyte de cod este important pentru ei, iar codul greoi și ilogic cu o grămadă este puțin probabil să se potrivească gusturilor lor. În plus, editorii rămân adesea în urmă cu vremurile, devenind irelevanți, iar cheltuirea resurselor pentru dezvoltarea lor nu este practic, deoarece niciun profesionist nu folosește aceste produse. Prin urmare, oricine dorește să lucreze în industria de dezvoltare de site-uri web trebuie să cunoască elementele de bază ale HTML.

Etichete

După cum sa menționat mai sus, etichetele descriu structura unei pagini web către browser. Majoritatea dintre ele au o etichetă de deschidere și de închidere, dar nu toate. De exemplu, ..., unde în loc de puncte există conținut. Primul arată unde începe eticheta, iar al doilea o închide. Pot exista și alte elemente de marcare a paginii în interior, acestea pot fi imbricate unul în celălalt ca o păpușă. Este important să închideți etichetele în timp util, astfel încât pagina să fie afișată corect.

Există, de asemenea, etichete unice care nu trebuie să fie închise. În ele, conținutul este situat în interior, așa cum poate fi scris pentru majoritatea etichetelor HTML și stabilește proprietățile elementului. Este indicat în eticheta de deschidere și arată cam așa: attribute="...", unde în loc de puncte există valoarea atributului. Cunoașterea etichetelor este primul și cel mai important pas pentru stăpânirea HTML-ului. Elementele de bază ale acestei arte implică și înțelegerea structurii unei pagini web.

Structura documentului

Fiecare document HTML are o extensie corespunzătoare, de exemplu Index.html. În acest fel, browserul poate înțelege cu ce are de-a face și poate afișa pagina corect. Este recomandabil să stocați toate fișierele folosite pentru a crea un site web într-un singur director, ceea ce vă va face viața mult mai ușoară în viitor. Elementele de bază ale limbajului de marcare hipertext HTML necesită o înțelegere clară a structurii documentului. Începe cu o etichetă care spune browserului versiunea de HTML care este utilizată în acest document. În acest moment, a cincea versiune a limbii este relevantă, așa că nu este nevoie să inventați nimic aici, puteți introduce în siguranță eticheta de mai sus la începutul oricărei pagini.

Apoi sunt principalele structuri pereche care alcătuiesc „scheletul” sitului. Prima etichetă, în care sunt imbricate toate celelalte, este .... Orice lucru în afara ei nu este recunoscut de browser ca pagină web, așa că deschide documentul și îl închide. Această etichetă este necesară pentru orice document. De asemenea, conține mai multe etichete necesare, care vor fi discutate mai jos.

Cap

Eticheta ... conține informații tehnice care nu vor apărea pe pagină, dar reprezintă totuși o parte importantă a documentului HTML. În acest loc sunt puse bazele site-ului; aici se selectează codificarea și se introduce numele paginii. Este conținut în interiorul unei etichete obligatorii.... Titlul este afișat în partea de sus a browserului, unde puteți plasa și o mică pictogramă care caracterizează conținutul paginii. Este recomandabil să indicați imediat codificarea documentului pentru afișarea corectă a acestuia. Acest lucru se poate face folosind eticheta. Etichetele meta oferă informații despre structura paginii și sunt de obicei situate în interiorul capului.

Legătură

Cunoașterea elementelor de bază ale HTML implică și utilizarea stilului în cascadă sau css. Acestea stabilesc proprietățile elementelor care vor fi afișate pe pagină. O abordare modernă a acestei sarcini implică transferul de caracteristici precum culoarea, înălțimea și locația elementului într-un fișier extern pentru o mai mare comoditate. Pentru a include un fișier CSS, utilizați eticheta. În forma sa finală, arată cam așa: unde href indică locația fișierului, iar tipul indică tipul acestuia.

Corp

În această parte a documentului HTML este creată partea vizibilă a paginii. Tot ceea ce se face în interiorul „corpului” va fi afișat de browser. Folosește un număr mare de etichete HTML. Elementele de bază sunt formatarea textului, lucrul cu link-uri și instrumentele de bază pentru structurarea unei pagini web. Pentru a începe să lucrați în HTML, trebuie doar să cunoașteți etichetele de bază și să le puteți utiliza. Mai jos sunt cele mai populare: