Tegyen különbséget az univerzális és a nem univerzális tulajdonságok között. Az univerzálisak szinte minden címkére alkalmasak, míg a nem univerzálisak egy vagy több, de nem mindegyikre...

Az attribútum a címkén belül az értéke után, de a záró szögletes zárójel elé kerül. Először magát az attribútumot helyezzük el, majd az egyenlőségjelet, majd magát az értéket idézőjelben. Ez így néz ki:

Szöveg

Mi következik ebből a példából? Megnyitottunk egy bekezdést, és a címkén belül elhelyeztük az align attribútumot, amely a szöveg igazításáért felelős. Ezután letesszük a "=" jelet, ami azt jelenti, hogy értéket rendelünk ehhez az attribútumhoz. A továbbiakban idézőjelbe ezt az értéket írjuk. Ebben az esetben ez a "közép" . Ez azt jelenti, hogy a szöveg ebben (és csak ebben!) bekezdésben középre kerül. Próbáld ki magad.

De ne felejtsd el megnézni az oldalt. htmlbook. Biztosan megtalálod, hogy mihez mi illik. Ez csak egy asztali referencia minden webfejlesztő, és még inkább kezdő számára.

Igazítsa

Amint azt már megértette, ez az attribútum szövegigazítást jelent. Általában azokban a címkékben kerül elhelyezésre, amelyek magáért a tartalomért (szöveg, képek stb.) felelősek. Általában a fejlécekbe helyezheti (

,...,

), bekezdésekben (

), képek , blokk elem (

).

Lehetséges attribútumértékek:

• balra - balra igazítás (alapértelmezett)
• jobb - jobb igazítás
• közép-közép igazítás
• indokolás – teljes szélességben igazítás

Próbáljon meg gyakorolni, és nézze meg, hogyan fog megváltozni az elemek helyzete.

Cím

Ismerős név, igaz? Igazán. Van egy ilyen cédula, és mi közé tesszük És . De most konkrétan az attribútumról beszélek, és szinte minden címkéhez illik, mivel univerzális. És szükséged van rá tippként lebegéskor. És a lényeg az, hogy ezt a célzást te magad írod. Valahogy így néz ki:

Mennyi az 5-3?

Mit látunk itt? Az elején megnyitjuk a bekezdést, majd magát az attribútumot írjuk elő, és a „Nos, miért vagy hülye? 2 lesz. Ezután megírjuk a megjelenített szöveget, majd a végén bezárjuk a címkét

.

Mi lesz ezután? Mentse el a dokumentumot, és nézze meg saját szemével. Amikor a kurzort a szöveg fölé viszi, egy eszköztippnek kell megjelennie.

Több érték

Egy címke tetszőleges számú attribútumot tartalmazhat. A lényeg az, hogy megfelelnek ennek a címkének. Íme egy példa az Ön számára:

Tartalom

Amint látja, itt minden nagyon egyszerű, egyetlen címkébe kell beírni az összes attribútumot szóközzel elválasztva. Tól től ezt a példát látjuk, hogy a tartalom jobbra lesz igazítva, és ha fölé viszi az egérkurzort, megjelenik egy eszköztipp. Minden egyszerű. Remélem minden világos?

Nos, most térjünk vissza a Lukomorye-hoz, amit az utolsó leckében tettünk meg.

Élő példa

• Igazítsa a dokumentumban található összes szöveget a „Lukomorye” szöveghez középen (a címsorokkal együtt),
• Az első szint fejlécébe tegye a következőt: „A mű szerzője A.S. Puskin"

Ha nem rendelkezik az előző lecke kitöltött fájljával, akkor vegye elő, és tegye le az összes szükséges attribútumot, hogy minden a feladatnak megfelelően alakuljon.

És a hagyomány szerint kezdetben mindent magad csinálj. És ha nem működik, nézze meg az alábbiakban leírt lépéseket.

Ezt követően elmentjük a html dokumentumot és lefuttatjuk. Nézzük meg, mi van. Minden rendben van? Szerintem jól kell lenned. De mégis úgy érzem, hogy sokan belefáradtatok abba, hogy minden egyes négysorba jellemzőket írjatok le. Megmutatom, hogyan könnyítheti meg ezt a folyamatot.

