Lai iegūtu rindkopu ar 12 pt fontu, jums jāiestata tā fonta lieluma rekvizīts:

h3 (fonta izmērs: 24 pikseļi;)

Tas mainīs trešā līmeņa virsrakstu lielumu uz 24 pikseļiem. Varat pievienot šo rekvizītu ārējai stila lapai, un šī vērtība tiks izmantota visās galvenēs< h3>.

Lai savam tekstam lietotu papildu tipogrāfijas stilus, pievienojiet šādus CSS noteikumus:

h3 ( fonta izmērs: 24 pikseļi; krāsa: # 000; fonta svars: normāls; )

Tas ne tikai iestatīs fonta lielumu trešā līmeņa virsrakstiem, bet arī padarīs tekstu melnu ( Ko nozīmē heksadecimālais kods #000?), kā arī iestatīs stilu uz " normāli" Pēc noklusējuma pārlūkprogrammas virsrakstus h1-h6 parāda treknrakstā. Šis stils ignorēs noklusēto un padarīs fontu ne treknrakstā.

Attēlu izmēri

Ne vienmēr ir iespējams iestatīt vēlamo attēla izmēru, jo pārlūkprogramma to var izdarīt automātiski. Pārlūkprogrammas ne vienmēr labi tiek galā ar šo uzdevumu, tāpēc ļoti cieš attēla displeja kvalitāte. Tāpēc pirms attēla izmēra iestatīšanas HTML valodā labāk izmantot grafiskos redaktorus. Un pēc tam tīmekļa lapas marķējumā ierakstiet to faktisko izmēru.

Atšķirībā no fontiem, attēlu lieluma noteikšanai varat izmantot gan HTML, gan CSS. Izmantojot HTML, attēlu lielumu var norādīt tikai pikseļos. CSS izmērus var norādīt citās vērtībās. Piemēram, collās, centimetros un procentos. Ja vēlaties, lai jūsu vietnē būtu adaptīvi attēli, labāk ir izmantot procentuālo vērtību.

Lai mainītu attēla izmēru HTML formātā, izmantojiet tagu ar augstuma un platuma atribūtiem.

Piemēram, attēla izmēriem jābūt 400 x 400 pikseļiem:

augstums = "400" width="400" alt="image" />!}

Lai iestatītu attēla izmērus CSS, izmantojiet augstuma un platuma rekvizītus. Šeit ir tas pats attēls, izmantojot CSS tā izmēra noteikšanai:

style="height:400px; width:400px;" alt="image" />!}

Galveno bloku izmēri lapā

Visbiežāk platums tiek iestatīts galvenajiem lapas blokiem. Vispirms jums jāizlemj par dizaina veidu: statisks vai adaptīvs. Jums jāizlemj, vai vēlaties norādīt platumu absolūtās vienībās - pikseļos, collās, punktos? Vai arī bloku izmēram jābūt adaptīvam un izmēru noteikšanai jāizmanto ems vai procenti? Lai iestatītu galveno bloku izmērus, piemēram, HTML attēlu gadījumā, lai tie atbilstu logam, ir jāizmanto CSS rekvizīti augstums un platums .

Šķiet, kāpēc gan zināt HTML tagus tekstam, ja tagad gandrīz jebkuram administratora panelim ir ērts, kas tos iestata automātiski?

Fakts ir tāds, ka satura formatēšana vietnē būtiski atšķiras no darba biroja lietojumprogrammās. Šeit nepietiek vienkārši piešķirt tekstam pievilcīgu izskatu, jo no pareiza dizaina ir atkarīga ne tikai tīmekļa lapas parādīšana, bet arī tās popularizēšana meklētājos.

HTML tagi un atribūti: pamata sintakse

Jebkuram tekstam ir slēpts kods, kas “izskaidro” datoram, ko un kā parādīt ekrānā. Visa informācija tiek ierakstīta, izmantojot universālu elementu komplektu.

Būtībā HTML teksta tagi ir komandas, kas lapai pievieno noteiktus blokus vai maina to izskatu. Pareizais ierakstīšanas formāts izskatās šādi:

Lūdzu, ņemiet vērā, ka ne visas atzīmes ir savienotas pārī. Piemēram,
(rindas izlaišana) vai

Kāpēc vietnes redaktorā nevar kopēt rakstus no Word un citām programmām

Lai gan mūsdienu biroja programmās tekstam tiek izmantoti tie paši HTML tagi, 99% gadījumu vietējais kods nav lietojams tīmekļa lapām. Pat ja dokuments tiek normāli parādīts pašā lietojumprogrammā, ievietojot to vietnē, formatējums var tikt zaudēts. Turklāt, ņemot vērā lielo nevajadzīgo tagu un atribūtu skaitu, meklētājprogrammas nevar adekvāti analizēt lapas saturu. Kas savukārt apgrūtina sava resursa reklamēšanu.

Lai iegūtu tīru un atbilstošu kodu, vispirms ir jānotīra parasta redaktora izveidoto HTML tagu teksts. Ir vairāki veidi, kā to izdarīt:

1. “Palaidiet” rakstu, izmantojot Notepad, un tikai pēc tam ievietojiet to vietnē. Lietojumprogramma izdzēš visu HTML, tāpēc pēc tam teksts būs jāformatē vēlreiz (izmantojot redaktora rīkus vai manuāli).
2. Rakstiet un publicējiet rakstus, izmantojot LiveWriter. Populārais emuāra redaktors nekavējoties ģenerē pareizo kodu. Un atsevišķā cilnē varat redzēt, kā izskatīsies vietnes teksts.
3. Izmantojiet HTML Cleaner. Šis tiešsaistes pakalpojums neiznīcina visu kodu, bet tikai nevajadzīgus fragmentus. Izmantojot filtrus, jūs izvēlaties, kuras atzīmes vēlaties saglabāt. Ir arī jaudīgs vizuālā formatējuma redaktors, kas kodam pievieno jau optimizētas komandas.

Rindkopas

Šis elements ir atrodams gandrīz visos rakstos. Katrai rindkopai jāatrodas šādā konteinerā — tas vienkāršo formatēšanu un ļauj saglabāt konsekventu stilu visās vietnes lapās. Ērtības labad atzīme

Vienmēr rakstiet jaunā rindā.

Izlīdzināšana

Atsevišķais HTML tags "Teksta līdzinājums" nav izmantots ilgu laiku. Tā vietā tika izveidots vispārējs atribūts ALIGN. Lai mainītu teksta bloka pozīciju lapā, jāizvēlas viena no 3 vērtībām - CENTRS, RIGHT vai LEFT. Tādā pašā veidā varat iestatīt līdzinājumu citiem elementiem, piemēram, virsrakstiem.

Dažās situācijās līdzināšanai tiek izmantoti citi tagi, piemēram, varat pozicionēt, izmantojot elementu

Virsraksti un apakšvirsraksti

Apakšvirsrakstu sistēma ļauj izveidot loģisku satura struktūru. Kad teksts ir sadalīts jēgpilnos blokos, lasītājam ir daudz vieglāk koncentrēties un uzņemt jaunu informāciju. Meklētājprogrammas arī analizē virsrakstus, lai saprastu, kādiem vaicājumiem lapu reklamēt. Tāpēc SEO speciālisti iesaka tajos izmantot aktuālos atslēgvārdus.

HTML izmanto sešus apakšvirsrakstu līmeņus - no

pirms tam

. Šajā sistēmā ir skaidra hierarhija:

• ...

  . Galvenais raksts, prece interneta veikalā utt.). Tekstā var būt tikai viens

  . Parasti tas satur galveno atslēgvārdu.

• ...

  . Otrā līmeņa apakšvirsraksti sadala tekstu nozīmīgos blokos. Piemēram, ja vērtējat klēpjdatorus, varat veikt vairākas darbības

  ar dažādu modeļu nosaukumiem.

• ...

  . Trešais līmenis ir nepieciešams, ja teksts ir starp diviem

  ir arī sadalīts mazos blokos. Mūsu piemērā tie varētu būt katra modeļa vērtēšanas kritēriji - “Veiktspēja”, “Atmiņa”, “Video karte” utt.

• ,

  ,

  . Praksē tie ir ārkārtīgi reti. Bet vispārējais princips ir vienāds - tiem jābūt “ligzdotiem” blokā ar augstākā līmeņa apakšvirsrakstu.

Noteikti saglabājiet pareizo hierarhiju. Atgriežoties pie mūsu piemēra, tas nozīmē, ka nevar uzreiz ievadīt modeļu nosaukumus kā

vai

. Un vēl jo vairāk, izmantojiet dažāda līmeņa apakšvirsrakstus viendabīgas nozīmes blokiem (piemēram, izceliet klēpjdatoru, kas reitingā ieņēma pēdējo vietu, izmantojot

).

Šeit ir diagramma, kas palīdzēs jums uzreiz saprast un atcerēties pareizo virsrakstu struktūru HTML valodā.

Saraksti

Jebkurus sarakstus un norādījumus labāk formatēt sarakstu veidā, tekstam izmantojot īpašus HTML tagus (tipiska kļūda ir tikai dažas rindkopas

Kas sākas ar defisi vai skaitli).

