Mitä ovat tekstitunnisteet? HTML-tekstin fyysiset muotoilutunnisteet

Sivustoa luotaessa on aina tarpeen vaihtaa tekstin fonttia HTML-sivujen eri osien ja elementtien osalta, koska tämä ei ainoastaan ​​lisää sivustolle ainutlaatuisuutta ja tyyliä, vaan myös parantaa tiedon havainnoinnin laatua. HTML:ssä on tätä varten erityisiä tunnisteita.

Fonttityylien muuttaminen

On monia tapoja muuttaa kirjasinten kirjoitustyylejä HTML:ssä:

... Ja ...- korosta tekstiä lihavoitu fontti.

... Ja ...- korosta tekstiä kursivoitu.

^...- näyttää tekstin yläindeksinä, esimerkiksi E = mc 2 .

_...- näyttää tekstin alaindeksinä, esimerkiksi H 2 SO 4.

Kaikki nämä tunnisteet ovat sisäänrakennettu (inline, rivitaso), eli ne eivät luo rivinvaihtoja ennen ja jälkeen itseään, vaan sijaitsevat yhdellä rivillä. Ne voivat myös sisältää vain sisäänrakennettuja elementtejä, joten ne voivat olla vapaasti sisäkkäisiä toistensa sisällä. Tärkeintä ei ole unohtaa oikeaa sisäkkäisyyttä: aiemmin avattu tagi on suljettava myöhemmin.

Kummassakin on kaksi merkintää lihavoidulle ja kursivoitulle. Tosiasia on, että tavalliset selaimet näyttävät näiden tunnisteiden sisällön samalla tavalla, mutta ei-visuaaliset (ääni)selaimet voivat erityisesti korostaa sisällä olevaa tekstiä Ja . Siksi, jos haluat korostaa tiettyjä sanoja tai lauseita lukijan houkuttelemiseksi, on parempi käyttää näitä tunnisteita, vaikka yleisesti ottaen ei ole eroa.

Myös tunnisteita löytyy Ja , korostaa tekstiä sekä tagia , jossa näkyy yliviivattu teksti. Nämä tunnisteet ovat vanhentuneita HTML:ssä, ja align-attribuutin tavoin selaimet eivät ehkä pian enää ymmärrä niitä. On parempi käyttää style-attribuuttia, ja se voidaan määrittää minkä tahansa tunnisteen sisällä. Yleinen syntaksi on seuraava:

<тег style="text-decoration:underline">... - korostaa teksti.

<тег style="text-decoration:overline">...- alleviivaa tekstiä.

<тег style="text-decoration:line-through">...- ylittää tekstin.

Esimerkki kirjasintyylien muuttamisesta

Lihavoitu kirjasin.Kursivointi.

Lihavoitu kursiivi.

H ₂ NIIN ₄- rikkihapon kaava kursiivilla.

Alleviivattu tekstikappale.

Pelkkää tekstiä,

lihavoitu yliviivattu.

Tulos selaimessa

Tyyli on täysin tavallinen tag-attribuutti, mutta se liittyy Cascading Style Sheets (CS) S). Kaukana menneisyydessä kaikki toiminnot HTML-sivun strukturoimiseksi kokonaisuutena ja kunkin elementin ulkoiseen esittämiseen erikseen (väri, muoto, sijainti sivulla jne.) siirtyivät HTML-kieleen. Mutta sitten kielten kehittäjät päättivät erottaa nämä toiminnot toisistaan ​​ja loivat CSS:n. Tästä syystä monet tunnisteet tai tunnisteattribuutit ovat vanhentuneet. On. Tyyli-attribuutin yleinen syntaksi on seuraava:

<тег style="свойство CSS:значение">...

Tag tai mitä tehdä, kun tarvittavia tunnisteita ei ole

Tag.... Tämä tunniste on myös sisäänrakennettu (inline, rivitaso) ja se voi sisältää mitä tahansa sisäänrakennettuja tunnisteita, mutta se ei ole tärkein asia. Omillani , ilman attribuutteja, ei lisää muutoksia tekstiin tai sen sisällä oleviin tunnisteisiin. Ja se on luotu nimenomaan tyylejä varten, eli lähinnä tyylimääritteelle. Se johtuu tämän ominaisuuden tai pikemminkin sen eri merkityksistä tietyt ominaisuudet näkyvät.

Pelkkää tekstiä ilman muutoksia.

Tavallisempaa tekstiä.

Stressaantunut.

Yliviivattu.

Tulos selaimessa

Fontin nimen (kirjasintyypin) muuttaminen

Tässä on luettelo yleisimmistä fonteista, joita lähes jokaisella käyttäjällä on tietokoneessaan:

Oletuksena lähes kaikki selaimet käyttävät "Times New Roman" -fonttia, ja sen vaihtamiseen käytetään samaa tyylimääritettä, jota voidaan käyttää minkä tahansa tagin sisällä. Määrittelyn yleinen syntaksi on:

<тег style="font-family:имя шрифта, семейство">...

Jos fontin nimi koostuu useista sanoista, se on suljettava yksittäisiin lainausmerkkeihin. On sallittua määrittää ei yksi, vaan useita fontin nimiä pilkuilla erotettuina, ja sitten, jos ensimmäinen fontti ei ole tietokoneessa, käytetään toista, kolmatta jne.

Jos haluat muuttaa koko sivun fonttia, määritä vain tyyliattribuutti tagissa . Ja jos sinun on vaihdettava tekstin erillisen osan fonttia, liitä se tunnisteeseen ja käytä attribuuttia siihen.

Esimerkki kirjasinten nimien muuttamisesta

Tämä on Arial-fontti, jos ei, niin Verdana ja jos

ja se ei ole siellä, sitten mikään muu sans-serif.

Tämä on Comic Sans MS tai mikä tahansa kursiivinen.

Tämä on jälleen Arial, Verdana tai mikä tahansa sans-serif.

Ja tämä on Courier tai mikä tahansa monospace.

Tulos selaimessa

Fonttikoon muuttaminen

HTML-kieli on rajoitettu vain seitsemään kirjasinkokoon, mikä on hyvin pieni hyvälle sivustolle. Siksi kaikki ovat käyttäneet CSS:ää koon muuttamiseen pitkään, ja nyt opit myös sen.

CSS:ssä on noin kymmenen mittayksikköä, mutta tarkastelemme vain kolmea suosituinta - pistettä (pt), pikseliä (px) ja prosenttiyksikköä (%). Niin:

pt- Pisteitä. Yksi piste on 1/72 tuumaa ja yksi tuuma on 2,54 cm. Siksi 1pt = 0,03527778cm. Tämä on absoluuttinen arvo, koska pisteissä määritetty koko ei riipu mistään.

px- Pikselit. Mitattu tietokoneen näytön pikseleinä. Pikseli on näytön pienin piste ja se on suhteellinen arvo, koska sen koko riippuu nykyisestä näytön resoluutiosta ja itse näytön koosta.

% - Kiinnostuksen kohde. Se lasketaan prosentteina, jossa 100% otetaan ylätunnisteen arvoksi ja jos sitä ei ole määritetty, niin selaimen oletusarvo. Tämä on myös suhteellinen arvo, koska yläkirjasinkoko voi olla täysin erilainen ja käyttäjät voivat vapaasti muuttaa fonttikokoa selaimessa.

Fonttikoon määrittämiseen käytetään style-attribuuttia, joka voidaan määrittää minkä tahansa tunnisteen sisällä. Yleinen syntaksi on:

