Pirma, pakalbėkime apie antraštes. Ankstesnėse pamokose matėte, kaip naudojamas tekstas. Tačiau kartu su juo yra HTML žymos, kurios nurodo antraštes: h1, h2, h3, h4, h5, h6. Jie yra eilės tvarka nuo didžiausio iki mažiausio: h1- didžiausia antraštė, h2- Šiek tiek mažiau, gerai h6, paskutinis iš jų atitinkamai yra mažiausias.



html antraštes

1 antraštė


2 antraštė


3 antraštė


4 antraštė



Demonstracija Atsisiųskite šaltinius
Aukščiau pateiktas kodas parodys taip

Dėmesio! Iš karto noriu pasakyti, kad antraštes reikia naudoti atsargiai! Paieškos robotas, sukuriantis informacijos masyvą jūsų svetainėje, PIRMIAUSIA analizuoja antraštes pagal turinį. Ir jei, pavyzdžiui, juose yra tuščios informacijos, pvz Įdomu, Dėmesio, O čia dar kažkas įdomaus, tada tai bus neigiama jūsų svetainei!

Nedelsdami atkreipkite į tai dėmesį ir pateikite antraštes informatyvus! Pavyzdžiui: Įvadas į sociologiją, Einšteino-Podolskio-Roseno paradoksas, Horacijaus biografija, Juros periodas, kuriame turėtų būti visos arba tarpinės šiame puslapyje pateiktos informacijos reikšmė.

Teksto formatavimas HTML

Tikriausiai jau pastebėjote, kad jei sulaužote eilutę ir toliau renkate tekstą kode, tada pats tekstas vis tiek pasirodo vienoje pastraipoje be eilutės lūžio. Norėdami nutraukti eilutę, turite naudoti vieną žymą br kartu priverstinis perkėlimas.

Dažniausiai (ir teisingiau) eilučių pertraukoms ir pastraipų ženklinimui naudoti žymą p (pastraipą). Jei naudosite šią žymą, pastraipos viena nuo kitos bus atskirtos įtraukomis.



html pastraipas

Pirmos pastraipos tekstas. Pirmos pastraipos tekstas. Pirmos pastraipos tekstas. Pirmos pastraipos tekstas.


Antros pastraipos tekstas. Antros pastraipos tekstas. Antros pastraipos tekstas. Antros pastraipos tekstas.



Demonstracija Atsisiųskite šaltinius

Prie žymos p yra atributas lygiuotis, kuri yra atsakinga už pastraipų lygiavimą. Gali turėti šias reikšmes:

paliko- išlygiavimas į kairę
teisingai- teisingas derinimas
centras- centre
pateisinti- pločio

Pažvelkime į pavyzdinį kodą, kaip suderinti tekstą kairėje, dešinėje ir centre



<a href="https://jolly-me.ru/lt/prilozheniya-i-po/esli-teg-font-okazhetsya-ne-zakryt-to-formatirovanie-teksta-v-html---sposoby-i/">html lygiavimas</a> pastraipos

Pirmos pastraipos tekstas. Pirmos pastraipos tekstas. Pirmos pastraipos tekstas.


Antros pastraipos tekstas. Antros pastraipos tekstas. Antros pastraipos tekstas.


Trečiosios pastraipos tekstas. Trečiosios pastraipos tekstas. Trečiosios pastraipos tekstas.




Demonstracija Atsisiųskite šaltinius

Taip pat yra etiketė centras. Jis sutelkia turinį (tekstą, vaizdą ir kt.). Tekstui jo poveikis panašus į lygiavimą centre.



centravimas html

Centrinis tekstas


Kaip html paryškinti tekstą?

stiprus- standartinis teksto paryškinimas pusjuodžiu šriftu.
b- raktinio žodžio paryškinimas paryškintu šriftu. Jis pradėtas naudoti prieš stiprią žymą, todėl kai kurie mano, kad ji pasenusi (tačiau žyma naudojama HTML5). Kartu su stipriu, jį suvokia paieškos sistemos, nustatydamos raktinius žodžius ir frazes.
Dėmesio! Teksto paryškinimas šiomis žymomis Paieškos varikliui suprantamas kaip ypač svarbus.
Būkite atsargūs:
1. paryškinti tik svarbužodžiai ir frazės
2. svarbių – ne ketvirtadalis teksto. Pabandyk riboti naudojimąšios žymos.

Pažvelkime į pavyzdinį kodą, kaip paryškinti paryškintą tekstą



html paryškintas

Jei norite paryškinti tam tikrą frazę, kad ji būtų tiesiog matoma vartotojui,
pavyzdžiui, priminimas mes tai darome. Arba tokiu atveju raktažodį



