Ultima actualizare: 04/08/2016
Elementele sunt blocurile de construcție care alcătuiesc un document html5. Pentru a crea un document, trebuie să creăm un fișier text simplu și să specificăm extensia fișierului ca *.html
Să creăm un fișier text, să-i denumim index și să îi schimbăm extensia în .html .
Apoi deschideți acest fișier în orice editor de text, de exemplu, în Notepad++. Adăugați următorul text la fișier:
Pentru a crea un document HTML5, avem nevoie mai întâi de două elemente: DOCTYPE și html. Elementul doctype sau Document Type Declaration spune browserului web tipul documentului.indică faptul că documentul dat este un document html și că este utilizat html5 și nu html4 sau o altă versiune a limbajului de marcare.
Iar elementul html dintre etichetele sale de deschidere și de închidere conține întregul conținut al documentului.
În interiorul elementului html, putem plasa alte două elemente: cap și corp. Elementul head conține metadate ale paginii web - titlul paginii web, tipul de codificare etc., precum și linkuri către resurse externe - stiluri, scripturi, dacă sunt folosite. Elementul body definește de fapt conținutul paginii html.
Acum să modificăm conținutul fișierului index.html după cum urmează:
Elementul cap definește două elemente:
elementul titlu reprezintă titlul paginii
Elementul meta definește meta informațiile paginii. Pentru afișarea corectă a caracterelor, este de preferat să specificați codificarea. În acest caz, folosind atributul charset="utf-8", specificăm codificarea utf-8.
În cadrul elementului body se folosește un singur element - div , care decorează blocul. Conținutul acestui bloc este un șir simplu.
Deoarece am ales utf-8 ca codificare, browserul va afișa pagina web în această codificare specială. Cu toate acestea, este necesar ca textul documentului în sine să corespundă și codificării utf-8 selectate. De regulă, diverse editoare de text au setări adecvate pentru setarea codificării. De exemplu, în Notepad++ trebuie să mergeți la meniul Codificări și să selectați elementul din lista care se deschide. Convertiți în UTF-8 fără BOM:
După aceea, în linia de stare va fi posibil să se vadă UTF-8 fără BOM , care va indica faptul că codificarea dorită este setată.
Salvați și deschideți fișierul index.html in browser:
Astfel, am creat primul document HTML5. Deoarece am specificat titlul „Document HTML5” în elementul titlu, acesta este titlul pe care îl va avea fila browser.
Deoarece este specificată codarea utf-8, browserul web va afișa corect caractere chirilice.
Și vom vedea tot textul definit în interiorul elementului body în câmpul principal al browserului.
Presupunem că sunteți familiarizat cu limbajul HTML și știți ce sunt etichetele și ce rol joacă acestea într-un document HTML. Dacă ceva nu este clar, poți să te uiți. În ceea ce privește metaeticheta, trebuie reținut următoarele: în primul rând, toate metaetichetele sunt scrise în , în al doilea rând, trebuie să fie situate după și în al treilea rând, nu sunt elemente pereche și nu trebuie să fie închise.
Acum să aruncăm o privire mai atentă la aceste metaetichete. Trebuie remarcat faptul că în acest articol, metaetichetele sunt descrise în ordinea descrescătoare a importanței. Se crede că la crearea site-urilor, succesiunea meta-etichetelor din codul HTML al paginii nu contează, totuși, chiar dacă acesta este cazul, atunci prin aranjarea lor în aceeași ordine în care sunt descrise în acest articol, nu vei pierde nimic și poate te joci. Asadar, haideti sa începem.
Descriere
Aceasta este o metaetichetă foarte importantă. Ceea ce este specificat în atributul conținut va fi afișat pe pagina cu rezultatele căutării a multor motoare de căutare. Și, prin urmare, dacă utilizatorului final nu îi place descrierea, atunci nu va fi interesat de site-ul tău.
Cuvinte cheie
Etichetă meta importantă. Deși importanța sa a scăzut recent, unele motoare de căutare încă extrag informații despre site-ul dvs. din această etichetă. Cuvintele și expresiile cheie trebuie selectate după o cercetare adecvată. Acestea pot fi verificări de căutare, servicii speciale ale motoarelor de căutare și obținerea de cuvinte cheie din liste speciale care sunt distribuite gratuit și nu vor fi deloc greu de găsit. Când scrieți cuvinte cheie, principalul lucru este să nu exagerați, altfel, dacă există prea multe repetări de cuvinte cheie și fraze, motoarele de căutare vor considera acest lucru drept spam de căutare și vor interzice site-ul dvs. Când compilați cuvinte cheie, încercați să nu depășiți bara de 500-800 de caractere.
Abstract
Există multe opinii contradictorii despre importanța acestei meta-etichete și oportunitatea utilizării sale. Alternativ, puteți copia conținutul etichetei de descriere, modificându-l puțin.
roboți
O metaetichetă foarte importantă care informează robotul motorului de căutare cum să se ocupe de această pagină web și cu toate paginile care sunt legate de ea. Următoarele directive sunt utilizate ca valoare în atributul conținut:
- index - indexați această pagină web,
- follow - indexează toate paginile web către care această pagină are link-uri,
- toate - două directive de top în același timp,
- noindex - nu indexați pagina web,
- nofollow - nu urmați link-urile de pe această pagină web.
În acest caz, puteți specifica două directive în același timp, separându-le cu o virgulă (de exemplu, noindex,nofollow).
Subiect
Această metaetichetă are scopul de a seta tipul de date prezentate pe această pagină web. În teorie, pe baza acestei descrieri, robotul motorului de căutare ar trebui să plaseze pagina dvs. web într-o categorie sau alta. Din păcate, fiecare motor de căutare are propriul său sistem dezvoltat de clasificare a paginilor web.
Tipul paginii
Scopul acestei etichete meta este exact același cu scopul etichetei meta anterioare, așa că este logic să introduceți aceiași termeni aici.
Titlul și subiectul paginii
Ambele metaetichete sunt similare, motiv pentru care sunt descrise într-o singură secțiune. Aici totul este destul de clar din sintaxa acestor meta-etichete. Poate fi recomandat să copiați textul din și să-l plasați în atributul conținut.
Revedeți
Dacă informațiile de pe site-ul dvs. sunt actualizate frecvent, atunci această metaetichetă este foarte importantă pentru dvs. Acesta informează roboții motoarelor de căutare după câte zile ar trebui să reindexeze o anumită pagină web. Există o metaetichetă alternativă - revisit-after, care este complet identică cu această metaetichetă, dar este folosită mai rar.
Poate că acestea sunt toate metaetichetele principale care vă permit să descrieți o pagină web. Deși există multe alte atribute și valori pentru metaeticheta, scopul lor depășește scopul acestui articol.
Laboratorul #1
„Crearea unui document HTML simplu. Formatarea textului"
Obiectiv
Aflați structura unui document html, etichetele de formatare a textului de bază și utilizați-le atunci când creați o pagină web.
Noțiuni de bază pentru crearea paginilor web
HTML Hypertext Markup Language
Creați un document simplu
Baza dezvoltării paginilor web este limbajul HTML (HyperText Markup Language - hypertext markup language).
Unitatea structurală de bază a limbajului HTML este eticheta (din engleză Tag - descriptor, marcator). Eticheta este întotdeauna cuprinsă între paranteze< >si are urmatoarea forma:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ>
Etichetele sunt simple și container. O pereche se numește container: deschidere<ТЕГ>si inchidere.
Eticheta de deschidere este folosită pentru a indica programului browser începutul unui obiect sau pentru a seta proprietățile obiectelor plasate într-un container. Eticheta de închidere este folosită pentru a indica browserului sfârșitul obiectului sau sfârșitul aplicării proprietăților specificate în eticheta de deschidere.
Atributele etichetelor stabilesc valorile proprietăților obiectului sau obiectelor date plasate în container.
Un document HTML începe cu o etichetă de pornire și se termină cu o etichetă de închidere. Între această pereche de etichete container se află alte două părți principale ale documentului HTML: antetul, inclus în container
...și corpul documentului în container ...(conținutul paginii). În secțiunea descriere titlu, puteți specifica titlul documentului, pentru aceasta folosiți etichetaDeci, structura unui document HTML simplu arată cam așa:
(începutul paginii)
(descrierea paginii, titlu)(etichetă de descriere a titlului privat)
(conținutul paginii)text
(etichetă de descriere a paginii închise)
(sfârșitul paginii)
Formatarea textului
- o etichetă care definește limitele corpului documentului.Atribute:
BGCOLOR - Specifică culoarea de fundal a documentului. Valoarea implicită este „Alb” (#FFFFFF).
TEXT - setează culoarea textului pentru întreaga pagină. Culoarea este specificată în format RGB sau prin constantele roșu, verde, albastru etc. Valoarea implicită este „negru” (#000000).
Tabelul 1 listează numele culorilor definite în standardul HTML 4 și codurile RGB corespunzătoare. Rețineți că multe browsere moderne depășesc standardele și acceptă mai multe nume de culori.
tabelul 1
| Nume | Codul | Nume | Codul |
| Aqua | #00FFFF | marina | #000080 |
| Negru | #000000 | măsline | #808000 |
| Albastru | #0000FF | Violet | #800080 |
| Fucsie | #FF00FF | roșu | #FF0000 |
| gri | #808080 | Argint | #C0C0C0 |
| Verde | #008000 | teal | #008080 |
| lămâie verde | #00FF00 | alb | #FFFFFF |
| maro | #800000 | galben | #FFFF00 |
Atribute:
ALIGN - aliniere. Valori posibile: RIGHT - alinierea la dreapta a textului; CENTRU - în centru; STÂNGA - stânga; JUSTIFICARE - în lățime.
<Н1> …<Н6> - rubrici de diferite niveluri (de la primul la al şaselea).
Titlul celui de-al doilea nivel cu aliniere la centru.
<НR>- linie orizontală
Atribute:
ALIGN - aliniere.
WIDTH - lungimea liniei ca procent din fereastra browserului sau pixeli
SIZE - lățimea liniei ca procent din fereastra browserului sau pixeli
CULOARE - culoarea liniei.
Opțiuni suplimentare de formatare:
Text îngroșat;
- text italic;
- efect de subliniere;
- efect de trecere.
- folosit pentru a specifica stilul fontului în document.
Atribute:
SIZE - dimensiunea fontului.
CULOARE - culoarea fontului.
FACE este un tip de literă.
<Р> Linia roșie este scrisă în ARIAL 4 dimensiuni
Crearea listelor
Există patru tipuri principale de liste într-un document HTML:
- numerotate
- marcat
- liste imbricate
- lista de definitii
Fragmentul de text care reprezintă lista este inclus în etichete:
Lista ordonată (lista ordonată);
lista neordonata;
< LI>…. liste imbricate;
- ….
Lista de definiții este folosită pentru a crea liste de tipul „termen” - „descriere”. Fiecare termen începe cu o etichetă
Fiecare element al listei este inclus în etichete
Etichetă
- pot avea optiuni:
- pot avea optiuni:
sau
TIP Tipul marcatorului (vezi
- ) sau contor (vezi OL)
VALUE=n Valoare pentru elementul de listă numerotat (numărul acestuia). Toate celelalte numere de elemente ale listei vor fi numărate din acest număr.
Crearea unui document HTML în Notepad Text Editor
Pentru a crea un document HTML în editorul de text Notepad, urmați acești pași:
1. Lansați editorul de text Notepad (Start > Programe > Accesorii > Notepad).
2. Creați o structură tipică a unui document HTML și introduceți text.
Orez. 1. Crearea unui document HTML într-un editor de text Notepad
4. Închideți Notepad. Găsiți fișierul first.html și deschideți-l cu un browser de internet.
Orez. 2. Ilustrarea documentului în browserul de internet.
Dacă deschideți orice pagină web, aceasta va conține elemente tipice care nu se schimbă în funcție de tipul și direcția site-ului. Exemplul 4-1 arată codul pentru un document simplu care conține etichete de bază.
Exemplul 4.1. Codul sursă al paginii web
Exemplu de pagină web antet
Primul paragraf.
Al doilea paragraf.
Copiați conținutul acestui exemplu și salvați-l în folderul c:\www\ ca example41.html. După aceea, lansați browserul și deschideți fișierul prin elementul de meniu Fișier > Deschideți fișier (Ctrl+O). În dialogul de selecție a documentului, specificați fișierul example41.html. Pagina web prezentată în fig. 4.1.
Orez. 4.1. Rezultatul rulării exemplului
Elementeste destinat să indice tipul documentului curent - DTD (definiție tip document, descriere tip document). Acest lucru este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni, în plus, există XHTML (EXtensible HyperText Markup Language, limbaj de marcare hipertext extins), similar cu HTML, dar diferit ca sintaxă. Pentru ca browserul „să nu se încurce” și să înțeleagă în funcție de ce standard să afișeze pagina web, este necesar să se stabilească în prima linie de cod .
Există mai multe tipuri, ele diferă în funcție de versiunea HTML pe care o vizează. În tabel. 4.1. sunt date principalele tipuri de documente cu descrierea lor.
Tab. 4.1. DTD-uri valide
DOCTYPE Descriere HTML 4.01 Sintaxă HTML strictă. Sintaxă HTML tranzițională. Cadrele sunt folosite într-un document HTML. HTML 5 Această versiune de HTML are un singur tip de document. XHTML 1.0 Sintaxă XHTML strictă. Sintaxă XHTML de tranziție. Documentul este scris în XHTML și conține cadre. XHTML 1.1 Dezvoltatorii XHTML 1.1 se așteaptă ca acesta să înlocuiască treptat HTML. După cum puteți vedea, această definiție nu are o împărțire în tipuri, deoarece sintaxa este aceeași și se supune unor reguli clare. Diferența dintre descrierile stricte și tranzitorii ale documentelor este abordarea diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și nu iartă greșelile. HTML tranzițional este mai „liniștit” cu privire la unele defecte de cod, așa că acest tip este de preferat în anumite cazuri.
De exemplu, HTML și XHTML strict necesită eticheta
, dar în HTML tranzițional poate fi omis și nu specificat. În același timp, rețineți că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. O astfel de validare se realizează folosind un validator și este destinată în primul rând dezvoltatorilor să urmărească erorile dintr-un document.</p> <p>În cele ce urmează, vom folosi în principal strictul<!DOCTYPE>, cu excepția cazurilor în care este specificat în mod expres. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.</p> <p>Este adesea posibil să găsiți cod HTML fără a utiliza niciunul<!DOCTYPE>, pagina web va fi în continuare afișată într-un astfel de caz. Cu toate acestea, se poate întâmpla ca același document să fie afișat diferit în browser în timpul utilizării<!DOCTYPE>si fara ea. În plus, browserele pot afișa astfel de documente în felul lor, ca urmare, pagina se va „fărâmi”, adică. va fi afișat într-un mod complet diferit, așa cum este cerut de dezvoltator. Pentru a evita astfel de situații, adăugați întotdeauna<!DOCTYPE>până la începutul documentului.</p><p>Etichetă <html>definește începutul fișierului HTML, antetul este stocat în interiorul acestuia ( <head>) și corpul documentului ( <body> ).</p><p>Titlul documentului, așa cum se mai numește și blocul <head>, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, cu excepția containerului <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etichetă <meta>este universal și adaugă o întreagă clasă de caracteristici, în special, cu ajutorul meta-etichetelor, așa cum se numește în general această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele. Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (format de transformare Unicode, format de transformare Unicode) și se adaugă această linie.</p><p> <title>Exemplu de pagină web Etichetă
definește titlul unei pagini web, acesta este unul dintre elementele importante menite să rezolve multe probleme. În sistemul de operare Windows, textul titlului este afișat în colțul din stânga sus al ferestrei browser (Fig. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Orez. 4.2. Vedere antet în browser</p> <p>Etichetă <title>este obligatoriu și trebuie să fie prezent în codul documentului.</p><p>Asigurați-vă că adăugați o etichetă de închidere</head> pentru a indica faptul că blocul de titlu al documentului este complet.</p><p>Corpul documentului <body>este destinat plasării de etichete și conținutului paginii web.</p><p> <h1>antet</h1> </p><p>HTML oferă șase niveluri diferite de titluri de text care indică importanța relativă a secțiunii care urmează titlului. da, eticheta <h1>reprezintă cel mai important titlu de prim nivel și eticheta <h6>servește la desemnarea unui titlu de nivelul șase și este cel mai puțin semnificativ. În mod implicit, titlul de primul nivel este afișat cu cel mai mare font aldine, titlurile de nivelul următor sunt mai mici. Etichete <h1>...<h6>sunt elemente la nivel de bloc, ele încep întotdeauna pe o linie nouă, iar după ele apar alte elemente pe linia următoare. În plus, se adaugă un spațiu liber înainte și după titlu.</p><p> <!-- Комментарий --> </p><p>Un text poate fi ascuns pentru afișarea în browser, făcându-l un comentariu. Deși utilizatorul nu va vedea un astfel de text, acesta va fi totuși transmis în document, așa că, privind codul sursă, puteți găsi note ascunse.</p> <p>Introducere în HTML</p> <h3>In acest capitol:</h3> <i> </i><p>De fiecare dată când deschideți browserul, sunteți direcționat către un site web, care poate consta dintr-una sau mai multe pagini web cu informații diferite. Tehnologia principală pentru crearea unor astfel de pagini web este limbajul. <b>HTML</b>.</p> <h2>Cum obține browserul pagini web?</h2> <p>Pentru o înțelegere generală, să ne uităm la o mică teorie despre modul în care un browser primește pagini web și ce este un server web. Pentru a obține o pagină web, trebuie să creați un fișier scris în HTML și să îl puneți pe un server web. După ce ați plasat fișierul creat pe un server web, orice browser va putea găsi pagina dvs. web prin Internet. Un server web este un computer obișnuit cu acces la Internet care rulează în mod constant și așteaptă solicitări de la browsere. Orice server stochează pagini web, imagini, fișiere audio și alte tipuri de fișiere. Când serverul primește o solicitare de la un browser pentru o resursă (imagini, pagini web etc.), găsește resursa respectivă (dacă poate localiza resursa) și o trimite browserului.</p> <p><img src='https://i1.wp.com/web.ryusupov.com/images/html/web-server.png' width="100%" loading=lazy loading=lazy></p> <p>Știi deja cum funcționează un browser: navighezi prin diverse site-uri de pe Internet, făcând clic pe linkuri pentru a accesa diferite pagini. Acest clic face ca browserul dvs. să solicite o pagină HTML către un server web, să primească un răspuns la cererea acestuia și să afișeze pagina respectivă în fereastra sa.</p> <p>Dar cum știe browserul exact cum să redeze pagina? Aici intervine HTML-ul. Spune browserului totul despre conținutul și structura paginii. Dacă îți faci treaba bine (codul este scris corect și fără erori), atunci paginile tale se vor afișa la fel în toate browserele.</p> <p>Notă: Browser (din engleză. <b>browser web</b>- Browser web) - software folosit pentru navigarea pe site-uri web, adică pentru solicitarea de pagini web (în principal de pe Web - Internet), prelucrarea acestora, afișarea lor într-o fereastră de browser și trecerea de la o pagină la alta. Cele mai populare browsere includ: <b>Internet Explorer</b>, <b>Mozilla Firefox</b>, <b>Google Chrome</b>, <b>safari</b>, <b>Operă</b>.</p> <p><b>Notă:</b>în timpul antrenamentului, nu trebuie să puneți nicio pagină pe un server web, totul va funcționa bine pe computerul dvs. local.</p> <p>Înainte de a continua, să vedem pentru ce este un editor HTML, ce este un document HTML și cum să creați unul.</p> <h2>De ce ai nevoie de un editor HTML?</h2> <p>Puteți edita documente HTML într-un document text obișnuit, dar este mai convenabil să faceți acest lucru, desigur, în editoare HTML speciale. Editorul HTML este unul dintre instrumentele principale pentru crearea și editarea paginilor web și a site-ului în ansamblu. Principalul avantaj al editorilor față de un blocnotes obișnuit este că oferă evidențierea codului, ceea ce, la rândul său, face mai ușor și mai rapid editarea codului necesar.</p> <p>Există multe editoare HTML plătite și gratuite, cele mai frecvent utilizate sunt cele plătite <b>țesător de vise</b>, <b>Studio vizual</b>Și <b>PHPStorm</b>. Ca editori gratuiti, puteți folosi <b>notepad++</b>Și <b>geany</b>.</p> <h2>Ce este un document HTML?</h2> <p><b>Document HTML</b> este un fișier text simplu cu extensia <b>.html</b>, care conține codul HTML. Următoarele informații vor fi descrise pentru cei care nu știu cum să salveze fișiere cu extensia dorită.</p> <p><b>Windows:</b><br>Pentru a crea un document HTML dintr-un fișier text, trebuie doar să salvați fișierul sub o extensie diferită, acest lucru se poate face în două moduri:</p> <ol><li>Într-un editor deschis (sau într-un document text obișnuit), apăsați <b><i>fişier</i> </b>→ selectați <b><i>Salvează ca</i> </b>→ în partea de jos a casetei de text <b><i>Nume de fișier:</i> </b> scrie de exemplu astfel: mypage.html → click <b><i>salva</i> </b>. Asta e, documentul HTML a fost creat.</li> <li>Click dreapta ( <b>PKM</b>) pe un fișier text → selectați <b><i>redenumiți</i> </b>și schimbați extensia de la <b><i>.txt</i> </b> pe <b><i>.html</i> </b>. Pentru a folosi această metodă, trebuie să ne asigurăm că în mod implicit toate fișierele au extensiile lor disponibile, acest lucru se face după cum urmează: faceți clic pe <b><i>start</i> </b>→ deschis <b><i>Panou de control</i> </b>→ selectați <b><i>Setări foldere</i> </b>→ fila <b><i>Vedere</i> </b>→ derulați în jos și debifați <b><i>Ascunde extensiile pentru tipurile de fișiere cunoscute</i> </b>.</li> </ol><p>Există două moduri de a deschide un fișier salvat cu extensia .html pentru vizualizare într-un browser:</p> <ol><li>Faceți dublu clic pe el cu butonul stâng al mouse-ului, în acest caz pagina web se va deschide în browserul care este selectat implicit.</li> <li>Faceți clic dreapta pe el → treceți cursorul peste <b><i>a deschide cu...</i> </b>→ selectați browserul de care aveți nevoie.</li> </ol><p>La primirea unui document HTML, browserul îl va afișa ca pagină web ( <b>pagină web</b> este ceea ce este afișat în fereastra browserului), și nu veți vedea etichetele pe care le scrieți să apară în fereastra browserului dvs., deoarece acestea vor fi interpretate pentru a afișa conținutul paginii în forma de care aveți nevoie.</p><p> <!doctype html> <html> <head> <meta charset="utf-8"> <title>antet Primul meu titlu
Primul meu paragraf
TYPE= determină tipul de numerotare, START= stabilește valoarea inițială a primului element al listei (indiferent de tip este indicat printr-un număr).
TIP=A – marcatori sub formă de litere mari latine;
TIP=a – marcatori sub formă de litere latine mici;
TIP=I - marcatoare sub formă de cifre romane mari;
TIP=i - marcatoare sub formă de cifre romane mici;
TIP=1 – marcatori sub formă de cifre arabe (implicit).
Etichetă
- poate avea un parametru:
Tipul etichetei
- definește aspectul markerului ca implicit (disc), rotund (cerc) sau pătrat (pătrat).
Etichetă