Ha ugyanazt az attribútumot kell elhelyezni valamelyik nagy szegmenshez, akkor a címke segít ebben.

. A DIV csak egy üres blokkelem, amely valamilyen körbetekerhető konténerként szolgál. Ide különböző attribútumokat helyezhet el, hogy egy közös töredékre vonatkozzon. És ha az attribútumot a teljes dokumentumra szeretné alkalmazni, akkor általában beírhatja a fő címkébe .

Általánosságban elmondható, hogy ebben az esetben nem kell az align="center" attribútumot minden címkére elhelyezni. Csak rakni kell

a fejléc elé, és zárja be a gombbal

az egész szöveg végén. Hát bent

állítsa be az align="center" , de csak egyszer. Véleményem szerint sokkal gyorsabb és kényelmesebb, és az eredmény ugyanaz.

Nos, hogyan? Érted az általános elvet? Folytatjuk a további kutatásokat. A lényeg az, hogy megértse a címkézés és az attribútumok alapelvét. Ha igen, tegye fel kérdéseit. Szívesen válaszolok nekik.

Nos, a webhely létrehozásának elvének teljes értékű képzéséhez javaslom, hogy nézzen meg egy kiváló videó tanfolyamot " HTML5 és CSS3 nulláról profira Ott megtanulhatod a HTML-t, CSS-t, megtudhatod, hogyan készíts el névjegykártyás oldalakat, blogokat és még online boltokat is. A kurzus egy kezdő webfejlesztő számára csak halott.

Nos, mára végeztem. Remélem tetszett a cikk és hasznosnak találtad. Ne felejts el feliratkozni a blogom frissítéseire, hogy naprakész legyél a legérdekesebb dolgokkal, és ne maradj le új leckékről. Nos, ma elköszönök tőled. Sok sikert kívánok az anyag elsajátításához. Viszlát!

Üdvözlettel: Dmitrij Kostin.

Böngésző	internet böngésző			Netscape			Opera			szafari	Mozilla	Firefox
Változat	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Támogatott	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen	Igen

Leírás

Címke egy tároló a betűtípus jellemzőinek, például méretnek, színnek és betűtípusnak a megváltoztatásához. Bár ezt a címkét továbbra is minden böngésző támogatja, elavult, és a stílusok javára el kell hagyni.

Szintaxis

Szöveg

Záró címke

Kívánt.

Lehetőségek

color Beállítja a szöveg színét. face Meghatározza a betűtípus arcát. size Meghatározza a betűméretet hagyományos mértékegységekben.

1. példa: Címke használata

P Ennek a mondatnak az első betűje Arialban van, pirossal kiemelve és kinagyítva.

Címkeparaméterek leírása

COLOR paraméter

Leírás

Beállítja a tárolóban lévő szöveg színét .

Szintaxis

...

Érvek

A színérték kétféleképpen állítható be.

1. Nevével

A böngészők egyes színeket név szerint támogatnak.

2. Hexadecimális érték szerint

A színek megadására hexadecimális számokat használunk. A hexadecimális rendszer, a decimális rendszertől eltérően, ahogy a neve is sugallja, a 16-os számon alapul. A számok a következők lesznek: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. A 10 és 15 közötti számokat latin betűk helyettesítik. A hexadecimális rendszerben a 15-nél nagyobb számok két szám egyesítésével jönnek létre. Például a 255 decimális szám megfelel a hexadecimális FF számnak. A számrendszer definíciójában való félreértések elkerülése érdekében azelőtt hexadecimális szám tegye a # hash szimbólumot, például #666999. A három szín – piros, zöld és kék – mindegyike 00 és FF közötti értéket vehet fel. Így a szín megjelölése három komponensre oszlik #rrggbb, ahol az első két karakter a szín piros összetevőjét jelöli, a két középső a zöldet, az utolsó kettő pedig a kéket.

CSS analóg

Alapértelmezett érték

A böngésző alapértelmezett színe.

FACE paraméter

Leírás

Az arc paraméter a szöveghez használt betűtípus beállítására szolgál. Több betűtípusnév is megadható, vesszővel elválasztva. Ebben az esetben, ha az első megadott betűtípus nem található, a böngésző a következőt használja a listában.