Demonstracija Atsisiųskite šaltinius
Naršyklė parodys:

Abu žodžiai bus paryškinti pusjuodžiu šriftu, tačiau žodžiai bus svarbūs paieškos sistemai raktažodį

Kaip kursyvuoti tekstą html?

i- kursyvas. Šios atidarymo ir uždarymo žymos turėtų tik paryškinti svarbi informacija (raktinius žodžius), nes paieškos sistemos pateiks duomenis pagal jį.
em- standartinis kursyvas. Naudojimui nėra jokių apribojimų.
cituoti - šio tipo Kursyvas naudojamas citatoms, nuorodoms į medžiagą ir autorius.
dfn- pabrėžti apibrėžimus ir terminus.

Pažiūrėkime į kodo pavyzdį su tekstu kursyvu



Tarkime, puslapis apie automobilius

Mercedes-Benz yra Vokietijos automobilių gamintojas, įkurtas 1886 m.
Pavadinimas kilęs iš dviejų prekių ženklų - Mercedes Ir Benz.
Jis daugiausia dalyvauja gamyboje premium klasės automobiliai, sunkvežimiai, autobusai.

http://ru.wikipedia.org/wiki/Mercedes-Benz



Demonstracija Atsisiųskite šaltinius
Naršyklėje jis bus rodomas taip

Kaip paryškinti tekstą html?

u- standartinis pabraukimas (geriausia naudoti su naujausiomis html specifikacijomis)
ins- taip pažymimi nauji duomenys (tekstas, paaiškinimas), įterpti į jūsų dokumentą (pridėti arba pakeisti senus). Paryškinta pabraukimu

Duomenys pirmuoju ir antruoju atveju bus paryškinti pabraukimas.

Kaip padaryti perbrauktą tekstą html?

Tekstas šiose žymose pažymėtas perbraukta
del- padaryta pataisa.
streikuoti- standartinis perbraukimas.
s- streiko trumpinys



Perbrauktas tekstas html

Du kartus du lygūs penkios keturi. Įprastas perbrauktas tekstas



Demonstracija Atsisiųskite šaltinius

Kaip paryškinti tekstą viršutiniame indekse ir apatiniame indekse html?

sub- žyma, rodanti tekstą žemiau linijos lygio mažesniu šriftu.
sup- žyma, rodanti tekstą virš eilutės lygio mažesniu šriftu.



indeksai html

a 2+b 2=c 2- Pitagoro teorema.


H 2 O yra cheminė vandens formulė.



Demonstracija Atsisiųskite šaltinius
Naršyklė parodys:

šrifto žyma html

Jis taip pat naudojamas tekstui redaguoti html šrifto žyma. Tačiau įvedus blokų išdėstymą ir išpopuliarėjus CSS šis metodas Greitai pradėjau pamiršti.

Žyma šriftas nurodo šrifto parametrus (šrifto tipą, dydį, spalvą). Jis turi atitinkamus atributus:

veido- šrifto pavadinimas. Galite pateikti kelis šriftų pavadinimus (atskirti kableliais), nes jūsų svetainę peržiūrintis vartotojas tokio šrifto gali NEBŪTI pagal numatytuosius nustatymus arba gali nepalaikyti šios kalbos. Pavyzdžiui, vartotojas iš Lenkijos ar Kinijos. Atitinkamai, jei šis šriftas nerastas, naudojamas kitas sąraše esantis šriftas.

dydis- aktyvios reikšmės nuo 1 iki 7. Numatytasis šriftas yra 3.

spalva- teksto spalva. Jei parametro nenustatysite, tekstas bus juodas.



šrifto žyma html

Šriftas Tahoma, 5 dydis, mėlyna spalva.



Demonstracija Atsisiųskite šaltinius
Pasikartosiu, šis metodas yra pasenęs, todėl patariu nepriprasti prie jo naudojimo.

Ar galima rodyti tekstą tokia forma, kokia jis buvo įvestas? Pažymėkite PRE

Taip, jūs tikrai galite palengvinti savo gyvenimą ir atsikratyti daugybės įtraukų, brūkšnelių ir kitų dalykų. Tam yra išankstinė žyma. Tarpų, didesnių už vieną, skaičius kode yra lygus vienetui, tačiau pre tekstas išlieka tokia forma, kokia buvo įvestas.



išankstinė žyma html

Kaip norėjote įvesti tekstą? 
Taip pasirodė!  =)



Demonstracija Atsisiųskite šaltinius
Naršyklėje viskas bus taip

Kitos teksto formatavimo žymos

