html dokumenta struktūra ir galvenie tagi. Pareiza HTML dokumenta struktūra un lapas kods

Labdien, emuāra lasītāji un viesi. Es atkal esmu ar jums, jūsu pazemīgais palīgs hiperteksta iezīmēšanas valodas html pamatu apguvē. Šajā rakstā es vēlos pieskarties vietņu lapu strukturēšanas tēmai un tuvāk iepazīstināt jūs ar galvenajiem valodas tagiem.

Mājas lapas struktūras tēma html ir viena no svarīgākajām un ir mājas lapas veidošanas pamats, pēc kuras apgūšanas var viegli izveidot individuālu dizainu savām lapām un mājaslapām. Lai detalizēti izpētītu tēmu, rakstā sniegts ne tikai teorētiskais materiāls, bet arī konkrēts emuāra izveides piemērs. Tagad ir pienācis laiks sākt mācīties!

Izskatās biedējoši, viegli programmējams

Tiem, kas ir īpaši nemierīgi, ievadu sākšu ar piemēru. Zemāk ir vienkāršs programmas kods, ko es uzrakstīju īpaši šim rakstam. Neuztraucieties. Katram solim tiks sniegts detalizēts skaidrojums.

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 Mana lapa

1. pants

Šeit ir pirmā raksta teksts.

2. pants

Šeit ir otrā panta teksts.

Šī emuāra raksta autors


Mana lapa