Szintaxis

...

Érvek

Tetszőleges számú betűtípus neve vesszővel elválasztva. Univerzális betűtípuscsaládok:
serif - serif betűtípusok (antik), például Times;
sans-serif - serif betűtípusok (sans-serif vagy groteszk betűtípusok), tipikus képviselője az Arial;
cursive - cursive fonts;
fantázia - dekoratív betűtípusok;
monospace - monospace betűtípusok, a család minden karakterének szélessége azonos.

CSS analóg

Alapértelmezett érték

Az alapértelmezett betűtípus a böngészőben.

SIZE paraméter

Leírás

Z beállítja a betűméretet hagyományos mértékegységekben 1-től 7-ig. Az alapértelmezetten használt átlagos méret 3. A betűméret megadható abszolút értékként (például size="4" ), vagy relatív értékként (például , size="+1" , size="-1" ). Ez utóbbi esetben a méret az alaphoz képest változik. A betűméretet nem csak az adott méretparaméter befolyásolja, hanem a betűtípus megválasztása is. Például az Arial betűtípus nagyobbnak tűnik, mint a Times, a Verdana betűtípus pedig valamivel nagyobb, mint az Arial betűtípus. Vegye figyelembe ezt a funkciót a betűtípus és annak méretének kiválasztásakor.

Szintaxis

...

Érvek

Egy egész szám 1 és 7 között, vagy módosítsa az értéket felfelé vagy lefelé a + és - szimbólumok segítségével.

Elem

Most már tudja, hogy címkék segítségével szabályozhatja a képernyőn megjelenő szöveg méretét És . És hogyan tud egy programozó más betűtípus paramétereket megváltoztatni? Erre való az irányelv. .

Mint ismeretes, a HTML szabványban a betűméretet feltételes pontok jelzik, és összesen hét van belőlük. Azonban nem minden böngésző érti egyformán a pont kifejezést. Például amikor egy dokumentumot Microsoft Internet Explorerben jelenít meg, az összes betűtípus mérete eltérő, kivéve a 2. és 3. elemet - azonos magasságú betűtípussal jelennek meg, amely megegyezik az alapértelmezett értékkel, és a felhasználótól függ. böngésző beállításai. A Netscape Navigatorban a 4-es és az 5-ös elem pontosan megegyezik, valamint a b és a 7-es, magasságuk nagyobb, mint a 3-as elem, ami a normál betűméret.

MEGJEGYZÉS Vegye figyelembe, hogy egyes böngészők, például a Microsoft Internet Explorer, lehetővé teszik a HTML-dokumentumok részeként megjelenő szöveg testreszabását a böngésző alapértelmezett értelmezője által biztosított betűméret módosításával. Ez azt jelenti, hogy az elem paraméterei , valamint más, a betűméretet szabályozó címkék a felhasználói beállításoktól függően változhatnak. Ugyanezen okból lehetséges a webböngészőben való megtekintésre optimalizált oldal elrendezésének megszakítása. alapbeállítások. Ezt elkerülheti, ha minden dokumentumelemet egy láthatatlan táblázatba foglal, amelynek szélessége pixelben van megadva.

BAN BEN Általános nézet címkebeviteli szintaxis alábbiak szerint:

szöveg

A FACE attribútum értéke a címkézett szöveg megjelenítésére használni kívánt betűtípus neve. . Ha például az "érték!" paraméter helyett az "érték!" az adott példában az "Arial" címkével helyettesíti , a szöveg az adott betűtípussal jelenik meg.

FIGYELEM Ne feledje, hogy a webhelylátogató számítógépére telepített betűkészletek eltérőek lehetnek, és ha megadja a címke FACE attribútuma a felhasználó rendszerében nem található betűtípus, a felhasználó monitorán megjelenő szöveg olvashatatlanná válik. A szövegek végfelhasználói böngészőkben történő megjelenítése során előforduló hibák elkerülése érdekében csak a legtöbb böngészőhöz mellékelt szabványos betűtípusokat használja: Arial és New Times Roman. És jobb, ha ezt az attribútumot teljesen elhagyja, lehetővé téve a böngésző számára, hogy helyettesítse azt a betűtípust, amelyet alapértelmezés szerint használ a kód értelmezésekor.