Žyma santrumpa reiškia santrumpą. Santrumpa yra sutrumpintas žodis ar frazė. Santrumpas galima rasti visur, pavyzdžiui, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
pavadinimo atributas



abbr žyma html

HTML



Demonstracija Atsisiųskite šaltinius
Naršyklėje tai atrodys taip

Žymės akronimas priešingai nei santrumpa, jis žymi nusistovėjusį žodį (akronimą), kuris naudojamas kaip savarankiškas žodis. Pavyzdžiui: SSRS (Tarybų Socialistinių Respublikų Sąjunga), AIDS (įgytas imunodeficito sindromas), JAV (Jungtinės Amerikos Valstijos).
Šiose žymose pasirinktas žodis yra paryškintas punktyrine linija ir, užvedus pelės žymeklį, rodomas turinys pavadinimo atributas



Akronimo žyma html

HTML


Horizontali juosta html arba hr žymoje

Horizontaliajai linijai html žymėti ji naudojama žymėti val. Jis išsiskiria įdubimais viršuje ir apačioje.

Ši žyma turi šiuos atributus:
lygiuotis- horizontalios linijos išlyginimas. Lygiavimo tipai jau buvo paminėti: kairėje, centre, dešinėje.
plotis- nustato linijos ilgį pikseliais arba procentais
dydis- linijos storis
spalva- linijos spalva
noshade- pašalina linijos reljefą



šrifto žyma html

Įprasta linija

Linija centre, kurios ilgis yra 50% bloko pločio, linijos storis 2

Linija dešinė, mėlyna, 200 pikselių



Demonstracija Atsisiųskite šaltinius
Naršyklėje

Dėkojame už dėmesį! Pamoka buvo ilga ir sunki! Jūs padarėte didelį žingsnį į priekį!


Žyma vis dar plačiai naudojama HTML kode tekstui perbraukti. , kuri yra sutrumpinta žymos rašyba . Tarp daugybės reikšmių Angliškas žodis„Strike“ turi „perbraukti“ ir „perbraukti“. Štai kaip atrodo šių dviejų žymų naudojimo rezultatai:

  2. tekstas išbrauktas naudojant žymą → teksto perbraukimas naudojant žymą

Kaip matote, rezultatas yra identiškas. Visos šiuolaikinės naršyklės supranta šias žymas, tačiau nepaisant to, jų abiejų naudoti nerekomenduojama. Jų visiškai nėra XHTML ir HTML5 specifikacijose. O HTML 4.0 specifikacija taip pat apibūdinama kaip nepageidaujama.

To priežastis yra žymos Ir priklauso vadinamųjų fizinio formatavimo žymų klasei. Tai yra, jie neatlieka jokios semantinės apkrovos ir nustato tik teksto rodymo stilių. Tačiau pati HTML žymėjimo kalba skirta specialiai semantiniam teksto žymėjimui. O vizualiniam formatavimui naudojami CSS stiliaus lapai.

Ir nors jums gali nerūpėti tokios akademinės detalės, vis tiek nenaudokite šių pasenusių žymų. Jei reikia perbraukti tekstą HTML, geriau naudoti žymą . Štai jo naudojimo rezultatas:

  1. tekstas išbrauktas naudojant žymą → teksto perbraukimas naudojant žymą

Kaip matote, vizualiai nėra skirtumo , Ir , bet prasmės skirtumas yra labai didelis.

Žyma skirtas pažymėti ištrintas teksto eilutes. Tai reiškia, kad jis turi tam tikrą loginę informaciją apie tekstą ir priklauso vadinamųjų semantinių HTML žymų klasei. Pritaikius tekstas formatuojamas kaip perbrauktas – tai ne šios žymos tikslas, o tik jos loginės esmės pasekmė.

Dar kartą kartoju: jei jums nerūpi HTML žymėjimo kalbos ideologija ir tik vizualinis efektas, tiesiog apsvarstykite, ar žyma bus perbraukta ir ne arba . Bent jau dėl tų pačių priežasčių, dėl kurių rašote „profesionalumas“, o ne „profesionalumas“.

Be to, etiketė funkcionalesnis nei Ir . Jis gali perduoti papildomos informacijos apie tekstą naudojant atributus „cita“ ir „datetime“:

  • Atributas " cituoti“ skirta nuorodai į dokumentą, nurodantį šio teksto ištrynimo priežastį ir, galbūt, kitą informaciją apie jo redagavimą.
  • Atributas " data ir laikas» skirtas šio teksto redagavimo datai ir laikui nurodyti.