<тег style="font-size:размер">...

Kuten kirjasinten nimien kohdalla, muuttaaksesi koko sivun fonttikokoa, määritä vain tyyliattribuutti tagissa . Ja jos sinun on vaihdettava tekstin fonttia, liitä se tunnisteeseen ja käytä attribuuttia siihen.

Esimerkki fonttikoon muuttamisesta

Tämä fonttikoko on 90 % koosta

oletusselaimessa.

Tämä koko on 90 % BODY-tunnisteen koosta.

Otsikon fonttikoko on 120 % BODY-koosta.

Tämä on jälleen 90 % selaimen oletuskoosta.

Tämä fonttikoko on 15 pistettä.

Tulos selaimessa

Jos tarvitset Arial-fontin, jonka koko on 80% koko kappaleelle, sinun on kirjoitettava se seuraavasti:

Kappaleen teksti.

Kappaleen teksti.

Tai edes näin.

Kappaleen teksti.

Kaksi ensimmäistä vaihtoehtoa ovat periaatteessa oikein, mutta viimeinen on yleensä virhe, koska jos muistat, yhdellä tunnisteella ei voi olla kahta identtistä attribuuttia. Nyt on aika muistaa, että tyyli ei ole vain attribuutti, vaan CSS-attribuutti:

Kappaleen teksti.

Paljon helpompi. Tärkeintä on muistaa laittaa puolipiste (;) vierekkäisten tyylien väliin ja laittaa kaikki nämä jutut lainausmerkkeihin (" "), muuten vain ensimmäinen tyyli otetaan käyttöön ja selain jättää muut huomioimatta.

Fontin väri ja tuttu väri

HTML:ssä joillakin tunnisteilla on erityisiä väriä vaihtavia attribuutteja, esimerkiksi bgcolor (taustaväri). Mutta ensinnäkin nämä attribuutit ovat vanhentuneita (luulen, että muistat mitä se tarkoittaa), ja toiseksi, kuten jo sanoin, kaikilla tunnisteilla ei ole niitä. Oletetaan, että haluat muuttaa tekstikappaleen taustaväriä. Ja miten aiot tehdä tämän, koska tag

Eikö sellaista ominaisuutta ole olemassa? Siksi, kuten aikaisemmissakin tunneissa, käytämme tyylejä (CSS), toisin sanoen universaalia tyyliattribuuttia, jonka avulla voimme muuttaa väriä missä tahansa.

Kuinka voit määrittää värin?

HTML:n (ja CSS:n) värit voidaan määrittää useilla tavoilla, näytän sinulle suosituimmat ja yleisimmät:

Värin nimi- HTML:llä on suuri luettelo kukkia nimillä ja värin osoittamiseksi riittää, että kirjoitat sen nimen englanniksi, esimerkiksi: punainen, vihreä, sininen.

