html dokumento struktūra yra pagrindinės žymės. Teisinga HTML dokumento struktūra ir puslapio kodas

Laba diena, tinklaraščio skaitytojai ir svečiai. Aš vėl su jumis, jūsų kuklus padėjėjas mokantis hiperteksto žymėjimo kalbos html pagrindų. Šiame straipsnyje noriu paliesti svetainės puslapių struktūrizavimo temą ir supažindinti jus su pagrindinėmis kalbos žymomis.

Svetainės struktūros tema html yra viena iš svarbiausių ir yra svetainės kūrimo pagrindas, kurį įvaldę galite lengvai sukurti individualų dizainą savo puslapiams ir svetainėms. Norėdami išsamiai išnagrinėti temą, straipsnyje pateikiama ne tik teorinė medžiaga, bet ir konkretus tinklaraščio kūrimo pavyzdys. Dabar laikas pradėti mokytis!

Atrodo baisiai, lengva programuoti

Tiems, kurie yra ypač neramūs, įžangą pradėsiu nuo pavyzdžio. Žemiau yra paprastas programos kodas, kurį parašiau specialiai šiam straipsniui. Nesijaudink. Kiekvienam žingsniui bus pateiktas išsamus paaiškinimas.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Pagrindinės hiperteksto žymėjimo kalbos žymos Naujos žymos, pateiktos kartu su html 5 Puslapio struktūrizavimo pavyzdys 1 straipsnis Čia yra pirmojo straipsnio tekstas. 2 straipsnis Štai antrojo straipsnio tekstas.

Šis kodas sukuria tinklaraščio puslapį, kuris savo ruožtu yra padalintas į antraštę, meniu, pagrindinį skydelį (išdėstymą), kuriame yra turinio skydelis (turinys) ir šoninė juosta (šoninė juosta), taip pat „poraštė“ (poraštė) ).

Aprašymą pradėkime nuo pirmos eilutės.

yra kalbos elementas, kurio pagrindinė užduotis yra nurodyti žiniatinklio dokumento tipą. Tokiu būdu naršyklė nustato, pagal kokį standartą turėtų būti rodomas puslapis, nes šiandien yra keletas html versijų.

Tačiau verta atkreipti dėmesį į naują kalbos vienetą, vadinamą stilius. Kaip galbūt atspėjote iš pavadinimo, ši žyma nustato stilių ir koreguoja objektų išdėstymą puslapyje.

Logiškai mąstant, galiu manyti, kad jūsų galvoje iškart kilo klausimas: „Koks nesuprantamas kodas yra šioje programos dalyje? Tai visai neatrodo kaip html! Ir atsakymas yra toks: į stiliaus žymą įrašomas ne html, o css kodas. Kaip minėta anksčiau, tai yra svetainių išvaizdos formatavimo įrankis.

Div nurodo žymėjimo kalbos bloko žymas. Jis naudojamas atskirti tam tikrus fragmentus, siekiant juos toliau modifikuoti.

Blokai valdomi naudojant kaskadinius stiliaus lapus, t.y. css kalba Pavyzdiniame tinklalapyje yra trys blokai, sukurti naudojant klasės atributus.

Taigi, kode yra:

• maketas – blokas, atsakingas už pagrindinę puslapio dalį,
• šoninė juosta – šoninė juosta (paprastai sukurta naršymui),
• turinys – blokas, kuriame yra tinklaraščio įrašai.

Elemente su šoninės juostos klasės apibrėžimu aš apibrėžiu netvarkingą sąrašą naudodamas elementus

