Lehetőség a szöveges információk html-ben történő formázására. Html szöveg formázása. Idézetek és meghatározások

Tartalomjegyzék:

Sziasztok kedves blog olvasók. Az utolsó cikkben a szöveg strukturálására szolgáló blokkcímkéket néztem meg. Ma a tervezést nézzük meg html szöveg-oldalak, azaz Nézzük meg azokat a címkéket, amelyek segítenek kiemelni a fontos szövegrészleteket, hogy felhívják rájuk a látogatók figyelmét. Azt is megtanuljuk, hogyan lehet speciális karaktereket beszúrni az oldalba.

Szövegtöredékek kiválasztása. Címkék erős és em.

A legfontosabb szövegrészek kiemelésére használt HTML-eszköz a címke. Kiemeli a szöveget kiemelten. A címke félkövér betűtípussal is kiemelheti a szöveget. Bár a címkék hatásukat tekintve hasonlóak, nem egyenértékűek. A címke egy fizikai jelölőcímke, és egyszerűen félkövérré teszi a szöveget. Az A egy logikai jelölőcímke, és jelzi a kiválasztott szöveg fontosságát. A címkén több van fontos nál nél Keresőoptimalizáció az oldal és annak tartalma nagyobb súllyal bír a keresőmotorok számára.

A címkék a dőlt betűs szövegrészletek kiemelésére szolgálnak. És . Ezeknek a címkéknek a tartalma szögben jelenik meg, egy kézzel írt betűtípust szimulálva.
Weboldalak fejlesztése során a és címkéket gyakrabban használják szöveg kiemelésére, mint a címkéket és . Példa a , , és címkék használatára szöveg formázásához:

HTML (az angol HyperText Markup Language-ből - „hiperszöveg jelölőnyelv”; ejtsd: h-ti-em-el) - szabvány dokumentum jelölőnyelv a világhálón.

És így néz ki:

Alkalmazzuk oldalunkra a korábbi cikkekből származó címkéket:

Weboldal az autókról.

Üdvözöljük autóipari weboldalunkon. Itt sok érdekes és hasznos cikket talál az autókról, azok Műszaki adatokés jellemzői.

Tudományos nyelven az autó:

Mechanikus motoros lánctalpas közúti jármű, legalább 4 kerékkel.

Autó besorolás

Az autók a következő típusúak:

Utas kocsi;

Szállítmány;

SUV;

Bricska;

Felvenni;

Sport;

Verseny.

Eredmény:

Az elemeken kívül , , és A HTML számos címkét tartalmaz a szöveg formázásához. html dokumentum. hozok rövid lista ilyen címkék:

— Rövidítés. alapértelmezés szerint aláhúzva jelenik meg a böngészőben;

— Betűszó. Ezzel szemben a rövidítés egy bevált rövidítést jelöl. Aláhúzva jelenik meg;

— egy kis idézet, dőlt betűvel;

— a program forráskódjának töredéke, monospace betűtípussal megjelenítve;

— megjelöli a weboldalról eltávolított és áthúzott szöveget;

— egy új kifejezést jelöl a dokumentumban, dőlt betűvel;

- a hozzáadott szöveg kiemelésére szolgál új verzió a dokumentum aláhúzva jelenik meg;

— a billentyűzetről bevitt adatok kiemelésére vagy a billentyűk nevére, egyszóköz betűkkel megjelenítve;

— idézetek kiemelésére szolgál, a tartalom automatikusan idézőjelek közé kerül;

— egy program által kiadott adatot jelöli, monospace betűtípussal megjelenítve;

- valójában ugyanaz, mint a , csak ez egy fizikai jelölőcímke, és egy logikai címke. monospace betűtípussal jelenik meg;

- a változó nevének kiemelése forráskód a programok dőlt betűvel jelennek meg.

És így jelennek meg a böngészőben:

Sortörések
Amint azt a korábbi cikkekből megtudtuk, blokkelemeket használnak a karakterláncok, különösen a címkék fordítására
Egy kiemelt bekezdés.

Tegyük fel a szerzői jogi információkat weboldalunkra:

Minden jog fenntartva. 2013-as év.

Weboldal az autókról.

Eredmény:

És ahogy látjuk, a sorok is elváltak távolsági mintha semmi közük nem lenne egymáshoz. Ebben az esetben jobb, ha a címkét használja a sorok törésére
. Ez a címke sortörést állít be, de ellentétben a
Nem állítja be a sor behúzását. Alkalmazzuk a címkét
oldalunkon:

Minden jog fenntartva. 2013-as év.
Weboldal az autókról.

Ez sokkal jobb:

Ezért bizonyos esetekben a szöveg formázásakor html oldalak ne felejtsd el a címkét
.
Beszúrás speciális karakterek. Szó szerint.
Néha speciális karaktert kell beszúrnia egy weboldalba, például a következő karaktereket: , ©. A literálokat speciális karakterek beszúrására használják a HTML-be. egy karaktersorozat, amely &-vel kezdődik és -re végződik; , és közéjük van elhelyezve egy betűsorozat - a szimbólumkód. Tehát a , © szimbólumok beillesztéséhez a következő literálokat használjuk: Minden program->Kellékek->Segédprogramok->Szimbólumtábla”, vagy nyomja meg a WIN+R billentyűt, és írja be az ablakba az „execute charmap” parancsot. Megjelenik a Szimbólumtábla ablak.

Ha olyan karaktert választ ki a szimbólumok listájából, amelyet nem lehet bevinni a billentyűzetről, akkor a bal oldali állapotsorban egy „Key: Alt+” felirat jelenik meg. Vegye ezt a karakterkódot, és illessze be egy literálba. Például illesszük be oldalunkba a © szimbólumot a szimbólumkód segítségével. Ezt a szimbólumot kiválasztjuk a „Szimbólumtáblázatban”, és a bal oldali állapotsorban a „Kulcs: Alt+0169” feliratot látjuk. A „0169” kódot használjuk, és a literál helyett © szúrjuk be weboldalunkra:

Minden jog fenntartva. © 2013.
Weboldal az autókról.

És gondoskodunk arról, hogy minden helyesen jelenjen meg az oldalon.

Ennyi van mára. Mint mindig, most is összefoglalom:

A behúzás nélküli sorok töréséhez használja a címkét
;

és speciális karakterek beszúrásához literálokat használunk, például: &; vagy & .

A következő cikkben elmondom, hogyan lehet képeket beilleszteni egy oldalra, ezért ajánlom
Ha lehetséges, magyarázza el a kódot, ahol szükséges.
Megjegyzésekkel magyarázza el kódját: mit csinál, mit csinál, és miért használják a választott megoldást.
(Ez a pont nem kötelező, mert nincs értelme elvárni, hogy a kód mindig jól dokumentált legyen. A megjegyzések hasznossága a projekt összetettségétől függ, és eltérhet a HTML- és CSS-kódok esetében.)
Feladatok Jelölje ki a feladatokat a teendők listájában a TODO segítségével.
Jelölje meg a feladatokat a TODO kulcsszó használatával. Ne használjon más gyakran használt formátumot, például @@ .
A névjegyeket (felhasználónév vagy levelezési lista) tegye zárójelbe: TODO(contact) .
A kettőspont után írja le a feladatot, például: TODO: Feladat.
Ajánlott: (# TODO(Ivan Ivanov): Foglalkozz az igazítással #) Teszt
Ajánlott:

uborka

Paradicsom

HTML formázási szabályok Dokumentumtípus Használjon HTML5-öt.
(Javasolt a HTML használata a text/html tartalomtípussal. Ne használjon XHTML-t, mivel az application/xhtml+xml böngészőt nem támogatja, és ez korlátozza az optimalizálási lehetőségeket.)
HTML érvényesség Használjon érvényes HTML-t, amikor csak lehetséges.
Használjon érvényes HTML kódot, kivéve, ha a használat nem teszi lehetővé a kívánt teljesítményszint eléréséhez szükséges fájlméret elérését.
W3C HTML validátor (angol) a kód érvényességének ellenőrzéséhez.
Az érvényesség a kód fontos és mérhető minősége. Az érvényes HTML írása elősegíti a technikai követelmények és korlátok megismerését, és biztosítja a HTML megfelelő használatát.
Nem ajánlott: Check Csak ellenőrizze
Ajánlott: Check Csak egy csekk.
Szemantika Használja a HTML-t rendeltetésszerűen.
Használja az elemeket (néha helytelenül „címkéknek” nevezik) a rendeltetésüknek megfelelően: fejléceket a címsorokhoz, p-t a bekezdésekhez, a-t a hivatkozásokhoz stb.
Ez megkönnyíti a kód olvasását, szerkesztését és karbantartását.
Alternatív média Mindig tartalmazzon alternatív médiatartalmat.
Próbáljon alternatív tartalmat biztosítani a médiához: például képekhez, videókhoz vagy animációkhoz vászon segítségével. Képeknél ez egy értelmes alternatív szöveg (alt), videó és hang esetében pedig lehetőség szerint a szöveg és a felirat átirata.
Az alternatív tartalmak segíthetnek a fogyatékkal élőknek. Például egy gyengénlátó ember nehezen tudja megérteni, hogy mi van a képen, ha nincs beállítva az @alt. Előfordulhat, hogy mások nehezen értik meg a videó- vagy hangfelvételen elhangzottakat.
(Ha a kép alt értéke redundáns, vagy csak dekorációs célokra használják olyan helyeken, ahol a CSS nem használható, használjon üres alt szöveget alt="" )
Felelősségek szétválasztása Külön struktúra, kialakítás és viselkedés.
Tartsa külön a szerkezetet (jelölés), a megjelenést (stílusokat) és a viselkedést (szkriptek), és próbálja meg a minimálisra csökkenteni a köztük lévő interakciókat.
Győződjön meg arról, hogy a dokumentumok és sablonok csak HTML-t tartalmaznak, és a HTML csak a dokumentum szerkezetének meghatározására szolgál. Helyezze át a tervezésért felelős összes kódot stílusfájlokba, a viselkedésért felelős kódot pedig szkriptekbe.
Próbálja meg minimálisra csökkenteni a kereszteződéseiket úgy, hogy sablonokba helyezi őket minimális mennyiség stílusfájlok és szkriptek.
A struktúra elválasztása a megjelenítéstől és a viselkedéstől megkönnyíti a kód karbantartását. A sablonok és HTML-dokumentumok módosítása mindig tovább tart, mint a stílusfájlok vagy szkriptek megváltoztatása.
Nem ajánlott: A HTML szívás A HTML szívás
Valahol már olvastam erről, de most már minden világos: A HTML teljes szemétség!!1 Nem hiszem el, hogy a dizájn megváltoztatásához minden alkalommal újra kell csinálni mindent.
Ajánlott: Az első, csak CSS-t használó újratervezésem Az új CSS-tervem
Korábban olvastam erről, de végül magam is megcsináltam: az aggodalmak szétválasztásának elvét használom, és nem tolom bele a tervezést a HTML-be.
Milyen klassz!
Mnemonikus hivatkozások Ne használjon mnemonikus hivatkozásokat.
Az egyetlen kivétel ez alól a szabály alól a HTML-szolgáltatás karakterei (például< и & ) а так же вспомогательные и “невидимые” символы (например nem törő tér).
Opcionális címkék Ne használjon opcionális címkéket. (nem szükséges)
A fájlméret csökkentése és a kód olvashatóságának javítása érdekében elhagyhatja az opcionális címkéket. A HTML5-specifikáció tartalmazza az opcionális címkék listáját.
(Eltarthat egy ideig, amíg ez a megközelítés széles körben elterjed, mert nagyon eltér attól, amit a webfejlesztőknek általában tanítanak. A következetesség, a kódolás és az egyszerűség szempontjából a legjobb, ha elhagyja az összes opcionális címkét, nem pedig néhányat).
Nem ajánlott: Bájtokat pazarolunk – pénzt pazarolunk.
Ajánlott: A bájtok pénz!
Szóval azt
"type" attribútum Ne adja meg a type attribútumot, amikor stílusokat és szkripteket ad hozzá egy dokumentumhoz.
Ne használja a type attribútumot stílusok (kivéve, ha nem CSS-t használ) és szkriptek (kivéve, ha nem JavaScriptet használ) összekapcsolásakor.
A type attribútum megadása ebben az esetben nem szükséges, mert a HTML5 alapértelmezés szerint text/css-t (angol) és text/javascriptet (angol) használ. Ez még régebbi böngészőkben is működik.
Nem ajánlott:
Ajánlott:
Nem ajánlott:
Ajánlott:
HTML formázási szabályok Format kiemelés új sor minden blokkhoz, táblázathoz vagy listaelemhez, és behúzás minden gyermekelemhez.
Az elemhez megadott stílusoktól függetlenül (a CSS lehetővé teszi az elem viselkedésének megváltoztatását a display tulajdonság segítségével), minden blokkot vagy táblázatelemet egy új sorba csomagoljon.
Ezenkívül behúzza az összes blokk- vagy táblázatelemen belüli elemet.
(Ha problémái vannak a szóközökkel listaelemek, megengedett az összes li elem egy sorba helyezése. Lintu [segédprogram a kód minőségének ellenőrzéséhez kb. ford.] ebben az esetben hiba helyett figyelmeztetést javasolunk.

Ajánlott:

Masha
Glasha
Cseburas

Ajánlott: Nyereségadók

$ 5.00 $ 4.50

CSS stílusszabályok CSS érvényessége Használjon érvényes CSS kódot, amikor csak lehetséges.
Kivéve azokat az eseteket, amikor böngészőfüggő kódra van szükség, vagy ha érvényesítő hiba lép fel, használjon érvényes CSS-kódot.
Használjon olyan eszközöket, mint a W3C CSS Validator a kód érvényesítéséhez.
Az érvényesség a kód fontos és mérhető minősége. Az érvényes CSS írása segít kiküszöbölni a redundáns kódot és biztosítja a stíluslapok megfelelő használatát...
Osztályazonosítók és -nevek Használjon helyettesítő karaktereket vagy értelmes osztályneveket és azonosítókat.
Ahelyett, hogy kódokat használna vagy egy elem megjelenését írná le, próbálja meg egy osztály vagy azonosító nevében kifejezni létrehozásának jelentését, vagy adjon sablonnevet...
A helyettesítő karakternevek egyszerűen olyan elemek nevei, amelyeknek nincs különleges célja, vagy nem különböztethetők meg testvéreiktől. Általában „segítőként” van rájuk szükség.
A funkcionális vagy sablonnevek használata csökkenti a dokumentum vagy a sablonok szükségtelen módosításának szükségességét.
Elavult: /* Elavult: értelmetlen */ #yee-1901 () /* Elavult: megjelenés leírása */ .button-green() .clear()
Ajánlott: /* Ajánlott: pontos és lényegre törő */ #galéria () #bejelentkezés () .video () /* Javasolt: sablonnév */ .aux () .alt ()
Azonosítók és osztályok nevei Az azonosítókhoz és osztályokhoz használja a következőt hosszú nevek szükség szerint, de a lehető legrövidebbre.
Próbáld meg megfogalmazni, hogy pontosan mit kell tenned ezt az elemet, de legyen a lehető legrövidebb.
Az osztályok és azonosítók ilyen használata hozzájárul a kód könnyebb megértéséhez és hatékonyabbá tételéhez.
Típusválasztók Kerülje az osztálynevek vagy azonosítók használatát elemtípus- (címke) választókkal.
Hacsak nem feltétlenül szükséges (például segítő osztályok esetén), ne használjon elemneveket osztálynevekkel vagy azonosítókkal.
Parancsikonok a tulajdonságokhoz Amikor csak lehetséges, használjon parancsikonokat a tulajdonságokhoz.
A CSS számos különféle gyorsírási formát kínál (például font ), amelyeket minden esetben javasolt használni, még akkor is, ha csak az egyik érték van megadva.
A tulajdonságok rövidített jelölése hasznos a nagyobb hatékonyság és a kód jobb megértése érdekében.
Nem ajánlott: /* Nem ajánlott */ border-top-style: nincs; betűcsalád: palatino, grúzia, serif; betűméret: 100%; vonalmagasság: 1,6; párnázás-alsó: 2em; padding-bal: 1em; padding-right: 1em; padding-top: 0;
Ajánlott: /* Ajánlott */ border-top: 0; betűtípus: 100%/1,6 palatino, georgia, serif; párnázás: 0 1em 2em;
0 és mértékegységek Ne adjon meg egységet a nulla értékekhez
Ne adjon meg egységet nulla értékhez, hacsak nincs rá ok.
0 a tört teljes részében Ne tegyen „0”-t a törtek teljes részébe.
-1 és 1 közötti értékekben ne írjon 0-t az egész részbe.
Idézetek a hivatkozásokban Ne használjon idézőjeleket a hivatkozásokban
Ne használjon idézőjeleket ("" , "") az url() -vel.
Hexadecimális színnevek Használjon három karakterből álló hexadecimális jelölést, amikor csak lehetséges.
A színek háromkarakteres hexadecimális jelölése rövidebb és kevesebb helyet foglal.
Előtagok Előtagválasztók az aktuális alkalmazás egyedi előtagjaival. (nem szükséges)
Nagy projektekben, valamint a más projektekhez vagy más webhelyeken használt kódokban használjon előtagokat (névterekként) az azonosítókhoz és az osztálynevekhez. Használjon rövid, egyedi címeket, amelyeket kötőjel követ.
A névterek használata segít megelőzni a névütközéseket, és megkönnyíti a webhely karbantartását. Például a keresés és a csere során.
Elválasztók az osztályokban és azonosítókban A szavak elválasztása az azonosítókban és az osztálynevekben kötőjellel.
Kerülje a kötőjelen kívül a szavak és a rövidítések összekapcsolását a választókban, hogy javítsa a kód olvashatóságát és könnyebb megértését.
Nem ajánlott: /* Nem ajánlott: a „demo” és az „image” szavak nincsenek elválasztva */ .demoimage () /* Nem ajánlott: kötőjel helyett aláhúzást használunk */ .error_status ()
Ajánlott: /* Ajánlott */ #video-id().ads-sample()
Feltörések Kerülje a böngészőverzióra vonatkozó információk vagy a CSS-feltörések használatát – először próbáljon ki más módszereket.
Csábítónak tűnik a munkahelyi különbségek leküzdése. különböző böngészők CSS-szűrők, feltörések vagy egyéb megoldások használatával. Mindezeket a megközelítéseket csak végső megoldásként szabad figyelembe venni, ha hatékony és könnyen karbantartható kódbázist szeretne. Egyszerűen fogalmazva, a feltörések és a böngésző észlelésének engedélyezése hosszú távon árt a projektnek, mivel ez azt jelenti, hogy a projekt a legkisebb ellenállás útját választja. Ez megkönnyíti a hackek használatát, és lehetővé teszi, hogy egyre gyakrabban használják őket, ami azt eredményezi, hogy túl gyakran használják őket.
CSS formázási szabályok Hirdetések rendezése A hirdetések ábécé szerinti rendezése.
Határozza meg a deklarációkat ábécé sorrendben, hogy konzisztens kódot biztosítson, amellyel könnyen dolgozhat.
Rendezéskor hagyja figyelmen kívül a böngésző előtagjait. Sőt, ha egy tulajdonsághoz több böngésző előtagot használnak, akkor azokat is rendezni kell (például a -moz a --webkit előtt legyen)
Behúzások blokkokban. Mindig behúzza a blokk tartalmat.
Mindig húzza be a blokk tartalmát, például a szabályokon belüli szabályokat vagy a deklarációkat, hogy megmutassa a hierarchiát, és könnyebben érthető legyen a kód.
Deklarációk után Tegyünk pontosvesszőt minden deklaráció után.
Használjon pontosvesszőt minden deklaráció után a kód konzisztenciája és az új tulajdonságok hozzáadásának megkönnyítése érdekében.
Tulajdonságnevek után Használjon szóközt a kettőspontok után a deklarációkban.
A deklarációkban mindig használjon egy szóközt a kettőspont után (de ne előtte), a kódban a sorrend érdekében.
Kijelölők és deklarációk szétválasztása Sortöréssel válassza el a kijelölőket és deklarációkat.
Minden választót vagy deklarációt egy új sorban indítson.
Elválasztó szabályok Külön szabályok sortöréssel.
Mindig tegyen sortörést a szabályok közé.
Meta szabályok CSSGrouping szabályok Csoportosítási szabályok, és megjegyzéssel jelzik a csoportokat. (nem szükséges)
Amikor csak lehetséges, csoportosítsa a szabályokat együtt. Jelölje meg a csoportokat megjegyzésekkel, és válassza el sortöréssel.
Következtetés Légy következetes
Ha kódot szerkeszt, szánjon néhány percet, hogy megértse, hogyan van megírva. Ha a matematikai operátorokat szóközzel választja el, tegye ugyanezt. Ha a megjegyzéseket zárójelek vagy kötőjelek veszik körül, tegye ugyanezt a megjegyzéseivel.
Ennek az útmutatónak az az ötlete, hogy létrehozzunk általános szótár, amely lehetővé tenné a fejlesztők számára, hogy arra összpontosítsanak, amit kifejezni szeretnének, nem pedig a hogyanra.
Ajánlunk egységes szabályokat olyan terveket, amelyek lehetővé teszik, hogy egy stílusban írjunk kódot, de fontos a projektben már használt kódstílus is.
Ha a kód nagyon eltér a meglévő kódtól, felboríthatja az olvasó ritmusát, és megnehezítheti az olvasást. Próbálja ezt elkerülni.
A fordító megjegyzése Azt is szeretném megjegyezni, hogy a Google elsősorban a nagy, nagy terhelésű projektekre koncentrál, ahol minden bájt drága, ezért érdemes megfontolni, hogy ha minden szelektort új sorban javasolnak indítani, vagy szóköz használatát javasolják lapokat, akkor ez elsősorban azt jelenti, hogy a kódot szükségszerűen kicsinyítik és tömörítik, mielőtt a webhelyen használnák.
Köszönöm mindenkinek, aki idáig elolvasta.
Címkék:
css

html

stílusvezetők

Címkék hozzáadása
A HTML-ben a szöveg vizuális megtervezéséhez és kiemeléséhez a következő elemeket kell használni:
ERŐS
Félkövérré teszi a szöveget:
A címkék között a szöveg félkövér EM (kiemelés) lesz.
A nyitó és záró címke közötti szöveget dőlt betűsre állítja:
Ez a szöveg dőlt betűs lesz U (aláhúzás)
A nyitó és záró címke közé helyezett szöveget aláhúzva jeleníti meg:
Ez a szöveg alá van húzva ALATTI
A nyitó és záró címkék közé zárt szöveget a főszöveg alsó indexeként jeleníti meg.
Propán képlet C 3 H 8
Eredmény: C 3 H 8
SUP
Felsõ index létrehozására szolgál. Például:

Így fog kinézni: 2 5 = 32.
BETŰTÍPUS
Szín, betűtípus, méret és szöveg módosítására szolgál.
Tulajdonságok:
MÉRET – a betűméret módosítására használható. A lehetséges értékek: 1, 2, 3, 4, 5, 6, 7.
SZÍN – beállítja a szöveg színét.
FACE – a betűtípus meghatározásához (Times New Roman, Arial, Tahoma)

Például:
Ez a szöveg nincs formázva

Nagyított sárga betűtípus

Piros szöveg 3 méretben
Ha böngészőben nézzük, a következőket látjuk:

SIZE="+2" ez azt jelenti, hogy a betűtípus 2 egységgel megnagyobbodik a szabványoshoz képest. A szabványos betűméret 3.
HR
Szövegbe való beszúrásra szolgál vízszintes vonal. Különlegessége, hogy nincs zárócímke.
Tulajdonságok:
ALIGN – meghatározza a vízszintes vonal igazítását. Az attribútum elfogadhatja következő értékeket:
balra – a dokumentum bal széléhez igazodik.
jobbra – jobbra igazodik.
center – igazítás a dokumentum közepéhez (alapértelmezett).
SZÉLESSÉG – a vonal hosszának meghatározására szolgál képpontokban vagy az oldalszélesség százalékában.
MÉRET – vonalvastagság pixelben.
NOSHADE – ezzel az attribútummal a vonal tömörre van festve. Enélkül a vonal terjedelmesnek tűnik.
SZÍN – állítsa be a vonal színét.

Például:
Szöveg sor előtt Szöveg sor után
És ez egy 3 képpont vastag vonal árnyékoló nélkül
És itt van egy sor piros színű ernyővel
Eredmény:

Következő oldal -
Szöveg kiemelése html címkékkel
Ez a cikk nem állítja be, hogy egy teljes értékű kézikönyv a html címkékről, de ha érdekli a téma, akkor azt javaslom, hogy értse meg a legtöbb olyan címkét, amelyre szükségünk van a szöveg kiemeléséhez.

Leggyakrabban az oldalon lévő szöveg félkövér vagy dőlt betűvel van kiemelve. Ehhez vannak speciális címkék és (félkövérrel kiemelve), valamint (dőlt betűvel). Mindegyik páros, vagyis a nyitó és záró tag közé kell tenni a szükséges szavakat. Úgy tűnik, miért találtak ki két címkét ugyanarra a műveletre?

Valójában a html-ben nem csak tervezői szerepet töltenek be, hanem szemantikai szerepet is. Tehát a b címke egyszerűen félkövérré teszi a címkét anélkül, hogy több jelentést adna neki, de az erős, az egyszerű kiemelés mellett különleges jelentőséget is ad a szavaknak. Ezért ennek a címkének nem szabad a szöveg felét kiemelnie, hanem okosan kell használni.

A CSS-nek olyan tulajdonságai is vannak, amelyek hatása megegyezik a felsorolt címkékkel. Például a font-weight: bold tulajdonság félkövérré teszi a szöveget, a font-style: italic tulajdonság pedig dőltté teszi.
A szöveg aláhúzása és áthúzása
Vannak címkék is az aláhúzáshoz és az áthúzáshoz. aláhúzza és áthúzza a szavakat. Ugyanezen hatás eléréséhez css-n keresztül használja a text-decoration tulajdonságot. Több jelentése van:

Aláhúzás – aláhúzás alulról;

Overline – aláhúzás felül;

Line-through – áthúzás;

És mégis, ehhez a tulajdonsághoz több értéket is megadhat szóközzel elválasztva. Sőt, akár mindhárom típusú aláhúzást is megadhatna neki, de ennek nem látom értelmét.

A HTML 5 bevezetett egy másik címkét - mark, amely lehetővé teszi a szöveg egyszerű kiemelését. Alapértelmezés szerint sárgával van kiemelve, bár a css segítségével ezt könnyen felülbírálhatja, és létrehozhat egy egyedi kiemelést, amely illeszkedik webhelye kialakításához.
Szöveg megjelenítése felső és alsó indexben
Kicsit kitaláltuk, de mi van, ha egy képletet vagy valami mást kell írni, ahol néhány számot vagy betűt kell megjeleníteni a felső vagy az alsó indexben. Természetesen ehhez a html biztosítja számunkra a szükséges eszközöket. Az alcímke a betűtípust alsó indexként, a sup címkét pedig felső indexként jeleníti meg. Ez css-n keresztül is megtehető. Ehhez meg kell írnia a szükséges szöveget:

függőleges igazítás: al | szuper

függőleges - igazítás : sub | szuper

Betűméret: a normál szövegnél valamivel kisebb betűméret
Hogyan lehet szöveget stílusozni CSS használatával?
Ha fontot kell terveznie css használatával, akkor valahogy el kell érnie egy választó segítségével. Az egy dolog, ha egy teljes bekezdést vagy linket kell kiemelni, akkor van egy választó, de mi van, ha valahol a cikk közepén kell kiemelni egy szót? Van erre egy csodálatos párosított címke span, aminek nincs hatása a kinézet tartalmát, és nem tulajdonít neki semmilyen jelentést.

Ennek megfelelően a tervezéshez szükséges töredéket spanba foglaljuk, tetszőleges stílusosztályt kötünk hozzá, és gond nélkül stílusokat írunk!
A szóközök megőrzésével kiírt szöveg.
A html-ben van egy előtag, amely lehetővé teszi az információk szövegszerkesztőben írt formában történő megjelenítését. Ez hasznos lehet, ha verset ír, vagy néhány szóközt kell hozzáadnia. A szöveg formázását CSS-en keresztül is szabályozhatja. Erre van egy üres terület. Jelentései:

Nowrap – a szavak egy sorban jelennek meg kötőjelek nélkül. Ha nem férnek bele a sorba, vízszintes görgetés jelenik meg.

Pre – az előtaghoz hasonlóan működik

Előtördelése – hasonló az előző értékhez, de automatikusan új sorba tördeli a szöveget, ha már nem fér el (talán a legjobb érték)
Szöveg igazítás
Már foglalkoztunk néhány HTML címkével a szöveghez, de érdemes megemlíteni az igazítást is. Ezt nem címkék állítják be, hanem a text-align CSS tulajdonság:

Jobb – a jobb szélen.

Balra - balra.

Középen – középen (például címsorokhoz)

Indoklás – szélességben. Ez az érték azt jelenti, hogy a sorban lévő szavak a sor teljes szélességét elfoglalják.
Szöveg színe és háttere
Ez megint nem állítható be html tagekkel, de css-en keresztül igen. Ismét arra a következtetésre jutottunk, hogy a címkék használata a html szöveg szerkesztéséhez nem túl kényelmes. Magának a szövegnek a színéhez létezik egy színtulajdonság, amelynek sok jelentése van. A szín a segítségével állítható be kulcsszavakat(narancs, fekete, piros), és a színmód egyértelmű jelzésével: szín: rgb(130, 100, 12). A háttér pontosan ugyanígy van beállítva, de csak a háttér tulajdonság használatával.
Szöveg mérete és betűtípusa
A Font-size tulajdonság megadja a betűméretet, a font-family tulajdonság pedig lehetővé teszi magának a betűtípusnak vagy annak családjának kiválasztását. Például.

Mint tudják, a weboldalak fő tartalma a szöveg. Ritka kivételt képeznek a speciális galériák. Ezért nem meglepő, hogy a HTML-ben olyan sokféle szövegmegjelenítési vezérlő van.
Valójában ahhoz, hogy szöveges karakterláncot jelenítsen meg a böngésző ablakában, nem kell semmilyen címkét használnia: csak magát a szöveget kell megírnia. De ha legalább bekezdésekre kell felosztania, akkor itt kell címkéket használnia. A tény az, hogy különféle számítógépes rendszerek Különféle karaktereket használnak a szöveg bekezdésekre bontására, és a HTML-dokumentumoknak mindig a lehető legkövetkezetesebben kell megjelenniük a számítógépes platformok széles skáláján. Ezért kellett bevezetnünk címkéket a bekezdések kijelölésére.

Minden bekezdés elején található egy címke , a végén pedig a zárócímke . Ugyanakkor a címkének természetesen van néhány paramétere. Ide tartoznak az általunk már ismert általános azonosítási paraméterek osztályÉs id, stílus paraméter stílus, amelyet a második fejezetben nézünk meg, és az igazítási paramétert igazítsa. Az utolsó paraméterről kicsit részletesebben kellene beszélnünk.
A HTML-ben az "igazítás" kifejezés egy elem vízszintes és függőleges elhelyezésére egyaránt vonatkozik. A szövegbekezdések esetében azonban csak vízszintes igazításról vagy – ahogyan azt is nevezik – „indoklásról” van értelme beszélni.
Az igazítás lehetővé teszi, hogy egy bekezdést a böngésző nézetablakának bal vagy jobb széléhez nyomjon, középre helyezze, vagy kinyújtson szavakat úgy, hogy a szöveg egyenletesen kitöltse a számára kijelölt terület teljes szélességét. Erre a célra az értékeket használják balra, jobbra, középreÉs igazolni, ill. Nézzük meg ezek használatát egy másik HTML dokumentum példáján.

Felsorolás 1.4

Vízszintes igazítás a63acev

Bekezdés a bal szélre nyomva
Bekezdés a bal szélre nyomva
Középre helyezett bekezdés

Bekezdés szélességben kifeszítve

Az ilyen kóddal rendelkező fájl Internet Explorer böngészővel történő megtekintésének eredményét az ábra mutatja. 1.4. Mint látható, az utolsó bekezdést, amelyet kódunk szerint szélességben kellett volna nyújtani, a böngésző megjeleníti internet böngésző akárcsak az első. Ez az eset egyértelmű példaként szolgálhat arra, hogy a böngészők eltérően érzékelik a HTML-kódot. Esetünkben az Internet Explorer egyszerűen figyelmen kívül hagyta az ismeretlen paramétert, a szabványos megjelenítési opciót használva.

Rizs. 1.4. Böngésző ablak, amely az 1.4-es listában látható fájl eredményét mutatja

Néha az egyik bekezdés további elválasztása érdekében a weboldal készítői megpróbálnak üres bekezdéseket használni, vagyis nincs semmi a bekezdés kezdő és záró címkéje között. A specifikációk szerint a böngészőknek egyszerűen figyelmen kívül kell hagyniuk az ilyen konstrukciókat. Ezért a bekezdések elválasztásához vagy egy bekezdésen belüli sortörés kikényszerítéséhez használja a címkét
. Ez egy direktíva címke. Egyszerűen kijelöli azt a helyet, ahol a kijelzőt át kell helyezni egy másik sorba. Egy példa arra, hogy ez a címke hogyan használható mindkét cél eléréséhez, a HTML-dokumentumban látható, amelynek kódja az 1.5-ös listában látható.

Felsorolás 1.5

"http://www.w3.org/TR/html4/strict.dtd">
.

Kényszer sortörés

A bekezdés, amit mi
Kényszeresen széttépték
Következő bekezdés

Bekezdés kényszerszünet után

Hogyan néz ki ez a fájl innen nézve? böngésző használatávalábrán látható. 1.5.

Rizs. 1.5. Böngésző ablak, amely az 1.5-ös listában látható fájl eredményét mutatja

Címke
az általános azonosítási paramétereken kívül rendelkezik a paraméterrel is egyértelmű, amelyet a szöveg pontosabb igazítására használnak, amikor például egy objektum köré tekered, grafikus kép, egy weboldal részeként beágyazva. Ennek a paraméternek az értéke a négy előre meghatározott kulcsszó egyike lehet: egyik sem, bal, jobb, minden.
A none érték az alapértelmezett, és azt jelzi, hogy a következő sor ott kezdődik, ahol általában e paraméter nélkül kezdődne. Jelentése bal azt jelzi, hogy a következő sor a szöveggel burkolt objektum bal margóján kezdődik. Ha ehhez a megfelelő margót kell használnia, akkor használja az értéket jobb. És a jelentése minden közli a böngészővel, hogy használhatja az objektum bal és jobb margóját is, mindaddig, amíg a szöveg a lehető legkompaktabban jelenik meg.
Most térjünk át a szöveg betűtípusának megfontolására. A bekezdés bármely pontján használhatunk egy adott paraméterkészlettel rendelkező címkét, amely meghatározza a betűtípus megjelenését, amelyet a címke utáni szöveg megjelenítésére használunk. Ennek a címkének a megszüntetése a záró párjával történik .
Címke a következő paraméterekkel rendelkezik: méret, a használandó betűméret jelzésére szolgál, szín- a betűtípus karakterek színének beállítása, és arc, jelezve, hogy melyik betűtípust fogják használni a szöveg megjelenítéséhez. Nézzük ezeket a paramétereket.
Ahogy az imént mondtuk, a size paraméter a használt betűtípus karaktereinek méretének meghatározására szolgál. Ennek a paraméternek az értékei egytől hétig terjedő számok. A karakterek bizonyos relatív méretét jelzik. A helyzet az, hogy a HTML-ben nem lehet pontokban beállítani a karakterek abszolút méretét, ahogy azt a normál irodai alkalmazásokban megszoktuk. A felhasználó egy weboldalt fog nézni a számítógépén, és nem tudjuk előre, hogy milyen betűtípusokat telepíthetett, és milyen méretek állnak rendelkezésre. Ezért csak a relatív betűméretet tudjuk megadni, és a felhasználó böngészője maga választja ki a legmegfelelőbb méretet.
A méret paraméter értékeként megadhatjuk a betűméret változását is. Például a betűméret egy szinttel történő növeléséhez használja a következő konstrukciót:

A karakterek méretének két szinttel történő csökkentéséhez használja a következő kódot:

Az ilyen szerkezetek használatához azonban egy bizonyos alapméretből kell kiindulni. A méret beállításához használja a címkét ugyanazzal a paraméterrel méret. Ha ezt a címkét nem használja, akkor a harmadik szint lesz az alap karakterméret. Nézzünk egy példát ezeknek a címkéknek a használatára.

Felsorolás 1.6.

Szimbólum mérete

Karakterstílusok

A szöveg félkövér, ill dőlt

És talán ugyanakkor félkövér és dőlt
Megtörténik hangsúlyoztaés áthúzatlan.
vagy monospace.
A karakterek méretét növelhetjük és csökkenthetjük.

Ahogy a példából is látszik, különböző stílusokat kombinálhatunk egymással. De ügyeljen a címkék elhelyezésének sorrendjére. Mind a nyitó, mind a záró címkéknek más, korábban alkalmazott címkékbe kell illeszkedniük. Erre látható példa a lista tizedik sorában. És hogy hogyan néz ki ez a HTML-dokumentum, ha böngészővel nézzük, az az ábrán látható. 1.7.
Megvizsgáltuk a különféle szöveges megjelenítési paraméterek beállításának módjait. A HTML azonban néhány alapvető módot kínál a szöveg megjelenítésére, amelyeket nem kell egy csomó címkével megadni. Saját címkékkel rendelkeznek, azaz meghatározott szövegkategóriák vannak meghatározva, amelyek előre meghatározott módon jelennek meg. Mindezeket a kategóriákat leggyakrabban a tudományos és számítástechnikai iparban használják. Soroljuk fel őket.

Egy kifejezést a szövegben egy és egy címkével kiemelünk.

A „továbbfejlesztett” kiemelés, amelynek célja a figyelem további felkeltése, egy címke és a záró iker segítségével jön létre.

A és címkék használatával jelzi, hogy a közöttük lévő szöveg idézet.

Egy adott kifejezés definícióját a és a címkék kiemelik.

Egy pár címke a forráskód kiemelésére szolgál bármely programozási nyelvben.

A program által kiadott szöveges információk AND címkékkel vannak formázva.

A felhasználó által beírt szöveget és címkék jelzik. P A programok forráskódjában a változókat a és a címkepárok segítségével jelöljük ki.

Címkék és kiemelő rövidítések.

A bevett betűkombinációkat pedig, amelyek nem rövidítések, azaz a mozaikszavak, címkékkel és címkékkel emeljük ki.

Nem elég azonban tudni a címkék nevét, azt is világosan meg kell érteni, hogy pontosan hogyan formázzák a szöveget. És itt nem nélkülözheti a példát.

Rizs. 1.7. Böngésző ablak, amely az 1.7-es listában látható fájl eredményét mutatja

Felsorolás 1.8

Normál megjelenítési beállítások
Ez normális szöveg
Ez egy válogatás. És még észrevehető kiemelés

Ez egy idézet, és ez egy meghatározás.

Írhatunk programkódot, szöveget a felhasználó által,
kimeneti szöveget és nem változókat
Így jelennek meg a rövidítések. És így - rövidítések.

Egy ilyen HTML-dokumentum megjelenítésének eredményét az ábra mutatja. 1.8.

Rizs. 1.8. Böngésző ablak, amely az 1.8-as listában látható fájl eredményét mutatja

Nagyon gyakran olyan szöveget kell elhelyezni egy weboldalon, amelyet előre elkészítettek valamilyen szövegszerkesztővel, amely már önállóan formázta a szöveget. Ebben az esetben szöveges formátum, kötőjelei és elhelyezése közvetlenül függ az ebben a szövegszerkesztőben beállított karakteres sor hosszától. Ha a szöveget hagyományos eszközökkel helyezik el egy weboldalon, ez a formázás természetesen megszakad. Ezért ezekhez az előre formázott kódrészletekhez egyéni címkét vezettünk be. Ennek a címkének van egy szélességi paramétere, amelynek értéke a sor hossza karakterekben. Természetesen a címke használata előtt célszerű a szöveg formázásakor használt pontos betűtípust erőltetni. Tehát az előre formázott szöveg beszúrásához a következő kódrészletet használhatjuk:
szöveg.
BAN BEN ebben a példában megadjuk, hogy a szöveget úgy kell megjeleníteni, hogy feltételezzük, hogy a sor hatvan karakter hosszú. Az előre formázott szövegre azonban a szóközök összecsukására vonatkozó szabályok sem érvényesek. A tény az, hogy amikor a böngésző több egymást követő szóközzel találkozik egy weboldal egyszerű szövegében, akkor azokat egyetlen szóközbe fogja össze. De az előre formázott szövegre nem vonatkozik ilyen átalakítás, amely lehetővé teszi a formázás megőrzését, amely a legegyszerűbb szövegszerkesztők szóköz karakterekkel történik. A HTML-ben egyébként a tabulátor karakter is szóköznek számít.
Azt is meg kell jegyezni, hogy a HTML lehetővé teszi a címkék használatát a felső idézőjelek megjelenítéséhez, amelyeket általában a közvetlen beszéd és néhány idézet kiemelésére használnak. Az idézetek egy ikervégű címkével vannak ellátva . A közvetlen beszéd keretezésére általában a és címkéket használják. Ugyanakkor a címke rendelkezik a cit paraméterrel, amelynek értéke annak az internetes erőforrásnak a hálózati címe, amelyet URL-nek is neveznek, amelyen az idézett szöveg eredetileg található. A címkével együtt pedig általában a lang paramétert használják, melynek értéke annak a nyelvnek a kódmegjelölése, amelynek írásjel szabályai szerint a korlátozó idézőjelek kerülnek. Nem titok, hogy be különböző nyelvek Gyakori a különböző idézőjelek használata.
Meg kell említeni az átutalások problémáját is. Általában a weblapkészítők nem is gondolnak erre a problémára, a böngészők pedig nem foglalkoznak a tördeléssel. Ha egy szó nem fér el egy sorba, egyszerűen átkerül egy másik sorba. De nem ez az egyetlen helyes módja a szöveg megjelenítésének. Előfordulhat olyan helyzet, amikor a szöveget elválasztással kell megjeleníteni. A HTML kétféle kötőjelet biztosít - explicit és úgynevezett "soft". Az explicit elválasztás az en kötőjel karakter használatával jön létre, amelyet általában a "-" numerikus szöveghelyettesítések helyettesítenek. Az explicit elválasztás azonban kényelmetlen, mert a böngészőablak átméretezésekor a sor hossza változhat, de az elválasztási jel továbbra is látható marad. . Még akkor is, ha a sor közepén van. Ezért gyakran használnak „puha” transzfereket. A "-" szöveghelyettesítéssel jönnek létre. Ebben az esetben a lágy kötőjel szimbólumok nem láthatók a szövegben, és csak abban az esetben, ha bármely szó, amelybe ezeket a szimbólumokat beillesztették, nem fér el teljesen a sorba, akkor kötőjellel, szótagokra bontva a beillesztett „ puha” kötőjelek. És ebben a szóban csak az egyik lágy elválasztási szimbólum válik láthatóvá.
A HTML lehetővé teszi a felső és alsó indexek megjelenítését is a címkéivel. A és címkék párja a felső index létrehozására szolgál, az alsó indexet pedig és címkék veszik körül. Nézzünk egy példát ezeknek a címkéknek a használatára.

Felsorolás 1.9

Bepx és alsó indexek

A víz H20

A tömeg és az energia aránya - E = mc2

Az ábra mutatja, hogy a böngésző pontosan hogyan jeleníti meg az indexeket. 1.9.

Rizs. 1.9. Böngésző ablak, amely az 1.9-es listában látható fájl eredményét mutatja

Szintén szövegtervezés Ezek vízszintes vonalak, amelyek gyakran elválasztják a weboldalak szöveges tartalmának jelentős részeit. A HTML-dokumentum szövegébe a címke használatával sor kerül beszúrásra. A címkének számos paramétere van, amelyek lehetővé teszik a vízszintes vonal megjelenésének finomhangolását.

Az igazítás paraméter lehetővé teszi a vonal vízszintes igazításának megadását. A paraméternek három előre beállított értéke lehet: balra, jobbra és középre, amelyek a vízszintes vonalat a nézetablak bal vagy jobb széléhez tolják, illetve középre tolják. Az alapértelmezett érték a center. Ha a címke tartalmazza a noshade paramétert, akkor a megjelenített vízszintes vonalnak nem lesz árnyéka. És az utolsó szélesség paraméter lehetővé teszi a vízszintes vonal hosszának beállítását. Az alapértelmezett érték "100%. És a vonalmagasság pixelben a méret paraméterrel van beállítva. Nézzük meg ezeknek a paramétereknek a használatát egy példa segítségével.

Listázás 1.10

Ez egy normál sor, amely alapértelmezés szerint jelenik meg

Ez egy rövidített vonal balra nyomva

Ez egy rövidített vonal a közepén

Ez egy rövidített vonal jobbra nyomva

Ez egy vastag vonal árnyék nélkül

Az ábra mutatja, hogyan néz ki egy ilyen HTML-dokumentum böngészőben. 1.10.
És itt talán befejezhetjük a HTML-ben rejlő szövegformázási lehetőségek vizsgálatát.

Rizs. 1.10. Böngésző ablak, amely az 1.10-es listában látható fájl eredményét mutatja