Sveiki, dārgie emuāra vietnes lasītāji. Šodien sāksim runāt par tagiem HTML valodā, proti, virsrakstiem H1, H2, H3, H4, H5, H6, par rindkopām P un rindiņu pārtraukumiem Br, kā arī par horizontālo līniju tagu Hr, uz kura piemēra mēs apsvērsim atribūtu izmantošanu un redzēsim, kur būs iespējams uzzināt visus iespējamos atribūtus katram elementam un apskatīt to vērtību sintaksi.

Galvenā atšķirība starp iekļautajiem un bloka tagiem ir tāda, ka pirmie var sekot viens otram platumā, līdz beidzas šim atvēlētā vieta, un pēc tam tie tiks pārvietoti uz nākamo rindu.

Pēc noklusējuma mēģiniet bloķēt elementus aizņem visu pieejamo vietu un tāpēc nākamais bloka elements noteikti būs citā rindā.

Tagad sāksim sistemātisku visu iespējamo HTML tagu izpēti un tajā pašā laikā īpašu uzmanību pievērsīsim tam, kādam veidam tie pieder, lai skaidri saprastu to pareizas (derīgas) izmantošanas iespējas. Vienkāršota tagu struktūra izskatās šādi:

Viņiem ir arī atribūti (katram ir sava kopa), kas ļauj šim elementam pievienot noteiktas īpašības, taču mēs par to runāsim ar konkrētiem piemēriem.

Sāksim ar tādu lietu kā virsraksti, kas tiek veidoti, izmantojot sapārotus tagus H1, H2, H3, H4, H5, H6 (nosaukums cēlies no vārda "Header", t.i. "title" pirmā burta). Tie ir paredzēti, lai atdalītu dažādus teksta fragmentus vienu no otra un atzīmētu to nozīmi atkarībā no līmeņa. Mūsdienu HTML valodas versijā visi tagi un visi tiem atļautie atribūti ir iepriekš noteikti un aprakstīti.

Rezultātā virsrakstiem var būt tikai seši līmeņi un papildus elementi H1-H6 ir bloki, t.i. mēdz aizņemt visu pieejamo vietu visā lapas platumā. Bet tiem ir viena īpašība – virsrakstu tagos var atrasties tikai iekļautie elementi, neskatoties uz to, ka, piemēram, tas pats Div ļauj iekšā iekļaut citus bloku tagus.

Tas. pārlūkprogramma neļaus, piemēram, ievietot viena līmeņa virsrakstus cita līmeņa virsrakstos, jo tie atkal ir bloka elementi, bet tajos var būt tikai mazie burti. Ak kā.

Nosaukumi dažādi līmeņi H1-H6 pārlūkprogrammās tiks zīmēts ar dažāda lieluma fontiem (lai gan, izmantojot CSS, jūs varat iestatīt tos uz absolūti jebkuru izmēru, krāsu un fonta veidu, lai parādītu pārlūkprogrammā, bet tīrā HTML — šādi noteikumi):

Ja ņemam vērā vietnes izkārtojumu, ņemot vērā tās turpmākās reklamēšanas ērtības (), tad ir vērts pieminēt, ka vajadzētu būt tikai viena H1 virsraksts katrā lapā. Jūs, iespējams, varētu izmantot divus H1, taču vairāk nekā tas, visticamāk, izraisīs meklētājprogrammu pretreakciju, kad tās nonāks jūsu dokumentā. Jūsu darbības var tikt uzskatītas par surogātpastu vai atbilstības krāpšanos.

Tāpat nav ieteicams izlaist virsrakstu līmeņus, t.i. pēc H1 jāizmanto H2, lai izceltu mazāk svarīgas teksta daļas utt. Maz ticams, ka tas radīs nopietnas sankcijas no meklētājprogrammām, taču labāk ir sekot loģikai, veidojot virsrakstu līmeņus HTML kodā.

Meklētājprogrammas piešķir lielāku nozīmi vārdiem, kas ietverti šajos tagos, nevis vārdiem, kas vienkārši stāv tekstā. Tas liek secināt, ka, rakstot rakstus, noteikti vajadzētu papildināt lietotos virsrakstus.

Pats par sevi virsrakstu izmantošana raksta tekstā padara to vizuālāku un palīdz lasītājiem ātri orientēties informācijas komplektā. Domāju, ka pirmajai reizei informācijas pietiks un laiks doties tālāk.

Rindkopa, rindiņas pārtraukums un horizontālā līnija HR HTML kodā

P tags ir atvasināts no vārda "paragrāfs", bet biežāk to dēvē par rindkopu. Tos izmanto, lai izceltu noteiktu teksta daļu, kas parasti ietver vairākus teikumus. Starp rindkopām, ko veido P elementi vertikāli, parādās tukša vieta, kas ļauj atsevišķas loģiskās teksta daļas vizuāli viens no otra.

Lieta tāda, ka cilvēkam ir diezgan grūti izlasīt teksta monolītu, ja tas nav sadalīts atsevišķos mazos fragmentos. Piemēram, es pat nesāku lasīt rakstus, kas nav sadalīti rindkopās HTML kodā, jo tas ir ļoti kaitinoši.