Ir
• . Bloke su stiliaus klasės turiniu – antraštės žymos

  ir pastraipa

  Dabar atidžiau pažvelkime į bloką

  .

  HTML ar vis tiek HTML 5? Kaip atpažinti?

  Div su maketavimo stiliaus klase, be kitų blokų, yra žymų, tokių kaip antraštė, meniu ir poraštė. Skirtingai nuo kitų elementų pavyzdyje, jie būdingi HTML 5 platformai.

  Taigi antraštė yra hiperteksto žymėjimo kalbos elementas, paprastai sukuriantis svetainės puslapių ar skyrių, kuriuose įterpiamas pavadinimas, antraštę. Verta paminėti, kad „Internet Explorer“ naršyklė nepalaiko antraštės iki 8 versijos, tačiau rodo jos turinį.

  Pagrindinis meniu žymos tikslas yra rodyti meniu elementus. Panašiai kaip sunumeruotų ir nenumeruotų sąrašų kūrimo elementai, meniu konteineryje kiekvienas turinio elementas yra įtrauktas į suporuotą žymą

  .

  

  Ir galiausiai poraštės kalbos vienetas. Žiniatinklio kūrėjų žargonu tai kartais vadinama puslapio „porašte“. Ši žyma yra puslapio arba skilčių apačioje. Poraštėje paprastai pateikiama informacija apie konkretaus šaltinio autorystę, dokumento sukūrimo datą, pagrindinę informaciją ar kitą medžiagą, kuriai nereikia ypatingo žiniatinklio šaltinio skaitytojų dėmesio.

  Žiniatinklio išteklių kūrimo įrankiai

  Interneto puslapiams kurti buvo sukurta daug programinės įrangos produktų. Paprastai juos galima suskirstyti į paprastas redaktorių programas ir profesionaliai orientuotus programinės įrangos produktus.

  Kuriant svetainę pirmiausia reikia įsivaizduoti, kaip formuojamas tinklalapis. Tai savotiškas „pamatas“ kuriant svetainę. Todėl prieš gilinantis į sudėtingesnes svetainių kūrimo technologijas, rekomenduojama turėti bent elementarių HTML žinių. Šioje pamokoje mes susipažinsime su HTML, sutvarkykime HTML dokumento struktūra ir panaudoti praktinius pavyzdžius įgytoms žinioms įtvirtinti.

  Kas yra HTML?

  HTML reiškia hiperteksto žymėjimo kalbą. Ši kalba yra atsakinga už tai, kaip hipertekstas bus rodomas svetainės puslapiuose. Dabar išsiaiškinkime, kas yra hipertekstas? Ne paslaptis, kad viename tinklalapyje gali būti daug įvairios informacijos, ar tai būtų tekstas, kai kurios lentelės, grafikai, vaizdo įrašai, garso įrašai ir pan. Taigi, visą šią informaciją galima pavadinti vienu žodžiu – hipertekstu.

  Atminkite, kad HTML yra žymėjimo, o ne programavimo kalba. Ši kalba neturi jokių loginių funkcijų ir joje neįmanoma atlikti jokių matematinių skaičiavimų. HTML puslapiai turi plėtinį .html arba .htm ir yra apdorojami naršyklėmis – IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera ir kt.

  Dabar išsiaiškinkime, kaip naršyklė supranta, ką ir kaip rodyti tinklalapyje? Tai labai paprasta. Hiperteksto žymėjimo kalba HTML turi įmontuotas komandas, vadinamas žymomis. Būtent į juos yra orientuota naršyklė.

  HTML dokumento struktūra

  Bet kuris HTML dokumentas (tinklalapis) turi turėti tam tikrą struktūrą. Taip išvengsite galimų problemų atidarant puslapius naršyklėse. Kaip pavyzdį pažvelkime į puslapį, kuriame yra šis HTML kodas:

  ...
  
  

  Pažiūrėkime, kas yra įtraukta į šią struktūrą:

  1. Pirmas dalykas, kuris patenka į HTML dokumentą, yra versijos nuoroda (pirma eilutė). Norint tinkamai veikti, šią eilutę reikia nurodyti kuriant tinklalapį.

  3. Tada atsiranda sritis, skirta svetainės viršuje (antraštė). Tam naudojama žyma . Antraštėje nurodome savo puslapio pavadinimą, įterpdami puslapio pavadinimą tarp žymų . Toliau nurodoma HTML dokumento koduotė (penkta eilutė). Tai daroma, kad kirilicos abėcėlė būtų rodoma teisingai. Antraštės srities uždarymas žyma.

  4. Meta žyma “description” – puslapio santrauka, skirta paieškos sistemoms. Ši žyma yra svarbi optimizuojant paieškos sistemas ir turi būti užpildyta.

  5. Metažymas „raktiniai žodžiai“ – raktiniai žodžiai, kurie gali būti puslapyje. Ši žyma taip pat skirta paieškos sistemoms. Ši žyma šiais laikais naudojama retai.

  6. Puslapio turinys atidaromas su žyma ir atitinkamai uždaroma su žyma
  
  . Tinklalapio tekste dažniausiai yra pagrindinis turinys – tekstas, vaizdo įrašas, garsas ir kita informacija.

  Taigi, mes atsakėme į klausimą, kas yra HTML, ir ištyrėme HTML dokumento struktūrą. Šioje pamokoje gauta informacija yra pagrindinės sąvokos, be jų neapsieisite. Apie sudėtingesnius dalykus kalbėsime kitose pamokose.

  Šiandien kalbėsime apie HTML5 semantiką. Jau parašiau trumpą apžvalgos įrašą apie . Rekomenduoju prieš skaitant šį straipsnį susipažinti su juo. Dabar mes pažvelgsime į šią problemą išsamiau, kaip teisingai ir kompetentingai sudaryti HTML5 dokumento semantinę struktūrą.

  Šiame straipsnyje palaipsniui kursime HTML puslapį ir papuošime jį semantinėmis HTML5 žymomis.

  

  Paveikslas – HTML5 puslapio semantinė struktūra.

  DOCTYPE ir meta žymeles puslapio pavadinime

  Pradėkime nuo standartinio HTML5 dokumento šablono ir prie galvos pridėkite metažymų:

  Pridėjau žymą kuri yra atsakinga už raktinius žodžius. Ir pažymėkite kuri yra atsakinga už puslapio aprašymą. SEO optimizavimui šios žymos yra būtinos. Taip pat būtina teisingai užpildyti žymą , patalpintas žymų viduje . Dokumento pavadinimas nerodomas, kai lange rodomas pats dokumentas.

  Dokumento korpuso žymos. Dokumento turinio žymos identifikuoja lange rodomo HTML dokumento komponentus. Dokumento turinyje gali būti nuorodų į kitus dokumentus, teksto ir kitos suformatuotos informacijos.

  Dokumento turinys. Dokumento turinys turi būti tarp žymų Ir. Tai dokumento dalis, kuri rodoma kaip tekstinė ir grafinė (semantinė) jūsų dokumento informacija.

  Antraštės lygiai<Нх>. Pirmasis antraščių lygis (didžiausias) žymimas skaičiumi 1, kitas – 2 ir taip toliau iki skaičiaus 6. Dauguma naršyklių palaiko šešių lygių antraščių interpretaciją, kiekvienai iš jų nustatydamos savo stilių. Dažniausiai tokios antraštės tekstas bus paryškintas, o po tekstu bus tuščia eilutė. Svarbu, kad šios žymos nustatytų loginę dokumento struktūrą ir dalyvautų interneto paieškos sistemų indeksavime. Antraštės, viršijančios šeštą lygį, nėra standartinės ir gali būti nepalaikomos naršyklėje.

  Pastraipos žyma<Р>. IN Skirtingai nuo daugumos teksto rengyklų, HTML dokumente vežimo grąžinimai nepaisomi. Naršyklė dalija pastraipas tik tada, kai yra žyma<Р>. Jei pastraipų neatskirsite žyma<Р>, tada dokumentas atrodys kaip viena didelė pastraipa.

  Iš anksto suformatuota teksto žyma

  .
  Žyma 
  Leidžia tekstą ekrane pateikti su tam tikru formatavimu.  Iš anksto suformatuotas tekstas baigiasi pabaigos žyma
  .  Iš anksto suformatuotame tekste galite naudoti: eilutės tiekimą, tabuliavimo simbolius (paslinkimas aštuoniais ženklais į dešinę), naršyklės įdiegtą neproporcingą Courier šriftą.
  
  Išvardykite žymes. HTML dokumente yra trys pagrindiniai sąrašų tipai: sunumeruoti, su ženkleliais ir aprašų sąrašas.
  Galite kurti įdėtus sąrašus naudodami skirtingas sąrašo žymas arba kartodami jas kitose.  Norėdami tai padaryti, tiesiog reikia įdėti vieną žymų porą (pradžia ir pabaiga) į kitą.  Ar įdėtieji sąrašo elementai turės tuos pačius sąrašo elementą žyminčius žymeklius, priklauso nuo naršyklės.
  Sunumeruoti sąrašai.  IN Sunumeruotame sąraše naršyklė automatiškai įterpia prekių numerius eilės tvarka.  Tai reiškia, kad jei iš sunumeruoto sąrašo ištrinsite vieną ar daugiau elementų, likę skaičiai bus automatiškai perskaičiuoti.
   
  ir baigiasi žyma
   
  .
  
  Sąrašai su ženkleliais.  Dėl Sąrašuose su ženkleliais naršyklė paprastai naudoja ženklelius sąrašo elementui.  Žymeklio tipą paprastai sukonfigūruoja naršyklės vartotojas.
  Sunumeruotas sąrašas prasideda pradžios žyma 
  ir baigiasi žyma
  .  Kiekvienas sąrašo elementas prasideda žyma<ы>.
  
  Šrifto formatavimas. HTML leidžia dviem būdais pasirinkti teksto fragmentų šriftą.  Viena vertus, galite tiesiogiai nurodyti, kad tam tikroje teksto dalyje šriftas turi būti paryškintas arba kursyvas, t.y.  pakeisti fizinį teksto stilių.  Kita vertus, galima pažymėti tam tikrą teksto dalį kaip turintį nenormalų loginį stilių, paliekant to stiliaus interpretaciją naršyklei.
  Grafika HTML dokumente. Viena patraukliausių WEB savybių yra galimybė į HTML dokumentą įtraukti grafinius ir kitokio tipo duomenis.
  Yra du būdai, kaip naudoti grafiką HTML dokumentuose.  Pirmasis yra grafinių vaizdų įterpimas į dokumentą, kuris leidžia vartotojui matyti vaizdus tiesiogiai kitų dokumento elementų kontekste.  Tai atliekama naudojant žymą .  Ši žyma yra taškuota, t.y.  jis neužsidaro.  Žymos sintaksė:
  
  Reikiamo parametro sintaksė tokia pati kaip ir standartinio URL.  Šis URL nurodo naršyklei, kur
  piešimas.  Piešinys turi būti saugomas grafiniu formatu, kurį palaiko naršyklė.  Šiandien tai yra GIF, JPG, PNG formatai.  Juos palaiko dauguma naršyklių.
  ALT="tekstas"
  Šis pasirenkamas elementas nurodo tekstą, kuris bus rodomas naršyklėje, kuri nepalaiko grafikos arba išjungta vaizdo grafika.  Paprastai tai yra trumpas vaizdo, kurį vartotojas gali arba galės matyti ekrane, aprašymas.  Jei šio parametro nėra, dauguma naršyklių vietoje paveikslėlio rodo tuščią rėmelį.  Žyma rekomenduojama, jei vartotojai naudoja negrafinę naršyklę, pvz., Lynx, ir paieškos variklio indeksavimui.  Tekstas taip pat matomas, kai kurį laiką laikote pelės žymeklį, nejudėdami virš vaizdo kaip sistemos patarimo po žymekliu.
  Dauguma naršyklių leidžia į dokumentą įtraukti fono paveikslėlį, kuris pasikartos kaip vonios plytelės ir bus rodomas kaip viso dokumento fonas.  Tai antras būdas.  Kai kuriems vartotojams patinka foninė grafika, kitiems ne.  Nepastebimas permatomas raštas (tapetas) paprastai puikiai atrodo kaip daugelio dokumentų fonas.
  Hipertekstinės nuorodos yra pagrindinis komponentas, kuris daro WEB patrauklų vartotojams.  Pridėdamas hipertekstines nuorodas (toliau – nuorodos), vartotojas dokumentų rinkinį sujungia ir susistemina, kas leidžia kuo greičiau ir patogiau gauti jam reikalingą informaciją.
  Nuorodos turi standartinį formatą, leidžiantį naršyklei jas interpretuoti ir atlikti reikiamas funkcijas (skambinimo būdus), priklausomai nuo nuorodos tipo.  Nuorodos gali nukreipti į kitą dokumentą, konkrečią vietą dokumente arba atlikti kitas funkcijas, pvz., prašyti failo.  Kaip hipersaitą galite naudoti tekstą, vaizdą arba abu.
  Nuorodų struktūra HTML dokumente. Kad naršyklė parodytų nuorodą į URL, hipersaito žymoje turite įdėti tekstą arba vaizdą.  HTML sintaksė yra tokia:
  <А HREF="URL">tekstas arba vaizdas, kuris bus paryškintas kaip nuoroda
  
  Žyma<А HREF="URL">atidaromas nuorodos aprašas ir žyma– uždaro.  Bet koks tekstas, esantis tarp šių dviejų žymų, ypatingu būdu paryškinamas žiniatinklio naršyklės.  Paprastai šis tekstas yra pabrauktas ir paryškintas.  Vaizdas įrėmintas stačiakampiu rėmeliu.  URL atstojančio teksto naršyklė nerodo, o naudojamas tik numatytiems veiksmams atlikti, kai nuoroda suaktyvinta (dažniausiai spustelėjus paryškintą arba pabrauktą tekstą).
  Nuorodos į žymas dokumente. Galite susieti su skirtingomis to paties dokumento sritimis arba dalimis naudodami specialias paslėptas tų skilčių etiketes.  Tai leidžia greitai pereiti iš vienos dalies į kitą dokumente neslenkant ekrano.  Kai tik vartotojas spustelėja nuorodą, naršyklė perkelia jį į nurodytą dokumento skyrių, o eilutė, kurioje yra šios dalies etiketė, bus patalpinta pirmoje naršyklės lango eilutėje (jeigu „ilgis“ pakanka dokumento naršyklės lange).
  Kiekvienas HTML dokumentas turi prasidėti žyma <
  HTML>
   ir baigti žyma HTML>
  .  Šios žymos rodo, kad eilutės tarp jų reiškia vieną HTML dokumentą.  Be to, galite matyti, kad visas HTML failas yra HTML kalbos elementas.
  Taip pat HTML dokumente turi būti HEAD (dokumento informacija) ir BODY (dokumento korpusas) elementai.
  Dokumentų skyriusGALVA
  Dokumento skiltyje HEAD apibrėžiamas jo pavadinimas ir pateikiama papildoma informacija apie dokumentą naršyklei.  Ši skiltis yra neprivaloma, tačiau rekomenduojama ją visada naudoti savo HTML dokumentuose, nes gerai parašyta antraštė gali būti labai naudinga.
  Antraštės skyrius prasideda žyma <
  GALVA>
   ir iškart po žymos .  Tarp HEAD elemento pradžios ir uždarymo žymų yra kiti antraštės elementai.
  Dokumento pavadinimo pavadinimas
  Norėdami suteikti pavadinimą HTML dokumentui, žyma yra <
  TITLE>
  .  Šis pavadinimas bus rodomas naršyklės lango pavadinime.  Pavadinimas rašomas tarp žymų  ir yra teksto eilutė.  Šios eilutės ilgis gali būti bet koks, tačiau rekomenduojama, kad ji neviršytų 60 simbolių.  Elementas TITLE turėtų būti rodomas tik skiltyje HEAD.
  Dokumentų skyriusKŪNAS
  Šioje dokumento dalyje yra informacija, kuri rodoma naršyklės lange.  Skiltis BODY turi prasidėti žyma <
  KŪNAS>
   ir baigti žyma KŪNAS>
  , tarp kurių yra HTML elementai, sudarantys dokumento turinį.
  Prekės specifikacijaKŪNAS
  Žyma turi daugybę atributų, lemiančių dokumento išvaizdą.  Žemiau yra žymos specifikacija .
  TEXT="teksto spalva"
  BGCOLOR="fono spalva"
  BACKGROUND="fono paveikslėlio adresas"
  Atributas TEXT nurodo viso dokumento šrifto spalvą RGB arba simbolių žymėjimu.  Pagal numatytuosius nustatymus (jei šis atributas nenurodytas) naudojami naršyklės nustatymai.
  Atributas BGCOLOR nurodo dokumento naršyklės lango fono spalvą RGB arba simboline žyma.  Naršyklės nustatymai naudojami pagal numatytuosius nustatymus.
  Atributas BACKGROUND leidžia nurodyti paveikslėlio, naudojamo kaip fonas, adresą ir pavadinimą.  Šis piešinys bus atkurtas ir platinamas dokumento fone.
  Atributai LINK, VLINK ir ALINK nurodo hipersaitų spalvas RGB arba simboline žyma.  Naršyklės nustatymai naudojami pagal numatytuosius nustatymus.  Nelankyta hipersaitas yra nuoroda, kuri dar nebuvo naudojama norint pereiti į kitą dokumentą.  Aplankytas hipersaitas yra nuoroda, kuri jau buvo naudojama norint pereiti į kitą dokumentą.  Aktyvus hipersaitas – hipersaitas į dokumentą, į kurį šiuo metu naršoma.
  BODY žymos atributų naudojimo patarimai
   Jei BODY žymoje nurodote bent vieną spalvą, nurodykite ir kitas.  Taip yra dėl to, kad vartotojas gali nustatyti savo naršyklės spalvų nustatymus taip, kaip jam patogiau.  Nurodę tik vieną spalvą, kai kuriems vartotojams tekstas gali susilieti su fono spalva.  Dėl to bus sunku peržiūrėti dokumentą.
   Pasirinkite teksto spalvą, kad ji „veiktų“ su fono spalva arba pagrindinėmis vaizdo spalvomis.  Pavyzdžiui, raudona ant žalios spalvos gali sukelti rimtų problemų daugeliui žmonių.
   Elemente BODY galima nurodyti ir BGCOLOR, ir BACKGROUND.  Tokiu atveju naršyklė pirmenybę teikia BACKGROUND, bet jei nepavyks įkelti fono paveikslėlio, bus naudojama BGCOLOR.  Todėl pabandykite nustatyti fono spalvą, kuri būtų panaši į fono paveikslėlio spalvą, kad nepažeistumėte dokumento spalvų balanso.
  
  
  
  
  
  
  
      
   
      
  Gali būti naudinga perskaityti:
      
  
       
  Žaidimo apžvalga – sudėtingas testas;
   
  Pats baisiausias siaubas.  Baisios istorijos.  Baisiausi siaubai Stovyklos siaubo istorijos karstas ant ratų;
   
  Laikrodžiai vaikams: tipai, jų savybės;
   
  Nepavyko išsaugoti dokumento formos (sąskaitos faktūros) Excel formatu – mygtukai „Išsaugoti“ ir „Išsaugoti kaip“ nepasiekiami;
   
  Kaip pakeisti langelių dydį programoje „Excel“ ir padaryti juos vienodus Kaip pakeisti visų „Excel“ stulpelių plotį;
   
  Pagrindiniai AutoCAD darbo srities nustatymai Kaip sukurti pasirinktinę koordinačių sistemą AutoCAD;
   
  Skaičių vertimas pozicinėse skaičių sistemose;
   
  Įtampos rezonansas nuoseklioje virpesių grandinėje;