A MÉRET attribútum azt a betűméretet jelzi, amelyben a szöveget meg kell jeleníteni. Ennek az attribútumnak a paramétere, amelyet példánkban "érték2"-nek jelölünk, abszolút vagy relatív értékkel is leírható. Az abszolút érték azt jelenti, hogy paraméterként egy 1 és 6 közötti egész számot használunk, amely a betűtípus magasságát pontokban jelzi. A plusz vagy mínusz egész számmal jelölt relatív érték (például +2 vagy -1) a böngésző alapértelmezett betűméretéhez hozzáadandó vagy abból kivonandó pontok száma. Igen, rekord azt jelzi, hogy az ilyen címkével jelölt szöveg mérete egy ponttal nagyobb lesz, mint a dokumentum normál szövege.

A COLOR attribútum értéke helyett vagy a kívánt szín numerikus kódja, vagy az ezt a színt jelölő karaktercímke kerül helyettesítésre.

Nyilvánvalóan a címke használatakor bármely attribútuma elhagyható. Példa egy ilyen parancs írására a következő HTML-kódsor:

kivonat

FIGYELMEZTETÉS Ne feledje, hogy néhány régebbi böngésző nem támogatja az irányelvet . Köztük van egy Lynx nevű szövegböngésző UNIX-kompatibilis platformokhoz.

Tartalom

Úgy tűnik, miért kell tudnia a szöveges HTML-címkéket, ha most szinte minden adminisztrációs panelen van egy kényelmes, amely automatikusan beállítja őket?

Az a tény, hogy a webhelyen található tartalom formázása alapvetően különbözik az irodai alkalmazásokban végzett munkától. Itt nem elég csak vonzó megjelenést kölcsönözni a szövegnek, hiszen nem csak a weboldal megjelenítése, hanem a keresőkben való népszerűsítése is a megfelelő kialakítástól függ.

HTML címkék és attribútumok: Szintaxis alapjai

Minden szövegnek van rejtett kód, amely "elmagyarázza" a számítógépnek, hogy mit és hogyan kell megjeleníteni a képernyőn. Minden információt univerzális elemkészlet segítségével rögzítenek.

Valójában a szöveghez tartozó HTML-címkék olyan parancsok, amelyek bizonyos blokkokat adnak hozzá az oldalhoz, vagy megváltoztatják azokat. kinézet. A helyes beviteli formátum így néz ki:

Kérjük, vegye figyelembe, hogy nincs minden címke párosítva. Például,
(sorkihagyás) ill

---

(vízszintes vonal hozzáadása) egyáltalán nem kell bezárnia.

Miért nem másolhat cikkeket a Wordből és más programokból a webhelyszerkesztőbe?

Bár modern irodai programok ugyanazokat a HTML címkéket használja a szöveghez, az esetek 99%-ában a natív kód nem alkalmas weboldalakra. Még akkor is, ha a dokumentum normálisan jelenik meg magában az alkalmazásban, a formázás tévedhet, ha beilleszti a webhelyre. Ezen túlmenően, mivel egy nagy szám extra címkék és attribútumok a keresőmotorok nem tudják megfelelően elemezni az oldal tartalmát. Ez viszont megnehezíti az erőforrás népszerűsítését.

Ahhoz, hogy tiszta és releváns kódot kapjon, először meg kell tisztítania a szöveget a által generált HTML-címkékből rendszeres szerkesztő. Ennek többféle módja van:

1. „Futtassa” a cikket a Jegyzettömbön keresztül, és csak ezután illessze be a webhelyre. Az alkalmazás törli az összes HTML-t, így ezután újra kell formázni a szöveget (a szerkesztő eszközökkel vagy manuálisan).
2. Írjon és publikáljon cikkeket a LiveWriteren keresztül. A népszerű blogszerkesztő azonnal generálja a megfelelő kódot. És egy külön lapon láthatja, hogyan fog kinézni a szöveg az oldalon.
3. Használja a HTML Cleanert. Ez az online szolgáltatás nem semmisíti meg a teljes kódot, csak a szükségtelen töredékeket. A szűrők segítségével kiválaszthatja, hogy mely címkéket kívánja megtartani. Itt van egy erős vizuális szerkesztő olyan formázáshoz, amely már optimalizált parancsokat ad a kódhoz.

