Përditësimi i fundit: 08.04.2016

Elementet janë blloqet ndërtuese të një dokumenti html5. Për të krijuar një dokument, duhet të krijojmë një skedar teksti të thjeshtë dhe të specifikojmë si shtesën e skedarit * .html

Le të krijojmë një skedar teksti, ta emërtojmë atë indeks dhe të ndryshojmë shtrirjen e tij në .html.

Pastaj do ta hapim këtë skedar në çdo redaktues teksti, për shembull, në Notepad ++. Le të shtojmë tekstin e mëposhtëm në skedar:

Për të krijuar një dokument HTML5, fillimisht na duhen dy elementë: DOCTYPE dhe html. Elementi doctype ose Deklarata e llojit të dokumentit i tregon shfletuesit të internetit llojin e dokumentit.tregon që dokumenti është një dokument html dhe se po përdoret html5 dhe jo html4 ose ndonjë version tjetër i gjuhës së shënjimit.

Dhe elementi html midis etiketave hapëse dhe mbyllëse përmban të gjithë përmbajtjen e dokumentit.

Brenda elementit html, mund të vendosim dy elementë të tjerë: kokën dhe trupin. Elementi kokë përmban meta të dhënat e faqes së internetit - titullin e faqes së internetit, llojin e kodimit, etj., si dhe lidhjet me burimet e jashtme - stilet, skriptet, nëse ka. Vetë elementi i trupit përcakton përmbajtjen e faqes html.

Tani le të ndryshojmë përmbajtjen e skedarit index.html si më poshtë:

Elementi i kokës përcakton dy elementë:

elementi i titullit paraqet titullin e faqes

elementi meta përcakton meta informacionin për faqen. Për shfaqjen e saktë të karaktereve, preferohet të specifikohet kodimi. Në këtë rast, duke përdorur atributin charset = "utf-8", ne specifikojmë kodimin utf-8.

Brenda elementit të trupit, përdoret vetëm një element, div, i cili jep bllokun. Përmbajtja e këtij blloku është një varg i thjeshtë.

Meqenëse kemi zgjedhur utf-8 si kodim, shfletuesi do të shfaqë faqen e internetit në këtë kodim. Sidoqoftë, teksti i vetë dokumentit duhet gjithashtu të korrespondojë me kodimin e zgjedhur utf-8. Si rregull, redaktuesit e ndryshëm të tekstit kanë cilësime të përshtatshme për vendosjen e kodimit. Për shembull, në Notepad ++ duhet të shkoni te menyja e kodimeve dhe të zgjidhni artikullin Konverto në UTF-8 pa BOM:

Pas kësaj, do të jetë e mundur të shihet në shiritin e statusit UTF-8 w / o BOM për të treguar se është instaluar kodimi i saktë.

Ruani dhe hapni skedarin index.html në shfletues:

Kështu, ne kemi krijuar dokumentin e parë HTML5. Meqenëse ne kemi specifikuar titullin "HTML5 Document" në elementin e titullit, kjo është ajo që do të ketë skeda e shfletuesit.

Meqenëse kodimi është utf-8, shfletuesi i internetit do të shfaqë saktë karakteret cirilike.

Dhe ne do të shohim të gjithë tekstin e përcaktuar brenda elementit të trupit në fushën kryesore të shfletuesit.

Unë mendoj se jeni njohur me HTML dhe e dini se çfarë janë etiketat dhe çfarë roli luajnë ato në një dokument HTML. Nëse diçka nuk është e qartë, mund të shikoni. Në lidhje me meta-etiketën, mbani mend sa vijon: së pari, të gjitha meta-etiketat janë të shkruara, së dyti, ato duhet të vendosen pas dhe së treti, nuk janë elementë të çiftuar dhe nuk kanë nevojë të mbyllen.

Tani le t'i hedhim një vështrim më të afërt këtyre meta etiketave. Duhet të theksohet se ky artikull përshkruan etiketat meta sipas rëndësisë në rënie. Besohet se kur krijoni sajte, sekuenca e vendndodhjes së meta etiketave në kodin HTML të faqes nuk ka rëndësi, por edhe nëse është kështu, atëherë vendosja e tyre në të njëjtin rend siç përshkruhen në këtë artikull ju nuk do të humbasë asgjë, dhe ndoshta ju jeni duke luajtur. Pra, le të fillojmë.

Përshkrim

Ky është një meta-etiketë shumë e rëndësishme. Ajo që specifikohet në atributin e përmbajtjes do të shfaqet në faqen e rezultateve të kërkimit të shumë motorëve të kërkimit. Dhe për këtë arsye, nëse përdoruesi përfundimtar nuk i pëlqen përshkrimi, atëherë ai nuk do të interesohet për faqen tuaj.

Fjalë kyçe

Një meta etiketë e rëndësishme. Edhe pse rëndësia e tij ka ardhur në rënie kohët e fundit, disa motorë kërkimi ende tërheqin informacione për faqen tuaj të internetit nga kjo etiketë. Zgjidhni fjalë kyçe dhe fraza pas kryerjes së hulumtimit të duhur. Këto mund të jenë kontrolle kërkimi, shërbime speciale të motorëve të kërkimit dhe marrja e fjalëve kyçe nga listat speciale që shpërndahen pa pagesë dhe nuk do të jetë aspak e vështirë t'i gjeni. Kur shkruani fjalë kyçe, gjëja kryesore është të mos e teproni, përndryshe, nëse ka shumë përsëritje të fjalëve kyçe dhe frazave, motorët e kërkimit do ta konsiderojnë atë si spam kërkimi dhe do të ndalojnë faqen tuaj. Kur kompozoni fjalë kyçe, përpiquni të mos e kaloni kufirin prej 500-800 karakteresh.

Abstrakt

Ka shumë mendime kontradiktore në lidhje me rëndësinë e këtij meta-etiketë dhe përshtatshmërinë e përdorimit të tij. Përndryshe, mund të kopjoni përmbajtjen e etiketës së përshkrimit duke e modifikuar pak.

Robotët

Një meta-etiketë shumë e rëndësishme që informon robotin e motorit të kërkimit se si të merret me këtë faqe interneti dhe me të gjitha faqet në të cilat ka lidhje prej saj. Direktivat e mëposhtme përdoren si vlerë në atributin e përmbajtjes:

• index - indeksoni faqen e dhënë të internetit,
• ndjek - indeksoni të gjitha faqet e internetit për të cilat ka lidhje në këtë faqe,
• të gjitha - dy direktivat kryesore në të njëjtën kohë,
• noindex - mos indeksoni faqen e internetit,
• nofollow - mos ndiqni lidhjet nga kjo faqe interneti.

Në këtë rast, mund të specifikoni dy direktiva në të njëjtën kohë, duke i ndarë ato me presje (për shembull, noindex, nofollow).

Subjekti

Ky meta-etiketë ka për qëllim të specifikojë llojin e të dhënave të paraqitura në këtë faqe interneti. Në teori, bazuar në këtë përshkrim, roboti i motorit të kërkimit duhet të vendosë faqen tuaj të internetit në një kategori ose në një tjetër. Fatkeqësisht, çdo motor kërkimi ka sistemin e vet të zhvilluar për klasifikimin e faqeve në internet.

Lloji i faqes

Qëllimi i këtij meta-etiketi është saktësisht i njëjtë me qëllimin e meta-etiketës së mëparshme, kështu që ka kuptim të prezantoni të njëjtat terma këtu.

Titulli dhe tema e faqes


Të dyja këto meta etiketa janë të ngjashme, kjo është arsyeja pse ato përshkruhen në të njëjtin seksion. Kjo është mjaft e qartë nga sintaksa e këtyre meta etiketave. Ne ju rekomandojmë që të kopjoni tekstin nga dhe ta vendosni në atributin e përmbajtjes.

Rivizitoni

Nëse informacioni në faqen tuaj përditësohet shpesh, atëherë ky meta-etiketë është shumë i rëndësishëm për ju. Ai informon robotët e motorit të kërkimit pas sa ditësh duhet të riindeksojnë një faqe të caktuar në internet. Ekziston një meta etiketë alternative - revisit-after, e cila është plotësisht identike me këtë meta etiketë, por përdoret më rrallë.

Ndoshta këto janë të gjitha etiketat kryesore meta që ju lejojnë të përshkruani një faqe në internet. Ndërsa ka shumë atribute dhe vlera të tjera për etiketën meta, qëllimi i tyre është përtej qëllimit të këtij artikulli.

Puna laboratorike nr. 1

“Krijimi i dokumentit më të thjeshtë HTML. Formatimi i tekstit"

Objektiv

Mësoni strukturën e një dokumenti html, etiketat bazë të formatimit të tekstit dhe përdorni ato kur krijoni një faqe interneti.