Vietnes struktūras izveide, izmantojot html

  • Pamata hiperteksta iezīmēšanas valodas tagi
  • Jauni tagi, kas tika piegādāti kopā ar HTML 5
  • Lapas strukturēšanas piemērs
  • 1. pants

    Šeit ir pirmā raksta teksts.

    2. pants

    Šeit ir otrā panta teksts.

    Šī emuāra raksta autors


    Šis kods izveido emuāra lapu, kas savukārt ir sadalīta galvenē, izvēlnē, galvenajā panelī (izkārtojumā), kurā ir satura panelis (saturs) un sānjosla (sānjosla), kā arī “kājene” (footer). ).

    Sāksim pārskatu no pirmās rindas.

    ir valodas elements, kura galvenais uzdevums ir norādīt tīmekļa dokumenta veidu. Tādā veidā pārlūkprogramma nosaka, pēc kāda standarta lapa ir jāparāda, jo šodien ir vairākas html versijas.

    Tomēr ir vērts pievērst uzmanību jaunai valodas vienībai, ko sauc stils. Kā jūs, iespējams, uzminējāt pēc nosaukuma, šis tags iestata stilu un pielāgo objektu izvietojumu lapā.

    Loģiski, varu pieņemt, ka galvā uzreiz radās jautājums: “Kāds nesaprotams kods atrodas šajā programmas daļā? Tas nemaz neizskatās pēc html! Un atbilde ir šāda: stila tagā nav ierakstīts html, bet gan css kods. Kā minēts iepriekš, šis ir vietņu izskata formatēšanas rīks.

    Div attiecas uz iezīmēšanas valodas bloku tagiem. To izmanto, lai izolētu noteiktus fragmentus, lai tos tālāk pārveidotu.

    Bloki tiek pārvaldīti, izmantojot kaskādes stila lapas, t.i. css valoda Tīmekļa lapas piemērā ir trīs bloki, kas veidoti, izmantojot klases atribūtus.

    Tādējādi kods satur:

    • izkārtojums – bloks, kas atbild par lapas galveno daļu,
    • sānjosla — sānjosla (parasti izveidota navigācijai),
    • saturs – bloks, kurā atrodas emuāra ziņas.

    Elementā ar sānjoslas klases definīciju es definēju nesakārtotu sarakstu, izmantojot elementus

      Un
    • . Blokā ar stila klases saturu – virsrakstu tagi

      un rindkopa

      Tagad apskatīsim bloku tuvāk

      .

      HTML vai tomēr HTML 5? Kā atpazīt?

      Divā ar izkārtojuma stila klasi papildus citiem blokiem ir tādi tagi kā galvene, izvēlne un kājene. Atšķirībā no citiem elementiem piemērā, tie ir raksturīgi HTML 5 platformai.

      Tādējādi galvene ir hiperteksta iezīmēšanas valodas elements, kas parasti veido vietnes lapu vai sadaļu galveni, kurās tiek ievietots virsraksts. Ir vērts atzīmēt, ka pārlūkprogramma Internet Explorer neatbalsta galveni līdz 8. versijai, bet parāda tās saturu.

      Izvēlnes taga galvenais mērķis ir parādīt izvēlnes vienumus. Līdzīgi kā elementi numurētu un nenumerētu sarakstu izveidei, izvēlnes konteinerā katrs satura vienums ir iekļauts pārī savienotā tagā.

    • .

      Un visbeidzot, kājenes valodas vienība. Tīmekļa izstrādātāju žargonā to dažreiz sauc par lapas “kājeni”. Šis tags atrodas lapas vai sadaļu apakšā. Kājenē parasti ir informācija par konkrētā resursa autorību, dokumenta tapšanas datumu, fona informācija vai citi materiāli, kuriem nav nepieciešama īpaša tīmekļa resursa lasītāju uzmanība.

      Rīki tīmekļa resursu izveidei

      Interneta lapu izstrādei ir radīti daudzi programmatūras produkti. Parasti tos var iedalīt vienkāršās redaktoru programmās un profesionāli orientētos programmatūras produktos.

      Veidojot vietni, pirmais, kas jāiztēlojas, ir tas, kā veidojas mājas lapa. Tas ir sava veida “pamats” vietņu veidošanā. Tāpēc, pirms iedziļināties sarežģītākās vietņu veidošanas tehnoloģijās, ieteicams iegūt vismaz pamatzināšanas par HTML. Šajā nodarbībā mēs iepazīsimies ar HTML, sakārtosim HTML dokumentu struktūra un izmantot praktiskus piemērus, lai nostiprinātu iegūtās zināšanas.

      Kas ir HTML?

      HTML apzīmē hiperteksta iezīmēšanas valodu. Šī valoda ir atbildīga par to, kā tieši hiperteksts tiks parādīts vietnes lapās. Tagad izdomāsim, kas ir hiperteksts? Nav noslēpums, ka vienā tīmekļa lapā var būt daudz dažādu veidu informācijas, vai tas būtu teksts, dažas tabulas, grafiki, video, audio utt. Tātad visu šo informāciju var saukt vienā vārdā - hiperteksts.

      Ņemiet vērā, ka HTML ir iezīmēšanas valoda, nevis programmēšanas valoda. Šai valodai nav loģisku funkciju un tajā nav iespējams veikt nekādus matemātiskos aprēķinus. HTML lapām ir paplašinājums .html vai .htm un tos apstrādā pārlūkprogrammas - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera utt.

      Tagad izdomāsim, kā pārlūkprogramma saprot, ko un kā parādīt tīmekļa lapā? Tas ir ļoti vienkārši. Hiperteksta iezīmēšanas valodai HTML ir iebūvētas komandas, ko sauc par tagiem. Tieši uz viņiem ir orientēta pārlūkprogramma.

      HTML dokumentu struktūra

      Jebkuram HTML dokumentam (tīmekļa lapai) ir jābūt noteiktai struktūrai. Tas novērsīs iespējamās problēmas, atverot lapas pārlūkprogrammās. Piemēram, apskatīsim lapu, kurā ir šāds HTML kods:

      HTML dokumentu struktūra ...

      Apskatīsim, kas ir iekļauts šajā struktūrā secībā:

      1. Pirmā lieta, kas tiek iekļauta HTML dokumentā, ir versijas norāde (pirmā rinda). Lai nodrošinātu pareizu darbību, šī rindiņa jānorāda, veidojot tīmekļa lapu.

      3. Pēc tam nāk apgabals vietnes augšpusē (galvene). Šim nolūkam tiek izmantots tags . Galvenē mēs norādām savas lapas nosaukumu, ievietojot lapas nosaukumu starp tagiem Un. Tālāk tiek norādīts HTML dokumenta kodējums (piektā rinda). Tas tiek darīts, lai pareizi parādītu kirilicas alfabētu. Galvenes apgabala aizvēršana ar tagu.

      4. Metatags “description” – lapas kopsavilkums, paredzēts meklētājprogrammām. Šis tags ir svarīgs meklētājprogrammu optimizācijai, un tas ir jāaizpilda.

      5. Metatags “atslēgvārdi” – atslēgvārdi, kas var parādīties lapā. Šis tags ir paredzēts arī meklētājprogrammām. Šo tagu mūsdienās izmanto reti.

      6. Lapas pamatteksts tiek atvērts ar tagu un attiecīgi aizveras ar tagu

      . Web lapas pamatteksts parasti satur galveno saturu – tekstu, video, audio un citu informāciju.

      Tādējādi esam atbildējuši uz jautājumu, kas ir HTML, un izpētījuši HTML dokumenta struktūru. Šajā nodarbībā saņemtā informācija ir pamatjēdzieni, bez tiem nevar iztikt. Par sarežģītākām lietām runāsim citās nodarbībās.

      Šodien mēs runāsim par semantiku HTML5. Es jau esmu uzrakstījis īsu apskata ierakstu par . Es iesaku jums ar to iepazīties pirms šī raksta lasīšanas. Tagad mēs sīkāk aplūkosim šo jautājumu par to, kā pareizi un kompetenti izveidot HTML5 dokumenta semantisko struktūru.

      Šajā rakstā mēs pakāpeniski izveidosim HTML lapu un izrotāsim to ar semantiskiem HTML5 tagiem.

      Attēls — HTML5 lapas semantiskā struktūra.

      DOCTYPE un metatagi lapas nosaukumā

      Sāksim ar standarta HTML5 dokumenta veidni un pievienosim metatagus galvā:

      Lapas nosaukums

      Es pievienoju tagu kas atbild par atslēgvārdiem. Un atzīmē kas atbild par lapas aprakstu. SEO optimizācijai šie tagi ir nepieciešami. Tāpat ir nepieciešams pareizi aizpildīt birku . Lapas nosaukumam ir jābūt unikālam visā vietnē, un nosaukumā ir jāietver visa tās lapas būtība, kurai tas ir norādīts.</p><p>Ejam tālāk. HTML5 ievieš jaunus tagus, kas tiek izmantoti, lai dokumentā izveidotu semantisko marķējumu. Tie ir galvenes, navigācijas, galvenās, raksta, malās, kājenes utt. tagi. Displeja ziņā tie darbojas tāpat kā parastie. <div>tagi, tas ir, tie ir bloka elementi. Bet ja <div>nav semantiskās slodzes, tad header, nav, main un citi jālieto tikai jēgpilni.</p><h3>Lapas nosaukums</h3><p>Lapas galvene ir formatēta galvenes tagā. Lūdzu, ņemiet vērā, ka lapas nosaukums ir uzrakstīts, izmantojot h1 tagu.</p><p> <!-- Header страницы --> <header> <h1>Mājas lapas nosaukums</h1> </header> </p><p>Ja mums blakus virsrakstam ir arī sauklis, tad to ievietojam p, div vai span.</p><p> <!-- Header страницы --> <header> <h1>Mājas lapas nosaukums</h1> <p>vietnes sauklis</p> </header> </p><p><b>Piezīme par H1 tagu</b></p><p>Jāņem vērā, ka HTML5 tags H1 tiek izmantots, lai norādītu konteinera nosaukumu, kurā tas atrodas (tas varētu būt galvene, sadaļa, raksts utt.)</p><p>Pirms HTML5 tagu parādīšanās semantika bija nedaudz atšķirīga un atšķirīga. Tātad HTML4 vienā lapā varētu būt tikai viens H1 virsraksts! Parasti tas bija raksta virsraksts vai lapas nosaukums (piemēram, ja tā ir kategorijas lapa, kurā ir redzami vairāki raksti.) H2 tika izmantots apakšvirsrakstiem vai galvenā raksta sadaļām. H3 apakšsadaļām un tā tālāk.</p><h3>Lapas navigācija</h3><p>Vietnes galvenās navigācijas dizainam jābūt ietvertam navigācijas tagā. Jums arī jāatceras, ka navigācijas izveide ar saraksta elementiem tiek uzskatīta par labu praksi.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>Mājas</li> <li>Portfelis</li> <li>Galerija</li> <li>Kontakti</li> </ul> </nav> </p><h3>Lapas saturs</h3><p>Lapas galvenais saturs ir formatēts galvenajā tagā. Tas varētu būt viens raksts vai vairāki rakstu priekšskatījumi, ja mēs runājam par emuāra lapu ar vairākiem ierakstiem. Galvenajā tagā nevar ievietot sānjoslu, lapas galveni, kājeni vai galveno navigāciju!</p><p> <!-- Основное содержимое страниц --> <main>...galvenās lapas saturs...</main> </p><h3>Raksta dizains</h3><p>Raksta tagu izmanto rakstu iesaiņošanai. Parasti šis tags satur satura bloku, ko var izņemt no lapas konteksta un izmantot atsevišķi citur. Tas varētu būt raksts (pilns raksta teksts vai priekšskatījums), ziņa forumā utt.</p><p>Tālāk esošajā piemērā es parādīju raksta noformējumu kontekstā, galvenā taga iekšpusē. Rakstam ir galvenes bloks ar raksta nosaukumu. Raksta publicēšanas datumu norāda īpašs laika tags, kas tiek parādīts kā parasts iekļauts elements. Laika atzīmei ir īpašs atribūts, kurā ir jānorāda publicēšanas laiks mašīnas formātā. Tas var būt tikai datetime="2015-09-30" vai ar stundām, minūtēm un sekundēm datetime="2015-09-30T15:25:55" . Pubdate parametrs norāda, ka raksts tika publicēts vienlaikus ar tā tapšanu. Ja tās ir ziņas, tad var gadīties, ka ziņu laiks ir viens un publicēšanas laiks ir atšķirīgs, šim nolūkam divreiz jānorāda laika atzīme un pubdate jāievieto tikai tajā tagā, kur norādīts publicēšanas laiks.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Raksta nosaukums</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30. septembris</time> </header> <!-- Подзаголовок страницы --> <h2>Raksta apakšvirsraksts</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Iepriekš minētajā piemērā varat redzēt, ka galvenes un kājenes atzīmes tika izmantotas rakstā, lai izceltu raksta nosaukumu un kājeni.</p><h3>Sānjosla vai kolonna ar logrīkiem</h3><p>Katram atsevišķam sānjoslas elementam mēs izmantojam sānu bloku. Tās iekšpusē virsraksts ir formatēts ar h1 tagu. Tātad sānjoslas kolonna varētu izskatīties šādi:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Logrīka nosaukums</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Pēdējās notis</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Populāri komentāri</h1> ... </aside> </div> </p><h3>Sadaļas tags</h3><p>Sadaļas tags tiek izmantots, lai attēlotu tematiski saistīta satura grupu vai sadaļu. Tās lietojums ir līdzīgs rakstam ar galveno atšķirību, ka elementā ietvertajam saturam nedrīkst būt nekādas nozīmes. <section>ārpus pašas lapas konteksta. Ieteicams izmantot tagus ( <h1> – <h6>), lai norādītu sadaļas tēmu.</p><p>Lai sniegtu piemēru rakstam, kuru pašlaik lasāt, katru rindkopu varat ietīt tagā <section>. Piemēram, sadaļas tagu var izmantot, lai izceltu satura blokus galvenajā lapā. Tas izklausās līdzīgi div elementa definīcijai, ko bieži izmanto kā satura konteineru. Atšķirība ir tāda, ka elementam div nav semantiskas nozīmes, un tas neko nepasaka par tajā esošo saturu. Sadaļas tags, gluži pretēji, tiek izmantots, lai skaidri norādītu, ka saturs tajā ir saistīts ar nozīmi. Dažus div tagus varat aizstāt ar sadaļu tagiem, taču vienmēr uzdodiet sev jautājumu: "Vai šis saturs ir saistīts vai nav?"</p><p>Sadaļas taga izmantošanas piemērs sarakstā, kurā norādītas pilsētas:</p><p> <h1>Notikums Apart</h1> <section> <header> <h2>Pilsētas</h2> </header> <p>Pievienojieties mums šajās pilsētās 2010. gadā.</p> <section> <header> <h3>Sietla</h3> </header> <p>Sekojiet pa dzelteno ķieģeļu ceļu.</p> <section> <header> <h3>Bostona</h3> </header> <p>Tā ir Beantown saviem draugiem.</p> <section> <header> <h3>Mineapolisa</h3> </header> <p>Tas ir tik <em>jauki</em>.</p> <small>Izmitināšana nav nodrošināta.</small> </p><h3>Vietnes kājene — kājene</h3><p>Vietnes kājene ir veidota ar tagu <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 vietne Autortiesības</p> </footer> </p><h3>Secinājums</h3><p>Lai pārbaudītu lapas struktūru, varat izmantot HTML5 kontūras rīku. Tas parāda lapas struktūru pēc blokiem un virsrakstiem.</p><p>Semantika HTML5 neaprobežojas tikai ar iepriekš rakstā norādītajiem tagiem. Taču, izmantojot iepriekš minētos piemērus, varat atsvaidzināt marķējumu un padarīt savu vietni draudzīgāku meklētājprogrammām, kā rezultātā jūsu vietne tiks novērtēta augstāk meklēšanas rezultātos.</p><p>Lai turpinātu šo tēmu, varat izpētīt citus jaunus HTML5 tagus. Kā arī mikro formāti datu projektēšanai un strukturēšanai, piemēram, schema.org</p><p><b>Svarīga piezīme par HTML5 tagu izmantošanu.</b> Specifikācijā nav noteikti stingri noteikumi semantisko tagu lietošanai, tajā ir sniegti tikai ieteikumi to lietošanai. Ja nesaprotat vai nezināt, kur un kuru HTML5 tagu izmantot, labāk ir izmantot div, lai nekaitētu vai nesabojātu dokumenta struktūru.</p><p><b>Raksti un materiāli</b></p> <ul><li>1. HTML dokumenti ir strukturāli dokumenti.</li> <li>2. Elementu nosaukumus var rakstīt jebkurā gadījumā.</li> <li>3. Atribūtu nosaukumus var rakstīt jebkurā gadījumā.</li> <li>4. Atribūtu vērtības ir atkarīgas no reģistra, īpaši adresēm (Unix operētājsistēmu iezīme ir dažāda rakstzīmju interpretācija dažādos reģistros, tāpēc faili</li> </ul><p>attēls .gif un picture.GIF ir atšķirīgi!).</p> <ul><li>5. Elementu nosaukumos nedrīkst būt atstarpes.</li> <li>6. Ja atribūtu vērtībās ir atstarpes, tām jābūt pēdiņās.</li> <li>7. Papildu atstarpes, cilnes un ratiņu atgriešanas zīmes tiek ignorētas un saspiestas vienā atstarpē.</li> <li>8. Elementus var ligzdot vienu otrā. Šajā gadījumā ir jāievēro ligzdošanas noteikums. Ligzdotā elementa iekšpusē papildus sākuma tagam ir jābūt arī noslēguma tagam. Krustojumi ir nepareizi:</li> </ul><h1>HTML dokumentu struktūra</h1> <p>9. Pārlūkprogrammas ignorē nepazīstamus elementus un atribūtus ("kļūdu pielaide").</p> <p>Lielākajai daļai dokumentu ir standarta elementi, piemēram, virsraksts, rindkopas vai saraksti. Izmantojot HTML tagus, varat marķēt šos elementus, nodrošinot tīmekļa pārlūkprogrammām minimālo informāciju, lai parādītu šos elementus, vienlaikus saglabājot kopējo dokumentu struktūru un informācijas pilnīgumu. Viss, kas nepieciešams, lai lasītu HTML dokumentu, ir tīmekļa pārlūkprogramma, kas interpretē HTML tagus un parāda dokumentu, kā to paredzējis autors.</p> <p>Kad tīmekļa pārlūkprogramma saņem dokumentu, tā nosaka, kā dokuments ir jāinterpretē. Pašai pirmajai atzīmei, kas parādās dokumentā, ir jābūt tagam <HTML>. Šis tags norāda tīmekļa pārlūkprogrammai, ka dokuments ir rakstīts, izmantojot HTML.</p> <p><b>Komentāri HTML formātā.</b> Tāpat kā jebkura valoda, HTML ļauj dokumenta pamattekstā ievietot komentārus, kas tiek saglabāti, kad dokuments tiek pārsūtīts tīklā, bet pārlūkprogramma tos nerāda. Bieži vien daži tagi vai visas sintaktiskās struktūras tiek “paslēptas” komentāros no vecākām pārlūkprogrammu versijām, kuras nevar tos apstrādāt. Komentāri var parādīties jebkurā dokumentā un jebkurā daudzumā. Jāatceras, ka komentāri palielina dokumenta izmēru un līdz ar to arī ielādes laiku.</p> <p><b>Dokumenta vispārējā galvenes daļa.</b> Dokumenta galviņas atzīme jāizmanto uzreiz aiz atzīmes <HTML>un nekur citur dokumenta pamattekstā. Šis tags apzīmē vispārīgu dokumenta aprakstu. Sākuma tags <HEAD>novieto tieši pirms atzīmes <TITLE>un citi tagi, kas apraksta dokumentu, un beigu tags</head> ievieto uzreiz pēc dokumenta apraksta beigām.</p> <p><b>Dokumenta nosaukums.</b> Lielākā daļa tīmekļa pārlūkprogrammu parāda taga saturu <TITLE>tā loga nosaukumā, kurā atrodas dokuments, un grāmatzīmju failā, ja to atbalsta tīmekļa pārlūkprogramma. Virsrakstu ierobežo tagi <TITLE>Un, ievietots tagu iekšpusē . Dokumenta nosaukums neparādās, kad logā tiek parādīts pats dokuments.

      Dokumenta pamatteksta atzīmes. Dokumenta pamatteksta tagi identificē logā parādītā HTML dokumenta komponentus. Dokumenta pamattekstā var būt saites uz citiem dokumentiem, tekstu un citu formatētu informāciju.

      Dokumenta pamatteksts. Dokumenta pamattekstam jāatrodas starp tagiem Un. Šī ir dokumenta daļa, kas tiek parādīta kā teksta un grafiskā (semantiskā) informācija par jūsu dokumentu.

      Virsrakstu līmeņi<Нх>. Pirmais virsrakstu līmenis (lielākais) tiek apzīmēts ar skaitli 1, nākamais ar 2 un tā tālāk līdz skaitlim 6. Lielākā daļa pārlūkprogrammu atbalsta sešu virsrakstu līmeņu interpretāciju, definējot katram no tiem savu stilu. Vairumā gadījumu šādas galvenes teksts kļūs treknrakstā, un aiz teksta būs tukša rindiņa. Ir svarīgi, lai šie tagi noteiktu dokumenta loģisko struktūru un piedalītos interneta meklētājprogrammu indeksēšanā. Virs sestā līmeņa galvenes nav standarta, un pārlūkprogramma tās var neatbalstīt.

      Rindkopas atzīme<Р>. IN Atšķirībā no vairuma tekstapstrādes programmu, karietes atgriešana HTML dokumentā tiek ignorēta. Pārlūkprogramma sadala rindkopas tikai tad, ja ir atzīme<Р>. Ja neatdala rindkopas ar atzīmi<Р>, tad dokuments izskatīsies kā viena liela rindkopa.

      Iepriekš formatēta teksta atzīme

      .
       Tag 
      Ļauj ekrānā parādīt tekstu ar noteiktu formatējumu.  Iepriekš formatēts teksts beidzas ar beigu tagu
      . Iepriekš formatētajā tekstā varat izmantot: rindiņu padevi, tabulēšanas rakstzīmes (pārbīdiet par astoņām rakstzīmēm pa labi), pārlūkprogrammas instalēto nesamērīgo Courier fontu.

      Saraksta tagus. HTML dokumentā ir trīs galvenie sarakstu veidi: numurēts, ar aizzīmēm un aprakstu saraksts.

      Jūs varat izveidot ligzdotus sarakstus, izmantojot dažādus sarakstu tagus vai atkārtojot tos citos. Lai to izdarītu, jums vienkārši jāievieto viens tagu pāris (sākums un beigas) otrā iekšpusē. Tas, vai ligzdotajiem saraksta vienumiem būs tie paši marķieri, kas apzīmē saraksta vienumu, ir atkarīgs no pārlūkprogrammas.

      Numurēti saraksti. IN Numurētā sarakstā pārlūkprogramma automātiski ievieto vienumu numurus secībā. Tas nozīmē, ka, izdzēšot vienu vai vairākus vienumus no numurētā saraksta, atlikušie skaitļi tiks automātiski pārrēķināti.

        un beidzas ar tagu
    • .

      Saraksti ar aizzīmēm. Priekš Sarakstiem ar aizzīmēm pārlūkprogramma parasti izmanto aizzīmes saraksta vienumam. Marķiera veidu parasti konfigurē pārlūkprogrammas lietotājs.

      Numurēts saraksts sākas ar sākuma tagu

        un beidzas ar tagu
      . Katrs saraksta elements sākas ar tagu<ы>.

      Fontu formatēšana. HTML pieļauj divas pieejas teksta fragmentu fontu atlasei. No vienas puses, jūs varat tieši norādīt, ka fontam noteiktā teksta sadaļā jābūt treknrakstā vai slīprakstā, t.i. mainīt teksta fizisko stilu. No otras puses, ir iespējams atzīmēt kādu teksta daļu kā neparastu loģisko stilu, atstājot šī stila interpretāciju pārlūkprogrammas ziņā.

      Grafika HTML dokumentā. Viena no pievilcīgākajām WEB iezīmēm ir iespēja HTML dokumentā iekļaut grafiskos un cita veida datus.

      Ir divi veidi, kā izmantot grafiku HTML dokumentos. Pirmā ir grafisku attēlu iegulšana dokumentā, kas ļauj lietotājam skatīt attēlus tieši citu dokumenta elementu kontekstā. Tas tiek darīts, izmantojot tagu . Šī atzīme ir punktēta, t.i. tas neaizveras. Tagu sintakse:

      Nepieciešamajam parametram ir tāda pati sintakse kā standarta URL. Šis URL norāda pārlūkprogrammai, kur

      zīmējums. Zīmējums ir jāsaglabā grafiskā formātā, ko atbalsta pārlūkprogramma. Mūsdienās tie ir GIF, JPG, PNG formāti. Tos atbalsta lielākā daļa pārlūkprogrammu.

      ALT="teksts"

      Šis izvēles elements norāda tekstu, kas tiks parādīts pārlūkprogrammā, kas neatbalsta grafiku vai atspējota attēla grafika. Parasti tas ir īss attēla apraksts, ko lietotājs var vai varēs redzēt ekrānā. Ja šī parametra nav, lielākā daļa pārlūkprogrammu attēla vietā parāda tukšu rāmi. Tag ieteicams, ja lietotāji izmanto negrafisku pārlūkprogrammu, piemēram, Lynx, un meklētājprogrammu indeksēšanai. Teksts ir redzams arī tad, kad kādu laiku turat peles kursoru, nepārvietojot attēlu kā sistēmas rīka padomu zem kursora.

      Lielākā daļa pārlūkprogrammu ļauj dokumentā iekļaut fona attēlu, kas dublēsies kā vannas istabas flīzes un parādīsies kā visa dokumenta fons. Šis ir otrs veids. Dažiem lietotājiem patīk fona grafika, dažiem nē. Neuzkrītošs caurspīdīgs raksts (tapetes) parasti labi izskatās kā fons lielākajai daļai dokumentu.

      Hiperteksta saites ir galvenā sastāvdaļa, kas padara WEB pievilcīgu lietotājiem. Pievienojot hiperteksta saites (turpmāk – saites), lietotājs dokumentu kopu padara savienotu un strukturētu, kas ļauj iegūt nepieciešamo informāciju pēc iespējas ātrāk un ērtāk.

      Saitēm ir standarta formāts, kas ļauj pārlūkprogrammai tās interpretēt un veikt nepieciešamās funkcijas (zvana metodes) atkarībā no saites veida. Saites var norādīt uz citu dokumentu, noteiktu vietu dokumentā vai veikt citas funkcijas, piemēram, faila pieprasīšanu. Kā hipersaiti varat izmantot tekstu vai attēlu, vai abus.

      Saites struktūra HTML dokumentā. Lai pārlūkprogramma parādītu saiti uz URL, hipersaites tagā ir jāievieto teksts vai attēls. HTML sintakse ir šāda:

      <А HREF="URL">teksts-vai-attēls-kas-tiks-izcelts-kā-saite

      Tag<А HREF="URL">atver saites aprakstu un tagu– aizver to. Jebkuru tekstu, kas atrodas starp šiem diviem tagiem, tīmekļa pārlūkprogramma īpaši izceļ. Parasti šis teksts ir pasvītrots un izcelts. Attēls ir ierāmēts ar taisnstūrveida rāmi. Teksts, kas apzīmē URL, pārlūkprogrammā netiek rādīts, bet tiek izmantots tikai paredzēto darbību veikšanai, kad saite ir aktivizēta (parasti noklikšķinot uz izceltā vai pasvītrota teksta).

      Saites uz tagiem dokumentā. Varat izveidot saiti uz dažādiem viena dokumenta apgabaliem vai sadaļām, šīm sadaļām izmantojot īpašas slēptās etiķetes. Tas ļauj ātri pāriet no sadaļas uz sadaļu dokumentā, neritinot ekrānu. Tiklīdz lietotājs noklikšķina uz saites, pārlūkprogramma pārvietos viņu uz norādīto dokumenta sadaļu, un rinda, kurā ir šīs sadaļas etiķete, tiks ievietota pārlūkprogrammas loga pirmajā rindā (ja pietiek ar dokumentu pārlūkprogrammas logā).

      Katram HTML dokumentam jāsākas ar tagu < HTML> un beidzas ar tagu HTML> . Šie tagi norāda, ka līnijas starp tām apzīmē vienu HTML dokumentu. Turklāt jūs varat redzēt, ka HTML fails kopumā ir HTML valodas elements.

      Tāpat HTML dokumentā jāietver elementi HEAD (dokumenta informācija) un BODY (dokumenta pamatteksts).

      Dokumentu sadaļaGALVA

      Dokumenta sadaļa HEAD nosaka tā nosaukumu un satur arī papildu informāciju par dokumentu pārlūkprogrammai. Šī sadaļa nav obligāta, taču ieteicams to vienmēr izmantot savos HTML dokumentos, jo labi uzrakstīta galvene var būt ļoti noderīga.

      Galvenes sadaļa sākas ar tagu < GALVA> un tūlīt aiz atzīmes . Starp elementa HEAD sākuma un aizvēršanas tagiem ir citi galvenes elementi.

      Dokumenta nosaukuma nosaukums

      Lai HTML dokumentam piešķirtu nosaukumu, tags ir < TITLE> . Šis nosaukums tiks parādīts pārlūkprogrammas loga virsrakstā. Nosaukums ir rakstīts starp tagiem Un un ir teksta rindiņa. Šīs rindiņas garums var būt jebkurš, taču ieteicams to padarīt ne vairāk par 60 rakstzīmēm. Elementam TITLE jāparādās tikai sadaļā HEAD.

      Dokumentu sadaļaBODY

      Šajā dokumenta sadaļā ir informācija, kas tiek parādīta pārlūkprogrammas logā. Sadaļai BODY jāsākas ar atzīmi < BODY> un beidzas ar tagu BODY> , starp kuriem atrodas HTML elementi, kas veido dokumenta saturu.

      Preces specifikācijaBODY

      Tag ir vairāki atribūti, kas nosaka dokumenta izskatu. Tālāk ir norādīta tagu specifikācija .

      TEKSTS = "teksta krāsa"

      BGCOLOR = "fona krāsa"

      BACKGROUND="fona attēla adrese"

      Atribūts TEXT norāda fonta krāsu visam dokumentam RGB vai rakstzīmju apzīmējumā. Pēc noklusējuma (ja šis atribūts nav norādīts) tiek izmantoti pārlūkprogrammas iestatījumi.

      Atribūts BGCOLOR norāda dokumenta pārlūkprogrammas loga fona krāsu RGB vai simboliskā apzīmējumā. Pārlūka iestatījumi tiek izmantoti pēc noklusējuma.

      Atribūts BACKGROUND ļauj norādīt kā fonu izmantotā attēla adresi un nosaukumu. Šis zīmējums tiks reproducēts un izplatīts dokumenta fonā.

      Atribūti LINK, VLINK un ALINK norāda hipersaišu krāsas RGB vai simboliskā apzīmējumā. Pārlūka iestatījumi tiek izmantoti pēc noklusējuma. Neapmeklēta hipersaite ir hipersaite, kas vēl nav izmantota, lai pārvietotos uz citu dokumentu. Apmeklētā hipersaite ir hipersaite, kas jau ir izmantota, lai pārvietotos uz citu dokumentu. Aktīva hipersaite – hipersaite uz dokumentu, uz kuru pašlaik notiek navigācija.

      Padomi BODY tagu atribūtu lietošanai

       Ja BODY tagā norādāt vismaz vienu krāsu, tad norādiet arī pārējās. Tas ir saistīts ar faktu, ka lietotājs var iestatīt savas pārlūkprogrammas krāsu iestatījumus, kā viņam ērtāk. Norādot tikai vienu krāsu, dažiem lietotājiem teksts var sajaukties ar fona krāsu. Tā rezultātā dokumenta apskate būs sarežģīta.

       Izvēlieties teksta krāsu, lai tā “strādātu” ar fona krāsu vai attēla galvenajām krāsām. Piemēram, sarkans uz zaļa var radīt nopietnas problēmas ievērojamam skaitam cilvēku.

       Elementā BODY var norādīt gan BGCOLOR, gan BACKGROUND. Šajā gadījumā pārlūkprogramma dod priekšroku BACKGROUND, bet, ja fona attēlu nevar ielādēt, tiks izmantota BGCOLOR. Tāpēc mēģiniet iestatīt fona krāsu līdzīgu fona attēla krāsai, lai neizjauktu dokumenta krāsu līdzsvaru.



       

      Varētu būt noderīgi izlasīt: