Norėdami gauti pastraipą su 12 pt šriftu, turite nustatyti jos šrifto dydžio ypatybę:

h3 (šrifto dydis: 24 pikseliai;)

Tai pakeis trečiojo lygio antraščių dydį iki 24 pikselių. Galite pridėti šią nuosavybę prie išorinio stiliaus lapo ir visose antraštėse bus naudojama ši vertė< h3>.

Norėdami savo tekstui pritaikyti papildomus tipografijos stilius, pridėkite šias CSS taisykles:

h3 ( šrifto dydis: 24 pikseliai; spalva: # 000; šrifto svoris: normalus; )

Taip ne tik bus nustatytas trečiojo lygio antraščių šrifto dydis, bet ir tekstas bus juodas ( Ką reiškia šešioliktainis kodas #000?), taip pat nustatys stilių į „ normalus“ Pagal numatytuosius nustatymus naršyklės antraštes h1-h6 rodo paryškintu tekstu. Šis stilius nepaisys numatytojo ir šriftas nebus paryškintas.

Vaizdo dydžiai

Ne visada įmanoma nustatyti norimą vaizdo dydį, nes naršyklė gali tai padaryti automatiškai. Naršyklės ne visada gerai susidoroja su šia užduotimi, todėl labai nukenčia vaizdo rodymo kokybė. Todėl prieš nustatydami vaizdo dydį HTML, geriau naudoti grafinius redaktorius. Tada tinklalapio žymėjime parašykite tikrąjį jų dydį.

Skirtingai nuo šriftų, norėdami nustatyti vaizdų dydį, galite naudoti ir HTML, ir CSS. Naudojant HTML, vaizdų dydis gali būti nurodytas tik pikseliais. CSS matmenys gali būti nurodyti kitomis reikšmėmis. Pavyzdžiui, coliais, centimetrais ir procentais. Jei norite, kad jūsų svetainėje būtų interaktyvių vaizdų, geriau naudoti procentinę reikšmę.

Norėdami nustatyti vaizdo dydį HTML, naudokite žymą su aukščio ir pločio atributais.

Pavyzdžiui, vaizdas turi būti 400 x 400 pikselių:

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

Norėdami nustatyti vaizdo matmenis CSS, naudokite aukščio ir pločio ypatybes. Štai tas pats vaizdas naudojant CSS dydį:

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

Pagrindinių blokų matmenys puslapyje

Dažniausiai plotis nustatomas pagrindiniams puslapio blokams. Pirmiausia turite nuspręsti dėl dizaino tipo: statinio ar adaptyvaus. Turite nuspręsti, ar norite nurodyti plotį absoliučiais vienetais – pikseliais, coliais, taškais? Arba blokų dydis turėtų būti pritaikomas, o dydžiams nustatyti turėtų būti naudojami ems arba procentai? Norėdami nustatyti pagrindinių blokų dydžius, kaip ir HTML vaizdų atveju, kad jie tilptų į langą, turite naudoti CSS ypatybes aukštis ir plotis .

Atrodytų, kam žinoti teksto HTML žymas, jei dabar beveik bet kuriame administratoriaus skydelyje yra patogus, kuris jas nustato automatiškai?

Faktas yra tas, kad turinio formatavimas svetainėje iš esmės skiriasi nuo darbo su biuro programomis. Čia neužtenka tik suteikti tekstui patrauklią išvaizdą, nes nuo teisingo dizaino priklauso ne tik internetinio puslapio atvaizdavimas, bet ir jo reklamavimas paieškos sistemose.

HTML žymos ir atributai: pagrindinė sintaksė

Bet koks tekstas turi paslėptą kodą, kuris „paaiškina“ kompiuteriui, ką ir kaip rodyti ekrane. Visa informacija įrašoma naudojant universalių elementų rinkinį.

Iš esmės HTML teksto žymos yra komandos, kurios prideda tam tikrus blokus prie puslapio arba keičia jų išvaizdą. Tinkamas įrašymo formatas atrodo taip:

Atminkite, kad ne visos žymos yra suporuotos. Pavyzdžiui,
(eilutės praleidimas) arba

Kodėl negalite nukopijuoti straipsnių iš Word ir kitų programų į svetainės redaktorių

Nors šiuolaikinės biuro programos tekstui naudoja tas pačias HTML žymas, 99 % atvejų vietinis kodas yra netinkamas naudoti tinklalapiuose. Net jei dokumentas paprastai rodomas pačioje programoje, įterpus į svetainę, formatavimas gali būti prarastas. Be to, dėl daugybės nereikalingų žymų ir atributų paieškos sistemos negali tinkamai išanalizuoti puslapio turinio. O tai savo ruožtu apsunkina jūsų išteklių reklamavimą.

Norėdami gauti švarų ir tinkamą kodą, pirmiausia turite išvalyti įprasto redaktoriaus sukurtų HTML žymų tekstą. Yra keli būdai tai padaryti:

1. „Paleiskite“ straipsnį per „Notepad“ ir tik tada įdėkite jį į svetainę. Programa ištrina visą HTML, todėl po to turėsite dar kartą suformatuoti tekstą (naudodami redaktoriaus įrankius arba rankiniu būdu).
2. Rašykite ir skelbkite straipsnius naudodami LiveWriter. Populiarus tinklaraščio redaktorius iš karto sugeneruoja teisingą kodą. Ir atskirame skirtuke galite pamatyti, kaip atrodys tekstas svetainėje.
3. Naudokite HTML valiklį. Ši internetinė paslauga nesunaikina viso kodo, o tik nereikalingus fragmentus. Naudodami filtrus pasirenkate, kurias žymas norite išsaugoti. Taip pat yra galingas vaizdo formatavimo rengyklė, kuri prideda prie kodo jau optimizuotas komandas.

Pastraipos

Šis elementas yra beveik visuose straipsniuose. Kiekviena pastraipa turi būti tokio konteinerio viduje – tai supaprastina formatavimą ir leidžia išlaikyti nuoseklų stilių visuose svetainės puslapiuose. Patogumui žyma

Visada rašykite naujoje eilutėje.

Lygiavimas

Atskira HTML žyma „Text Alignment“ nebuvo naudojama ilgą laiką. Vietoj to buvo sukurtas bendras atributas ALIGN. Norėdami pakeisti teksto bloko padėtį puslapyje, turite pasirinkti vieną iš 3 reikšmių - CENTRE, RIGHT arba LEFT. Taip pat galite nustatyti lygiavimą kitiems elementams, pvz., antraštėms.

Kai kuriais atvejais lygiavimui naudojamos kitos žymos, pavyzdžiui, galite nustatyti padėtį naudodami elementą

Antraštės ir paantraštės

Paantraštės sistema leidžia sukurti logišką turinio struktūrą. Suskaidžius tekstą į prasmingus blokus, skaitytojui daug lengviau susikaupti ir įsisavinti naują informaciją. Paieškos sistemos taip pat analizuoja antraštes, kad suprastų, pagal kokias užklausas reklamuoti puslapį. Būtent todėl SEO ekspertai rekomenduoja juose naudoti aktualius raktažodžius.

HTML naudoja šešis paantraštės lygius – nuo

prieš

. Šioje sistemoje yra aiški hierarchija:

• ...

  . Pagrindinis straipsnis, prekė internetinėje parduotuvėje ir kt.). Tekste gali būti tik vienas

  . Paprastai jame yra pagrindinis raktinis žodis.

• ...

  . Antrojo lygio paantraštės suskaido tekstą į reikšmingus blokus. Pavyzdžiui, jei vertinate nešiojamuosius kompiuterius, galite atlikti kelis

  su skirtingų modelių pavadinimais.

• ...

  . Trečiasis lygis reikalingas, jei tekstas yra tarp dviejų

  taip pat yra suskirstytas į mažus blokus. Mūsų pavyzdyje tai gali būti kiekvieno modelio vertinimo kriterijai – „Našumas“, „Atmintis“, „Vaizdo plokštė“ ir kt.

• ,

  ,

  . Praktiškai jie yra labai reti. Tačiau bendras principas yra tas pats - jie turėtų būti „įdėti“ į bloką su aukščiausio lygio paantrašte.

Įsitikinkite, kad palaikote teisingą hierarchiją. Grįžtant prie mūsų pavyzdžio, tai reiškia, kad negalite iš karto įvesti modelių pavadinimų kaip

arba

. Ir dar daugiau, naudokite skirtingų lygių paantraštes vienarūšės reikšmės blokams (pavyzdžiui, pažymėkite nešiojamąjį kompiuterį, kuris reitinge užėmė paskutinę vietą, naudojant

).

Čia yra diagrama, kuri padės jums akimirksniu suprasti ir prisiminti teisingą HTML antraščių struktūrą.

Sąrašai

Bet kokius sąrašus ir instrukcijas geriau formatuoti sąrašų forma, naudojant specialias HTML žymas tekstui (tipinė klaida yra vos kelios pastraipos

Kurie prasideda brūkšneliu arba skaičiumi).

Tokių blokų struktūra yra labai paprasta. Pirmiausia nustatome sąrašo tipą – su ženkleliais ar sunumeruotais.

Visi elementai yra tarp atidarymo ir uždarymo žymų. Kiekvienas sąrašo elementas prasideda nauja eilute ir turi formatą . Elementų skaičius neribojamas.

Pasirinkimas ir jo savybės

Ką galima pakeisti naudojant šį šriftą ir spalvą – nepridedant naujų klasių į CSS. Tai labai patogu, kai reikia paryškinti tik vieną sakinį ar fragmentą.

turi keletą atributų:

• Veidas. Leidžia pakeisti teksto šriftą. Galite išvardyti keletą variantų, atskirtų kableliais (Tahoma, Verdana). Jei vartotojas neįdiegė pirmojo šrifto, sistema tiesiog naudoja alternatyvą.
• Dydis. Norėdami padidinti arba sumažinti tekstą, kabutėse įveskite reikšmę nuo 1 iki 7.
• Spalva. Priklausomai nuo dizaino, galite pasirinkti vieną iš standartinių atspalvių (raudoną, žalią, mėlyną) arba įvesti bet kurios pasirinktos spalvos kodą.

Nenaudokite pastraipų, suformatuotų su , vietoj paantraštės. Geriau nustatyti tuos pačius dizaino parametrus su teisinga žyma.

Teksto paryškinimo būdai

Monotoniškas tekstas vargina, net suskaidytas į pastraipas. Norint patraukti dėmesį ir paskatinti skaitytojo susidomėjimą, rekomenduojama grafiškai paryškinti pagrindinius dalykus. Štai keletas komandų, kurios padės jums susidoroti su šia užduotimi.

... . Itin populiari HTML žyma. Paryškintas tekstas iškart patraukia akį, todėl patogu pabrėžti svarbius dalykus ir faktus.

Daugelis žmonių painioja žymes Ir . Vizualinio skirtumo nėra, tačiau jie veikia skirtingai. Pirmasis tiesiog pakeičia teksto išvaizdą, o antrasis veikia kaip „rodyklė“ ir išryškina svarbiausius fragmentus (SEO temų raktinius žodžius ir frazes).

... . Elegantiškas ir griežtas kursyvas idealiai tinka moksliniams terminams, svetimžodžiams ir įvairioms citatoms kurti. Rimtuose leidiniuose meno kūrinių pavadinimai taip pat išryškinami kursyvu.

... . Galbūt jokia kita HTML žyma nesukėlė tiek daug ginčų. Teksto pabraukimas naudojamas retai, nes šis paryškinimo būdas istoriškai buvo siejamas su hipersaitais. Jei naudojate straipsniuose, atkreipkite dėmesį, kad tai tinka tik trumpiems fragmentams - ne daugiau kaip 1 eilutė.

... . Įdomi žyma, leidžianti padaryti dalį Labai aktuali reklamoje – pavyzdžiui, norint pabrėžti senų ir naujų kainų kontrastą.

... . Lengviausias būdas padidinti šrifto dydį be jokių papildomų parinkčių.

... . Jis veikia tuo pačiu principu kaip ir ankstesnė žyma. Viduje esantis tekstas yra sumažintas, palyginti su pagrindiniu.

^... . Teisingas šio formato pavadinimas yra viršutinis indeksas. Ši žyma daugiausia skirta matematiniams laipsniams ir išnašoms. Sumažina šrifto dydį ir perkelia pasirinktą tekstą aukštyn.

_... . Indeksai dažnai randami įvairiose formulėse. Pasirinktas fragmentas yra po pagrindiniu tekstu.

Prasmingi konteineriai

Kadangi kai kurie blokai buvo rasti daugelyje tekstų, jiems buvo pradėtos kurti specialios žymos. Tai supaprastina formatavimą, nes jei kiekvienas turinio tipas turi savo stilių rinkinį, tereikia paryškinti teksto dalį ir nurodyti, kokia informacija jame yra.

... . Žyma kompiuterio kodams pridėti. Nepakeičiamas straipsniuose apie programavimą su pavyzdžiais – komandos nevykdomos, o rodomos kaip paprastas tekstas.

... . Skirta citatoms formatuoti – pavyzdžiui, pagrindinėms interviu ištraukoms.

. Dalį teksto įdeda į atskirą bloką. Pagal numatytuosius nustatymus pasirinkimas turi daugiau kairiojo užpildymo, bet taip pat galite pakeisti CSS teksto dydį, šrifto stilių ir spalvą.