Pārkāpjot tekstu jūs spēcīgi pazemināt savu noguruma slieksni apmeklētājiem jūsu resursam un uzlabot lietotāju faktorus (laiku, ko lietotājs pavada jūsu vietnē un), kas savukārt pozitīvi ietekmē reklamēšanu.

Tiem pašiem mērķiem (lietotāju uzmanības noturēšana un noguruma mazināšana, lasot rakstu) viņi tekstam pievieno dažādus un dažreiz, iespējams, arī tekstus.

Starp citu, rindkopas tags P, kā jūs droši vien jau pamanījāt, ir pāra tags, taču saskaņā ar hiperteksta iezīmēšanas valodas 4.01 specifikāciju tā noslēdzošais elements ir pilnībā. nav nepieciešams. Šajā gadījumā pārlūkprogrammai pašai būs jāizdomā, kur tā jānovieto.

Tā kā P ir bloka elements, tajā var ievietot tikai iekļautos elementus. Tāpēc pārlūkprogramma, atradusi sākuma rindkopas tagu, parsē kodu tālāk un, tiklīdz tas uzduras nākamajam bloka elementam (visticamāk, tas būs nākamais atvēršanas P), uzreiz pirms tā ievieto beigu rindkopas tagu. Html 5 standartā šādas brīvības, visticamāk, nebūs, un jums tas jādara nekavējoties pierodiet aizvērt visus tagus un rakstiet tos tikai ar mazajiem burtiem.

Rindkopa ir bloka elements, tāpēc teksts rindkopās aizņems visu tai pieejamo platumu. Tas ir, ja dokumenta HTML kodā ierakstījāt četrrindu, kā tam vajadzētu būt (katru rindiņu atsevišķi) un pilnībā ievietojāt šo četrrindu P rindkopas tagos, tad pārlūkprogrammā jūs redzēsit, ka visas jūsu četras rindiņas tiks apvienotas viens un aizņems visu tekstam pieejamās vietas platumu.

Kāpēc tas notiek, mēs jau detalizēti apspriedām rakstā par. Pateicoties šai hiperteksta iezīmēšanas valodas īpašībai (ka jebkurš atstarpes rakstzīmju skaits avota kodā tiks aizstāts ar vienu atstarpi, kad tās tiek parādītas pārlūkprogrammā), jūs varat formatēt savu kodu jebkurā ērtā veidā, nebaidoties sabojāt tā displeju. tīmekļa lapu.

Nu, ja jums patiešām ir jāraksta četrrinde vispārpieņemtā formā, tad šim nolūkam varat izmantot papildu HTML

rindas pārtraukuma tagi, ko sauc par BR

(no vārda "pārtraukums"):

BR ir iekļauts elements un arī "tukšs", t.i. vienreizējs (nav noslēguma elementa). Visa BR funkcija ir tāda, ka tas izraisa rindiņas pārtraukumu, kad teksts tiek parādīts pārlūkprogrammā (līdzīgi kā jebkura teksta redaktora taustiņš Enter).

BR tagu rakstīšana (rindas pārtraukums) kodā netiek nekādā veidā regulēta. Varat rakstīt visu tekstu kopā un pareizajās vietās ievietot BR, nevis atstarpes, vai arī varat nekavējoties sadalīt tekstu koda rindās un ievietot BR vai nu rindu beigās, vai to sākumā. Tas nemaina būtību.

HR(saīsinājums vārdiem “horizontālais likums”, t.i., horizontāla līnija) ir ļoti vienkāršs HTML tags, kas velk horizontālu līniju (joslu) visā ekrāna platumā un biezumā atkarībā no pārlūkprogrammas, kurā tas tiek skatīts ( būtībā tas ir vizuāls marķieris, kas, pēc analoģijas ar virsrakstu tagiem, ļauj sadalīt tekstu loģiskās daļās, lai atvieglotu asimilāciju).

Tas ir "tukšs" (viens), t.i. nav pāra (beigu atzīme). Turklāt, HR ir bloka elements, t.i. pēc noklusējuma tas aizņem visu tai pieejamās lapas platumu.

Atribūtu jēdziens un noteikumi to rakstīšanai HTML tagos

Apskatīsim šādu jēdzienu kā šī vienkāršā elementa atribūtu. Fakts ir tāds, ka mēs varam pievienot tagiem derīgus atribūtus un WC3 validatorā aprakstītos atribūtus, tādējādi piešķirot saturam vajadzīgo rekvizītu.

Piemēram, ja jums ir vairākas rindkopas (rindkopas), kas ir ietvertas atbilstošajos P tagos, tad, lai mainītu viena no tām izskatu, jums vienkārši jāpievieno nepieciešamie atribūti šīs rindkopas sākuma P elementam. Atsevišķu (tukšu) tagu gadījumā vispār nav iespēju pievienot vajadzīgo atribūtu.

Tātad pirmais noteikums ir atribūti tiek ievietoti tikai sākuma tagā(noslēdzošais nekad nesatur neko). Viens elements var saturēt vairākus atribūtus, kas ir atdalīti viens no otra un starp taga nosaukumu ar atstarpi (obligāts nosacījums). Ļaujiet man nekavējoties sniegt piemēru par to izmantošanu horizontālajai HR līnijai:

Tātad vispirms apskatīsim atribūtu sintaksi. Tie tiek ievietoti sākuma tagā, rakstīti ar atstarpi (ieskaitot atstarpi aiz elementa nosaukuma), un tie ir konstrukcija, kas ietver nosaukumu, "vienādības" zīmi un rakstītas pēdiņās (parasti ir pieņemts likt pāros dubultniekus, bet standarts pieļauj arī sapārotus singlus). pēdiņas) vērtības. Atribūtu secība taga HTML kodā nav svarīga.

Tur es iedevu saiti uz visu HTML atļauto tagu saraksts. Ja šajā sarakstā noklikšķināsit uz jūs interesējošā elementa nosaukuma (mūsu gadījumā tas ir HR), jūs tiksit novirzīts uz lapu ar detalizētu tā specifikāciju:

Var būt visi jebkura taga atribūti sadalīt trīs grupās:

1. Vispārīgi - tie var pastāvēt lielākajā daļā HTML valodas elementu. Augšējā attēlā tie atrodas apakšā un apvilkti sarkanā krāsā. Patiesībā ir maz izplatītu atribūtu (tikai seši), un pat tad ir maz ticams, ka jūs tos visus izmantosit savā praksē. Visticamāk, tikai četri - , nosaukums un stils.
2. Notikuma atribūti — tie ir nepieciešami, lai aktivizētu kādu darbību, reaģējot uz lietotāja darbību vai sistēmas notikumu. Tie ir vairāk saistīti ar JavaScrit un atrodas augšējā attēlā pašā apakšā (apvilkti tumšā lodziņā).
3. Unikāls — katram tagam parasti ir savs atribūtu kopums, no kuriem daži var nebūt atrodami citos elementos. Ja mēs ņemam vērā horizontālo līniju HR, tad tai ir tikai četri unikāli atribūti (līdzinājums, nokrāsa, izmērs un platums). Pārlūks ignorēs visas pārējās HR tagā norādītās (izņemot divas iepriekš aprakstītās grupas).

Atribūtu piemēri HR horizontālās līnijas tagā

Dažādu atribūtu vērtības var būt vai nu patvaļīgi skaitļi (u.c.), vai vērtības no iepriekš noteiktas kopas, piemēram, piemēram, līdzināšanas gadījumā HR - pa kreisi|centrs|pa labi (varat izmantot vienu no trim līdzinājumiem opcijas).

Kopumā informāciju par tiem WC3 validatorā var iegūt ne tikai Html tagu sarakstā, bet arī atribūtu saraksts kuru varat atrast zemāk esošajā saitē.

Šajā sarakstā ir iekļauti visi iespējamie varianti visiem tagiem, kas pieejami HTML valodā. Kolonnā "Saistītie elementi" pretī jūs interesējošajai opcijai tiks uzskaitīti elementi, kuros var izmantot šo atribūtu. Slejā “Tips” ir norādīts datu veids, ko var izmantot kā to vērtību.

Piemēram, rindā pasvītrotajā attēlā atribūtam HR tagam HR ir atļautas tikai trīs fiksētas vērtības, kas ir norādītas tur (pa kreisi | centrā | pa labi).

Vēl viena ļoti svarīga sleja ir "Depr". Ja šajā slejā burts D atrodas pretī jūs interesējošajam atribūtam, tad tā lietošana nav ieteicama, un jums ir jāpiemēro atbilstošie CSS stili, lai to aizstātu. Apskatot tagu specifikāciju, mēs arī redzējām, ka blakus visu četru HR atribūtu nosaukumiem ir rakstīts vārds “Deprecated” (nav ieteicams lietot).

Apskatīsim, kādi atribūti tiek izmantoti ar elementiem, kurus jau esam aplūkojuši šajā rakstā (P, virsraksti H1-H6 un HR). Viņiem visiem jūs varat izmantot "līdzināt", jo visi šie elementi ir bloka elementi. Iekļautajiem elementiem līdzināšanas atribūts zaudē nozīmi.

Piemēram, ja pievienojat "līdzināt" virsraksta tagam (piemēram, H1), varat iestatīt virsraksta teksta līdzinājumu. Tie. bloka elements aizņems visu platumā pieejamo vietu, bet šī virsraksta saturs (tā teksts) var būt vai nu līdzināts pa kreisi (pa kreisi ir noklusējums), vai līdzināts pa labi (pa labi), vai centrēts (centrs) ), vai platumā (pamato - mainās attālums starp vārdiem, kā laikrakstu slejās).

Tas pats, starp citu, attieksies uz HTML rindkopas tagu P un konteineru Div, ja rūpīgi aplūkojat iepriekš redzamo ekrānuzņēmumu.

Horizontālajai HR līnijai atribūts "līdzināt" nozīmēs šī elementa vishorizontīvākās līnijas izlīdzināšanu. Bet HR tags ir bloka elements, un tas platumā aizņem visu pieejamo vietu. Tāpēc ir jēga izmantot "līdzināt" tikai tad, ja jūs iestatiet atribūta "width" vērtību(platums) ir mazāks par lapas platumu.