bekezdések

Ez az elem szinte minden cikkben megtalálható. Minden bekezdést egy ilyen tárolóban kell elhelyezni - ez leegyszerűsíti a formázást, és lehetővé teszi, hogy a webhely minden oldalán egyetlen stílust tartson fenn. A kényelem kedvéért a címke

mindig írj vele új sor.

igazítás

A „Text Alignment” önálló HTML-címke már régóta elavult. Ehelyett az ALIGN általános attribútum jött létre. A szövegblokk pozíciójának megváltoztatásához az oldalon ki kell választania a 3 érték egyikét - KÖZÉP, JOBB vagy BAL. Hasonlóképpen beállíthatja az igazítást más elemekhez, például a címsorokhoz.

Bizonyos helyzetekben más címkéket használnak az igazításhoz, például egy elem segítségével pozícionálhat

.... Miért hasznos egy külön címke? Az attribútumtól eltérően bármilyen tartalommal működik, beleértve a fényképeket, videókat, vakut stb.

Címsorok és alcímek

Az alcímrendszer lehetővé teszi egy logikus tartalomstruktúra létrehozását. Ha a szöveget szemantikai blokkokra osztják, az olvasó sokkal könnyebben képes koncentrálni és befogadni az új információkat. A keresőmotorok a címsorokat is elemzik, hogy megértsék, milyen lekérdezések esetén reklámozzák az oldalt. Éppen ezért a SEO szakértők azt javasolják, hogy tematikus kulcsszavakat használjunk bennük.

A HTML hat szintű alcímeket használ, től kezdve

előtt

. Ebben a rendszerben világos hierarchia van:

• ...

  . fő cikk, termék az online áruházban stb.). A szövegnek csak egy lehet

  . Általában a fő kulcsszót tartalmazza.

• ...

  . A második szint alcímei a szöveget szemantikai blokkokra bontják. Például, ha laptopokat értékel, több dolgot is megtehet

  különböző modellnevekkel.

• ...

  . A harmadik szintre akkor van szükség, ha a szöveg kettő között van

  is kisebb tömbökre oszlik. Példánkban ezek értékelési kritériumok lehetnek - "Teljesítmény", "Memória", "Videókártya" stb. minden modellhez.

• ,

  ,

  . A gyakorlatban rendkívül ritkák. De az általános elv ugyanaz - azokat egy felső szintű feliratú blokkba kell „beágyazni”.

Ügyeljen a helyes hierarchia fenntartására. Visszatérve a példánkhoz, ez azt jelenti, hogy nem adhatja meg azonnal a modellek nevét

vagy

. És még inkább, használjon különböző szintű alcímeket a jelentésükben homogén blokkokhoz (például válasszon ki egy laptopot, amely az utolsó helyet foglalta el az értékelésben a

).

És itt van egy diagram, amely segít azonnal megérteni és emlékezni a HTML címsorainak helyes szerkezetére.

Listák

Minden felsorolást és utasítást a legjobb listaként formázni speciális HTML-címkék használatával ( tipikus hiba- csak néhány bekezdés

amelyek kötőjellel vagy számmal kezdődnek).

Az ilyen blokkok szerkezete nagyon egyszerű. Először is meghatározzuk a lista típusát - felsorolásjeles vagy számozott.

Minden elem a nyitó és záró címke között található. Minden listaelem új sorban kezdődik, és formátuma . Az elemek száma nincs korlátozva.

Választás és tulajdonságai

Mit lehet megváltoztatni ezzel a betűtípussal és színnel – anélkül, hogy új osztályokat adnánk a CSS-hez. Ez nagyon kényelmes, ha csak egy mondatot vagy töredéket kell kiválasztania.

számos tulajdonsága van:

• arc. Lehetővé teszi a szöveg betűtípusának megváltoztatását. Több lehetőséget is felsorolhat vesszővel elválasztva (Tahoma, Verdana). Ha a felhasználó nem az első betűtípust telepítette, a rendszer egyszerűen az alternatívát használja.
• méret. A szöveg nagyításához vagy kicsinyítéséhez írjon be 1 és 7 közötti értéket az idézőjelek közé.
• szín. A dizájntól függően választhat egyet a standard árnyalatok közül (piros, zöld, kék), vagy megadhatja a választott szín kódját.