Ką daryti, jei norite, kad tekstas būtų perbrauktas, bet nenorite jo pažymėti kaip ištrintą? Kaip minėta aukščiau, CSS jums padės. Tiksliau, ypatybė „text-decoration“, kurios reikšmė yra „line-through“. Pavyzdžiui, tai galite padaryti taip:

  1. teksto perbraukimas naudojant CSS → CSS perbrauktas tekstas

Per daug kodo? Sutinku. Todėl galite jį sumažinti įdėdami CSS instrukcijas atskiras failas. Pavyzdžiui, jame galite apibūdinti perbraukto teksto klasę taip:

S (text-decoration: line-through; ) Tai leis jums rašyti į HTML kodą taip:

  1. CSS perbrauktas tekstas → CSS perbrauktas tekstas

Šis kodas taip pat yra ilgesnis nei atveju , bet jei norite prisijungti prie semantinio žiniatinklio, turėsite susitaikyti su tokiu pertekliumi. Laimingas perbraukimas!

Ankstesnės publikacijos:

Jei norite perbraukti tekstą HTML, naudokite žymą streikuoti:

  1. Elektronik
  2. Siroežkinas
  3. Smirnovas
  4. Čižikovas
  5. Kukuškina

Šio kodo vykdymo rezultatas:

  1. Elektronik
  2. Siroežkinas
  3. Smirnovas
  4. Čižikovas
  5. Kukuškina

Ši žyma neturi atributų. Vietoj HTML žymos streikuoti taip pat galima naudoti sutrumpintą variantą - s(panašiai, paryškintas - b, kursyvas - i, pabraukta - u):

Konstruktorius LEGO"Nubex"

Kaip matote, rezultatas yra panašus:

LEGO konstravimo rinkinys "Nubex"

Naudojant žymą s Ir streikuoti yra laikomas neteisingu kodo patvirtinimo požiūriu (būtina naudoti tranzityvą ). Arba kita galimybė yra naudoti CSS.

Perbrauktas tekstas: CSS

Naudojant CSS, tekstas gali būti „ištvarkytas“ naudojant nuosavybę tekstas-dekoravimas. Ši savybė gali turėti šias reikšmes:

  • linijinis- naudojamas tekstui išbraukti;
  • pabraukti- pabraukia tekstą;
  • perbraukimas- naudojamas eilutei virš teksto įdėti (tekstas perbrauktas);
  • mirksėti- bandomieji blyksniai (kas sekundę);
  • jokios- leidžia atšaukti visus tekstui taikomus efektus.

Nurodytas vertes galima taikyti vienu metu, reikia parašyti reikiamus parametrus, atskirtus tarpu. Pavyzdžiui, taikykite pabraukimą, perbraukimą ir mirksėjimą vienu metu:

Teksto dekoravimas: pabraukimas blink overline;

Dabar tekstą paverskime perbrauktu CSS pagalba:

Išbraukta <a href="https://jolly-me.ru/lt/set/obtekanie-div-css-kak-sdelat-obtekanie-kartinki-tekstom-v-microsoft/">CSS tekstas</a>- "Nubex"

Konstruktorius LEGO Nubex svetainės

Sveiki visi! Ankstesniuose straipsniuose daug sužinojome apie nuorodas ir vaizdus. Dabar laikas pereiti prie teksto. Šiame straipsnyje kalbėsiu apie populiariausias html žymas, kurios naudojamos tekstui suteikti tam tikrą išvaizdą.

Taigi pirmiausia sukurkite tuščią bloknotą tekstinis dokumentas. Po to pakeiskite jo plėtinį iš txt į html. Atidarome jį vienu metu naudodami naršyklę ir teksto redaktorius, pavyzdžiui, tą patį bloknotą. Šiems tikslams rekomenduoju naudoti programą Macromedia Dreamweaver arba Notepad++.

Naudodami redaktorių redaguosime savo dokumentą ir peržiūrėsime, ką padarėme naudodami naršyklę.

Kad pakeitimai įsigaliotų, pirmiausia turite įrašyti pakeitimus redaktoriuje, paspausdami diskelį arba klavišų kombinaciją Ctr+S, o tada atnaujinti tą patį dokumentą naršyklėje.

Įvairių lygių teksto antraštės

Antraštės yra ne tik svarbi teksto dizaino dalis, bet ir viena iš įrankių vidinis optimizavimas. IN html tekstas antraštės nustatyti žymas . Norėdami pamatyti, kaip jie atrodys, dokumente parašykite šį kodą:

Čia įdėkite tekstą, kurį norite kaip pavadinimą

Skaičius 2 šalia raidės h rodo antraštės lygį. Iš viso yra 6 lygiai. Pirmasis lygis yra straipsnio pavadinimas. Visa kita yra skyrių ir poskyrių antraštės.