Kā “platuma” vērtību varat izmantot tikai skaitļus (tas būs platums pikseļos), vai arī varat izmantot horizontālās HR līnijas kopējā platuma procentuālo daļu. Atribūta "size" vērtība vienam un tam pašam tagam ir iestatīta skaitļos, kas norāda horizontālās līnijas augstumu pikseļos. Apskatīsim to ar piemēru:

---

HR tagam Html 4.01 standartā ir vēl viens atribūts, ko sauc par vienu, jo tam nevar būt nekādas vērtības (tas nozīmē tikai kādu darbību) — tas ir "noshade", kas neļauj horizontālajai līnijai mest ēnu:

---

Skaidrs, ka es nevarēšu apsvērt visus iespējamos atribūtus visiem iespējamajiem tagiem HTML, un tas arī nav nepieciešams, jo visu var izdarīt pēc analoģijas - galvenais ir saprast sintaksi un pašu ideju. Turklāt daudzi no tiem jau ir kļuvuši neiesakāmi lietošanai, jo. Tagad to funkciju veic CSS stili, par ko arī pavisam drīz sāksim runāt sīkāk.

Veiksmi tev! Uz drīzu tikšanos emuāra lapu vietnē

Jūs varētu interesēt

Tabulas Html — tabulas, Tr un Td tagi, kā arī Colspan, Cellpadding, Cellspacing un Rowspan, lai tās izveidotu
Iframe un Frame - kas tie ir un kā vislabāk izmantot rāmjus HTML
Komentāru direktīvas un Doctype HTML kodā, kā arī bloku un iekļauto elementu (tagu) jēdziens
Iegults un objekts — HTML tagi multivides satura (video, zibatmiņas, audio) attēlošanai tīmekļa lapās
Kā ievietot saiti un attēlu (fotoattēlu) HTML - IMG un A tagi
Vietnes HTML veidlapas - tagi Form, Input and Select, Option, Textarea, Label un citi tīmekļa veidlapu elementu izveidei
Fonts (seja, lielums un krāsa), Blockquote un Pre-tags — novecojis teksta formatējums tīrā HTML formātā (neizmantojot CSS)
Atstarpes rakstzīmes un to koda formatējums HTML formātā, kā arī speciālās atstarpes rakstzīmes un citas mnemonikas
Kā izveidot hipersaiti (A, Href, Target blank), kā to atvērt jaunā vietnes logā, kā arī padarīt attēlu par saiti HTML kodā

Un šodien mēs sīkāk aplūkosim, kas ir html tagus un viņiem atribūti Piemēram p, br, st; un kādu lomu pildīt atribūtu vērtības tagus, kas ietverti html dokumentā.

Pirms sāku, es vēlētos atvainoties par savu ilgo prombūtni. Fakts ir tāds, ka aizņemtības dēļ vienā projektā man kādu laiku nācās atteikties no emuāra atjaunināšanas un nedaudz atpaliku no grafika. Taču tagad viss ir beidzies un ceru arī turpmāk saglabāt to pašu ritmu un regulāri nodrošināt svaigus materiālus.

Tagad atgriežos pie iecerētās tēmas. Iepazīstoties ar html pamatiem, jau rakstīju par html dokumentu uzbūvi, kur sniedzu arī skaidrojumus par galvenajiem html, head un body tagiem, kam jābūt katrā dokumentā, kā arī speciālu tagu.sauc par deklarāciju.

Tajā pašā sadaļā ir sniegta informācija par , ļaujot izmantot iespēju veidot sarakstus. Turklāt vietnē varat iepazīties ar veidlapām un atsevišķi ar tagiem, kas ļauj noformēt visdažādākās veidlapas: .

Saņemot no jums, dārgie lasītāji, daudz novēlējumu caur atsauksmju veidlapu un pa e-pastu, nolēmu atgriezties sākumā un sīkāk pakavēties pie tā, kādi tagi vispār pastāv, kā tie tiek klasificēti un kādi ir html tagu atribūti. . Tātad, sāksim.

Dubultie un vienreizējie, bloķētie un iekļautie HTML tagi: p, br, hr

Kā jūs droši vien jau sapratāt no iepriekšējiem emuāra ierakstiem, tags ir galvenais struktūrvienība hiperteksta iezīmēšanas valoda HTML (Hyper Text Markup Language). Kopumā tā ir tagu kopa, kas nosaka html kodu, kas apraksta konkrētu dokumentu (piemēram, vienu no jūsu resursa lapām).

Atzīmes tiek klasificētas pārī un atsevišķās, kā arī bloķētās un iekļautās. Tagad secībā mēs apsvērsim to atšķirības būtību, izmantojot populārāko un biežāk izmantoto tagu piemēru. Starp citu, daudzos avotos var atrast bloku un iekļauto elementu nosaukumus, ziniet, ka tie ir viens un tas pats.

Lai sāktu, dāmas īsas definīcijas. Pārī savienoti html tagi- elementiem, kuriem ir sākuma un beigu atzīmes, starp kurām ir ievietots saturs, nav neviena noslēguma taga. Bloku elementus sauc par elementiem, kas aizņem visu pieejamo platumu, tā augstumu nosaka saturs. Tāpēc pēc noklusējuma vairāki bloka elementi atradīsies viens zem otra.

