Bazat e HTML përmbajnë rregulla bazë gjuha HTML, përshkrimi i strukturës së një faqe HTML, marrëdhëniet në strukturën e një dokumenti HTML midis elementeve HTML.
Dokumenti HTML është një dokument i rregullt teksti, ai mund të krijohet si në një redaktues teksti të rregullt (Fletore), dhe të specializuara, me theksim të kodit (Notepad ++, Kodi i Visual Studio, etj.)... Dokumenti HTML ka ekstensionin .html.
Një dokument HTML përbëhet nga një pemë e elementeve HTML dhe tekstit. Çdo element shënohet në dokumentin burimor me një etiketë fillimi (hapjeje) dhe përfundimi (mbylljeje) (me përjashtime të rralla).
Etiketa e fillimit tregon se ku fillon elementi, mbarimi - ku mbaron. Etiketa e fundit formohet duke shtuar një prerje / përpara emrit të etiketës:<имя тега> … ... Midis etiketës së fillimit dhe të fundit është përmbajtja e etiketës - përmbajtje.
Etiketat e vetme nuk mund të ruajnë përmbajtjen drejtpërdrejt në vetvete, ajo shkruhet si një vlerë atributi, për shembull, një etiketë do të krijojë një buton me tekst Butoni brenda.
Etiketat mund të vendosen brenda njëra-tjetrës, për shembull,
Teksti
... Kur investoni, duhet të ndiqni rendin e mbylljes (parimi "matryoshka"), për shembull, hyrja e mëposhtme do të jetë e pasaktë:Teksti
.Elementet HTML mund të kenë atribute (globale, të cilat zbatohen për të gjithë elementët HTML, dhe të tyret). Atributet shkruhen në etiketën hapëse të një elementi dhe përmbajnë një emër dhe vlerë të specifikuar në formatin emri i atributit = "vlera". Atributet ju lejojnë të ndryshoni vetitë dhe sjelljen e elementit për të cilin janë vendosur.
Secilit element mund t'i caktohen vlera të shumta të klasës dhe vetëm një vlerë id. Vlerat e shumëfishta të klasave ndahen nga një hapësirë,
Shfletuesi shikon (interpreton) një dokument HTML, duke ndërtuar strukturën e tij (DOM) dhe duke e shfaqur atë sipas udhëzimeve të përfshira në këtë skedar (stilet, skriptet). Nëse shënimi është i saktë, atëherë dritarja e shfletuesit do të shfaqë një faqe HTML që përmban elemente HTML - titujt, tabelat, imazhet, etj.
Procesi i interpretimit (parim) fillon përpara se faqja e internetit të ngarkohet plotësisht në shfletues. Shfletuesit përpunojnë dokumente HTML në mënyrë sekuenciale që nga fillimi, ndërsa përpunojnë CSS dhe korrelojnë fletët e stilit me elementët e faqes.
Dokumenti HTML përbëhet nga dy seksione - titulli - midis etiketave
… dhe pjesa e përmbajtjes - midis etiketave … .Struktura e faqes në internet
1. Struktura e dokumentit HTML
HTML ndjek rregullat që gjenden në skedarin e deklarimit të llojit të dokumentit (Përkufizimi i llojit të dokumentit, ose DTD)... Një DTD është një dokument XML që përcakton se cilat etiketa, atribute dhe vlerat e tyre janë të vlefshme për një lloj të caktuar HTML. Çdo version HTML ka DTD-në e vet.
DOCTYPEështë përgjegjës për shfaqjen e saktë të faqes së internetit nga shfletuesi. DOCTYPE përcakton jo vetëm versionin HTML (si html), por edhe skedarin përkatës DTD në internet.
Elementet brenda etiketës , formojnë një pemë dokumenti, të ashtuquajturat Modeli i objektit të dokumentit (DOM)... Në këtë rast, elementi është elementi rrënjë.
Oriz. 1. Struktura më e thjeshtë e një faqe interneti Për të kuptuar ndërveprimin e elementeve të një faqe interneti, është e nevojshme të merren parasysh të ashtuquajturat "Marrëdhënia familjare" ndërmjet elementeve. Marrëdhëniet midis elementeve të shumëfishtë të mbivendosur kategorizohen si prind, fëmijë dhe vëlla.
Paraardhësi- një element që përmban elementë të tjerë. Në figurën 1, paraardhësi për të gjithë elementët është ... Në të njëjtën kohë, elementi
është paraardhësi i të gjitha etiketave që përmban:,
, ,
Pasardhës- një element i vendosur brenda një ose më shumë lloje elementesh. Për shembull,
është pasardhës dhe elementËshtë pasardhës në të njëjtën kohë për
dhe .Elementi prind- një element i lidhur me elementë të tjerë të një niveli më të ulët dhe i vendosur në pemën sipër tyre. Figura 1
dhe ... EtiketëPrindërit vetëm për .
Elementi fëmijë - një element i varur drejtpërdrejt nga një element tjetër i një niveli më të lartë. Në figurën 1, vetëm elementet
, ,
DHE
Element infermieror- një element që ka një prind të përbashkët me atë të konsideruar, të ashtuquajturit vëllezër e motra. Figura 1
dhe - elemente të të njëjtit nivel, si dhe elementë , dhe
Ato janë motra mes tyre.
1.1. Elementi
1.2. Elementi
Kapitulli
... përmban informacion teknik për faqen: titull, përshkrim, fjalë kyçe për motorët e kërkimit, kodim, etj. Informacioni i futur në të nuk shfaqet në dritaren e shfletuesit, por përmban të dhëna që i tregojnë shfletuesit se si të trajtojë faqen.1.2.1. Elementi </h4>
<p>Etiketa e kërkuar e seksionit <head>është etiketa <title>... Teksti i vendosur brenda kësaj etikete shfaqet në shiritin e titullit të shfletuesit të internetit. Titulli nuk duhet të ketë më shumë se 60 karaktere për t'u përshtatur plotësisht në titull. Teksti i titullit duhet të përmbajë një përshkrim sa më të plotë të përmbajtjes së faqes në internet.</p>
<h4>1.2.2. Elementi <meta></h4>
<p>Etiketa opsionale e seksionit <head>është një etiketë e vetme <meta>... Mund të përdoret për të vendosur një përshkrim të përmbajtjes së faqes dhe fjalë kyçe për motorët e kërkimit, autorin e dokumentit HTML dhe vetitë e tjera të meta të dhënave. Elementi <head>mund të përmbajë elementë të shumtë <meta>sepse, në varësi të atributeve të përdorura, ato mbartin informacione të ndryshme.</p><p>
<meta name="description" content="Përshkrimi i përmbajtjes së faqes">
<meta name="keywords" content="Fjalë kyçe të ndara me presje">
</p><p>Përshkrimi i përmbajtjes së faqes dhe fjalëve kyçe mund të specifikohet njëkohësisht në disa gjuhë, për shembull, në rusisht dhe anglisht:</p><p>
<meta name="description" lang="ru" content="Përshkrimi i përmbajtjes së faqes">
<meta name="description" lang="en" content="Përshkrim">
<meta name="keywords" lang="ru" content="Fjalë kyçe të ndara me presje">
<meta name="keywords" lang="en" content="Fjalë kyçe">
</p><p>Duke përdorur etiketën <meta>ju mund të ndaloni ose të lejoni indeksimin e një faqe interneti nga motorët e kërkimit:</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>Për të ringarkuar automatikisht faqen pas një periudhe të caktuar kohe, duhet të përdorni vlerën e rifreskimit:</p><p>
<meta content="30">
</p><p>Faqja do të ringarkohet për 30 sekonda. Për të dërguar një vizitor në një faqe tjetër, duhet të specifikoni URL-në në parametrin url:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tabela 2. Atributet e etiketës <meta>
<tbody><tr><th style="width: 20%;">atribut</th>
<th></th>
</tr><tr><td>grup karakteresh</td>
<td>Specifikon kodimin e karaktereve për dokumentin aktual HTML: <meta charset="UTF-8">
</td>
</tr><tr><td>përmbajtjen</td>
<td>Përmban tekst të lirë që përcakton vlerën e lidhur me atributin http-equiv ose emrin, në varësi të vlerës së tyre.</td>
</tr><tr><td>http-equiv</td>
<td>Kontrollon veprimet e shfletuesit në një faqe të caktuar ueb (ekuivalente me titujt HTTP). Kur jep faqen, shfletuesi do të ndjekë udhëzimet e dhëna në atributin: <br>default-style tregon stilin e preferuar për përdorim në faqe. Atributi i përmbajtjes duhet të përmbajë ID-në e elementit <link>që i referohet një fletë stili CSS, ose id elementi<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>
duke përdorur elementin ... Elementi nuk kërkon një etiketë fundore. Ky element përcakton marrëdhënien midis faqes aktuale dhe dokumenteve të tjera. Mund të ketë disa elementë të tillë në faqe. Hyrja do të duket kështu:
| atribut | Përshkrimi, vlera e pranuar |
|---|---|
| origjinë të kryqëzuar | Përcakton nëse CORS (një teknologji shfletuesi që lejon një faqe ueb të aksesojë burimet në një domen tjetër) duhet të përdoret kur të merret një imazh nga një sajt. anonim - shfletuesi shton automatikisht kokën e Origjinës në kërkesën për ndërdomain, që përmban emrin e domenit nga i cili është bërë kërkesa. Nëse serveri nuk përgjigjet me Access-Control-Allow-Origin: * Titulli CORS (ose emri i domenit në vend të një ylli), ngarkimi i imazhit do të bllokohet. use-credentials - nëse serveri nuk jep kredencialet duke përdorur Access-Control-Allow-Credentials: e vërtetë, atëherë ngarkimi i imazhit do të bllokohet. |
| href | Atributi kryesor i etiketës, vlera është rruga drejt skedarit me stile. |
| hreflang | Përcakton gjuhën e tekstit në dokumentin e referuar. |
| media | Përcakton llojin e pajisjes në të cilën duhet të aplikohet burimi i lidhjes. |
| asnjëherë | Një variabël vargu i gjeneruar rastësisht në server që specifikon rregullat për përdorimin e stileve inline për të mbrojtur përmbajtjen. Vlera e atributit është një varg teksti. |
| rel | Atributi përcakton marrëdhënien midis dokumentit aktual dhe dokumentit të referuar. alternative - një lidhje për të njëjtin dokument, por në një format të ndryshëm (për shembull, faqe të printueshme, përkthim, pasqyrë, RSS ose furnizim Atom), . arkivat - tregon se dokumenti i referuar është me interes historik. Lidhja mund të tregojë për një koleksion regjistrimesh, dokumentesh dhe materialesh të tjera. autori është një lidhje me faqen në lidhje me autorin e dokumentit ose në faqen me të dhënat e kontaktit të autorit. faqerojtësi i referohet paraardhësit më të afërt të artikullit që është lidhja lidhëse, ose seksionit të artikullit që lidhet më ngushtë me elementin nëse nuk ka prind. e jashtme përdoret për të treguar se faqja e lidhur nuk është pjesë e kësaj faqeje. së pari specifikon një lidhje që çon në dokumentin e parë në një sekuencë dokumentesh. ndihma është një lidhje me një dokument me ndihmë. ikona përcakton rrugën drejt ikonës që do të përdoret për dokumentin aktual. fundit specifikon një lidhje që çon në dokumentin e fundit në sekuencën e dokumentit. licenca i referohet informacionit të së drejtës së autorit për dokumentin. Next tregon se ky dokument është pjesë e një serie dhe se lidhja të çon në dokumentin tjetër të serisë. nofollow tregon se lidhja nuk është miratuar nga autori i faqes ose se lidhja është e një natyre komerciale. noreferrer tregon se titulli i kërkesës së klientit që përmban url-në e burimit të kërkesës nuk duhet të kalohet kur klikoni në lidhje. pingback specifikon adresën e serverit pingback, gjë që bën të mundur që blogu të njoftojë automatikisht faqet që lidhen me të. prefetch specifikon që skedari lidhës duhet të ruhet paraprakisht në memorien e fshehtë. prev tregon se ky dokument është pjesë e një serie dhe se lidhja tregon për dokumentin e mëparshëm në seri. kërkimi tregon se dokumenti i referuar përmban një ndërfaqe kërkimi dhe burime shoqëruese. shiriti anësor tregon se dokumenti i referuar, nëse është e mundur, do të shfaqet në një kontekst shtesë të shfletuesit dhe disa shfletues, kur klikoni mbi lidhjen, hapin një dritare për të shtuar lidhjen në shiritin e faqeshënuesve. Fleta e stilit është një lidhje me një skedar të jashtëm që do të përdoret si fletë stili për këtë dokument. etiketa tregon se etiketa ku tregon hiperlidhja është për dokumentin e dhënë. lart tregon se faqja është pjesë e një strukture hierarkike dhe se hiperlidhja çon në një nivel më të lartë të burimit në strukturë. |
| madhësive | Përcakton madhësinë e ikonave për shfaqjen vizuale. Atributi sizes përdoret vetëm në lidhje me rel = "icon" dhe mund të marrë vlerat e mëposhtme: gjerësia lartësi - përcakton një listë të madhësive të ndara sipas hapësirave, secila madhësi duhet të jetë në formatin - lartësia e gjerësisë (madhësitë e ikonave vendosen në piksel), për shembull: ; çdo - ikona mund të shkallëzohet në çdo madhësi. |
| titullin | Përcakton titullin e lidhjes ose emrin e një grupi fletësh stilesh alternative. Vlera e atributit është tekst. |
| lloji | Përcakton llojin MIME të dokumentit që referohet. Në këtë rast, ai merr vlerën "tekst / css". |
1.2.5. Elementi
Kjo etiketë ju lejon të ndani tekstin e programit të skriptit nga informacionet e tjera në faqe. Etiketa SCRIPT përfshin domosdoshmërisht atributin e gjuhës, i cili përcakton gjuhën dhe mund të marrë vlerat e mëposhtme:
- javascript - kod JavaScript;
- vbscript - kodi VBScript.
Atributi tip mund të tregojë gjithashtu llojin e gjuhës, megjithëse përdorimi i tij është fakultativ. Për të mos thyer të gjitha rregullat, mund të vendosni përkufizimin e mëposhtëm brenda elementit:
lloji = "tekst / javascript"
Një nga gjërat më interesante në lidhje me skriptimin është aftësia për të ndryshuar përmbajtjen e faqes si rezultat i ekzekutimit të programit. Por kjo është vetëm një veçori, jo një rregull. Atributi defer (i cili nuk merr asnjë vlerë) i tregon shfletuesit se nuk do të bëhet asnjë ndryshim i tillë. Në disa raste, kjo mund të përshpejtojë ngarkimin e faqes.
Atributi i grupit të karaktereve mund të përdoret nga atributet standarde.
Etiketa SCRIPT ( ose një sërë elementësh të tillë) mund të vendoset si brenda elementit HEAD ashtu edhe brenda elementit BODY. Nëse skripti është brenda elementit BODY, është gjithashtu e mundur që ndonjë shfletues që nuk mbështet elementin SCRIPT ta interpretojë kodin e programit si tekst të thjeshtë dhe ta shfaqë atë në ekran. Për të parandaluar që kjo të ndodhë, kodi i skriptit futet si koment:
-
-
-
Gjithçka shfletues modern njohin këtë teknikë dhe injorojnë karakteret e komenteve. Nëse keni nevojë të vendosni një koment në tekstin e skriptit, atëherë përdoret një përcaktim tjetër për këtë: në fillim të rreshtit, vendosni dy prerje //.
Kodi i programit skripti ekzekutohet kur ngarkohet faqja, d.m.th. kur përmbajtja e tij është ende e dukshme në ekran. Më poshtë është një shembull i skenarit më të thjeshtë ( shfaqja e një mesazhi në një dritare).
-
-
-
-
-
-
-
-
atë faqe e thjeshtë por ai përfshin një skrip me një rresht. Duke përdorur metodën e sinjalizimit, shfaqet një mesazh përpara ngarkimit. Dhe do të varet derisa përdoruesi të klikojë në butonin OK, shkarkimi nuk do të vazhdojë.
Mund të ketë një rast, për shembull, faqja do të shikohet në një shfletues që nuk mbështet skriptimin, për këtë është dhënë elementi NOSCRIPT. Shikuesit modernë e injorojnë përmbajtjen e tij. Ky element mund të përdoret në disa mënyra. Për të filluar, mund të shfaqni një deklaratë si më poshtë brenda saj: " Shfletuesi juaj nuk mund të ekzekutojë skriptin e kërkuar për të parë këtë faqe në internet!"Së dyti, brenda elementit, mund të zhvilloni një version të thjeshtuar të faqes, pa skripta. Së treti, ju mund të lidheni me një dokument tjetër HTML. Elementi NOSCRIPT duhet të pajiset me një etiketë fundore.
Këtu jemi me ju dhe kemi konsideruar bazat e të tilla gjuha WEB-programimi si HTML. Edhe pasi të keni lexuar këtë artikull të shkurtër, tashmë keni një ide, madje edhe aftësinë për të programuar në këtë gjuhë. Paç fat!
Vendosa t'i kushtoj më shumë vëmendje fillestarëve që duan të marrin njohuri në fushën e ndërtimit të faqeve. Për këtë më shtyu mësuesi im, i cili bëri shumë gabime në manualet për punë laboratorike. Me kënaqësi do t'i hidhja një sy burimit nga është marrë infa arsimore dhe do të lija nja dy rreshta të mendimit tim atje. Por tani nuk bëhet fjalë për këtë. Në leksionin tim të parë do të flas për
Cila është struktura e një dokumenti HTML
Etiketë
informon se fillon struktura e dokumentit html,
- çfarë përfundon. Midis etiketave
shumica e informacionit ruhet për shfletuesin dhe motorët e kërkimit. Në etiketa
Tani do të shpjegoj pak. Të gjitha etiketat ( etiketa - një element i gjuhës së shënjimit të hipertekstit) ndahen në dy lloje "të vetme" dhe "mbyllëse". Për më tepër, etiketat janë të mbyllura në karakteret e mëposhtme < dhe > , janë ata që e dallojnë etiketën nga teksti i thjeshtë html... Le të shohim disa nga etiketat më të thjeshta "single":
- një etiketë që është përgjegjëse për mbështjelljen në një linjë të re, në vendin ku është instaluar kjo etiketë. Le të hedhim një vështrim në kodin duke përdorur këtë etiketë.
Dhe kjo është faqja ime e parë.
Ju mund të shihni rezultatin.
Është një etiketë që tërheq një vijë horizontale. Ky etiketë i referohet elementeve të bllokut, linja gjithmonë fillon në një linjë të re. Ka 5 atribute:
- align - Përcakton shtrirjen e vijës. Mund të vendoset në të majtë, në qendër, në të djathtë.
- ngjyra - Vendos ngjyrën e linjës.
- noshade - Vizaton një vijë pa efekte 3D.
- madhësia - Vendos trashësinë e vijës.
- width - Vendos gjerësinë e rreshtit.
Kodi duke përdorur etiketën
:
Dhe kjo është faqja ime e parë.
Gjendet një shembull vizual.
Një tjetër etiketë "e vetme" është ... Ky etiketë përdoret për të ruajtur informacionin e destinuar për shfletuesit dhe motorët e kërkimit. Motorët e kërkimit shikojnë meta etiketat për të marrë përshkrimet e faqeve, fjalë kyçe dhe të dhëna të tjera. Lejohet një numër i pakufizuar i meta etiketave, të gjitha duhet të jenë ndërmjet dhe ... Parametrat e çdo meta etikete kanë formën "emri = vlera", e cila është e përcaktuar fjalë kyçe përmbajtjen, emri ose http-equiv... Sepse Etiketat meta janë për makina, ato nuk bëjnë asnjë ndryshim vizual, kështu që unë do të jap vetëm kodin burimor:
Kjo linjë tregon që krijuesi i faqes mendon se faqja po përdor kodimin UTF-8. Gjithçka është bërë më e thjeshtë në HTML5, për të specifikuar kodimin, mjafton vetëm rreshti i mëposhtëm:
Ka të tjerë etiketa të vetme (,
,