Pusjuodis, pabrauktas, kursyvas tekstas

Žymos , , lengvai išspręsti šią problemą
Taip galite nustatyti paryškintą tekstą html
Taip nustatomas kursyvas
Tai bus pabrauktas tekstas

Jei vienu metu tekstui reikia pritaikyti kelias ypatybes, žymas tiesiog įkišame viena į kitą.

Pusjuodis kursyvas

Šrifto dydžio keitimas

Teksto šrifto dydis nustatomas html naudojant žymą , kuris turi atributą „dydis“.

5 šrifto dydis

Kaip pakeisti teksto spalvą

Teksto spalva nustatoma ta pačia žyma, naudojant atributą „color“.

Raudonas tekstas

Tekstas toks, koks buvo parašytas

HTML turi gana nemalonią funkciją. Jei vieną po kito įvedėte tekstą, kuriame yra keli tarpai iš eilės, naršyklė parodys tik vieną tarpą. Kai kuriais atvejais tekstas turi būti rodomas tiksliai taip, kaip jis buvo įvestas. Tam naudojama žyma 

Šis tekstas atrodys taip, kaip bus įvestas

Na, tai turbūt viskas. Natūralu, kad teksto modifikavimo galimybės naudojant html žymas yra gana ribotos. Daugeliu atvejų to nepakanka. Tokiu atveju rekomenduojama naudoti css. CSS Tai santrumpa, kuri išvertus į rusų kalbą reiškia kaskadinius stiliaus lapus. Daugiau apie tai pakalbėsime vienoje iš sekančių pamokų.

Perbrauktas tekstas

Paprastai tariant, HTML galite nustatyti perbrauktą tekstą naudodami tris skirtingas žymas vienu metu. Žymos Ir yra rodomi gana teisingai visose naršyklėse, tačiau nerekomenduojama jų naudoti. Jie net neįtraukti į XHTML ir HTML5 specifikacijas. Taigi, norėdami sukurti perbrauktą tekstą, rekomenduoju naudoti žymą .

Perbrauktas tekstas

Vizualiai šios žymos naudojimo rezultatas niekuo nesiskirs nuo pirmųjų dviejų. Tačiau ji turi šiek tiek kitokią reikšmę. Ši žyma turėtų būti naudojama pasenusiai arba neteisingai informacijai išbraukti. Ši žyma turi 2 atributus:

cituoti – skirta nuorodai į dokumentą, kuriame yra šios informacijos ištrynimo priežastis

datetime – skirtas saugoti paskutinio informacijos redagavimo laiką.

Pažvelkime į visus būdus, kaip galite padaryti perbrauktą tekstą naudodami html ir CSS. Yra dvi įgyvendinimo parinktys:

  • Per html žymas , Ir
  • Per CSS teksto dekoravimo nuosavybę

1. Perbrauktas tekstas naudojant html žymas , Ir

Visas tekstas yra įtrauktas į html žymas , Ir tampa perbraukta. Neįprasta raidė s kilusi iš angliško žodžio „strike“ santrumpos.

Vizualinio skirtumo tarp visų trijų žymų nėra. Tačiau paskutinis variantas su naudojant htmlžyma yra laikomas geresniu, nes palaikomas HTML5 standarte. Kitos žymos nepalaikomos (jos, žinoma, bus rodomos teisingai, bet nebus patvirtintos).

Įprastas šriftas. Perbrauktas tekstas naudojant s žymą

Paprastas tekstas. Perbrauktas tekstas naudojant perbraukimo žymą

Paprastas tekstas. Perbrauktas tekstas naudojant del žymą

Konvertuoja puslapyje į

Įprastas šriftas. Perbrauktas tekstas naudojant s žymą

Paprastas tekstas. Perbrauktas tekstas naudojant perbraukimo žymą

Paprastas tekstas. Perbrauktas tekstas naudojant del žymą

2. Perbrauktas tekstas naudojant CSS teksto dekoravimo ypatybę

CSS turi teksto dekoravimo ypatybę, kuri yra atsakinga už teksto pabraukimą.

CSS teksto dekoravimo sintaksė

teksto dekoravimas: jokios|pabraukti|perbraukti|perbraukti|paveldėti;
  • jokio - tekstas be dekoracijos
  • pabraukimas – pabraukimas
  • perbraukimas – pabraukimas
  • perbraukta – perbrauktas tekstas
  • blink – mirksintis tekstas (rekomenduojama nenaudoti šios reikšmės)

Mus domina eilutės reikšmė, kuri nurodo teksto perbraukimą.