Bloku elementus var ligzdot, bet ne visus, par to vairāk vēlāk. Iekļautie tagi parasti satur tekstu vai citus iekļautos elementus, taču iekļautajos tagos bloku tagi nav atļauti. Iekļautie tagi, atšķirībā no bloku tagiem, atrodas vienā rindā un tiek pārsūtīti uz citu tikai nepieciešamības gadījumā, kad beidzas platumā pieejamā vieta.

Iespējams, iesācējiem tas joprojām ir grūti un galvā ir apjukums, bet sākums ir sākums. Nākotnē viss kļūs skaidrs, esmu par to pārliecināts. Turklāt es pievēršos konkrētiem piemēriem, kuru pamatā ir izplatīti tagi, katru reizi atzīmējot, uz kuriem elementiem — iekļautiem vai blokiem, pāriem vai atsevišķiem — katrs no tiem attiecas.

Sāksim ar p tagu, ko katrs tīmekļa pārzinis izmanto burtiski katru minūti, es nepārspīlēju. Šī elementa nosaukums cēlies no sākuma burta Angļu vārds punkts (punkts, rindkopa). Tas kalpo, lai izceltu teksta fragmentus, kas šādā veidā lasītājiem ir daudz vieglāk uztverami. Šobrīd, piemēram, rakstu rakstu un ik pa laikam izceļu ieraksta tekstu rindkopās, to var redzēt.

Sadalot tekstu fragmentos un maksimāli atvieglojot materiāla uztveri resursa apmeklētājiem, var būtiski uzlabot resursu meklētājprogrammās, kas ir svarīgi tā popularizēšanā.

Tā pamatā, protams, elements p ir savienots pārī, jo tam ir sākuma un aizvēršanas tags. Tajā pašā laikā tas ir bloka elements, kurā var būt tikai iekļauti elementi. Piemēram, ja kādu tekstu rakstāt vairākās rindiņās un ievietojat to starp sākuma un beigu p tagiem, tad pārlūkprogramma to joprojām parādīs vienā rindā, un tikai tad, ja teksts neietilps vienā rindā, tas tiks aplaimots.

HTML tagi P tags ir bloka elements P taga saturs

Bet, lai šo tekstu parādītu vairākās rindās, ir jāizmanto elements br (no angļu valodas "break"), kas ir viens, tas ir, tam nav noslēguma taga, un tas ir arī iekļauts elements. Ievietojot to katras teksta rindiņas beigās, kas ir p taga saturs, mēs iegūstam vēlamo opciju:

HTML tagi
p tag - bloka elements
p tagu saturs

Br tagu rakstīšana ir gandrīz bez maksas. Tas ir, jūs varat atlasīt vairākas rindiņas vienlaikus un ievietot šo tagu katras no tām beigās vai arī varat vienkārši uzrakstīt tekstu parastajā veidā un ievietot br domājamo defisu vietās. P bloka taga saturā iekļauto br elementu skaits var būt tik liels, cik vēlaties. Tas ir, no jaunas rindas var uzrakstīt tik daudz teksta, cik vēlaties.

Tagad apskatīsim vēl vienu vienkāršu tagu, par kuru sīkāk runāsim raksta beigās. Tas ir par hr tagu (no angļu valodas horizontālais noteikums- horizontāla līnija), kas ir viena, bet tajā pašā laikā bloka, jo pēc noklusējuma tā aizņem visu iespējamo platumu. Tas apraksta vienkāršu horizontālu līniju, kas ir noderīga, sadalot lapas saturu loģiskās daļās. Tas var būt teksta dalījums, attēlu grupas vai kāda cita dizaina daļa.

Šīs horizontālās līnijas izskats ir atkarīgs no pārlūkprogrammas, kurā tiek skatīta lapa, kuras html kods satur šo elementu. Turklāt šīs līnijas izskatu, kā arī citu elementu izskatu var rediģēt, izmantojot dažādus atribūtus. Šeit mēs gludi pietuvojāmies citai mūsu šodienas tēmas sastāvdaļai, proti, html tagu atribūtu jēdzienam.

HTML tagu atribūti un to klasifikācija

Html tagu atribūti ļauj tiem piešķirt papildu īpašības un dažādot pārlūkprogrammas parādīto tīmekļa lapu elementu izskatu. Katram tagam var būt vairāki atribūti. Katrs no tiem spēlē lomu konkrētas vietnes lapas apgabala dizaina veidošanā. Atribūti tiek rakstīti sākuma taga iekšpusē aiz paša elementa nosaukuma. Ja ir vairāki atribūti, to secībai nav nozīmes, tā var būt jebkura.

Gandrīz katram atribūtam ir sava vērtība (parametrs). Parasti jebkuru atsevišķu vai pāru tagu shematiski var attēlot šādi:

Lūdzu, ņemiet vērā, ka, lai norādītu atribūta vērtību, pēc atribūtu nosaukumiem ir jāliek vienādības zīme un pati vērtība jāievieto vienpēdiņās vai dubultpēdiņās. Atribūti var būt gan iekļautajos, gan bloka atribūtos; gan atsevišķās, gan pāru tagos.

