Attribútumok és fejlécek HTML-ben. Tag Content Alignment Tartalmat szúr be a kiválasztott objektum tartalma elé. előtt() metódus a jQuery-ben
Ahogy korábban ígértem, ebben az oktatóanyagban megtudhatja, hogyan lehet vízszintesen igazítani bármely HTML-címke tartalmát az oldalon az elavult igazítási attribútum használata nélkül. Ahogy azt sejthette, ismét stílusokat (CSS) fogunk használni, vagy inkább kedvenc stílusattribútumonkat.
Tehát egy HTML-elem tartalmának igazításához a következő értékek egyikét kell hozzárendelnie a style attribútumhoz:
- text-align:center- Igazítsa az egyes sorokat egy elem, például egy bekezdés közepéhez.
- text-align:left- Minden sor egy síkban van az elem bal oldalával (ez az alapértelmezett).
- text-align:right- Minden vonal a jobb oldalhoz van nyomva.
- text-align:justify- Azonnal igazítsa az elem bal és jobb oldalához. Elmagyarázza. Jellemzően egy elemnek, például egy bekezdésnek, a szöveg egyik oldala mindig sík, a másik oldala pedig „szakadt”, mivel a sorok hossza kissé eltérő. És ha a text-align:justify értéket használjuk, akkor minden sor egyenletesen oszlik el szélességben. Ha szükséges, a böngésző további szóközöket ad a szavak közé, és a sor első és utolsó szava mindig a megfelelő oldalra kerül, így a blokk mindkét oldalon egyenletes.
Példa a címketartalom igazítására
Középső cím.
Középső bekezdés.
Eredmény a böngészőben
Középső cím.
A bekezdés szövege jobbra van nyomva.
Középső bekezdés.
Általában a vízszintes igazítás csak a blokkcímkékre és táblázatcellákra vonatkozik (erről később). Bár ezzel szemben hiába próbálkozol, beépítettre (inline) nem tudod alkalmazni. Miért? Emlékszel, nemrég megtudtuk, hogy egy soron belüli elem szélessége megegyezik a tartalmával? Ennek megfelelően kiderül, hogy ennek a tartalomnak egyszerűen nincs hova igazodnia, és a böngésző egyszerűen figyelmen kívül hagyja az Ön "művészetét". :)
Házi feladat.
- Hozzon létre egy címsort a cikkhez, annak két szakaszához és egy alszakaszhoz az első részben. És legyen a cikk címe az oldal közepén.
- Állítsa az egész oldal betűtípusát Arial-ra, az összes címsort pedig Times-ra, és hagyja, hogy azok dőlt betűvel legyenek szedve.
- Állítsa a cikk címének szövegszínét #FF6600-ra, a szakaszok színét #6600FF-ra, és hagyja változatlanul az alszakaszt.
- Mindegyik címsor alá írjon egy bekezdést, és mindegyik szövege legalább három sort foglaljon el böngészőben.
- Igazítsa a második bekezdést középre, a harmadikat jobbra, a negyediket pedig mindkettőhöz.
Folytatjuk a HTML tanulmányozását. Ebben az oktatóanyagban megvizsgáljuk a HTML-oldalak fejléceit, mik azok a fejlécek, hogyan kell helyesen használni, és mikor használhatók. A bekezdéseket is elemezzük, hogy máris meg tudja tölteni az oldalát szöveggel, de ami a legfontosabb, jól csinálja.
Ha még nem olvastad az első cikket, itt megtalálod:
- 1. lecke. Mi az a HTML?
Elmélet és gyakorlat – HTML oldal bekezdései és címsorai
Ma a bekezdésekről és a címsorokról fogunk beszélni. Kezdjük egyszerűen – a bekezdésekkel és azok alkalmazási helyével.
Bekezdések oldalanként
Most adok egy példát arra a kódra, amelyben a bekezdéscímke jelen lesz.
Már az első leckéből emlékszel az alapszerkezetre. Ott leszereltük az alapokat, és megnéztük, mi az a HTML. Ezért arra fogunk összpontosítani, hogy mi van a címkék között.
.
Amikor bármilyen szöveget ír egy oldalra, legyen az csak egy bekezdés vagy egy kis magyarázó sor a kép alatt, ezt a szöveget a címkén belül kell elhelyeznie.
A következő leckékben látni fogja a bekezdések formázásának folyamatát. Most meg kell értenie, hogy nem helyezhet el címkét egy oldalra címke nélkül. Mert a jövőben nehéz lesz néhány egyedi stílust alkalmazni erre a szövegrészre.
Próbálj meg néhány bekezdést írni. Tegyen néhány bekezdést a címkébe, néhányat pedig hagyjon nélküle. És azonnal látni fogja a különbséget. Mert ha ebbe a címkébe írsz egy bekezdést, akkor azonnal behúzás lesz. Most térjünk át az oldal HTML címsoraira.
HTML címsor oldalanként
A HTML dokumentumban szemantika található. Nem a HTML5 technológiáról és annak új címkéiről beszélek. Itt csak a legalapvetőbbeket elemezzük, hogy gyorsan elsajátíthasd a HTML alapjait. A szemantika azt jelenti, hogy a címsorokat, bekezdéseket, táblázatokat és így tovább nem szabad ugyanazzal a címkével létrehozni. Meg lehet csinálni, de a HTML technológia változatosabb, és vannak megfelelő címkék a különböző helyzetekhez. És csak az alapvető címkéket kell elsajátítania, hogy szabadon dolgozhasson a HTML kóddal.
Ezt a kis bevezetőt arra írtam, hogy a bekezdésekhez az Ön által már ismert címkét kell használni. A címsorokhoz azonban olyan címkéket használnak, amelyek az angol "H" betűvel kezdődnek.
Íme a használható fejlécek teljes listája:
Néhány ilyen címkét sokkal gyakrabban használnak. Ezek olyan címkék, mint a h1, h2 vagy h3. Ha valaki már járatos a CSS-ben, akkor értse, hogy a HTML címsor A h3 oldal fejléce úgy alakítható, hogy h1-nek vagy h2-nek is nézzen ki. De az általuk hordozott jelentés, legalábbis a SEO optimalizálás szempontjából, gyökeresen eltérő. Általános szabály, hogy ezeket a címkéken belüli számokat úgy kell érteni, mint az adott HTML-címsor fontossági szintjét. Ezért ezeket az elemeket nagyon gondosan ki kell dolgozni, és a keresőmotorok észreveszik az Ön cikkeit.
Amíg el nem érjük a CSS-t, a böngészőkben alapértelmezés szerint beállított címsorstílusokat fog látni. Ha egyesével beilleszti ezeket a címkéket, és beleír egy kis szöveget, a következőket fogja látni:
A keresőrobotok számára fontos a címsorok használata is az oldalon. Vannak bizonyos szabályok, amelyeket könyvünkben olvashat − PDF könyv a helyszínen promóció.
Miután mindent áttanulmányoztunk, azonnal belemegyünk a kódba, és megpróbálunk mindent saját kezűleg megírni. Ez a leggyorsabb módja bármely programozási nyelv elsajátításának. De a HTML technológia sokkal könnyebb, mint bármely programozási nyelv, így bárki kitalálhatja. Így jobban fog emlékezni a címkékre.
Oktatóvideó – HTML oldal címe? (gyakorlat)
Vizuális videó az alábbi címkékkel való munka példájáról:
Házi feladat
D/W: példaként írjon egy rövid szöveget, amely 5-7 bekezdésből és 2-3 különböző címsorból áll.
Gyakoroljon többet a bekezdésekben és a HTML oldalcímekben!
www.sitehere.ru
Hogyan készítsünk táblázatot HTML-ben
Minden táblázat sorokat és oszlopokat tartalmaz. Ezek viszont szöveget és képet is tartalmazhatnak.
Ha táblázatot szeretne hozzáadni az oldalhoz, használja a címkét
A sorok és oszlopok meghatározása címkék segítségével történik
táblázat sorai (
Készítsünk egy praktikus táblázatot, amely egy sorból és négy oszlopból fog állni. Meg kell jelölnünk a táblázat elejét (
| ), a sor vége ( |
Eredmény:
Most használjuk a címkét
Eredmény:
A táblázat szélességét 400-ra állítottam, és amint láthatja, az első és a harmadik cella félkövér és középre igazított. A többi a bal oldalon. Azt javaslom, hogy mindig szánjon elegendő időt a kód formázására, hogy ne keveredjen össze. Egy kis asztalnál ez talán nem játszik nagy szerepet, de egy nagyban...
Beszéljünk egy kicsit többet a szélességről, mivel már említettem. A táblázat szélességét a szélesség attribútum határozza meg, a magasság - magasság. Így nem csak a táblázat szélességét és magasságát, hanem a cellák méretét is módosíthatja (mind bele kell illeszkednie a táblázatba, különben a böngésző nem fogja megérteni, hogy mit akar tőle).
Ezek az értékek (szélesség és magasság) pixelben, százalékban vannak megadva. Hagyhatja így, ne írjon semmit, a böngésző azt fogja gondolni, hogy túl lusta volt a „px” kifejezéshez, és a számot pixelnek tekinti.
Nos, ha egy vagy több táblázatcella tartalmát szeretné igazítani, használja az igazítás attribútumot a balra, középre, jobbra értékekkel. Ez vízszintes igazítás, de van függőleges igazítás is, és van egy külön attribútuma - valign, amely a következő értékeket veheti fel: alapvonal (függőleges igazítás pontosan az alapvonal mentén), alsó (az alsó él mentén), közép (cella) az értékek függőlegesen lesznek igazítva középen, felül (a felső él mentén). Alapértelmezés szerint a böngészők a cellákat középre (középre) igazítják.
Növelje meg az asztal keretét (szegélyeit), és változtassa meg a színét
Talán észrevetted, már megmutattam, hogyan kell dolgozni az asztal keretével és szélességével. Általában alapértelmezés szerint a táblázat mindig keret nélkül jelenik meg a böngészőben, és ez nem mindig kényelmes. Ezért:
Egyetértek, valahogy nem nagyon. De ez nem jelent problémát azoknak, akik már ismerik a HTML border attribútumot, amit a bejegyzés elején a példákban használtam.
Ha csak 1 attribútumot ad hozzá, a helyzet jobb lesz:
Olyan, mint az Excel! Képzeld el, hogy a cellák nem oszthatók fel vonalakkal (rács)? Hát horror. De mi történik, ha a határt 10-re állítja?
Amint látható, a keret csak a táblázat külső szegélyét és keretét érinti, megváltoztatva a külső keret szélességét, miközben a táblázatcellák közötti határokat változatlannak hagyja.
Változtassuk meg ennek a szegélynek a színét, mert ehhez is van egy attribútum - bordercolor. Állítsa be az értékét "d3d3d3"-ra. Eredmény:
Hogyan lehet behúzni egy táblázatot
A táblázatban a behúzások is szükségesek az „olvashatóság” növelése érdekében, valamint a cellaszegélyek. Kitöltés létrehozásához szükségünk van a "cellspacing" attribútumra. Továbbra is a 4x4-es táblázatunkkal fogok dolgozni, ezt az attribútumot alkalmazva rá. Frissítem a kódot (csak egy sort írok be, nehogy összezavarjam a bejegyzést):
Eredmény:
Ezek voltak a cellák külső oldalán lévő bemélyedések. De van egy hasonló attribútum a cellákon belüli kitöltés beállítására - cellpadding, most azt is egyenlővé teszem 10-zel, és látni fogod, hogyan nőtt a távolság a cella tartalmától a határaiig (le kellett csökkentenem a cellák számát, így hogy az asztal ne nőjön túlzottan). A kód:
Eredmény:
Most eltávolítjuk a "cellatávolságot", és csak a "cellapadding"-ot hagyjuk meg. Eredmény:
Így kitaláltuk, hogyan hozhatunk létre behúzásokat a táblázatban, és hogyan kezelhetjük őket. Bírság! Ha érdekel, hogyan kell sortörést csinálni, akkor ez itt van megírva.
Hogyan lehet helyesen egyesíteni a cellákat egy táblázatban
Vannak speciális attribútumok is a táblázat celláinak egyesítésére. Ezek a "colspan" és a "rowspan". Az első (colspan) egyesíti a cellákat oszloponként (vízszintesen), a második (sorspan) - soronként vagy függőlegesen. Csatlakozzunk valamihez a táblázatunkhoz.
Tessék óvatosan! A cellák egyesítésénél csökkentenie kell a számukat az attribútum paramétereiben megadott számmal (mínusz 1). Ha létrehoz egy táblázatot HTML-ben, egyesíti a cellákat anélkül, hogy törölné a feleslegeseket, akkor a webhely megy. Kettőt egyesítünk - egyet törölünk. Hármat egyesítünk - kettőt törölünk. Stb.
Oszlopos vagy oszlopos cellák egyesítésénél egy cellát kell törölni! És ezt annyiszor végezze el, ahány cellát egyesít. Most mutatok egy példát.
Oszlopos vagy oszlopos cellák egyesítésénél egy cellát kell törölni! És ezt annyiszor végezze el, ahány cellát egyesít.
Most mutatok egy példát. Íme az aktuális táblázatunk:
Egyesítsük az „1 és 2”, „5 és 9”, „4, 8, 12”, „6 és 7” számú cellákat. Nézd, milyen klassz lett, én magam sem számítottam rá!
A társulás elve ez.
Az 1-es és 2-es számú cella vízszintes összevonásakor az elsőbe a „colspan =” 2 ″ értéket kell írni, a második tartalmát az elsőbe kell elhelyezni (egyesítjük), a második cellát pedig törölni kell (vagy el kell rejteni a HTML-ből, mint Megtettem – később megmutatom.)
A 4-es, 8-as, 12-es számú cellák függőleges egyesítésekor az első cellába (4-es) be kell írni a „sorspan =” 2 ″ ”-t, a többi tartalmát pedig törölni kell, miután az egyesített cellába helyeztük.
Itt van a kód, amit kitaláltam. A cellákat az áttekinthetőség kedvéért elrejtettem (hogy könnyebben érthető legyen), de törölheti is őket.
Remélem érthetően elmagyaráztam és jó példát hoztam.
Hogyan készítsünk fejlécet egy táblázathoz
Ha egy táblázatnak címet szeretne adni - használjon címkéket