Šādu bloku struktūra ir ļoti vienkārša. Pirmkārt, mēs nosakām saraksta veidu - ar aizzīmēm vai numurētu.

Visi elementi atrodas starp sākuma un aizvēršanas tagiem. Katrs saraksta vienums sākas ar jaunu rindiņu un ir formātā . Elementu skaits nav ierobežots.

Izvēle un tās atribūti

Ko var mainīt, izmantojot šo fontu un krāsu - un nepievienojot jaunas klases CSS. Tas ir ļoti ērti, ja nepieciešams izcelt tikai vienu teikumu vai fragmentu.

ir vairāki atribūti:

• Seja. Ļauj mainīt teksta fontu. Varat uzskaitīt vairākas iespējas, atdalot tās ar komatiem (Tahoma, Verdana). Ja lietotājam nav instalēts pirmais fonts, sistēma vienkārši izmanto alternatīvu.
• Izmērs. Lai palielinātu vai samazinātu tekstu, pēdiņās ievadiet vērtību no 1 līdz 7.
• Krāsa. Atkarībā no dizaina varat izvēlēties kādu no standarta toņiem (sarkans, zaļš, zils) vai ievadīt kodu jebkurai krāsai pēc savas izvēles.

Neizmantojiet rindkopas, kas formatētas ar , nevis apakšvirsrakstus. Labāk ir iestatīt vienādus dizaina parametrus ar pareizo tagu.

Teksta izcelšanas veidi

Monotons teksts ir nogurdinošs, pat sadalīts rindkopās. Lai piesaistītu uzmanību un rosinātu lasītāju interesi, galvenos punktus ieteicams izcelt grafiski. Šeit ir dažas komandas, kas palīdzēs jums tikt galā ar šo uzdevumu.

... . Ļoti populārs HTML tags. Treknraksts uzreiz piesaista uzmanību, un tāpēc ir ērti izcelt svarīgus punktus un faktus.

Daudzi cilvēki sajauc tagus Un . Vizuālas atšķirības nav, taču tās darbojas atšķirīgi. Pirmais vienkārši maina teksta izskatu, bet otrais darbojas kā “indekss” un izceļ svarīgākos fragmentus (tēmu atslēgvārdus un frāzes SEO).

... . Elegants un striktais slīpraksts ir ideāli piemērots zinātnisku terminu, svešvārdu un dažādu citātu noformēšanai. Nopietnās publikācijās arī mākslas darbu nosaukumi tiek izcelti slīprakstā.

... . Iespējams, neviens cits HTML tags nav izraisījis tik daudz strīdu. Teksta pasvītrošana tiek izmantota reti, jo šī izcelšanas metode vēsturiski ir bijusi saistīta ar hipersaitēm. Ja lietojat rakstos, lūdzu, ņemiet vērā, ka tas ir piemērots tikai īsiem fragmentiem - ne vairāk kā 1 rindai.

... . Interesanta birka, kas ļauj izgatavot detaļu Ļoti aktuāla reklāmā - piemēram, lai uzsvērtu kontrastu starp veco un jauno cenu.

... . Vienkāršākais veids, kā palielināt fonta lielumu bez papildu iespējām.

... . Tas darbojas pēc tāda paša principa kā iepriekšējais tags. Iekšpusē esošais teksts ir samazināts attiecībā pret galveno.

^... . Pareizais šī formāta nosaukums ir augšējais indekss. Šis tags galvenokārt ir paredzēts matemātiskiem grādiem un zemsvītras piezīmēm. Tas samazina fonta lielumu un pārvieto atlasīto tekstu uz augšu.

_... . Apakšraksti bieži ir atrodami dažādās formulās. Atlasītais fragments atrodas zem galvenā teksta.

Nozīmīgi konteineri

Tā kā daži bloki tika atrasti daudzos tekstos, tiem sāka veidot īpašas atzīmes. Tas vienkāršo formatēšanu, jo, ja katram satura veidam ir savs stilu kopums, jums vienkārši ir jāizceļ teksta daļa un jānorāda, kāda informācija tajā ir ietverta.

... . Tags datora kodu pievienošanai. Neaizstājams rakstos par programmēšanu ar piemēriem - komandas netiek izpildītas, bet tiek parādītas kā vienkāršs teksts.

... . Paredzēts citātu formatēšanai – piemēram, galvenie intervijas fragmenti.

. Daļu teksta ievieto atsevišķā blokā. Pēc noklusējuma atlasei ir vairāk kreisās puses polsterējuma, taču varat arī mainīt CSS teksta lielumu, fonta stilu un krāsu.