Bazat e krijimit të faqeve në internet me mjete

Gjuha e shënjimit të hipertekstit HTML

Krijimi i një dokumenti të thjeshtë

Zhvillimi i ueb faqeve bazohet në HTML (HyperText Markup Language).

Njësia kryesore strukturore e gjuhës HTML është një etiketë (nga etiketa angleze - përshkrues, shënues). Etiketa është gjithmonë e mbyllur midis kllapave< >dhe duket si kjo:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ>

Etiketat mund të jenë të vetme dhe me kontejnerë. Një enë është një palë: hapje<ТЕГ>dhe mbyllja.

Etiketa hapëse përdoret për t'i treguar programit të shfletuesit fillimin e një objekti ose për të vendosur vetitë e objekteve të vendosura në një kontejner. Etiketa fundore përdoret për t'i treguar programit të shfletuesit për fundin e objektit ose për të përfunduar aplikimin e vetive të specifikuara në etiketën e fillimit.

Atributet e etiketës vendosin vlerat e vetive të objektit të caktuar ose objekteve të vendosura në kontejner.

Dokumenti HTML fillon me etiketën hapëse dhe përfundon me një etiketë mbyllëse... Midis këtij çifti të etiketave të kontejnerit janë dy pjesët e tjera kryesore të dokumentit HTML: titulli, i mbështjellë në kontejner ... dhe trupin e dokumentit në kontejner ...(përmbajtja e faqes). Në seksionin e përshkrimit të titullit, mund të specifikoni titullin e dokumentit, për këtë përdorni etiketën (emri i faqes).

Kështu, struktura e një dokumenti të thjeshtë HTML duket si kjo:

(në krye të faqes)

(përshkrimi i faqes, titulli)

(emri i faqes)

(etiketa e përshkrimit të mbyllur të kokës)

(përmbajtja e faqes)

teksti

(etiketa e përshkrimit të faqes së mbyllur)

(fundi i faqes)

Formatimi i tekstit

- një etiketë që përcakton kufijtë e trupit të dokumentit.

Atributet:

BGCOLOR - përcakton ngjyrën e sfondit të dokumentit. Parazgjedhja është "E bardhë" (#FFFFFF).

TEXT - vendos ngjyrën e tekstit për të gjithë faqen. Ngjyra është e specifikuar në formatin RGB ose konstantet e kuqe, jeshile, blu, etj. Parazgjedhja është "e zezë" (# 000000).

Tabela 1 liston emrat e ngjyrave të përcaktuara në standardin HTML 4 dhe kodet e tyre përkatëse RGB. Vini re se shumë shfletues modern shkojnë përtej standardeve dhe mbështesin shumë emra të tjerë ngjyrash.

Tabela 1

Atributet:

ALIGN - shtrirje. Vlerat e mundshme: Djathtas-djathtas-rreshtoni tekstin; QENDRA - në qendër; LEFT - rreshtuar majtas; JUSTIFIKOJ – I justifikuar.

<Н1> …<Н6> - titujt e niveleve të ndryshme (nga i pari në të gjashtin).

Titulli i nivelit të dytë, në qendër.

<НR>- vije horizontale

Atributet:

ALIGN - shtrirje.

WIDTH - gjatësia e rreshtit si përqindje e dritares së shfletuesit ose pikselave

SIZE - gjerësia e rreshtit si përqindje e dritares së shfletuesit ose pikselëve

COLOR - ngjyra e linjës.

---

Opsione shtesë të formatimit:

Teksti i trashë;

- teksti i pjerrët;

- efekti i nënvizuar;

- efekt goditjeje.

- përdoret për të treguar stilin e fontit në dokument.

Atributet:

SIZE - madhësia e shkronjave.

COLOR - ngjyra e shkronjave.

FACE - shkronja.

<Р> Vija e kuqe është shtypur në madhësi ARIAL 4

Krijo lista

Ekzistojnë katër lloje kryesore të listave në një dokument HTML:

• të numëruara
• e shënuar
• listat e mbivendosura
• listë përkufizimesh

Një pjesë e tekstit që përfaqëson një listë është e mbyllur në etiketa:

Lista e porositur;

Lista e pa renditur;

< LI>…. listat e mbivendosura;

….

lista e përkufizimeve.

Lista e përkufizimeve përdoret për të krijuar lista të llojit "term" - "përshkrim". Çdo term fillon me etiketën

dhe përshkrimi është etiketuar

.

Çdo element i listës është i mbyllur në etiketa

….

(nga artikulli i listës angleze). Kur shfaqen, artikujt e listës janë të dhëmbëzuara dhe fillojnë në një rresht të ri.

Etiketë

mund të ketë parametra:

TYPE = përcakton llojin e numërimit, START = vendos vlerën fillestare të elementit të parë të listës (pavarësisht nga lloji, ai tregohet me një shifër).

LLOJI = A - shënues në formën e shkronjave latine të mëdha;

LLOJI = a - shënues në formën e shkronjave të vogla latine;

LLOJI = I - shënues në formën e numrave të mëdhenj romakë;

LLOJI = i - shënues në formë të numrave të vegjël romakë;

LLOJI = 1 - Shenjat me numra arabë (parazgjedhja).

Etiketë

mund të ketë një parametër:

Lloji i etiketës

përcakton pamjen e shënuesit si të paracaktuar (disk), të rrumbullakët (rreth) ose katror (katror).

Etiketë

• mund të ketë parametra:

  ose

  LLOJI Lloji i shënuesit (shih.

  ) ose numërues (shih OL)

  VALUE = n Vlera për artikullin në listën e numëruar (numri i tij). Të gjithë numrat e mëtejshëm të artikujve të listës do të numërohen nga ky numër.

  Krijoni një dokument HTML në redaktuesin e tekstit të Notepad

  Për të krijuar një dokument HTML në Notepad e redaktuesit të tekstit, duhet të kryeni hapat e mëposhtëm:

  1. Hapni redaktuesin e tekstit Notepad (Fillimi> Programet> Aksesorët> Notepad).

  2. Krijo një strukturë tipike të dokumentit HTML dhe fut tekstin.

  Oriz. 1. Krijimi i HTML - dokumentit në redaktuesin e tekstit Notepad

  4. Mbyllni fletoren. Gjeni skedarin first.html dhe hapeni me një shfletues interneti.

  

  Oriz. 2. Ilustrimi i dokumentit në një shfletues interneti.

  Nëse hapni ndonjë faqe interneti, ajo do të përmbajë elementë tipikë që nuk ndryshojnë në varësi të llojit dhe fokusit të faqes. Shembulli 4.1 tregon kodin për një dokument të thjeshtë që përmban etiketa bazë.

  Shembulli 4.1. Kodi burim i faqes në internet

  Drejtimi

  Paragrafi i parë.

  Paragrafi i dytë.

  Kopjoni përmbajtjen e këtij shembulli dhe ruajeni në dosjen c: \ www \ si shembull41.html. Pas kësaj, hapni shfletuesin dhe hapni skedarin përmes artikullit të menusë Skedari> Hap skedarin (Ctrl + O)... Në kutinë e dialogut Zgjidh dokumentin, specifikoni skedarin shembull41.html. Faqja e internetit e paraqitur në figurën 4 do të hapet në shfletuesin tuaj. 4.1.

  Oriz. 4.1. Shembull i rezultatit të ekzekutimit

  Elementika për qëllim të tregojë llojin e dokumentit aktual - DTD (përkufizimi i llojit të dokumentit, përshkrimi i llojit të dokumentit). Kjo është e nevojshme që shfletuesi të kuptojë se si të interpretojë faqen aktuale të internetit, sepse HTML ekziston në disa versione, dhe ekziston edhe XHTML (Extensible HyperText Markup Language), e cila është e ngjashme me HTML, por ndryshon nga ajo në sintaksë. Në mënyrë që shfletuesi të mos "ngatërrohet" dhe të kuptojë se sipas çfarë standardi duhet të shfaqë faqen e internetit dhe është e nevojshme të vendoset në rreshtin e parë të kodit .

  Ka disa lloje, ato ndryshojnë në varësi të versionit të HTML që synojnë. Tabela 4.1. rendit llojet kryesore të dokumenteve me përshkrimet e tyre.

  Tab. 4.1. DTD të vlefshme

  DOCTYPE	Përshkrim
  HTML 4.01
  	Sintaksë e rreptë HTML.
  	Sintaksa kalimtare HTML.
  	Kornizat përdoren në dokumentin HTML.
  HTML 5
  	Ekziston vetëm një lloj doctype në këtë version të HTML.
  XHTML 1.0
  	Sintaksë e fortë XHTML.
  	Sintaksa kalimtare XHTML.
  	Dokumenti është i shkruar në XHTML dhe përmban korniza.
  XHTML 1.1
  	Zhvilluesit e XHTML 1.1 parashikojnë se gradualisht do të zëvendësojë HTML. Siç mund ta shihni, ky përkufizim nuk ka ndarje në lloje, pasi sintaksa është e njëjtë dhe i bindet rregullave të qarta.

  Dallimi midis përshkrimeve strikte dhe kalimtare të dokumenteve është qasja e ndryshme për të shkruar kodin e dokumentit. HTML i rreptë kërkon respektim të rreptë të specifikimeve HTML dhe është i pafalshëm. HTML-ja kalimtare është më e "relaksuar" për disa të meta në kod, kështu që ky lloj preferohet në raste të caktuara.

  Për shembull, në HTML dhe XHTML strikte, etiketa

  Etiketë

  Titulli im i parë

  Paragrafi im i parë

  Rezultati i këtij kodi në dritaren e shfletuesit:

  
  

  Për të modifikuar kodin e një dokumenti HTML, kliko me të djathtën mbi të → zhvendose kursorin për të hapur me... → zgjidhni redaktorin që ju nevojitet, nëse nuk ka asnjë redaktues që ju nevojitet në listë, klikoni Zgjidh programin... dhe zgjidhni redaktorin e dëshiruar. Disa redaktorë (për shembull, marrin bllok shënimesh ++) mund të zgjidhet drejtpërdrejt në menynë e kontekstit duke klikuar me të djathtën në dokument dhe duke zgjedhur nga lart Ndrysho me Notepad ++(redakto me bllokun e shënimeve ++).

  Çfarë është HTML?

  HTMLështë një gjuhë për të përshkruar strukturën e faqeve të internetit. Faqet e krijuara me të mund të shikohen vetëm me ndihmën e programeve speciale (shfletuesve) të instaluar në kompjuterët e përdoruesve.

  • Shkurtesa HTML qëndron për H per T ext M arkup L gjuha (gjuha e shënjimit të hipertekstit).
  • Mbani mend, nuk është një gjuhë programimi, është një gjuhë shënjimi.
  • HTML përdor etiketa markup për të përshkruar strukturën e faqes në internet.

  Çfarë janë etiketat?

  Etiketat HTML janë fjalë kyçe ose karaktere të mbyllura në kllapa këndore, për shembull ,

  ,

  etj. Ekzistojnë dy lloje etiketash: çiftëzohet dhe beqare(quhen edhe bosh). Etiketat e çiftuara përbëhen nga një etiketë fillimi dhe mbarimi, për shembull:. "/" pas kllapës këndore tregon që etiketa po mbyllet. Etiketat e vetme përbëhen vetëm nga një etiketë fillimi, për shembull:
  ... Etiketat nuk janë të ndjeshme ndaj shkronjave të mëdha, kështu që ato mund të shkruhen me shkronja të mëdha dhe të vogla:

  Do të thotë njësoj si

  Standard HTML5 etiketat mund të shkruhen në çdo rast.

  Duke përdorur etiketat, shfletuesi njeh strukturën dhe kuptimi të tekstit tuaj, për shembull, ata i tregojnë shfletuesit se cila pjesë e tekstit është një titull, ku fillon një paragraf i ri, çfarë të nënvizojë dhe ku të pozicionojë imazhin (foto). Pas marrjes së këtij informacioni, shfletuesi përdor rregullat e tij të paracaktuara të integruara për mënyrën e shfaqjes së secilit prej këtyre elementeve. Pa përdorur etiketa, shfletuesi do të shfaqë vetëm një rrjedhë të fortë teksti, pa pika, tituj, paragrafë, etj. Për ta bërë më të qartë, le t'i hedhim një vështrim më të afërt shembujve të mëposhtëm.

  Kështu duket një faqe duke përdorur etiketat për shënim:

  Pije në kafenenë tonë

  Shumëfruta - 100 fshij.

  Një pije me fruta që përmban lëngje portokalli dhe ananasi.

  Koktej qumështi - 150 r.

  Akullore kremoze e perzier me tul frutash.

  
  

  E njëjta gjë, por pa përdorur etiketa:

  Pije në kafenenë tonë Multifruit - 100 rubla. Një pije me fruta që përmban lëngje portokalli dhe ananasi. Koktej qumështi - 150 r. Akullore kremoze e perzier me tul frutash.