Milyen a dőlt betű. Hogyan készítsünk szép betűtípust html-ben: méretek, színek, html betűtípusok

Most a fő címkéket fogjuk tanulmányozni. Kezdjük azzal, hogy milyen címkékre van szükség az oldalon, kialakítva annak szerkezetét.

Blokk. A legegyszerűbb oldal felépítése

A webhely oldala normális szöveges fájl hosszabbítással .html... Ez a fájl tartalmazza a szöveget HTML oldalak címkékkel együtt. Ennek a fájlnak a következő címkékkel kell rendelkeznie: tag , amelynek tartalmaznia kell a teljes webhely szövegét (a böngésző figyelmen kívül hagy mindent, ami ezen a címkén kívül van írva), azon belül pedig még két címkének kell lennie: tag az oldal és a címke szolgáltatási tartalmához - a böngésző képernyőjén látható fő szöveghez.

A címke belsejében található szolgáltatási tartalomhoz , sokféle dolog szerepel, de egyelőre csak kettőre van szükségünk. Ez egy címke beállítás <a href="https://olympsb.ru/hu/kak-izmenit-nazvaniya-wiki-stranicy-kak-sozdat-viki-stranicu.html">lap cím</a>, amely látható lesz a böngésző lapon, és a címke <meta>, amely beállítja az oldal kódolását (az attribútumban van megadva) <b>karakterkészlet</b>és általában számít <b>utf-8</b>, erről bővebben a videóban, amely pár bekezdés alatt lesz).</p> <p>A címke előtt is <html>a konstrukciót általában írják <b>doctype</b>, amely a HTML nyelv azon verzióját jelöli, amelyen a webhely készült. A nyelv jelenlegi verziója ötödik, és ennek a doctype-nak így kell kinéznie -<!DOCTYPE html> .</p> <p>Vessünk egy pillantást az oldal alapvető felépítésére (a példa futtatásához böngészőben másold át egy kiterjesztésű szöveges fájlba <b>.html</b>és nyissa meg egy böngészőben, ha problémája van ezzel - nézze meg a példa alatti videót):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ez a cím címe Ez az oldal fő tartalma.

Ebben a linkben megtudhatja, hogyan néz ki ez a példa egy böngészőben.

Azt hiszem, miután elolvasta az oldal alapvető felépítését, még mindig van némi zavara abban, hogyan néz ki mindez a gyakorlatban. Ezért készítettem egy speciális videót, amelyben megmutatom, hogyan készítheti el az első HTML-oldalát, és hogyan futtathatja a böngészőben (ebben beszélek is lap cím, a kódolásokról, a kód formázásáról). Vessen egy pillantást rá, és csak ezután térjen át a további olvasmányra:

Nos, most, megtanulta, hogyan kell alkotni legegyszerűbb oldalak, továbblépünk a címkén belül használható hasznos címkék feltárására ... Ezek címkék lesznek bekezdésekhez, címsorokhoz, listákhoz, linkekhez és más hasznos dolgokhoz. Tehát kezdjük.

Blokk. Bekezdések

Az oldal egyik fő eleme a bekezdések... Összehasonlíthatók egy könyv paragrafusaival - mindegyik bekezdés új sorból indul, és úgynevezett piros vonallal rendelkezik (ekkor a bekezdés szövegének első sora enyhén behúzott jobbra). Alapértelmezés szerint nincs piros vonal, de könnyen elvégezhető (erről később).

A címke segítségével egy bekezdés jön létre

Ily módon:

Ez a cím címe

Ez egy bekezdés.

Ez egy másik bekezdés.

És még egy bekezdés.



Ez egy bekezdés.

Ez egy másik bekezdés.

És még egy bekezdés.

Blokk. H1, h2, h3, h4, h5, h6 rovat

A bekezdések mellett fontosak az oldalon címsorok... Összehasonlíthatók egy könyv fejezeteivel is - minden fejezetnek megvan a maga címe (ennek a fejezetnek a címe), és bekezdésekre van felosztva, amelyeknek szintén vannak saját címsoraik. Nos, az oldal fő szövege bekezdésekben található.

Fejlécek jönnek létre címkék használatával

,

,

,

,

,
... Különböző fontosságúak. A címben h1 kellett volna a teljes HTML oldal címe, ban ben h2- név blokkok oldalak h3- a részblokkok neve stb.

Alapértelmezés szerint minden fejléc vastag és félméretes (méretük CSS-en keresztül változtatható meg, de erről később). Lásd a példát:

Ez a cím címe

H1 fejléc

H2 fejléc

H3 fejléc

H4 fejléc

H5 irány
H6 fejléc

Ez az első bekezdés.

Ez a második bekezdés.

Ez a harmadik bekezdés.



Így fog kinézni a kód a böngészőben:

H1 fejléc

H2 fejléc

H3 fejléc

H4 fejléc

H5 irány
H6 fejléc

Ez az első bekezdés.

Ez a második bekezdés.

Ez a harmadik bekezdés.

Blokk. Zsíros

Már tudja, hogy az alapértelmezett fejlécek zsíros... Az egyszerű szöveget azonban félkövérré is teheti - csak tegye be egy címkébe ... Lásd a példát:

Ez a cím címe

Ez egyszerű szöveg, és ez az zsíros szöveg.



Így fog kinézni a kód a böngészőben:

Ez egyszerű szöveg, és ez az zsíros szöveg.

