Bazele HTML conțin reguli de bază limbaj HTML, descrierea structurii unei pagini HTML, relații în structura unui document HTML între elementele HTML.
Documentul HTML este un document text obișnuit, poate fi creat ca într-un editor de text obișnuit (Caiet), iar în specialitate, cu evidențierea codului (Notepad ++, Cod Visual Studio etc.)... Documentul HTML are extensia .html.
Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este notat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).
Eticheta de pornire arată unde începe elementul, sfârșitul - unde se termină. Etichetă de final este format prin adăugarea unei bare oblice / înainte de numele etichetei:<имя тега> … ... Între etichetele de început și de sfârșit se află conținutul etichetei - conținut.
Etichetele unice nu pot stoca conținut direct în sine, este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu text Buton interior.
Etichetele pot fi imbricate unele în altele, de exemplu,
Text
... Când investiți, ar trebui să urmați ordinea de închidere (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:Text
.Elementele HTML pot avea atribute (globale, care se aplică tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a unui element și conțin un nume și o valoare specificate în formatul atribut nume = „valoare”. Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.
Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori ale clasei sunt separate printr-un spațiu,
Browserul vizualizează (interpretează) un document HTML, construindu-i structura (DOM) și afișându-l conform instrucțiunilor incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, atunci fereastra browserului va afișa o pagină HTML care conține elemente HTML - anteturi, tabele, imagini etc.
Procesul de interpretare (analizare)începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează documentele HTML secvenţial de la început, în timp ce procesează CSS şi corelează foile de stil cu elementele paginii.
Documentul HTML este format din două secțiuni - titlu - între etichete
… iar partea de conținut - între etichete … .Structura paginii web
1. Structura documentului HTML
HTML urmează regulile găsite în fișierul de declarare a tipului de document (Definiția tipului de document sau DTD)... Un DTD este un document XML care definește ce etichete, atribute și valorile acestora sunt valabile pentru un anumit tip HTML. Fiecare versiune HTML are propriul DTD.
DOCTYPE este responsabil pentru afișarea corectă a paginii web de către browser. DOCTYPE definește nu numai versiunea HTML (cum ar fi html), ci și fișierul DTD corespunzător de pe Internet.
Elemente din interiorul etichetei , formează un arbore de documente, așa-numitul model obiect document (DOM)... În acest caz, elementul este elementul rădăcină.
Orez. 1. Cea mai simplă structură a unei pagini web Pentru a înțelege interacțiunea elementelor unei pagini web, este necesar să luați în considerare așa-numitul "Relatii de familie"între elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate ca părinte, copil și frați.
Strămoş- un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este ... În același timp, elementul
este strămoșul tuturor etichetelor pe care le conține:,
, ,
Descendent- un element situat în cadrul unuia sau mai multor tipuri de elemente. De exemplu,
este un descendent și elementEste un descendent în același timp pentru
și .Element părinte- un element asociat cu alte elemente de un nivel inferior, și situat în arborele de deasupra acestora. figura 1
și ... EtichetăPărinte numai pentru .
Element copil - un element subordonat direct altui element de nivel superior. În figura 1, doar elementele
, ,
ȘI
Element de nursing- un element care are un părinte comun cu cel considerat, așa-zișii frați. figura 1
și - elemente de același nivel, precum și elemente , și
Sunt surori între ele.
1.1. Element
1.2. Element
Capitol
... conține informații tehnice despre pagină: titlu, descriere, cuvinte cheie pentru motoarele de căutare, codificare etc. Informațiile introduse în acesta nu apar în fereastra browserului, dar conțin date care îi spun browserului cum să gestioneze pagina.1.2.1. Element </h4>
<p>Eticheta de secțiune necesară <head>este eticheta <title>... Textul plasat în interiorul acestei etichete este afișat în bara de titlu a browserului web. Titlul nu trebuie să aibă mai mult de 60 de caractere pentru a se încadra complet în titlu. Textul titlului trebuie să conțină o descriere cât mai completă a conținutului paginii web.</p>
<h4>1.2.2. Element <meta></h4>
<p>Etichetă de secțiune opțională <head>este o singură etichetă <meta>... Poate fi folosit pentru a seta o descriere a conținutului paginii și a cuvintelor cheie pentru motoarele de căutare, autorul documentului HTML și alte proprietăți de metadate. Element <head>poate conține mai multe elemente <meta>deoarece, în funcție de atributele folosite, ele poartă informații diferite.</p><p>
<meta name="description" content="Descrierea conținutului paginii">
<meta name="keywords" content="Cuvinte cheie separate prin virgule">
</p><p>Descrierea conținutului paginii și a cuvintelor cheie pot fi specificate simultan în mai multe limbi, de exemplu, în rusă și engleză:</p><p>
<meta name="description" lang="ru" content="Descrierea conținutului paginii">
<meta name="description" lang="en" content="Descriere">
<meta name="keywords" lang="ru" content="Cuvinte cheie separate prin virgule">
<meta name="keywords" lang="en" content="Cuvinte cheie">
</p><p>Folosind eticheta <meta>puteți interzice sau permite indexarea unei pagini web de către motoarele de căutare:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Pentru a reîncărca automat pagina după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:</p><p>
<meta content="30">
</p><p>Pagina se va reîncărca în 30 de secunde. Pentru a trimite un vizitator la o altă pagină, trebuie să specificați adresa URL în parametrul URL:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tabelul 2. Atributele etichetei <meta>
<tbody><tr><th style="width: 20%;">Atribut</th>
<th></th>
</tr><tr><td>set de caractere</td>
<td>Specifică codificarea caracterelor pentru documentul HTML curent: <meta charset="UTF-8">
</td>
</tr><tr><td>conţinut</td>
<td>Conține text liber care definește valoarea asociată cu atributul http-equiv sau name, în funcție de valoarea acestora.</td>
</tr><tr><td>http-echiv</td>
<td>Controlează acțiunile browserului pe o anumită pagină web (echivalent cu anteturile HTTP). La randarea paginii, browserul va urma instructiunile date in atribut: <br>default-style indică stilul preferat pentru utilizare pe pagină. Atributul de conținut trebuie să conțină id-ul elementului <link>care se referă la o foaie de stil CSS sau la un id de element<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
folosind element ... Elementul nu necesită o etichetă de final. Acest element definește relația dintre pagina curentă și alte documente. Pot exista mai multe astfel de elemente pe pagină. Intrarea va arăta astfel:
| Atribut | Descriere, valoare acceptată |
|---|---|
| origine încrucișată | Specifică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse de pe un alt domeniu) ar trebui utilizată atunci când se preia o imagine de pe un site. anonim - browser-ul adaugă automat antetul Origin la cererea între domenii, care conține numele domeniului din care a fost făcută cererea. Dacă serverul nu răspunde cu antetul Access-Control-Allow-Origin: * CORS (sau numele domeniului în loc de asterisc), încărcarea imaginii va fi blocată. use-credentials - dacă serverul nu furnizează acreditări utilizând Access-Control-Allow-Credentials: true, atunci încărcarea imaginii va fi blocată. |
| href | Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri. |
| hreflang | Determină limba textului din documentul de referință. |
| mass-media | Specifică tipul de dispozitiv la care ar trebui să fie aplicată resursa de legătură. |
| nonce | O variabilă șir generată aleatoriu pe server care specifică regulile de utilizare a stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text. |
| rel | Atributul definește relația dintre documentul curent și documentul referit. alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini imprimabile, traducere, oglindă, flux RSS sau Atom), . arhive – indică faptul că documentul la care se face referire este de interes istoric. Linkul poate indica o colecție de înregistrări, documente și alte materiale. autor este un link către pagina despre autorul documentului sau către pagina cu datele de contact ale autorului. marcajul se referă la cel mai apropiat strămoș al articolului care este linkul de legătură sau la secțiunea articolului care este cel mai strâns legată de element dacă nu există niciun părinte. extern este folosit pentru a indica faptul că pagina legată nu face parte din acest site. mai întâi specifică o legătură care duce la primul document dintr-o secvență de documente. ajutor este un link către un document cu ajutor. pictograma definește calea către pictograma care va fi utilizată pentru documentul curent. last specifică o legătură care duce la ultimul document din secvența documentului. licența se referă la informațiile privind drepturile de autor pentru document. în continuare indică faptul că acest document face parte dintr-o serie și că linkul duce la următorul document din serie. nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este de natură comercială. noreferrer indică faptul că antetul cererii client care conține url-ul sursei solicitării nu trebuie transmis atunci când faceți clic pe link. pingback specifică adresa serverului de pingback, ceea ce face posibil ca blogul să notifice automat site-urile care leagă la acesta. prefetch specifică faptul că fișierul de legătură ar trebui să fie stocat în cache în prealabil. prev indică faptul că acest document face parte dintr-o serie și că linkul indică documentul anterior din serie. căutare indică faptul că documentul la care se face referire conține o interfață de căutare și resurse asociate. bara laterală indică faptul că documentul la care se face referire, dacă este posibil, va fi afișat într-un context suplimentar de browser, iar unele browsere, când fac clic pe hyperlink, deschide o fereastră pentru a adăuga linkul la bara de marcaje. foaia de stil este un link către un fișier extern care va fi folosit ca foaie de stil pentru acest document. eticheta indică faptul că eticheta către care indică hyperlinkul este pentru documentul dat. sus indică faptul că pagina face parte dintr-o structură ierarhică și că hyperlinkul duce la un nivel superior al resursei din structură. |
| dimensiuni | Specifică dimensiunea pictogramelor pentru afișarea vizuală. Atributul sizes este folosit numai împreună cu rel = „icoană” și poate lua următoarele valori: lățimi înălțime - definește o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în format - lățimi înălțime (dimensiunile pictogramei sunt setate în pixeli), de exemplu: ; orice - pictograma poate fi scalată la orice dimensiune. |
| titlu | Specifică titlul link-ului sau numele unui set de foi de stil alternative. Valoarea atributului este text. |
| tip | Specifică tipul MIME al documentului la care se face referire. În acest caz, ia valoarea „text / css”. |
1.2.5. Element
Această etichetă vă permite să separați textul programului script de alte informații de pe pagină. Eticheta SCRIPT include în mod necesar atributul limbaj, care definește limba și poate lua următoarele valori:
- javascript - cod JavaScript;
- vbscript - cod VBScript.
Atributul type poate indica și tipul limbii, deși utilizarea acestuia este opțională. Pentru a nu încălca toate regulile, în interiorul elementului poate fi plasată următoarea definiție:
tip = "text / javascript"
Unul dintre cele mai tari lucruri despre scripting este capacitatea de a schimba conținutul paginii ca urmare a execuției programului. Dar aceasta este doar o caracteristică, nu o regulă. Atributul defer (care nu are nicio valoare) spune browserului că nu se va face o astfel de modificare. În unele cazuri, acest lucru poate accelera încărcarea paginii.
Atributul charset poate fi folosit din atributele standard.
Eticheta SCRIPT ( sau o serie de astfel de elemente) poate fi amplasat atât în interiorul elementului HEAD cât și în interiorul elementului BODY. Dacă scriptul se află în interiorul elementului BODY, este de asemenea posibil ca un browser care nu acceptă elementul SCRIPT să interpreteze codul programului ca text simplu și să îl afișeze pe ecran. Pentru a preveni acest lucru, codul de script este introdus ca comentariu:
-
-
-
Tot browsere moderne recunoașteți această tehnică și ignorați caracterele de comentariu. Dacă trebuie să introduceți un comentariu în textul scriptului, atunci se folosește o desemnare diferită pentru aceasta: la începutul liniei, introduceți două bare oblice //.
Cod program scriptul este executat când pagina este încărcată, adică. când conținutul său este încă vizibil pe ecran. Mai jos este un exemplu de cel mai simplu scenariu ( afișarea unui mesaj într-o fereastră).
-
-
-
-
-
-
-
-
aceasta pagina simpla dar include un script cu o singură linie. Utilizând metoda de alertă, este afișat un mesaj înainte de încărcare. Și se va bloca până când utilizatorul face clic pe butonul OK, descărcarea nu va continua.
Poate exista un caz, de exemplu, pagina va fi vizualizată într-un browser care nu acceptă scripting, pentru aceasta este furnizat elementul NOSCRIPT. Telespectatorii moderni ignoră conținutul acestuia. Acest element poate fi folosit în mai multe moduri. Pentru început, puteți afișa o declarație ca următoarea în interiorul acesteia: „ Browserul dumneavoastră nu poate executa scriptul necesar pentru a vizualiza această pagină web!„În al doilea rând, în interiorul elementului, poți dezvolta o versiune simplificată a paginii, fără scripturi. În al treilea rând, puteți conecta la un alt document HTML. Elementul NOSCRIPT trebuie să fie furnizat cu o etichetă de capăt.
Iată-ne cu tine și luăm în considerare elementele de bază ale unui astfel de lucru limba WEB-programare ca HTML. Chiar și după ce ați citit acest scurt articol, aveți deja o idee și chiar și capacitatea de a programa în acest limbaj. Noroc!
Am decis să acord mai multă atenție începătorilor care doresc să dobândească cunoștințe în domeniul construcției de șantier. Profesorul meu m-a împins la asta, care a făcut prea multe greșeli în manualele pentru munca de laborator. Aș arunca cu plăcere o privire la resursa din care a fost luată infa educațională și aș lăsa 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
Etichetă
informează că pornește structura documentului html,
- ce se termină. Între etichete
majoritatea informațiilor sunt stocate pentru browser și motoarele de căutare. În etichete
Acum am sa explic putin. Toate etichetele ( tag - un element al limbajului de marcare hipertext) sunt împărțite în două tipuri „singure” și „închidere”. În plus, etichetele sunt incluse în următoarele caractere < și > , ei sunt cei care disting eticheta din text simplu html... Să ne uităm la unele dintre cele mai simple etichete „single”:
- o etichetă care este responsabilă pentru împachetarea la o nouă linie, în locul în care este instalată această etichetă. Să aruncăm o privire la codul folosind această etichetă.
Și acesta este primul meu site.
Puteți vedea rezultatul.
Este o etichetă care desenează o linie orizontală. Această etichetă se referă la elemente de bloc, linia începe întotdeauna pe o linie nouă. Are 5 atribute:
- align - Determină alinierea liniei. Poate fi setat la 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
:
Și acesta este primul meu site.
Se găsește un exemplu vizual.
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. Este permis un număr nelimitat de metaetichete, toate trebuie să fie între și ... Parametrii oricărei metaetichete au forma „nume = valoare”, care este definită Cuvinte cheie conţinut, Nume sau http-echiv... pentru că metaetichetele sunt pentru mașini, nu fac nicio modificare vizuală, așa că voi furniza doar codul sursă:
Această linie indică faptul că creatorul paginii consideră că pagina folosește codificarea UTF-8. Totul a devenit mai simplu în HTML5, pentru a specifica codificarea este suficientă următoarea linie:
Mai sunt și altele etichete unice (,
,