HEX värikoodi- Täysin mikä tahansa väri saadaan sekoittamalla kolmea perusväriä eri suhteissa - punainen, vihreä ja sininen. HEX-koodi on kolme paria heksadesimaaliarvoja, jotka vastaavat näiden värien määrästä kussakin värissä. Värikoodin edessä on oltava hash-merkki (#), esimerkiksi: #FF8C00, #CC3300 ja niin edelleen.

Aikaisemmin HTML:ssä suositeltiin käyttää vain turvallinen väripaletti, joka näkyy taatusti samalla tavalla kaikissa selaimissa ja kaikilla näytöillä. Mutta tänään ei tarvitse rajoittua siihen, koska sekä selaimet että näytöt ovat jo pitkään oppineet näyttämään oikein paljon suuremman väriluettelon. Mutta en suosittele värien määrittämistä nimellä; tosiasia on, että monet selaimet yhdistävät silti eri värejä samaan nimeen.

Kuinka muuttaa tekstin väriä?

Jos haluat muuttaa tekstin väriä missä tahansa HTML-sivun elementissä, sinun on määritettävä tyyli-attribuutti tagin sisällä. Yleinen syntaksi on seuraava:

<тег style="color:имя цвета">...- tekstin värin määrittäminen nimellä.

<тег style="color:#HEX-код">...- tekstin värin määrittäminen koodilla.

Ja kuten tavallista, muuttaaksesi tekstin väriä koko sivulla, määritä vain tyyliattribuutti tagissa . Ja jos sinun on vaihdettava tekstin fontin väriä, liitä se tunnisteeseen ja käytä attribuuttia siihen.

Esimerkki tekstin värin muuttamisesta

Punainen otsikkoteksti

Sinisen kappaleen teksti.

Greenitalic.

Punainen teksti.

Tulos selaimessa

Kuinka muuttaa taustaväriä?

Minkä tahansa sivuelementin taustaväriä voidaan myös muuttaa style-attribuutilla. Yleinen syntaksi on:

<тег style="background:имя цвета">...- taustavärin määrittäminen nimellä.

<тег style="background:#HEX-код">...- taustavärin määrittäminen koodilla.

Esimerkki taustavärin muuttamisesta

Otsikko.

Kohta.

Pikkukuva.

Säännöllinen teksti.

Tulos selaimessa

Kun muutat elementtien taustaväriä, käy hyvin selväksi, kuinka leveä kukin niistä todellisuudessa vie. Kuten näet, lohkoelementit, kuten kappaleet ja otsikot, vievät yleensä koko käytettävissä olevan leveyden, vaikka ne sisältäisivätkin hyvin vähän tekstiä, mutta upotetut tagit ovat yhtä leveitä kuin niiden sisältö. Muuten, esimerkin viimeinen kappale vie myös koko leveyden, vain sen tausta on läpinäkyvä, joten sivun tausta näkyy sen läpi. Yleensä kaikkien sivun elementtien tausta, joissa sitä ei ole erikseen ilmoitettu, on läpinäkyvä, siinä kaikki.

Tunnisteet testisisällön tasaamiseksi sivun suhteen

HTML-elementin sisällön tasaamiseksi sinun on määritettävä style-attribuutille jokin seuraavista arvoista:

text-align:center- Tasaa jokainen rivi elementin, kuten kappaleen, keskelle.

text-align:left- Jokainen rivi painetaan tiukasti elementin vasemmalle puolelle (tämä on oletusarvo).

text-align:right- Jokainen rivi painetaan oikealle puolelle.

text-align:justify- Kohdista välittömästi elementin vasemmalle ja oikealle puolelle. Selittää. Tyypillisesti elementissä, kuten kappaleessa, tekstin toinen puoli on aina suora ja toinen puoli "revitty", koska rivien pituudet ovat hieman erilaiset. Ja kun käytämme arvoa text-align:justify, jokaisen rivin leveys jakautuu tasaisesti. Tarvittaessa selain lisää ylimääräisiä välilyöntejä sanojen väliin ja rivin ensimmäinen ja viimeinen sana painetaan aina vastaavalle puolelle, jolloin saadaan molemmilla puolilla tasainen lohko.

Esimerkki tunnisteen sisällön kohdistamisesta

Otsikko keskellä.

Kappaleen tekstiä painetaan oikealle.

Kappale keskellä.

Tulos selaimessa

Yleisesti ottaen vaakasuora kohdistus koskee vain lohkotunnisteita ja taulukon soluja (puhumme niistä myöhemmin). Vaikka toisaalta, vaikka yrittäisit, et voi käyttää sitä sisäänrakennetuissa.

Tunnisteet, korostavat lainaukset

Tässä käsiteltyjä tageja ei käytetä kovin usein HTML-sivuilla, mutta joskus et tule toimeen ilman niitä.

Tag

tai korosta pitkiä lainauksia

Tunnistetta käytetään HTML:ssä niin sanottujen "pitkien lainausten" korostamiseen, kuten yksi tai useampi kappale. Tämä tagi on lohko ja se voi sisältää lohkotunnisteita, mutta ei voi sisältää upotettuja tunnisteita. Lisäksi se lisää samat ulkoreunukset ylä- ja alaosaan kuin kappaleet, mutta lisää myös sivumarginaalit, mikä tekee lainatusta tekstistä visuaalisesti korostettuna.

Esimerkki BLOCKQUOTE-tunnisteen käytöstä

Mihin BLOCKQUOTE-tunnistetta käytetään? Seodon.ru-sivusto kertoo meille tästä:

Hyvin usein BLOCKQUOTE-tunnistetta käytetään muihin tarkoituksiin kuin sen aiottuun tarkoitukseen -

korostamalla lainattua tekstiä. Mutta vain sivumarginaalien vuoksi, mikä

hän luo. Periaatteessa tämän tunnisteen käyttö ei ole ristiriidassa

HTML-syntaksi, pääasia, että BLOCKQUOTE sisältää lohkotunnisteita. Mutta siinä se

On parempi olla käyttämättä sitä tällä tavalla, koska BLOCKQUOTE

suunniteltu erityisesti pitkien lainausten korostamiseen.

Tulos selaimessa

Tag tai korosta pieniä lainauksia

Ja tässä on tagi ... käytetään osoittamaan pieniä lainausmerkkejä tai sanoja kuvaannollisessa merkityksessä. Hän laittaa kaiken tämän elementin tunnisteiden välissä olevan tekstin lainausmerkkeihin. Muuten, - tämä on yleisin inline (rivitaso) tunniste, joka voi sisältää vain upotettuja tageja.

Esimerkki lainausten korostamisesta

Vapaa uteliaisuus on paljon tärkeämpää kielen oppimisessa.

kuin valtava välttämättömyys. Augustinus Aurelius.

Mitä tahansa opit, opit itse. Petronius.

Tulos selaimessa

Tag
tai pakotettu rivinvaihto

Joskus vaaditaan, että tekstirivi ei jatku koko käytettävissä olevan tilan leveydeltä, vaan katkeaa tarvitsemastamme kohdasta ja jatkuu seuraavalla rivillä. Mutta kuten muistat, selaimet ohittavat yksinkertaiset rivinvaihdot HTML-koodissa ikään kuin niitä ei olisi olemassa. Tällaisissa tapauksissa tunniste auttaa meitä
, joka pakottaa linjan katkaisun asennuspaikassa.

Tag
on myös sisäänrakennettu (inline) elementti ja älä hämmenny siitä tosiasiasta, että se suorittaa rivinvaihdon itsensä jälkeen, sillä vain on tämä toiminto. Lisäksi elementti
ei ole sulkevaa tagia, eli se on tyhjä, koska sillä ei voi olla sisältöä.

Esimerkki BR-tunnisteen käytöstä

Luovuuden päämäärä on omistautumista,
Ei hypeä, ei menestystä.

Häpeällistä, merkityksetöntä
Ulvominen on sananlasku kaikkien huulilla.

B. Pasternak.

Tulos selaimessa

Miksi käyttää tunnistetta
, jos voit yksinkertaisesti kirjoittaa tekstin useisiin kappaleisiin, se ilmoitetaan myös eri riveillä? Kaikki tämä on totta, mutta älä unohda, että tag

Luo marginaalin tyhjää tilaa ylä- ja alaosaan sekä tunnisteen
ei tee tätä. Lisäksi kappaleet ovat olemassa siten, että jokainen niistä sisältää merkityksellisiä ja täydellisiä ilmaisuja, ei tekstinpätkiä.

Voit usein nähdä verkkosivustoilla, että
käytetään vain muutaman tyhjän rivin luomiseen. Kyllä, jos määrität sen useita kertoja peräkkäin (


...), voit tehdä minkä tahansa kokoisia pystysuuntaisia ​​sisennyksiä. Mutta vaikka tämä ei ole HTML-syntaksin vastaista, en suosittele tämän tekemistä, koska tätä tunnistetta ei ole tarkoitettu tähän.

ErikoismerkitHTML

KANSSAHTML-erikoismerkit- Nämä ovat tavanomaisia ​​koodisymboleita, jotka selain muuntaa erilaisiksi tekstimerkeiksi: kirjaimiin, numeroihin, välimerkkeihin, nuoliin ja niin edelleen. Jos esimerkiksi kirjoitamme seuraavan koodin HTML-sivulle:

Selain ei näytä sitä meille, mutta se näyttää plus-miinusmerkin kappaleessa:

HTML-erikoismerkit voidaan määrittää kahdella tavalla:

Merkkikoodi- Tässä tapauksessa sijoitetaan et-merkki (&), jota seuraa hash (#), sitten numerot ja puolipiste (;) lopussa, kuten yllä on esitetty.

Muistitekniikka- Ensin on myös et-merkki, sitten kirjoitetaan avainsana ja myös puolipiste lopussa, esim.: ©

Luonnollisesti on kätevämpää käyttää vaihtoehtoa muistotekniikan kanssa, koska jos osaat ainakin vähän englantia, voit arvata, millaisen symbolin jokainen niistä näyttää sivulla, etkä hämmentyisi numeroissa. Mutta valitettavasti kaikilla symboleilla ei ole muistomerkkejä, joten sinun on usein käytettävä koodiversiota.

Kiinnitä erityistä huomiota siihen, että muistomerkit erottelevat isot ja pienet kirjaimet, eli © eivätkä ole sama asia.

Tämän mukaisesti määritä erikoismerkit samalla tavalla kuin tavallinen teksti - tunnisteiden sisällä, jotka voivat sisältää upotettuja elementtejä.

Miksi HTML-erikoismerkkejä tarvitaan?

HTML-erikoismerkkejä käytetään täysin eri tarkoituksiin. Luulen, että olet jo arvannut, että niitä käytetään, kun sinun on lisättävä sivulle merkki, joka ei ole käytettävissä tavallisella tietokoneen näppäimistöllä. Mutta siinä ei vielä kaikki. Lisäksi ne ilmoitetaan, kun sivun koodaus ei tue joitain merkkejä "valmis"-muodossa (palaamme tähän myöhemmin).

Tai esimerkiksi on olemassa sellainen erikoismerkki kuin katkeamaton välilyönti (). Ja jos se sijoitetaan tiiviisti kahden sanan väliin, rivinvaihto on kielletty tässä paikassa. Ja jos määrität sen useita kertoja peräkkäin (...), saamme vaaditun rivin sisennyksen, koska selaimet eivät ohita näitä peräkkäisiä välilyöntejä.

Melko usein käytetään erikoismerkkejä HTML-merkintöjen näyttämiseen sivulla. Ja se on totta, jos haluamme näyttää jonkin tunnisteen sivulla, emme voi tehdä sitä vain sillä tavalla, koska selain piilottaa sen pitäen sitä merkintänä. Siksi sinun on käytettävä erikoismerkkejä, jotka korvaavat tunnisteiden kulmasulut (< и >) ja määritteen lainausmerkit (")

Esimerkki HTML-erikoismerkkien käytöstä

Tunniste kappaleiden luomista varten.

®- Rekisteröity tavaramerkki.

Artikkelia kirjoitettaessa paras vaihtoehto on käyttää

sanojen välissä väliviiva ja yhdysmerkki, ei vain yhdysmerkki kaikissa tapauksissa.

Tulos selaimessa

Vaakaviivojen luominen sisäänHTML

Pohjimmiltaan vaakaviivoja käytetään verkkosivuston HTML-sivujen koristeluun, jolloin ne näyttävät houkuttelevammilta. Mutta ne voivat myös visuaalisesti erottaa tiedot viereisistä osioista, mikä lisää lukijoille mukavuutta niiden tutkimisen aikana.

Kuinka piirtää vaakaviiva?

HTML:ssä on erityinen tunniste vaakasuuntaisten viivojen luomiseen

---

. Ja hän on estää tag, eli se luo rivinvaihtoja ennen ja jälkeen itsensä, joten rivi päätyy aina erilliselle riville. Näin ollen se voidaan määrittää vain tunnisteiden sisällä, jotka voivat sisältää esimerkiksi lohkoelementtejä tai

. Mutta tässä minä olen

---

ei voi sisältää sisältöä, koska siinä ei yksinkertaisesti ole sulkevaa tunnistetta, mikä tarkoittaa, että se on tyhjä.

Esimerkki vaakaviivojen piirtämisestä HTML:ään

Kohta.

Kohta.

Kohta.

Tulos selaimessa

Viivat osoittautuvat erittäin ohuiksi, kuvailemattomiksi ja koko käytettävissä olevaan leveyteen vedetyiksi, joten nyt opimme muuttamaan niitä houkuttelevammiksi.

Kuinka muuttaa vaakaviivojen väriä, paksuutta ja leveyttä?

Vanhemmissa HTML-versioissa tunniste

---

siellä oli erikoisattribuutteja, joilla voit muuttaa vaakaviivojen väriä, paksuutta ja leveyttä. Nämä ovat väri, koko ja leveys. Mutta uusissa versioissa ne hylättiin CSS:n (Cascading Style Sheets) hyväksi, joten, kuten olet ehkä arvannut, käytämme jälleen suosikkityyliattribuuttiamme. Yleinen syntaksi on:

---

- viivan väri (tai pikemminkin sen tausta).

---

- linjan paksuus.

---

- viivan leveys.

---

- tai voit määrittää kaikki parametrit kerralla, älä vain unohda puolipistettä (;).

Väri voidaan määrittää sen nimellä englanniksi tai värin HEX-koodilla, jota edeltää hash (#).

CSS:ssä on noin kymmenen mittayksikköä, mutta viivan leveys voidaan määrittää vain pikseleinä (px) ja prosentteina (%), ja paksuus yleensä vain pikseleinä. Jos laitat muita mittayksiköitä, se ei ole virhe, vaan selaimet yksinkertaisesti jättävät ne huomioimatta.

Jos määrität mitat pikseleinä, viivan paksuus ja leveys riippuvat sen näytön resoluutiosta, jolla sivustoasi tarkastellaan (mitä suurempi näytön tarkkuus, sitä ohuempi ja kapeampi viiva).

Vain viivan leveys voidaan määrittää prosentteina. Prosenttiosuudet riippuvat aina ja lasketaan sen pääsäiliöelementin koon perusteella, jossa tunniste sijaitsee

---

. Tässä tapauksessa vanhemman mitoiksi otetaan 100 %. Jos esimerkiksi asetamme tunnisteen

---

sisäinen elementti

, niin riippumatta siitä, kuinka muutamme selainikkunan kokoa tai näytön resoluutiota, viivan leveys on aina puolet lohkon leveydestä

.

Esimerkki vaakaviivojen värin, paksuuden ja leveyden muuttamisesta.

---

---

---

---

Tulos selaimessa

Vaakaviivojen sijainnin muuttaminen

Kun muutat vaakaviivan leveyttä, näet selvästi, että selaimet sijoittavat sen aina keskelle. Jos haluat muuttaa sen sijaintia, käytä vain sisällä

---

style attribuutti arvoilla for tagin sisällön kohdistus.

Kuinka poistaa kehys viivan ympäriltä?

Oletuksena selaimet piirtävät kehyksiä viivojen ympärille, mikä luo kolmiulotteisen tehosteen. Joten kun emme lisää vaakasuuntaisten viivojen paksuutta, selaimet näyttävät meille vain nämä kehykset, koska itse viivan paksuus on 0px.

Poistaaksemme viivan ympäriltä reunuksen, joka usein vain pilaa ulkonäön, käytämme uudelleen tyylimääritettä. Ja se on kirjoitettu näin:

---

Elementtien ryhmittely

HTML-sivuelementtien ryhmittely on yksi tehokkaimmista, kätevimmista ja samalla yksinkertaisimmista työkaluista laadukkaan verkkosivuston luomiseen.

Tag

tai ryhmitelty lohko

Tähän asti kaikki tutkimamme HTML-elementit voivat sisältää vain yhden tyyppisen tunnisteen - joko rivin (rivitason) tai lohkon (lohko). Nyt esittelen sinulle tagin

...

. Hän itse on lohko, mutta se voi sisältää sekä sisäänrakennettuja että lohkotunnisteita ja tietysti pelkkää tekstiä. Mutta se ei ole kaikki, toisin kuin muut lohkotunnisteet -

ei lisää lainkaan ulkoreunaa (täytettä) tyhjää tilaa ympärilleen, kuten esimerkiksi tunniste

Esimerkki DIV-tunnisteen käytöstä

Sivustovalikko

Lisäosat

Kohta.

Kohta.

Kohta.

Kohta.

Kohta.

Kohta.

Tulos selaimessa

Tag tai ryhmitelty merkkijono

Tag... on sisäänrakennettu (inline) elementti, joka voi sisältää vain tekstin sisäisiä tunnisteita ja jota voidaan käyttää tekstiriveillä.

Esimerkki SPAN-tunnisteen käytöstä

Pelkkää tekstiä.

Rasvainen.

Kursivointi.

Tulos selaimessa

Elementtejä ryhmiteltäessä on tärkeää kunnioittaa paitsi HTML-syntaksia myös koodin semanttista ja loogista rakennetta. Jos sinulla on esimerkiksi sivu, jossa on lyhyt elämäkerta kahdesta henkilöstä, sinun ei tarvitse työntää ensimmäisen henkilön elämäkertaa ja toisen alkua yhden lohkon sisällä. Mutta voit helposti sijoittaa erillisen elämäkerran tai sen osan tiedot tarvittaessa lohkon sisään tai jopa liittää ne molemmat yhteen lohkoon.

HTML-dokumenttien teksti muotoillaan asianmukaisilla tunnisteilla. Taulukossa näkyvät merkkien muotoiluun käytetyt tagit ja niiden luoma tehoste.

Tunnisteet tekstin muotoiluun

HTML-tunniste	Vaikutus	Esimerkki
Teksti	Tekstin kirjoittaminen lihavoituna	Teksti
Teksti	Lihavoitu teksti	Teksti
Teksti	Tekstin kirjoittaminen kursiivilla	Teksti
Teksti	Tärkeiden tekstin osien korostaminen (teksti näkyy kursiivilla)	Teksti
Teksti	Tekstin alleviivaus	Teksti
Teksti	Yliviivattu teksti	Teksti
Teksti	Yläindeksi	100 m2
Teksti	Alaindeksi	H2SO4

Lisäksi voit määrittää erilaisia ​​fonttiparametreja. Erityisesti tunnisteen käyttäminen ... aseta fontin kirjasintyyppi, fontin koko ja väri. Tämä tunniste on yksittäinen ja vaikuttaa kaikkeen säilöön sijoitettuun tekstiin.

• FACE="arvo"- fontin kirjasintyyppi. Jos määritettyä kirjasintyyppiä ei ole käyttäjän tietokoneessa, teksti muotoillaan oletuskirjasimen mukaan. Attribuutissa KASVOT joskus kirjoitetaan useita kirjasintyyppejä pilkuilla erotettuina, jolloin selain valitsee kirjasimet listasta: jos ensimmäinen puuttuu, se käyttää toista jne. Attribuutin arvo tulee antaa lainausmerkeissä.
  Esimerkki:
  

  Tahoma , Arial musta

  
  Tulos:
  Tahoma Arial musta
• SIZE="arvo"- fonttikoko (kokonaisluku 1-7). Attribuutti KOKO miinus (tai plus) merkki tarkoittaa, että fonttikokoa pienennetään (tai suurennetaan) vastaavalla määrällä oletusarvoon verrattuna. Etumerkitön arvo määrittää absoluuttisen kirjasinkoon.
  Esimerkki:
  

  1 ... 7

  
  Tulos:
  1 , 2 , 3 , 4 , 5 , 6 , 7
• COLOR="arvo"- fontin väri. Värimerkityksenä voit käyttää englanninkielisiä värien nimiä, kuten punainen, vihreä, sininen jne. tai heksadesimaaliarvoja (kirjoitettu heksadesimaalimuodossa) alkaen merkistä # ja määritä peräkkäin punainen, vihreä ja sininen värit, jotka on sekoitettava halutun sävyn saavuttamiseksi. Jälkimmäinen on parempi, koska ensimmäisessä tapauksessa sävyn valinta riippuu asiakkaan tietyn selaimen asetuksista! Esimerkki:
  

  Teksti , Teksti

  
  Tulos:
  Teksti, teksti

Verkkosivuston suunnittelussa he käyttävät yleensä värejä nimeltä . Se koostuu 216 elementistä. "Turvallisten" värien erikoisuus on, että ne eivät muutu, kun niitä näytetään eri selaimilla tai eri näytöillä, eli tämä paletti varmistaa tarkan esityksen web-suunnittelijan tavoitteista eri näytöillä. Jos jokin heksadesimaaliarvon kolmesta komponentista poikkeaa 00 , 33 , 66 , 99 , SS tai FF, silloin väri ei ole turvallinen. Attribuuttien arvot KOKO Ja VÄRI Voit kirjoittaa sen ilman lainausmerkkejä, mutta on parempi tehdä kaikki sääntöjen mukaan.

On muitakin tageja, joilla voidaan muuttaa tekstiparametreja:

• Teksti- kirjasinkoon lisääminen. Tekstin merkkien koko kasvaa yhdellä suhteessa nykyiseen tasoon.
• Teksti- fontin koon pienentäminen. Symbolien kokoa pienennetään yhdellä suhteessa nykyiseen tasoon.
• Teksti- yliviivatun tekstin luominen. Teksti yliviivataan vaakaviivalla.
• teksti- näyttää tekstin tai kuvan "hiipivänä viivana", jonka välissä on teksti.

  Jos käytät tekstinkäsittelyohjelmaa, kuten Microsoft Wordia tai Microsoft Exceliä, sinun pitäisi tuntea tekstin muotoilu ja tekstin lihavoitu (lihavoitu), kursivoitu (kursivointi), yliviivaus tai alleviivaus. Nämä ovat vain neljä yhdestätoista käytettävissä olevasta vaihtoehdosta, jotka osoittavat, kuinka tekstiä voidaan muotoilla HTML- ja XHTML-muodossa.

  Lihavoitu tai lihavoitu teksti

  Lihavoitu tai lihavoitu fontti HTML:ssä voidaan asettaa kahdella tunnisteella ... Ja ... . Kaikki mitä tageissa on ... Ja ... näkyy HTML:ssä lihavoituna (lihavoituna) alla olevan kuvan mukaisesti:

  Esimerkki

  Käytämme b-tagia lihavoitu kirjasin.

  Käytämme vahvaa tunnistetta lihavoitu teksti.

  Saamme seuraavan tuloksen:

  Kursivoitu – kursivoitu teksti tai fontti

  Voit muuttaa tekstin kursivoituksi HTML:ssä käyttämällä kahta tagia ... Ja ... . Kaikki kursiivilla tunnisteilla ... Ja ... näkyy HTML:ssä kursivoituna (fontti) alla olevan kuvan mukaisesti:

  Esimerkki

  Käytämme i-tagia kursivoitu teksti tai fontti.

  Käytämme em-tunnistetta teksti kursiivilla.

  Saamme seuraavan tuloksen:

  Alleviivattu teksti

  Voit alleviivata tekstiä HTML:ssä tagin avulla ... ... näkyy HTML:ssä alleviivatulla tekstillä (fontilla) alla olevan kuvan mukaisesti:

  Esimerkki

  Käytämme u-tunnistetta alleviivattu teksti tai sana.

  Saamme seuraavan tuloksen:

  Yliviivattu teksti

  Voit yliviivata tekstiä HTML:ssä tagin avulla ... . Kaikki mikä on tagin sisällä ... näkyy HTML:ssä yliviivatussa tekstissä (fontissa) alla olevan kuvan mukaisesti:

  Esimerkki

  Käytämme varoitustagia yliviivattu teksti.

  Saamme seuraavan tuloksen:

  Monospace fontti

  Elementin sisältö ... kirjoitettu HTML-kielellä monospace-fontilla. Useimmilla fonteilla on vaihteleva leveys, koska eri kirjaimilla on eri leveys (esimerkiksi kirjain "у" on leveämpi kuin kirjain "r"). Yksivälisessä fontissa jokainen kirjain on kuitenkin saman leveä.

  Esimerkki

  Käytämme tt-tunnistetta monospace fontti.

  Saamme seuraavan tuloksen:

  Yläindeksi

  Merkitse sisältö ^... näkyy HTML:ssä yläindeksinä. Yläindeksi tag ^{HTML:ssä on sama fonttikoko kuin sen ympärillä olevilla merkeillä, mutta se käyttää vain puolta niiden korkeudesta. Tämä elementti sopii hyvin silloin, kun on tarpeen esimerkiksi kirjoittaa luvun teho HTML-kielellä.}

  Esimerkki

  Sup-tunnisteen avulla teemme yläosan ^indeksi tai luvun potenssi, esimerkiksi 2 ³.

  Saamme seuraavan tuloksen:

  Alaindeksi

  Merkitse sisältö _... näkyy HTML:ssä alaindeksissä. Alaindeksin tunniste _{HTML:ssä on sama fonttikoko kuin sen ympärillä olevilla merkeillä, mutta se käyttää vain puolta niiden korkeudesta.}

  Esimerkki

  Teemme alatunnisteen avulla pohjan _indeksi.

  Saamme seuraavan tuloksen:

  Teksti liitetty

  Sisältö tagin sisällä ... näkyy HTML:ssä liitettynä tekstinä.

  Esimerkki

  Haluan ansaita rahaa paljon niin monta raha.

  Saamme seuraavan tuloksen:

  Poistettu teksti

  Sisältö tagin sisällä ... näkyy HTML:ssä poistettuna tekstinä.

  Esimerkki

  Haluan ansaita rahaa paljon niin monta raha.

  Saamme seuraavan tuloksen:

  Iso teksti

  Merkitse sisältö ... näkyy HTML:ssä suurena tekstinä, joka on yhtä fonttikokoa suurempi kuin muu ympäröivä teksti, kuten alla:

  Esimerkki

  Käytämme isoa tagia tekstiä lisää.

  Saamme seuraavan tuloksen:

  Pieni teksti

  Sisältö tagin sisällä ... näkyy HTML:ssä pienenä tekstinä, joka on yhtä fonttikokoa pienempi kuin muu ympäröivä teksti, kuten alla:

  Esimerkki

  Käytämme pientä tagia teksti on pienempi.

  Saamme seuraavan tuloksen:

  Elementtien ja sivun sisällön ryhmittely HTML:ssä

  Elementit

  Ja Voit ryhmitellä useita elementtejä HTML:ssä sivun osioiden tai alaosien luomiseksi.

  Voit esimerkiksi lisätä kaikki sivun linkit tunnisteeseen

  osoittamaan, että kaikki tämän tagin elementit

  katso valikkoa. Sitten voit muotoilla tagin

  niin, että elementit renderöidään käyttämällä erityistä tyylisääntöjä (CSS).

  Esimerkki tagilla

  ETUSIVU / MEISTÄ / YHTEYSTIEDOT

  Artikkelin otsikko

  Sivun sisältö...

  Saamme seuraavan tuloksen:

  
  

  Toisaalta elementti voidaan käyttää vain rivin sisäisten elementtien ryhmittelyyn. Joten jos sinulla on osa lauseesta tai kappaleesta (kappale), jonka haluat yhdistää, voit käyttää elementtiä seuraavalla tavalla:

  Esimerkki tagilla

  Elementtien ryhmittely käyttämällä span tag.

  Saamme seuraavan tuloksen:

  Näitä tageja käytetään tyypillisesti CSS:n kanssa, jotta voit muokata sivun osan tyyliä.

  Kehotan herrat senaattorit pitämään puheen kirjoittamattomana,
  mutta omin sanoin, jotta hölynpöly näkyy kaikille!
  Pietari Ensimmäinen.

  Tällä hetkellä, tekstiä HTML:ään on tärkein tapa esittää tietoa. Suurin osa Internetin sivustoista koostuu tekstisisällöstä. Tämä tarkoittaa, että jos sinulla on taito, voit vähintään lukea ja enintään kirjoittaa (jokaisessa vitsissä on totuutta).

  Oletetaan, että kirjoitit tekstiä editorissa, muotoilit sen (korostit joitain sanoja lihavoitu tai kursivoitu), tai tehnyt sen kanssa jotain muuta. Sitten kopioin ja liitin tekstin html-koodiini. Avaat html-sivun kohteessa , ja kaikki muotoilusi on kadonnut jonnekin. Tämä johtuu siitä, että tekstieditori käyttää omia erikoismerkkejään tekstin muotoiluun (olennaisesti samat tunnisteet, joita käytetään vain tekstieditoreissa), joita et oletuksena näe.

  Muokkausikkunassa näet vain tekstiä. Mutta itse asiassa on myös erityisiä ohjausmerkkejä, joilla editori "ymmärtää" tämän tai toisen tekstin näyttämisen. Toisin sanoen, toistan, tämä on sama kuin, vain "räätälöity" käytettäväksi tekstieditoreissa.

  Mutta tästä huolimatta on olemassa tapa siirtää tekstiä editorista ja liittää se html-koodiin alkuperäisessä muodossaan. Ja koska puhumme tästä, aloitetaan tekstin muotoilun tutkiminen tällä tunnisteella. Joten aloitetaan.

  § 2. Itse muotoilutunnisteet

  Esimuotoiltu teksti voidaan lisätä HTML-sivulle käyttämällä ja -tageja. Selain näyttää näiden tunnisteiden välissä olevan tekstin sellaisena kuin se näkyy tekstieditorissa. Rehellisesti sanottuna en ole koskaan käyttänyt tätä tunnistetta käytännössä, joten en voi sanoa siitä muuta.

  Suosituimmat tekstin muotoilun tagit ovat:

  • - käytetään korostamaan tekstiä lihavoitu.
  
  
  • - tapana vastaanottaa kursivoitu teksti. On suositeltavaa käyttää tagia tämän tagin sijaan.
  
  
  • - sallii korostaa teksti. Tärkeintä tässä on, että käyttäjä ei sekoita alleviivattua tekstiä linkkiin.
  
  
  • - tekee tekstin yliviivattuna.
  
  
  • - suunniteltu korostamaan alaindeksitekstiä (alaindeksi). Tämä tunniste voi olla hyödyllinen esimerkiksi kemiallisten kaavojen kirjoittamisessa. Tässä on koodi

    H2O

    Antaa meille tämän kaavan

  
  
  • - tarvitaan korostamaan yläindeksitekstiä (yläindeksi). Esimerkiksi eksponentioinnin kirjoittaminen: kirjoitamme

    (a+b)2,

    Saamme

    (a+b) 2.

  
  

  Kaikkia näitä tunnisteita voidaan käyttää tekstin muotoiluun joko yksitellen tai useita yhdessä. Tämä saavutetaan sijoittamalla tunnisteet toisiinsa. Esimerkiksi seuraava html-koodi:

  H2O on veden kaava.

  katsoessaan

  H2O- Tämä vesi kaava.

  § 3. Kohdat

  HTML:ssä kappaleet luodaan käyttämällä . Tämän tagin käyttäminen lisää yhden tyhjän rivin ja sijoittaa näkyvän HTML-sivuelementin sen taakse seuraavalle riville. Jos esimerkiksi kirjoitamme:

  Joten se näyttää tältä:

  Eikä ole tarpeen käyttää sulkevaa tagia, koska selain katsoo seuraavan kappaleen alun tarkoittavan edellisen loppua, mutta on suositeltavaa välttää sekaannuksia.

  § 4. Tekstin tasaus

  Tasaa teksti käyttämällä attribuuttia kohdistaa mahdollisilla arvoilla keskellä, vasen, oikea Ja perustella. Vastaavasti se kohdistaa tekstin keskelle, vasemmalle, oikealle ja samanaikaisesti kahteen reunaan kerralla. Esimerkiksi html-koodi:

  align="center">Teksti keskitetty

  Tasaa tekstin keskelle:

  Keskiteksti

  Ja tämä koodi:

  oikea>

  tasaa tekstin oikealle

  Tasaa teksti oikealle

  Jos attribuutti kohdistaa ei käytetä, teksti tasataan vasemmalle. Tämä tapahtuu oletuksena. Esimerkkikoodi:

  tasaa tekstin vasemmalle

  Oletuksena teksti tasataan vasemmalle

  § 5. Rivinvaihto ja vaakapalkki

  Jos sinun on varmistettava siirtyminen uudelle riville lisäämättä tyhjää riviä (tämä tapahtuu, kun painat Enter-näppäintä tekstieditorissa), käytä tunnistetta
  . Esimerkiksi html-koodi

  1. Ensimmäinen rivi.
  2. Toinen rivi.

  selaimessa se näyttää tältä:

  1. Ensimmäinen rivi.
  2. Toinen rivi.

  U
  ei sulkevaa tagia. Olet luultavasti jo arvannut, että jos haluat lisätä useita tyhjiä rivejä, sinun on kirjoitettava tunniste
  useita kertoja peräkkäin.

  Voit myös erottaa tekstin osia visuaalisesti tunnisteella. Tämä tunniste luo sivulle erotinpalkin (esimerkiksi kuten vihreä tämän artikkelin alussa). Tunnisteella on seuraavat attribuutit:

  • koko- nauhan paksuus;
  
  
  • leveys- Viivan leveys;
  
  
  • kohdistaa- kohdistus;
  
  
  • väri- raidan väri;
  
  
  • noshade- attribuutti, jolla ei ole arvoja. Jos määritetty, luodaan kiinteä musta palkki ilman varjoa.

  Esimerkiksi html-koodi:

  align="center" size="5" width="50%" color="#3399ff">

  selaimessa se näyttää tältä

  Leveys ja paksuus voidaan määrittää sekä pikseleinä (silloin arvo on vakio) että prosentteina (silloin arvo muuttuu näytön resoluution mukaan).

  § 6. Otsikot

  Jos haluat määrittää osien ja alaosien nimet HTML:ssä, käytä otsikkotunnisteet. Otsikoita on kuusi tasoa, ja ne on nimetty seuraavasti:

  • - ensimmäisen tason otsikko
  
  
  • - toisen tason otsikko
  
  
  • - kolmannen tason otsikko
  
  
  • - neljännen tason otsikko
  
  
  • - viidennen tason otsikko
  
  
  • - kuudennen tason otsikko
  
  

  Otsikot on lihavoitu ja erotettu muusta tekstistä tyhjällä rivillä. Suurin otsikko on (sillä korostetaan tämän oppitunnin otsikkoa) ja pienin on . Otsikkotunnisteilla on seuraavat attribuutit:

  • kohdistaa- otsikkotekstin tasaus sivulla (arvot ovat samat kuin tavallisen tekstin tasauksessa);
  
  
  • otsikko- työkaluvinkki, joka tulee näkyviin, kun viet hiiren osoittimen otsikon päälle.
  
  

  Esimerkiksi HTML-koodi:

  align="center" title="Työkaluvinkki. Näet sen viemällä hiiren otsikon päälle.">Заголовок 4 уровня !}

  selaimessa se näyttää tältä:

  Tason 4 otsikko

  § 7. Työskentely fonttien kanssa

  HTML:ssä on tunniste, jotta fontit muotoillaan suoraan. Tällä tunnisteella on seuraavat attribuutit:

  • väri- fontin tekstin väri;
  
  
  • kasvot- kirjasintyyppi;
  
  
  • koko- fontin tekstin koko. Voidaan määrittää absoluuttiseksi arvoksi (1 - 6) tai suhteelliseksi arvoksi (+1 - +6 ja -1 - -6). Oletusarvoisesti tekstin koko on 3. Jos määrität koko="+1"

  >, niin tunnisteiden ja väliin sijoitettu teksti näytetään 1:llä muuhun tekstiin verrattuna. Sama -1:n kanssa.

  § 8. Luetteloiden luominen HTML:ssä

  HTML:ssä luettelot luodaan käyttämällä ja -tageja. Ensimmäisessä tapauksessa luodaan järjestetyt (numeroidut) luettelot, toisessa tapauksessa järjestämättömät (luettelomerkityt) luettelot. Jokainen luettelon elementti on korostettu tunnisteella. Selain näyttää luettelokohteet uudella rivillä sisennettynä sarakkeena luettelomerkeillä. Merkin tyyppi määräytyy attribuutin mukaan tyyppi.

  Numeroidussa luettelossa merkit (tyyppiattribuuttien arvot) ovat seuraavat:

  • 1 - numerointi arabialaisin numeroin (oletus);
  
  
  • A- latinalaisin isoilla kirjaimilla aakkosjärjestyksessä;
  
  
  • a- pienet latinalaiset kirjaimet;
  
  
  • minä- suuret roomalaiset numerot;
  
  
  • i- pienet roomalaiset numerot.
  
  

  Esimerkiksi HTML-koodi

  
  Ensimmäinen elementti.
  Toinen elementti.
  Kolmas elementti.
  

  Selain näyttää sen näin.

  Hei rakkaat blogin lukijat! Tässä artikkelissa puhutaan tekstin muotoilutunnisteet. Esimerkkejä ovat tekstin lihavointi tai kursivoitu. Tarkastellaan myös joidenkin tunnisteiden vaikutusta verkkosivuston sisäiseen optimointiin ja niiden kirjoittamisen sääntöjä. Voit lukea siitä annetusta artikkelista. Muuten, voit löytää samanlaisia ​​​​tekstisuunnitteluelementtejä monista tekstieditoreista, esimerkiksi Wordista.

  Tunnisteet on jaettu kahteen tyyppiin: block ja inline. Kun käytät edellistä, voit muuttaa tekstin osan sisältöä (rivit, yksittäiset katkelmat tai sanat), ja jälkimmäiset ovat . Muotoilutunnisteet, joita tarkastelemme tässä artikkelissa, ovat pääasiassa pieniä kirjaimia.

  Tunnisteiden kirjoittamisen säännöt ja järjestys

  Tiedät jo, mitä avaus- ja sulkemistunnisteet ovat. Jos ei, lue artikkeli tämän materiaalin alussa. Lyhyesti sanottuna tunnisteita on kahdenlaisia: yksittäinen (esimerkiksi uusi rivi
  ) ja kontti (pareittain). Joten kaikki tekstin muotoilutunnisteet ovat pariksi. Tämä tarkoittaa, että kaikilla elementeillä on avaus- ja sulkemistunniste, ja korostus on sijoitettava niiden väliin. Esimerkiksi lauseen oikea valinta näyttäisi tältä: Valittu fragmentti

  Kun selain käsittelee tämän fragmentin, näet seuraavan tekstin: Valittu fragmentti. Muuten, kaikki tunnisteet eivät näy RSS-syötteessä ().

  Tunnisteita kirjoitettaessa tärkeintä on muistaa sulkea ne. Muussa tapauksessa kaikki sivulla oleva teksti korostetaan lihavoituna (esimerkissä, jossa on tunniste ). Mutta on tapauksia, joissa sinun on korostettava tietty fragmentti sekä lihavoidulla että kursivoitulla samanaikaisesti. Mutta ei ole tunnistetta, joka suorittaa tämän toiminnon. Tästä tilanteesta on vain yksi tapa: käytä kahta tunnistetta samanaikaisesti. Ei ole väliä missä järjestyksessä niitä käytät. Siksi tekstin kirjoittaminen tällaisilla tunnisteilla:

  Valittu fragmentti

  tai näin:

  Valittu fragmentti

  Saat silti Valittu fragmentti kursivoitu ja lihavoitu samaan aikaan. On kuitenkin parempi käyttää ensimmäistä vaihtoehtoa, koska se oli alun perin ainoa ja oikea. Älä myöskään unohda, että jokainen selain voi käsitellä tunnisteita eri tavalla () asetuksista riippuen. Siirrytään nyt itse muotoilutunnisteisiin.

  Lihavoitu ja kursivoitu teksti - tunnisteet , , Ja

  Suosituimmat tekstin muotoilutunnisteet - sen korostaminen lihavoitu Ja kursivoitu. Niitä käytetään yleensä antamaan fragmentille merkitystä. Ensimmäinen tapaus korostaa hyödyllistä tietoa tai avainsanoja sisältävän fragmentin. Kursivointi palvelee samaa tarkoitusta kuin lihavoitu teksti, mutta tiedot ovat vähemmän tärkeitä, koska kursivointi on vähemmän havaittavissa leipätekstin taustalla kuin lihavoitu teksti.

  Mietitään ensin tekstin lihavointi. Tähän toimintoon käytetään kahta tunnistetta − Ja . Ulkonäössä ei ole eroa. Vaikka jokainen selain voi tulkita jokaisen elementin eri tavalla, saatat nähdä eroja. Tunnisteiden teksti näyttää tältä Ja selaimen jo käsittelemässä muodossa:

  Teksti tageissa vahva

  Teksti b-tunnisteissa

  Ja tältä nämä kaksi riviä näyttävät sivun lähdekoodissa:

  Teksti tageissa vahva Teksti b-tunnisteissa

  Voimme havaita saman tilanteen tapauksessa kursiiviset tunnisteet Ja . Yritä löytää erot näiden kahden esimerkin välillä:

  Tekstiä em-tageissa

  Teksti tunnisteissa I

  Ja tässä lähdekoodi:

  Tekstiä em-tageissa Teksti tunnisteissa I

  Joten harkitut lihavoitu ja kursivoitu tagit eivät itse asiassa eroa toisistaan, mutta miksi sitten tarvitsemme esimerkiksi tunnistetta jos siellä ? Loppujen lopuksi jälkimmäinen sisältää vain yhden merkin (sulkeja laskematta), ja siksi se on helpompi kirjoittaa. Ja koko pointti on tageissa Ja vaikuttaa. Jos ympäröit avainsanoja näillä tunnisteilla, sillä on suotuisa vaikutus verkkosivuston mainostamiseen. Tärkeintä ei ole liioitella - tekstissä saa olla enintään 5 % lihavoitua tekstiä tagissa , ja sama määrä kursiivia tunnisteessa .

  Jos haluat vain korostaa jonkin kohdan tekstistä, käytä tunnistetta tai . Yleisesti ottaen olen sitä mieltä, että myös hakukoneet pitävät näiden tunnisteiden tekstiä tärkeämpänä, mutta sisäinen optimointi niillä on silti vähemmän vaikutusvaltaa kuin Ja .

  Tunnisteet tekstin korostamiseen rivillä - , Ja

  Katsotaanpa nyt muutamia tunnisteita, jotka käyttävät viivaa tekstin suunnittelussa. Tunnetuin tekstieditori on tag tai alaviiva. Tällä tunnisteella ei ole vaikutusta sijoitukseen (sikäli kuin tiedän), mutta tekstin korostaminen ja huomion kiinnittäminen siihen auttaa. Annoin esimerkin tämän tunnisteen käytöstä juuri edellä.

  Kaksi muuta samanlaista tunnistetta - Ja . Molemmat suorittavat tekstin yliviivaamisen. Voit käyttää tätä tunnistetta missä tahansa tilanteessa: jos olet päivittämässä dokumenttia (tai pikemminkin osaa siitä), voit yliviivata vanhan ja lisätä uuden; jos aiot kirjoittaa jotain, joka poikkeaa materiaalin aiheesta; jotain, joka ei vastaa moraalisia ja eettisiä normeja.

  Erot näiden kahden tunnisteen välillä ovat vain niissä kirjoittaminen, minkä seurauksena on parempi käyttää ensimmäistä, koska Ensinnäkin se on mukavampaa kirjoittaa, ja toiseksi sivusi sisältää vähemmän HTML-koodia, ja hakukoneet rakastavat tätä.

  Tag ja attribuutit - tekstin kirjasinparametrit

  Harkitse nyt tunnistetta, jota ei käytetä ilman attribuutteja. Sen avulla voit asettaa parametreja tietylle tekstille. Yleisesti ottaen on nyt parempi käyttää (porrastettuja tyylisivuja), koska... Niiden avulla voit pienentää sivun koko HTML-koodia huomattavasti. Katsotaanpa siis samaa merkkiä . Kaikki on olemassa häntä varten kolme attribuuttia:

  • kasvot- itse fontti. Esimerkiksi Arial, Courier tai Verdana. Voit luetella useita, koska kaikilla käyttäjillä ei ole laajaa fonttisarjaa, ja kirjoittamalla useita face-attribuutissa selain voi valita, kumpaa käyttää, tai pikemminkin, mikä on järjestelmässä;
  • koko— attribuutti, joka ilmaisee tekstin koon. Voidaan ilmaista sekä tavanomaisina yksiköinä että pikseleinä;
  • väri- tekstin väri. Tätä attribuuttia voidaan käyttää sekä HTML-värikoodeissa että Word-värikoodeissa. Ensimmäiset ovat muotoa #FFFFFF (jossa F on mikä tahansa numero tai kirjain A:sta F:hen), ja toiset kirjoitetaan yksinkertaisilla sanoilla (esimerkiksi punainen).

  Tunnisteen teksti näyttää tältä käyttämällä jokaista attribuuttia:

  Tämä teksti on 6px

  Tämä teksti on punainen

  Tämä teksti on Arial-fontilla

  Tämä teksti on punainen ja koko 5px

  Ja tämä on mitä näet kirjoitetun koodin käsittelyn jälkeen:
  

  Estä tekstin suunnitteluelementit - otsikot

  -

  , kappale

  Lopuksi tarkastellaan lohkoelementtejä, joita käytetään melkein jokaisessa asiakirjassa. Nämä ovat otsikko- ja kappaletunnisteita. Harkitsemme ensimmäistä. Otsikoita on 6 tyyppiä ja jokaisella on oma tunniste. Jokaisella tyypillä on vain oma sarjanumeronsa, ja se on tallennettu tunnisteiden avulla

  ,

  ,...,

  . Tältä kaikki otsikot näyttävät käsiteltynä:

  

  Sanan otsikon jälkeinen numero vastaa tunnisteen numeroa . Otsikoilla on valtava vaikutus sivun optimointiin, joten kääri ne tunnisteisiin avainsanoja. Tässä tapauksessa on useita ominaisuuksia, joista puhun seuraavissa artikkeleissa.

  Puhutaan nyt kappaleen korostustunnisteesta

  Tämän tunnisteen tehtävänä on erottaa teksti toisen samanlaisen tekstin ja tyhjän rivin välillä. Jos katsot asiakirjan lähdekoodia, näet seuraavat asiat:

  

  Vihreät suorakulmiot sisältävät yhden kappaleen, punaiset suorakulmiot toisen. Ja tältä tämä koodi näyttää selaimen käsittelyn jälkeen (nuoli osoittaa tyhjälle riville):

  

  Seurauksena on, että yksi kappale erottuu melko selvästi toisesta, mikä on hyödyllistä - lukemisesta tulee mukavampaa.

  Tämä on artikkelin loppu asiakirjan muotoilutunnisteet. Niitä on paljon enemmän kuin tässä materiaalissa kuvailin. Joistakin niistä on vain sanottava paljon, minkä seurauksena niille omistetaan erilliset artikkelit, joissa on täydellinen arvostelu!

  Aiheeseen liittyviä julkaisuja:

  • Haku" iOS:lle oppi hakemaan ilman Internetiä
  • ASUS Maximus VIII Impact -emolevyn katsaus: intensiivinen kehitys
  • Zalman Z9 Plus -kotelo: budjettivaihtoehto runsaalla tuulettimella
  • Ilmainen Kyivstar-verkkovierailu kaikkien saatavilla - ehdot ja hinnat Kuinka lähettää viesti Kyivstarille verkkovierailussa

  

  Luokat