valamilyen más címkén belül kell használni, például egy bekezdésben. Ebben az esetben a bekezdések létrehozzák általános felépítése oldalak (bekezdések és címsorok), valamint a címke b félkövérré teszi az egyes szövegdarabokat.

Blokk. Dőlt betű

A zsíros mellett elkészítheti dőlt betűs a címke használatával :

Ez a cím címe

Ez egyszerű szöveg, és ez az dőlt szöveg.



Így fog kinézni a kód a böngészőben:

Blokk. Listák

A bekezdések és címsorok mellett van egy másik fontos eleme az oldalnak - ez az a listákat... Az ilyen elemeket valószínűleg minden internet-felhasználó ismeri. Pontról pontra felsorolnak valamit (egy listát). A lista minden eleme mellett általában kitöltött kör van (hívva jelző lista).

A listák a címke használatával jönnek létre

    , amelyen belül a címkéknek menniük kell
  • ... Címke ul megadja magát a listát és a címkékben li fel kell tenned a listaelemeket (vagyis egy li megfelel egy listamarkernek). Ne feledje, hogy a li címkék nem használhatók egyedül. Lásd a példát:

    Ez a cím címe

    • A lista első eleme.
    • A lista második eleme.
    • A lista harmadik eleme.


    Így fog kinézni a kód a böngészőben:

    • A lista első eleme.
    • A lista második eleme.
    • A lista harmadik eleme.

    Címkén keresztül létrehozott listák ul hívják rendezetlen listák. Ezt a nevet azért kapták, mert vannak parancsolt listák, amelyek pontjelzők helyett numerikus felsorolással rendelkeznek. Ilyen listák az ul címke helyett tartalmazzák a taget

      , és az ilyen listák elemei címkéken keresztül is létrehozásra kerülnek li.

      Készítsünk egy rendezett listát a címke segítségével ol:

      Ez a cím címe

      1. A lista első eleme.
      2. A lista második eleme.
      3. A lista harmadik eleme.


      Így fog kinézni a kód a böngészőben:

      1. A lista első eleme.
      2. A lista második eleme.
      3. A lista harmadik eleme.

      A rendezett listák kényelme az, hogy be tudom illeszteni új elem a listát tetszőleges helyre - és maga a számozás is átrendeződik (vagyis nem kell követnem semmilyen változás esetén, mint ha manuálisan rendezném).

      Blokk. Linkek

      Linkek azok az elemek, amelyek az internetet kihozzák az internetből. A linkekre kattintva a webhely egyik oldaláról a másikra léphetünk. Ha nem léteznének, az Internet csak olyan oldalak gyűjteménye lenne, amelyek semmilyen módon nem kapcsolódnak egymáshoz.

      Ez a cím címe Link a phphtml.net webhelyre.

      Így fog kinézni a kód a böngészőben:

      Linkek vannak abszolútés relatív emellett mind az Ön webhelyére, mind pedig valaki másra vezethetnek. Jobb ezeket a nehéz pillanatokat megmutatni, és nem szövegesen leírni, ezért neked készítettem következő videó... Vessen egy pillantást rá, és csak ezután térjen át a további olvasmányra:

      Blokk. Képek

      Most találjuk ki, hogyan helyezzük el kép webhelye oldalán. Erre való a címke amely rendelkezik egy kötelező attribútummal src, amely tárolja a képfájl elérési útját.

      Nézzük meg, hogyan működik a következő példa:

      Ez a cím címe

      Így fog kinézni a kód a böngészőben:

      Ne feledje, hogy a címke nem igényel végcímkét.

      Blokk. Linkek képek formájában

      Link talán nem csak szöveget, hanem kép- ehhez elég a címke fészek a címkében mint a következő példában. Kattintson a képre - és követni fogja a phphtml.net webhelyre mutató linket (hogy később visszatérhessen a könyvhöz - nyomja meg a "Vissza" gombot a böngészőben):

      Ez a cím címe

      Így fog kinézni a kód a böngészőben:

      Blokk. Sortörés

      Ne feledje, mi fog történni, ha például két bekezdést készít egymás mellett - ebben az esetben a szöveg, amely mindegyikben rejlik, új húrok.

      Lássuk ezt a következő példával:

      Ez a cím címe

      Ez az első bekezdés.

      Ez a második bekezdés.



      Így fog kinézni a kód a böngészőben:

      Ez az első bekezdés.

      Ez a második bekezdés.

      Vannak azonban olyan helyzetek, amikor szeretnénk egy bekezdést, de néhány szöveg benne új sorral kezdődik. Miért lehet erre szükség? Például be akarok írni egy verset, de nem akarom annak egyes sorait külön bekezdésre bontani, mivel ez nem lenne túl logikus.

      Ehhez arra a helyre kell írnia a címkét, ahol a sortörésnek lennie kell
      ... Ne feledje, hogy ez a címke különleges és nincs végcímke.

      Nézzük meg, hogyan működik a következő példa:

      Ez a cím címe

      Ez a szöveg első sora
      és ez a második.



      Így fog kinézni a kód a böngészőben:

      Ez a szöveg első sora
      és ez a második.

      Blokk. HTML megjegyzések

      Szinte az összes programozási nyelvnek van olyan fogalma, mint a "megjegyzések".

      A HTML a szöveg formázása terén nyújt számunkra néhány lehetőséget. Ma elmondom, hogyan készítsen dőlt betűtípust html-ben, mind a szokásos, mind a nem szabványos betűkészlethez. A második esetben meg kell fontolnia valamit, hogy minden működjön.

      Hogyan írjunk dőlt betűt html-be?

      Először is, magában a html-ben két címke van, amelyek dőlt stílust adnak a szövegnek. Ezek em és én. A második egyébként be van építve a wordpress motor html szerkesztőjébe, amelyben most ezt a cikket írom. Miben különböznek ezek a címkék? Valójában ma nem szeretném hangosan kijelenteni, hogy valahogy különböznek egymástól.

      Általában em állítólag olyan szavak kiemelésére szolgál, amelyeket különös intonációval kell kiejteni, míg én csak vizuálisan emelem ki a szöveget. De ne foglalkozzunk ezzel, mert nem tudni, hogy ez valóban így van-e.

      Melyek a dőlt betűs szöveg css tulajdonságai?

      Ez a betűstílusú tulajdonság és dőlt értéke. Van egy ferde érték is, és ez a szöveget dőltre változtatja. Van-e különbség ezek között az értékek között? Gyakorlatilag egyik sem. Egyébként részletesen erről és másokról css tulajdonságok a szöveghez olvassa el a megfelelő cikket, ahol minden kirakódik a polcokra.

      Hogyan jeleníthetek meg egyedi betűtípust dőlt betűvel?

      Az a tény, hogy ha nem szabványos betűtípust csatlakoztat a Google Betűtípusokhoz, akkor ebben az esetben be kell jelölnie a négyzetet, ha legalább 1 dőlt betűtípust köt össze. Ha ezt nem teszi meg, akkor amikor megpróbál ilyen betűtípust dőlt betűvé tenni, a dőlt betű jelenik meg az egyik szabványos betűtípusban. Egyébként a nem szabványos betűtípusok összekapcsolásáról ebben a cikkben olvashat.

      Ebben a képernyőképen láthatja a betűtípus-kapcsolat töredékét a Google szolgáltatás Betűtípusok.

      Mint láthatja, legalább egy dőlt stílus mellett van egy pipa. Most, amikor a szükséges címkéket vagy stílustulajdonságot használjuk, igaz, hogy ez a betűtípus dőlt lesz, és nem valami más.

      Így rendeztük az összes pontot, amelyek a dőlt betűvel dolgoznak. Nem merek tovább visszatartani.

      Ahhoz, hogy a WEB oldalunk jobban megjeleníthető legyen, a szöveget bekezdésekre osztjuk, és kiválasztjuk a címet. A HTML-nek 6 szintje van a dokumentum fejlécszakaszainak számozása 1-től 6-ig. A címsorokat egy megfelelő szintű címkepárral deklaráljuk, például:

      - az első szintű szakasz címsora, és
      - a hatodik szintű szakasz címsora. A címek a betűk méretében és szélességében különböznek a szokásos szövegtől. Az első h1 fejléc általában nagyon nagy betűtípussal jelenik meg, míg a hat h6 fejléc nagyon kis betűvel jelenik meg.

      Címek

      Ne tévessze össze a dokumentumrész-címsorokat a korábban definiált dokumentumfejlécekkel .

      Az első mondatot a szöveg címeként használjuk - Ehhez elég címkékkel korlátozni

      és

      .

      Helyezzen be címkéket a other.html fájl szövegébe

      és

      úgy, hogy korlátozzák a szöveg első mondatát, és ez a kóddarab a következő formát öltött:

      Üdvözöljük az SD Company oldalán!

      Nézzük át a megszerzett eredményt.

      Mentse a fájlt a Jegyzettömb menü Fájl - Mentés parancsával.

      A mentési műveletet mindig a dokumentum megtekintése előtt kell elvégezni, mert ez megnyitja a fájlt megtekintésre, a lemezről betölti a számítógép RAM-jába. Ha a HTML-kód szerkesztése után nem menti a fájlt, akkor nem lát semmilyen konfigurációt a böngészőben.

      Állítsa vissza a böngészőablakot a tálcán található gombra kattintva.

      Nyomja meg az F5 vagy a Frissítés gombot a program munkaablakának eszköztárán. A másik.html fájl újratöltődik, és a böngészőablakban megnézheti, hogy néz ki az első szintű fejléc.

      Nézze meg, hogyan fog kinézni a másik 5 szint címe, megváltoztatva a címkékben szereplő számokat: h2, h3 stb. Minden konfiguráció után ne felejtse el elmenteni a fájlt és frissíteni a képet a böngészőablakban.

      Amikor befejezte a kísérleteket, állítsa vissza a címkéket a other.html fájlban

      .

      A rendelkezésére álló 6 szintű fejlécek használata HTML nyelv, egyszerűen elvégezhető olvasható dokumentum intuitív felépítéssel. Ne feledje, hogy a dokumentum mindig lényegesen jobban olvasható, ha pontosan fel van osztva szakaszokra és alszakaszokra.

      Fejlécek igazítása

      Alapértelmezés szerint a cím az oldal bal oldalához igazodik. De lehet jobbra vagy középre igazítva is. A címke jobb oldali igazításához

      az align = "right" attribútumot használjuk, a központosításhoz pedig - align = "center". A bal oldali igazítás nyilvánvaló jelzése szintén megengedett - align = "left".

      Hozzáadás címkéhez

      az align = "center" attribútum a cím középpontjához. Ennek az elemnek a következő formát kell öltenie:

      Üdvözöljük az SD Company oldalán!

      A jövőben nem emlékeztetünk arra, hogy a fájlt meg kell menteni a kezdeti kóddal, és a képet a böngészőben frissíteni kell a megtekintés előtt.

      Hogyan készítsünk félkövér szöveget HTML-ben

      Most térjünk le a többi szövegre. Növeljük a méretét, és tegyük a szöveget félkövér dőltre. A párosított címkék a félkövér stílus beállítására szolgálnak .

      Helyezze be a másik.html fájlba a nyílást és zárás címkéket, hogy korlátozzák a szöveget Itt megtudhatja ... Ennek az elemnek a következő formát kell öltenie:

      Hogyan készítsünk dőlt szöveget HTML-ben

      A dőlt betűket címkékkel állítják be .

      Helyezzen be egy HTML-címkét a kezdő kódba ésúgy, hogy a szerkesztett elem a következő formát öltse:

      Itt megismerheti tevékenységeinket, cégünk szoftvertermékeit és az általunk gyártott berendezéseket.

      A jelölő elemek beágyazódhatnak, mint ebben a struktúrában, ahol az elem elembe ágyazva . Modern böngészők képes megfelelően kezelni a beágyazott címkéket. Ezért meg kell győződnie arról, hogy a fészkelés rendjét nem zavarják-e. A böngésző teljesítménye nehéz lesz, ha a fészkelés megszakad. Például egy ilyen bejegyzés helytelen lesz: ... A fészkelés a HTML kódolás általános kultúrájának nagyon fontos része.

      Hogyan készítsünk aláhúzott szöveget HTML-ben

      Egy pár címkével beállíthatja egy szövegdarab aláhúzott stílusát, korlátozva ezeket a címkéket, és pár címke használatával - szöveg megjelenítése betűtípusban.

      Meg kell jegyezni, hogy a közelmúltban a tag egyszerűsödik, és az aláhúzás stílusokkal történik. egyenértékű ... Igen, az új analóg nehézkesebbnek tűnik, de ez a legnagyobb bánatára igaz. A fő dolog ebben a szívességben az, hogy a terjedelmes verzió több böngészőt is használjon, más szóval, minden böngészőhöz megfelelő, ha mindkettő Nem minden böngésző támogatja.

      Hogyan növelhető a szöveg HTML-ben

      Most növeljük a szöveg betűméretét. Ezt többféleképpen lehet megtenni.

      Címkék növelje a közéjük zárt szöveg betűméretét.

      Adjon címkéket a fenti kódrész elejéhez, illetve végéhez ésúgy, hogy az elem a következő formát öltse:

      Itt megismerheti tevékenységeinket, cégünk szoftvertermékeit és az általunk gyártott berendezéseket.

      Címkék használata csökkentheti a szöveg betűméretét, hogy megfeleljen az eredetinek.

      A betűméret megadásának másik módja a címkék méretattribútummal. Ennek az attribútumnak az értéke 1 és 7 közötti egész szám. Ebben az esetben az 1 érték a legkisebb betűméretnek felel meg, a 7 pedig a legnagyobbnak.

      Címkék helyett használva címkék megtekintése , nézze meg, hogyan változik a szöveg betűmérete a size attribútum különböző értékeivel - 1-től 7-ig.

      Használhatja az 1 és 7 közötti számokat egy + (plusz) vagy - (mínusz) előjellel a méretattribútum értékeként. Ebben az esetben a betűméret ennek megfelelően növekszik vagy miniatürizálódik, például a kezdeti címkékhez képest a betűméretet a jelenlegihez képest egy szinttel növeli. Nézd meg.

      Állítsa a size attribútum értékét 5-re a kérdéses szövegrészhez: ... A darab HTML kódjának a következőknek kell lennie:

      Itt megismerheti tevékenységeinket, cégünk szoftvertermékeit és az általunk gyártott berendezéseket..

      Címkékben a color attribútummal megadható a betűtípus színe is, amelyet szövegcímkék határolnak. Ennek az attribútumnak az értékei megegyeznek a korábban tárgyalt attribútumokkal, amelyek leírják a dokumentum hátterét és szövegszínét.

      Alapértelmezés szerint az Az itt megtudod ... szövegű bekezdés balra igazodik. Középre helyezze vízszintesen a címkék segítségével

      ... Címkék segítségével egy bekezdést is igazíthat az oldal jobb oldalához vagy balra - címkék használatával .

      Helyezzen be címkéket

      a kijelölt bekezdésre korlátozva őket.

      Ne feledje, hogy a tageket használtuk a bekezdés középre állításához.

      , ellentétben az align = "center" attribútummal, amelyet a címkékben alkalmaztunk

      .

      Figyelem! A 2010-es címkékhez ,

      , , elavultnak tekinthetők, ezért megkövetelik a stílusok analógjainak használatát. Ez nem azt jelenti, hogy nem használhatja őket, de ha képes, próbáljon meg megszabadulni tőlük.

      =

      =

      =

      =

      =

      Rengeteg más elavult címke is található, amelyeket nem lehet körvonalazni ebben a cikkben, ezért jobb, ha azonnal megismerkedünk a speciális WEB-webhelyekkel ebben a kérdésben. De a főbbeket kicsit magasabbra tettem itt

      Kiosztási kódok

      A HTML kétféle megközelítést tesz lehetővé a szövegtöredékek betűtípusának kiválasztásához. Egyrészt közvetlenül jelezheti, hogy a szöveg egy bizonyos területén lévő betűtípus félkövér vagy dőlt lehet, más szóval nyilvánvaló, hogy a szöveg betűképét jelöli, ahogy ezt ebben a kísérletben tettük. Másrészt bármely szöveget meg lehet jelölni valamilyen normális, logikus stílusúnak, így a böngésző értelmezheti ezt a stílust. Így a logikai stílus megmutatja egy szövegdarab szerepét, például nagy jelentőséggel bír a hétköznapi szöveghez képest, vagy azt, hogy ez a darab idézet. Saját munkájában későbbi logikai stílusokat meghatározó címkéket használhat. Ellenőrizze, hogyan működnek különböző böngészők.

      - egy szó definiálására szolgál. A szöveg alapértelmezés szerint dőlt betűvel jelenik meg.

      - a szavak hangsúlyozásáért és az erősítésért. A szöveg alapértelmezés szerint dőlt betűvel jelenik meg.

      - a könyvek, filmek, előadások stb. címének kiemelése alapértelmezés szerint dőlt betűvel jelenik meg.

      - a programkód töredékeihez. Megjelenik a kijelzőn fix szélességű betűtípussal.

      - olyan szöveghez használatos, amelyet a felhasználó a billentyűzetről ír be. Megjeleníthető különböző betűtípusokban, különböző böngészőkben. Elavult címke.

      - a programüzenetek megjelenítésére szolgál. Megjelenítés fix szélességű betűtípusban Elavult címke.

      - különösen fontos töredékek esetén. Általában félkövéren.

      - annak jelzésére szolgál, hogy a szöveg vagy a szó egy része szimbolikus változó, más szóval olyan szöveg, amelyet különböző kifejezésekkel lehet helyettesíteni. Alapértelmezés szerint dőlt betűvel jelenik meg. Elavult címke.

      A HTML 4.0 specifikáció progresszívebb módszert kínál a szövegek és más részek stílusainak megadásához, egy speciális CSS (Cascading Style Sheets) nevű nyelv használatával. A stíluslapok hatalmas eredményt jelentenek a WEB tervezés területén, kiterjesztve az oldalak megjelenésének javítását. A stíluslapok megkönnyítik a sortávolság, a kitöltés, a szöveg és a háttér színeinek, a betűméret és a stílus stb. Meghatározását. A HTML legtöbb részét a stílus attribútummal lehet stilizálni, amely egy elem nyitó címkéjébe kerül. A "tulajdonság: érték" forma párjait használjuk a stílus attribútum értékeként. Például egy szakaszrész fejlécét leíró kódrészletben

      a style = "color: blue" attribútum megadja, hogy a color tulajdonság kék legyen, más szóval, az első szintű fejlécszöveget kék színnel kell megjeleníteni.

      Stílusok összehangolása

      Lássuk, hogyan kell használni a lépcsőzetes stíluslap nyelvét a szavakkal kezdődő szövegdarab stílusának megadásához Itt megtudhatja ...

      A betűkészlet vastagságának megadásához használja a font-weight tulajdonságot az alábbiakkal: könnyebb (keskeny), félkövér (félkövér), merészebb (félkövér), például: style = "font-weight: bold".

      A dőlt stílus meghatározásához használja a dőlt betűre állított betűtípus-tulajdonságot. Ezért a félkövér dőlt betű elkészítéséhez meg kell találnia a style attribútumot: style = "font-weight: bold; font-style: italic". Figyelem: a jellemzők tetszőleges sorrendben helyezhetők el, és szükségszerűen pontosvesszővel kell rendelkezniük.

      Ha meg kell adnia a betűméretet, akkor használja a font-size tulajdonságot, amelynek értékei relatív vagy abszolút értékben adhatók meg. A relatív értékek százalékos értékek, míg abszolút értékként pontokat (pt), pixeleket (px), centimétereket (cm), millimétereket (mm) használunk. Például:

      style = "font-size: 200%"

      style = "font-size: 16pt"

      style = "font-size: 100px"

      Az abszolút, nem pedig a relatív méret megadásával megfosztja az oldalait megtekintő felhasználókat attól, hogy növeljék vagy csökkentsék a betűtípusok méretét a böngésző menüparancsának használatával, a látásuknak és a monitor felbontásának megfelelően. A betűtípusok csak az Ön által megadott méretben jelennek meg. Ezért jobb a betűméretet százalékban megadni. Ebben az esetben a betűméret kisebb vagy nagyobb lesz a megadott százalékos számmal, mint akkor, amikor tervezték HTML súgó címke alapértelmezés szerint.

      A szöveg vízszintes igazításának módszerének meghatározásához használja a text-align tulajdonságot a bal (bal), jobb (jobb), középső (középső), igazolás (szélesség) értékekkel. Így annak jelzésére, hogy az Itt megtudja ... szöveget félkövér dőlt betűs formátumban kell formázni, a kezdőbetű 150% -ával, középre igazítva, stílusát az alábbiak szerint kell megtalálni:

      style = "font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

      Ezt az attribútumot a címkékben fogjuk használni<р>amelyek lehetővé teszik a szöveg külön bekezdésként történő bemutatását.

      Szerkesztés HTML elem, beleértve a szöveget Itt megtudhatja ... a címkék eltávolításával

      , , , és beillesztjük a címkéket<р>ésa style attribútummal, hogy ez az elem a következő formát öltse:

      <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Itt megismerheti tevékenységeinket, cégünk szoftvertermékeit és az általunk gyártott berendezéseket.

      Látja, a HTML lehetővé teszi a használatát különböző módszerek stílusú design. A CSS kaszkád stíluslap nyelvének használata azonban kívánatosabb.

      Egyéb igazítási és stílusbeállítások

      Csak egy olyan esetet láthattunk a stíluslap nyelvénél, ahol a stílusmeghatározás kifejezetten az Ön által leírt elem címkéjében található.

      Ez a legtöbb HTML kódhoz használt stílusattribútummal történik. De vannak más felhasználási lehetőségek a CSS számára is.

      A szokásos HTML-ben, a stíluslapok beágyazása nélkül, bizonyos paraméterek hozzárendeléséhez bármely elemhez, például színhez, mérethez, az oldal helyzetéhez és hasonlókhoz, ezeket a jellemzőket minden alkalommal körvonalaznia kell, még akkor is, ha 10 ki olyan alkatrészek, amelyek nem különböznek egymástól. Tízszer kell beillesztenie ugyanazt a HTML-kódot az oldalba, növelve a fájl méretét és a hálózatról való letöltéshez szükséges időt.

      A stíluslapok más, kényelmesebb és gazdaságosabb módon működnek. Bizonyos jellemzők hozzárendeléséhez egy elemhez egyszer fel kell vázolnia ezt az elemet, és meg kell találnia ezt a leírást stílusként, és a következőben egyszerűen meg kell jelölni, hogy a megfelelő módon megtervezni kívánt elemnek meg kell felelnie az által leírt stílus jellemzőinek. Ön. Kényelmes, nem?

      Ezenkívül a stílusleírást nem a WEB-oldal szövegébe mentheti, hanem külön fájl- ez lehetővé teszi, hogy a stílusleírást tetszőleges számú WEB oldalon használhassa. És egy további kapcsolódó előny, hogy tetszőleges számú oldal kivitelét megváltoztathatja úgy, hogy csak egy stílusfájl leírását javítja egy külön fájlban.

      Ezenkívül a stíluslap nyelve lehetővé teszi, hogy az oldalak betűkészletével még magasabb szinten dolgozzon, mint a szokásos HTML.

      BAN BEN aktuális idő A CSS nyelv rengeteg paraméterrel rendelkezik a HTML részei számára, amelyeket vezérelni tud. A "biztonságos", más szóval kompatibilis a a legnagyobb szám böngészők CSS elemek- a betűtípus jellemzői, az alkatrészek és a háttér színei, a szöveg és a szegélyek jellemzői - jelentősen megkönnyítheti munkáját és vonzóbbá teheti WEB-oldalait a szövegtervezés szempontjából.

      Helló kedves blogolvasók! Ez a cikk a következőkre fog összpontosítani szövegformázó címkék... A félkövér vagy dőlt betűs szöveg kiemelkedő példa. Figyelembe vesszük egyes címkéknek a webhely belső optimalizálására gyakorolt ​​hatását és az írásuk szabályait is. Erről a megadott cikkben olvashat. Egyébként hasonló szövegtervezési elemeket számos szövegszerkesztőben találhat, például a Wordben.

      A címkék 2 típusra vannak felosztva: blokk és beillesztett címkék. Az előbbi használatakor megváltoztathatja a szöveg egy részének tartalmát (sorok, egyes töredékek vagy szavak), míg az utóbbiak igen. A cikkben szereplő formázási címkék túlnyomórészt kisbetűket tartalmaznak.

      A címkék írásának szabályai és sorrendje

      Már tudja, hogy mi a kezdő és a végcímke. Ha nem, akkor olvassa el a cikket ennek az anyagnak a legelején. Röviden, kétféle címke létezik: egyszeres (például átvitel a új sor
      ) és a tartály (párosítva). Tehát minden szövegformázó címke az párosítva... Ez azt jelenti, hogy bármely elem rendelkezik kezdő és záró címkével, és a kijelölést közöttük kell elhelyezni. Például a kifejezés helyes kiválasztása így néz ki: Kiválasztott részlet

      Amikor a böngésző feldolgozza ezt a töredéket, a következő szöveg jelenik meg: Kiválasztott részlet. Egyébként be RSS-hírcsatorna az összes címke nem jelenik meg ().

      A címkék írásakor a legfontosabb, hogy zárva legyenek. Ellenkező esetben az oldalon az összes szöveg félkövér lesz (a címkét tartalmazó példában) ). De van, amikor egy bizonyos töredéket egyszerre kell félkövéren és dőlt betűvel kiemelni. De nincs olyan címke, amely végrehajtaná ezt a műveletet. Csak egy kiút van ebből a helyzetből: két címkét használjon egyszerre. Nem számít, milyen sorrendben használja őket. Ezért a szöveget ilyen címkékkel írva:

      Kiválasztott részlet

      vagy így:

      Kiválasztott részlet

      Akkor is megkapja Kiválasztott részlet dőlt betűvel és egyidejűleg félkövérrel. Előnyösebb azonban az első lehetőséget használni, mert kezdetben ez volt az egyetlen és helyes. Ne felejtsük el, hogy a beállításoktól függően minden böngésző másképp tudja kezelni a címkéket (). Most térjünk át magukra a formázó címkékre.

      Félkövér és dőlt betűs szövegcímkék , , és

      A legnépszerűbb szövegformázó címkék - hangsúlyozása bátorés dőlt betűvel... Általában egy darab fontosságának tulajdonítják. Az első eset egy olyan fragmentum kiválasztását szolgálja, amely tartalmazza hasznos információ vagy kulcsszavak. A dőlt betűt ugyanarra a célra használják, mint a félkövér szöveget, de az információ kevésbé fontos, mert a dőlt betű kevésbé látható a törzsszöveg hátterében, mint a félkövér szöveg.

      Fontolja meg először félkövér szöveg... Két címkét használnak erre a műveletre - és ... Különbségek a megjelenés nem. Bár, mivel bármely böngésző minden elemet másképp értelmezhet, láthatja a különbségeket. Így néz ki a címkékben szereplő szöveg és a böngésző által már feldolgozott formában:

      Szöveg erős címkékben

      Szöveg b címkékben

      És itt néz ki ez a két sor az oldal forráskódjában:

      Szöveg erős címkékben Szöveg b címkékben

      Ugyanezt a helyzetet figyelhetjük meg a dőlt címkék és ... Próbálja meg megtalálni a különbségeket a két példa között:

      Szöveg az em címkékben

      Szöveg az I címkékben

      És itt forrás:

      Szöveg az em címkékben Szöveg az I címkékben

      Tehát a szóban forgó félkövér és dőlt betűs címkék valójában nem különböznek egymástól, de miért van szükségünk például a címkére ha itt ? Végül is ez utóbbi csak egy karaktert tartalmaz (a zárójeleket nem számítva), ezért könnyebb írni. És az a helyzet, hogy a címkék és befolyásolni. Ha kulcsszavakat vesz körbe ezekkel a címkékkel, az jótékony hatással lesz a weboldal promóciójára. A lényeg az, hogy ne vigyük túlzásba - a szöveg legfeljebb 5% vastag szöveget tartalmazhat a címkében. , és ugyanannyi dőlt betű a címkében .

      Ha csak ki akar emelni egy pillanatot a szövegben, akkor használja a címkét vagy ... Általánosságban úgy gondolom, hogy a keresőmotorok is fontosabbnak tartják az ezekben a címkékben szereplő szöveget, de tovább belső optimalizálás még mindig kevesebb hatása van, mint és .

      Vágott szöveges címkék - , és

      Most nézzünk meg néhány olyan címkét, amelyek egy vonást használnak a szöveg stílusában. A legismertebb tőled szövegszerkesztőkcímke vagy aláhúzza. Ez a címke nem befolyásolja a rangsort (ha jól tudom), de segít kiemelni néhány szöveget, és arra összpontosítani. Hoztam egy példát ennek a címkének a fenti használatára.

      Van még két címke, amelyek célja hasonló - és ... Mindkettő az áthúzott szöveg funkcióját tölti be. Ezt a címkét bármilyen helyzetben használhatja: ha frissít egy dokumentumot (vagy inkább annak egy részét), áthúzhatja a régit és hozzáadhat egy újat; ha olyasmit fog írni, amely eltér az anyag témájától; valami, ami nem felel meg az erkölcsi és etikai normáknak.

      A két címke közötti különbségek csak azokban rejlenek írás, amelynek eredményeként előnyösebb az első használata, mivel egyrészt kényelmesebb írni, másrészt kevesebb lesz az oldalon HTML kód, és a keresőmotorok imádják.

      Címke és attribútumok - a szöveg betűtípus-paraméterei

      Most nézzünk meg egy olyan címkét, amelyet nem használunk attribútumok nélkül. Ezzel paramétereket állíthat be egy adott szövegdarabhoz. Általánosságban elmondható, hogy most előnyösebb (kaszkád stíluslapok) használata, mert nagymértékben lerövidíthetik az oldal teljes HTML kódját. Tehát nézzük meg ugyanazt a címkét . Számára van minden három tulajdonság:

      • arc- maga a betűtípus. Például Arial, Courier vagy Verdana. Néhányat felsorolhat, mert nem minden felhasználó rendelkezik kiterjedt betűkészlettel, és ha a face attribútumba ír be néhányat, a böngésző képes lesz megválasztani, hogy melyiket használja, vagy inkább azt, amelyik jelen van a rendszerben;
      • méret- a szöveg méretét jelző attribútum. Mind tetszőleges egységekben, mind pixelekben kifejezhető;
      • szín- szöveg szín. Ez az attribútum mind a színek HTML-kódjaiban, mind szavakban használható. Az előbbi #FFFFFF alakú (ahol F tetszőleges szám vagy betű A-tól F-ig), az utóbbiak pedig egyszerű szavakkal(például a piros piros).

      Így néz ki a címke szövege minden attribútumot használ:

      Ez a szöveg 6 képpont méretű

      
      Ez a szöveg piros
      
      
      Ez a szöveg Arial betűtípusban van
      
      
      Ez a szöveg piros és 5 képpontos
      

      És itt van, amit látni fog az írott kód feldolgozása után:

      Blokkolt szövegdizájn elemek - fejlécek

      -

      , bekezdés

      Végül megvizsgáljuk a szinte minden dokumentumban használt blokkelemeket. Ezek fejléc- és bekezdéscímkék. Vegyük figyelembe az elsőt. 6féle címsor létezik, és mindegyiknek megvan a maga címkéje. Minden fajnak csak saját sorszáma van, és címkék segítségével rögzítik őket

      ,

      ,...,

      ... Így néz ki az összes fejléc feldolgozáskor:

      A cím utáni szám megegyezik a címke számával ... A fejlécek hatalmas hatással vannak a belső optimalizálásra, ezért tartalmazzon címkéket kulcsszavak. Ennek az esetnek jó néhány jellemzője van, amelyeket a későbbi cikkekben tárgyalok.

      Most beszéljünk a bekezdések kiemeléséről.

      A címke feladata, hogy a szöveget üres sorral különítse el a többi hasonló szövegtől. Ha megnézi egy dokumentum forráskódját, a következőket láthatja:

      A zöld négyzeteknek van egy bekezdésük, a pirosaknak egy másik bekezdésük. Így néz ki ez a kód, miután a böngésző feldolgozta (a nyíl egy üres sorra mutat):

      Ennek eredményeként az egyik bekezdést meglehetősen észrevehetően elválasztjuk a másiktól, ami előnyös - az olvasás kényelmesebbé válik.

      Tehát a cikk kb dokumentum formázó címkék... Sokkal több van belőlük, mint amit ebben az anyagban leírtam. Csak annyit kell mondani néhányról, aminek eredményeként külön cikkeket, teljes áttekintéssel szentelünk rájuk.

      Mindenki ismeri ezeket a címkéket , , , bemutatás, ezért a "felépítés, bemutatás, viselkedés" paradigma alapján használatuk nem javasolt. Az elemek sokkal ismertebbnek tűnnek , , ... Ez a fejlesztési gyakorlat sok éve érvényes. Ezen elemek szemantikájában azonban sok minden megváltozott a HTML5 érkezésével. Most 4 új címke van jelentéssel és rendetlenség a fejünkben.

      vs.

      Ha korábban az összes elrendezésű tankönyv tele volt olyan kifejezésekkel, mint a „use helyette ”, És ez félig igaz volt, ma egy ilyen szokás gonosz szemantikai poént játszhat. És a lényeg az, hogy a HTML5-szerzők javasolják a használatát kiemelni a szövegrészleteket az olvasó figyelmének felhívása érdekében, a szöveg vagy az intonáció jelentőségének növekedése nélkül A specifikáció példákat ad a jelölés használatára kulcsszavak dokumentumban

      A frobonitorés barbinátor alkatrészeket megsütjük.

      És vezet (az újságírás cikkének első bekezdése)


      A kiscicákat kedvtelésből tartott nyúl "fogadta"


      Hat elhagyott cica talált egy váratlan új anyafigurát - egy házinyulat.


      Melanie Humble állatorvosi nővér elvitte a háromhetes kiscicákat aberdeni otthonába.


      Viszont , mint korábban, tartalmának megnövekedett értékét jelenti.

      vs.

      Mostantól olyan szöveget tartalmaz, amely kiemelkedik az általános környezetből, de nincs érzelmi konnotációja. Szerintem, logikus azt használni, ahol a tipográfiai hagyomány dőlt betűt javasol (például idegen nyelvű szavak, kifejezések stb.)

      Per aspera ad Astra- latinból lefordítva a mondás jelentése: "Tövéken keresztül a csillagokig".

      ugyanez azt jelenti, hogy hangsúlyos hangsúlyt, érzelmi hangsúlyt kell fektetni a szöveg adott szakaszára. Ez az eset, amikor a beszédben hanggal emeljük ki a szavakat (intonáció, hangerő stb.)

      Végrehajtani ez lehetetlen, irgalmazz.

      Gondosan olvassa el a szerződést!

      „Kis szövegű szöveg” (jogi formális információ, például vállalati licenc vagy jogi cím stb.), Általában egy olyan osztályú elemet jelöltünk meg, amely kisebb betűtípust állít be a vizuális felhasználói ügynökökben . Most egy új régi jelent meg arzenálunkban. szemantikus elem - .

      Holyvar kb

      Korábban nem volt más, mint áthúzott szöveg. Most relevanciáját vesztett információkat mutat be.
      Van is tételünk , amelyet a vizuális felhasználói ügynökök alapértelmezés szerint áthúzott szövegként dolgoznak fel. Ez a dokumentumban bekövetkezett változásokat jelenti, és első pillantásra céljuk ugyanaz lehet. Van azonban itt egy finom pont. Vegyünk egy példát egy webáruház termékoldalára.
      Két árat tud felmutatni, amelyek közül az egyik áthúzva van. Elemmel jelöljük ... Ez azt jelenti, hogy a régi ár elvesztette relevanciáját (nem számít, mikor volt, maga a tény is fontos). Hogyan lehet ellenőrizni, mi nem ? implikálja a dokumentumban végrehajtott változtatások(ami számít, az az valamikor a dokumentumot megváltoztatták). Esetünkben az új dokumentum már lényegtelen információkat tartalmaz.

      Új szemantika és régi doctype

      Ha valamilyen ismeretlen okból nem tudja lecserélni a doctype-et egy újra, és formálisan be kell állítania a HTML 4.01-be - ne essen kétségbe. Használjon régi új elemeket új jelentéssel és idővel köszönetet mond magának. Talán valaki azt mondja, hogy ez helytelen, de végül is ezek az elemek, kivéve nem is érvénytelenek. Ezenkívül a HTML5-et a visszamenőleges kompatibilitás szem előtt tartásával tervezték, és ugyanez vonatkozik a régi elemek új szemantikájára. Semmi sem változott radikálisan, csak egy szemantikus borsot adtak hozzá.