Ne használjon a következővel formázott bekezdéseket , alcímek helyett. Jobb, ha ugyanazokat a tervezési lehetőségeket állítja be a megfelelő címkével.

A szöveg kiválasztásának módjai

A monoton szöveg fárasztó, még bekezdésekre bontva is. A figyelem felkeltése és az olvasó érdeklődésének felmelegítése érdekében ajánlatos a legfontosabb pontokat grafikusan kiemelni. Íme néhány parancs, amelyek segítenek ebben a feladatban.

... . Rendkívül népszerű HTML tag. A félkövér szöveg azonnal megragadja a figyelmet, ezért kényelmes a fontos téziseket, tényeket kiemelni segítségével.

Sokan összekeverik a címkéket És . Vizuálisan nincs különbség, de másképp működnek. Az első egyszerűen megváltoztatja a szöveg megjelenését, a második pedig „mutató” funkciót tölt be, és kiemeli a legfontosabb töredékeket (tematikus kulcsszavakatés kifejezések a SEO-hoz).

... . Az elegáns és szigorú dőlt betűk ideálisak tudományos kifejezésekhez, idegen szavakhoz és különféle idézetekhez. Komoly kiadványokban a dőlt szöveg a műalkotások nevét is kiemeli.

... . Talán egyetlen más HTML-címke sem okozott ekkora vitát. A szöveg aláhúzását ritkán használják, mert Ily módon a kiválasztás történelmileg a hiperhivatkozásokhoz kapcsolódott. Ha használ cikkekben kérjük, vegye figyelembe, hogy ez csak rövid töredékekre alkalmas - legfeljebb 1 sor.

... . Egy érdekes címke, amely lehetővé teszi, hogy a reklámban nagyon releváns alkatrészt készítsen - például a régi és az új árak közötti kontraszt hangsúlyozására.

... . A betűméret növelésének legegyszerűbb módja további opciók nélkül.

... . Ugyanazon az elven működik, mint az előző címke. A benne található szöveg a fő szöveghez képest lecsökkent.

^... . Ennek a formátumnak a helyes neve felső index. Ez a címke alapvetően matematikai fokozatokhoz és lábjegyzetekhez készült. Csökkenti a betűméretet és felfelé mozgatja a kijelölt szöveget.

_... . Az alsó index gyakran megtalálható különféle képletekben. A kiválasztott töredék a fő szöveg alatt található.

Szemantikus konténerek

Mivel néhány blokkot sok szövegben találtak, elkezdtek hozzájuk speciális címkéket készíteni. Ez leegyszerűsíti a formázást, mert ha minden tartalomtípusnak megvan a saját stíluskészlete, akkor elég kiválasztani egy szövegrészt, és jelezni, hogy milyen információt tartalmaz.

... . Címke számítógépes kódok hozzáadásához. Nélkülözhetetlen a példákat tartalmazó programozási cikkekben - a parancsok nem hajtódnak végre, hanem egyszerű szövegként jelennek meg.

... . Idézéshez készült – például egy interjú kulcsrészletei.

. A szöveg egy részét egy külön blokkba helyezi át. Alapértelmezés szerint a kijelölés bal oldalán több kitöltés található, de a CSS-ben módosíthatjuk a szöveg méretét, stílusát és színét is.

...

. Kiegészítő címke, amely információkat tartalmaz a szerzőről, beleértve a hivatkozásokat is.

Demarkációs vonal

---

Egy egyszerű kötőjellel meg lehet jelölni egy nagy szakasz logikai végét.

---

nem vonatkozik a páros címkékre. Ez azt jelenti, hogy a záró formátumelemnem szükséges.

A WIDTH attribútummal lerövidítheti az elválasztót, ha megadja a megfelelő méretet képpontokban vagy az ablak szélességének százalékában.

Ha megtanulja, hogyan kell helyesen használni a címkéket a szöveg HTML-ben történő formázásához, akkor nemcsak a cikkek olvashatóságát teszi könnyebbé, hanem javítja a SEO teljesítményét is.