Protams, viena elementa gadījumā noslēguma atzīmes nebūs. Visi atribūti un to vērtības ir rakstītas sākuma taga iekšpusē, un tās ir jāatdala ar atstarpi, pretējā gadījumā atbilstošais apgabals pārlūkprogrammā netiks parādīts pareizi. Jā, gandrīz aizmirsu, daži atribūti var būt bez vērtībām. Protams, nav iespējams izjaukt visus tagus kopā ar visiem iespējamajiem atribūtiem, un tas nav svarīgi, galvenais ir saprast to pielietošanas mehānismu. Oficiālajā lapā varat izpētīt visus ieteiktos html tagus.

Tiesa, ir dati, kas atbilst oficiāli spēkā esošajiem html 4.01 standartiem. Taču html 5 versijas ieviešana norit ātrā tempā, pēc kuras noteikumiem jau spēlē populārās pārlūkprogrammas. Un iekšā jauna versija hiperteksta iezīmēšanas valoda, daži tagi un atribūti jau būs nederīgi, tas ir, neatbilst html standartiem. Tāpēc mēs ejam līdzi laikam un turpmāk piedāvāšu jums tikai derīgus tagus un atribūtus, kā arī turpmāk uzzināsim, kā izvairīties no neatbilstības html koda standartiem, materiāli par šo tēmu parādīsies pavisam drīz.

Bet paskatīsimies uz oficiālo W3C lapu, kur ir parādīta ieteicamo html tagu tabula. Ja noklikšķināsim uz saites ar mūs interesējošo tagu (skaidrības labad ņemsim jau pieminēto hr tagu, jo īpaši tāpēc, ka ar to tālāk apskatīsim vienu piemēru), tad tiksim novirzīti uz šo mājaslapu, kur specifikācija attiecībā uz šo elementu ir norādīts:

Visus elementu atribūtus var iedalīt trīs grupās:

1. Vispārējo atribūtu grupa- tie attiecas uz gandrīz visiem html tagiem. Iepriekš redzamajā ekrānuzņēmumā tie ir izcelti zaļā rāmī.
2. Unikālie atribūti- atribūtu kopa, kas raksturīga tikai šim elementam (attēlā redzamajam hr tagam tie ir pasvītroti purpursarkanā krāsā: līdzinājums, nokrāsa, izmērs, platums). HTML 5 specifikācijā tika pievienots jauns krāsas atribūts, kas nosaka horizontālās līnijas krāsu.
3. Pasākumi- Šie atribūti ir nepieciešami, ja ir nepieciešama kāda darbība, reaģējot uz lietotāja darbību. Ekrānuzņēmumā tie ir izcelti zilā rāmī.

Informāciju par atribūtiem var atrast arī citā W3C lapā, kurā ir tabula ar pilnu html atribūtu sarakstu:

Šajā tabulā ir uzskaitīti visi atribūti visiem tagiem, kas pastāv hiperteksta iezīmēšanas valodā. Kolonnā "Saistītie elementi" blakus vajadzīgajam atribūtam ir atzīmēti tagi, kuros var izmantot šo atribūtu. Kolonnā "Tips" ir norādīts datu veids, ko var izmantot kā atribūta vērtību. Piemēram, līdzināšanas atribūtam (kas norāda elementa izlīdzināšanu) ir trīs iespējamās vērtības (pa kreisi, centrā, pa labi).

Ja ailē "Dept" ir burts D, tad šis atribūts nav ieteicams, pretējā gadījumā html dokuments neizturēs validāciju. Šajā gadījumā ir jāizmanto css stili, kurus, kā jau atzīmēju, mēs tuvākajā laikā pētīsim. Tas ir obligāti, jo tendence ir tāda, ka lielākā daļa atribūtu HTML 5 ir novecojuši un elementu izskats ir jādefinē, izmantojot css.

Starp citu, absolūti pilnīga informācija ar pievienotiem tagiem un to atribūtiem saskaņā ar html 5 ir sniegta vienā no labākajiem, manuprāt, resursiem, kas veltīti html pamatu apguvei, proti, htmlbook un krievu valodā.

Kā parādīt horizontālu līniju, izmantojot hr tagu

Mēs rīkosimies pakāpeniski. hr elements bez atribūtiem definē vienkāršu horizontālu līniju, kas aizņem visu telpas platumu (skatiet piemēru iepriekš). Secīgi piemērojot dažādus atribūtus hr tagam, mēs mainīsim horizontālās līnijas izskatu.

Vispirms ierakstīsim līdzināšanas un platuma atribūtus. Kas attiecas uz līdzināšanu, to ir jēga izmantot tikai tad, ja ir iestatīts atribūts width, kas norāda elementa platumu (mazāks par lapas platumu). Atgādināšu, ka hr tag ir bloka elements un pēc noklusējuma aizņem visu platumā pieejamo vietu.

Atribūta platuma vērtība var būt vai nu skaitļi (tādā gadījumā platums tiks iestatīts pikseļos), vai procenti, kas iestata elementa platumu kā daļu no pieejamās vietas. Izmēra atribūta vērtība ir norādīta skaitļos un nosaka elementa augstumu (šajā gadījumā horizontālās līnijas biezumu). Tātad, aplūkosim piemēru:

---

Pēc tam pievienojiet noshade atribūtu iepriekšminētajam. Fakts ir tāds, ka, izmantojot hr tagu, pēc noklusējuma tiek izmantoti trīsdimensiju efekti (ēna), to var redzēt, aplūkojot līniju, kas atrodas nedaudz augstāk. Ierakstot atribūtu noshade, mēs aizliedzam to izmantošanu.

---

Tagad mēģināsim pievienot krāsas atribūtu, kas nosaka horizontālās līnijas krāsu. Ņemiet vērā, ka, izmantojot šo atribūtu, 3D efekti tiek automātiski atspējoti, tāpēc noshade lietošana nav nepieciešama. Kā vērtību mēs iestatām krāsas nosaukumu, piemēram, "zils".

---

Tā tālāk konkrēts piemērs p, br, hr mēs apskatījām, kā html tagi, kā arī dažādi izmantotie atribūti ietekmē dažādu elementu veidošanos tīmekļa lapā. Drīzumā publicēšu šīs tēmas turpinājumu, tāpēc, lai saņemtu jaunus materiālus, neaizmirstiet abonēt emuāra atjauninājumus, izmantojot RSS plūsmu vai e-pastu. Lūdzu, ļaujiet man aiziet ar laba vēlējumiem.

Tag

Tag

izmanto, lai sadalītu lapu rindkopās. Tajā var būt tikai teksta un iekļautie tagi (rindas līmeņa tagi). Tajā pašā laikā atzīme

Tas ir bloks, tas ir, tas rada līnijas pārtraukumu pirms un pēc sevis. Turklāt tas nosaka brīvās vietas piemales (margin) augšā un apakšā no sāniem uz apkārtējo kontekstu, kā rezultātā lapa tiek vizuāli sadalīta rindkopās. Atzīmes lauka lielums

Tas ir atkarīgs no pārlūkprogrammas veida, taču tas ir aptuveni vienāds ar vienas teksta rindiņas augstumu pašreizējā lapā.

Noslēdzošais tags

nav obligāta. Ja tā nav, pirmais neiekļautais tags, kas atrodas zemāk lapas HTML kodā, tiks uzskatīts par rindkopas beigām.

Atribūti

Personiskās īpašības:

• līdzināt — iestata rindkopas satura horizontālo līdzinājumu.

• accesskey — iestata īsinājumtaustiņu, lai fokusētos uz HTML elementu.
• klase - norāda CSS (Cascading Style Sheets) izmantotā taga klases vai klašu nosaukumu.
• dir — norāda teksta virzienu elementā.
• - norāda HTML taga ID nosaukumu, ko var izmantot kā "enkuru" vai stila lapās.
• lang — norāda valodu, kurā tiek rakstīts teksts HTML elementā.
• stils — nepieciešams, lai tagam lietotu iekļautos CSS stilus.
• tabindex - iestata tabulēšanas secību starp elementiem (Tab taustiņš).
• title — parāda rīka padomu, kad peles kursors atrodas virs HTML elementa.

Atzīmes veids

Mērķis: teksts (bloki).

Tags modelis: bloks (bloks, bloka līmenis).

Var saturēt: iekļauti tagi, vienkāršs teksts un HTML īpašās rakstzīmes(mnemonika).

Atvēršanas tags: nepieciešams. Noslēguma tags: nav nepieciešams.

Sintakse

saturu

HTML piemērs: P taga lietošana

Viena no kļūdām, ko pieļauj iesācēju vietņu veidotāji, ir lapas fona teksta informācijai izmantot nevienmērīgus attēlus vai spilgtas krāsas. Tas ne tikai apgrūtina lasīšanu, bet arī negatīvi ietekmē lietotāju redzi, liekot viņiem ieskatīties katrā rindā un nevajadzīgi noslogot acis.

Vēl viena kļūda ir visur izmantot apgrieztās krāsas, kad teksta vizuālā krāsa ir gaišāka par fonu, piemēram, melns fons - balts teksts. Šis paņēmiens ir diezgan piemērojams, bet tikai tur, kur tas patiešām ir piemērots.

Atbalsts HTML versijām

Versija:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Atbalsts:	Jā	Jā	Jā	Jā

Pārlūka atbalsts

Pārlūkprogramma:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Versija:	6.0 un jaunākas versijas	2.0 un jaunākas versijas	2.0 un jaunākas versijas	9.2 un jaunākas versijas	3.1 un jaunākas versijas
Atbalsts:	Jā	Jā	Jā	Jā	Jā

Pārlūkprogramma					Netscape		Opera							Mozilla Firefox
Versija	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Atbalstīts	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā

STML:

3.2

4

XHTML:

1.0

1.1

Apraksts

Definē satura rindkopu. Tag

Tas ir bloka elements, tāpēc sākas jaunā rindā, satura rindkopas, kas seko viena otrai, tiek atdalītas ar vertikālu atstarpi. Atstarpi var kontrolēt, izmantojot stilus. Ja nav noslēguma taga, tiek uzskatīts, ka rindkopas beigas sakrīt ar nākamā bloka elementa sākumu.

Sintakse

saturu

saturu

Iespējas

līdzināt Norāda satura izlīdzināšanu.

Noslēdzošais tags

Nav nepieciešams.

1. piemērs. Atzīmes izmantošana

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tagu parametru apraksts

Parametrs ALIGN

Apraksts

Satura bloka malu izlīdzināšana.

Sintakse

Argumenti

pa kreisi Izlīdziniet saturu pa kreisi. Šajā gadījumā satura līnijas ir izlīdzinātas kreisajā pusē, un labā mala atrodas "kāpņu" pozīcijā. Šī izlīdzināšanas metode ir vispopulārākā mūsu vietnēs, jo tā ļauj lietotājam viegli meklēt jaunu rindiņu un ērti lasīt lielu saturu. centrs Izlīdzina saturu centrā. saturs tiek novietots horizontāli pārlūkprogrammas logā vai konteinerā, kur atrodas satura bloks. Šķiet, ka satura rindas ir savērtas uz neredzamas ass, kas iet uz leju tīmekļa lapas centrā. Šī izlīdzināšanas metode tiek aktīvi izmantota virsrakstos un dažādos parakstos, piemēram, parakstos, tā piešķir satura dizainam oficiālu un stabilu izskatu. Visos citos gadījumos izlīdzināšana centrā tiek izmantota reti, jo ir neērti lasīt lielu daudzumu šāda satura. pa labi Izlīdziniet saturu labajā pusē. Šī izlīdzināšanas metode darbojas kā iepriekšējā tipa antagonists. Proti, satura rindas tiek izlīdzinātas labajā pusē, savukārt kreisā puse paliek "saplēsta". Sakarā ar to, ka kreisā mala nav izlīdzināta, proti, kur tiek lasītas jaunas rindas, šāds saturs ir grūtāk nolasāms nekā tad, ja tas būtu līdzināts pa kreisi. Tāpēc līdzinājums pa labi parasti tiek izmantots īsiem virsrakstiem, kas nepārsniedz trīs rindiņas. Mēs neņemam vērā konkrētas vietnes, kurās saturs ir jālasa no labās puses uz kreiso pusi, kur var noderēt līdzīga izlīdzināšanas metode. Bet kur mūsu valstī jūs esat redzējuši šādas vietnes. justify Justify, kas nozīmē kreiso un labo taisnots vienlaikus. Lai veiktu šo darbību, pārlūkprogramma šajā gadījumā pievieno atstarpes starp vārdiem.

Noklusējuma vērtība

Analogā CSS (CSS)

2. piemērs: satura līdzināšana

STML 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum falisi nulla zzril delenit doloare te gue duuga. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

46,4 K

Bieži vien iesācēju tīmekļa pārziņus moka jautājums, kāpēc dažas vietnes ir augstākas un pārspēj konkurentus meklēšanas rezultātos. Iemesls tam var būt nepareizi ievietoti h1 , h2 ... h6 tagi. Ja šie tagi ir ievietoti nepareizi, neņemot vērā resursa specifiku, tad meklētājprogrammām ir grūtāk iegūt precīzu informāciju par rakstiem un tajos ietvertajiem atslēgvārdiem.

Tagi H1 -h6 ļauj izcelt virsrakstus dažādi līmeņi. Tie skaidri parāda, kuras teksta daļas precīzāk atspoguļo raksta tēmu un nodrošina ranžēšanas priekšrocības.

Pareiza marķēšana ļauj meklētājprogrammām precīzāk parādīt vaicājumu lapu meklēšanas rezultātos, kas labvēlīgi ietekmē resursa pozīciju:

Kāpēc mums ir nepieciešami h1-h6 tagi?

Tagi satur vietnes nosaukumu, virsrakstus un teksta apakšvirsrakstus:

HTML valodā virsrakstu tagi tiek apzīmēti ar h no angļu valodas "header", kas nozīmē " virsraksts, galvene". Šeit ir piemērs tam, kā tas izskatās:

galvene

Virsrakstu atzīmes jāievieto katrā resursa lapā. Tajā pašā laikā nosaukuma nozīmi apskaudīs tā skaits, jo mazāks tas ir, jo svarīgāks ir nosaukums:

- svarīgākie tagi

- mazāk svarīgi tagi...

- pēdējie svarīgākie tagi

Tomēr pret to novietošanu jāizturas piesardzīgi. Ļaunprātīgas izmantošanas rezultātā meklētājprogrammas var sodīt jūsu resursu.

h1-h6 tagu sintakse

Teksta nosaukums

1. apakšvirsraksts

...

2. apakšvirsraksts

Apakšvirsraksts 3.1

...

Apakšvirsraksts 3_2

3. apakšvirsraksts

Populārākie tagi ir h1 h2 h3 .

Kā pareizi lietot h1 tagu?

Ignorējot h1 tagu, tīmekļa pārziņi atņem sev tik svarīgu priekšrocību kā satura optimizācija. Uz dzinējiem tas bieži tiek rakstīts automātiski, bet ne vienmēr, un šis fakts ir jāņem vērā.

HTML h1 tags ir visnozīmīgākais šāda veida tags. Tajā ir vietnes nosaukums un raksta nosaukums. Tomēr to nevajadzētu sajaukt ar tagu