Vonalak és bekezdések

Ez a szakasz leírja a sorokhoz és bekezdésekhez társított HTML-t. Kezdjük az alap <DIV> és <P> címkék.

A < DIV > elem

<DIV>, a blokk szintű elem, egyszerűen meghatározza az oldal tartalom blokkját. A blokk definiálásán túl maga a <DIV> sem tesz semmit. Például a következő kód létrehoz egy <DIV> elemet, benne két bekezdéssel. Ne feledje, hogy <P> elemeket elhelyezhet egy <DIV> elemen belül.

Amitől kapunk:

Az ALIGN attribútum

ALIGN beállítja az <DIV> elem tartalmának igazítását. Mind a négy érték, LEFT, CENTER, RIGHT és JUSTIFY, mind támogatottak. A LEFT az alapértelmezett érték.
Ez a kód az alapértelmezett értéket mutatja:

Amitől kapunk:

A Bekezdés elem

<P> egy új bekezdés kezdetét jelzi. Ezt általában két kocsivisszával adják vissza, egyetlen üres sort hozva létre a két bekezdés között:

Ez előállítja ezt:

Az ALIGN attribútum

ALIGN a bekezdés igazítását jelzi.

Ami ezt előállítja:

A CLEAR attribútum

A CLEAR funkciót néhány böngésző felismeri, és nagyon hasonlóan működik, mint a <BR>. Ez azonban nem szabványos HTML és még mindig széles körben nem támogatott, ezért használja a <BR> -t.

Szükséges a P végcímke?

A W3C azt mondja a </P> -ról: “A végcímke nem kötelező, mivel az elemző mindig arra következtethet.” Ez azt jelenti, hogy egy új <P> az előző <P> (és az előző ).

Minden más blokkszintű elemnek, például a <HR> vagy a <BLOCKQUOTE> elemnek is véget kell vetnie a bekezdés. Ez azonban nem mindig működik így. Néhány böngésző például a táblázat után is igazítja a szöveget. A következő példában az MSIE a “tábla után” részt jobbra igazítja, míg a Netscape balra igazítva teszi:

Az MSIE renderelése	Netscape renderelése

Ha beállítasz egy paragrafus elemhez igazítást vagy más stílus tulajdonságot, akkor a legjobb </P>. Ha soha nem használ beállított stílusokat, akkor általában figyelmen kívül hagyhatja a következőt: </P>.

A témáról további információkat a W3C specifikációiban talál.

Szöveg igazítása

Bármely HTML elem igazítását a text-align stílusszabály használatával állíthatja be. A text-align segítségével beállíthatja az igazítást egy bekezdéshez, a dokumentum egy részéhez vagy akár az egész dokumentumhoz. A text-align segítségével beállíthatja az igazítást balra, jobbra, középre vagy indokoltra.

Tegyük fel például, hogy egy bekezdést akarunk középre állítani.Először létrehozunk egy centeralign nevű stílusosztályt úgy, hogy a következő kódot beillesztjük a dokumentum “szakaszába:

Most bármelyik bekezdést beállíthatjuk a centeralign osztályra, így:

Ami ezt megadja nekünk:

Ugyanazt az osztályt alkalmazhatjuk egy <DIV> elemre a oldal:

Amitől kapunk:

Indokolás

Alapértelmezés szerint , a legtöbb böngésző szaggatott jobb éllel jeleníti meg a szöveget.

Ha azt szeretné, hogy az egész szöveg egyenletes jobb szélű könyvben legyen megjelenítve, használjon egyetlen stílusszabályt. Ha az egész szöveget igazolni szeretné, másolja a következőket: kód i a dokumentum “szakaszába.

Az indoklással az a probléma, hogy sok böngésző megzavarodik azon, hogy hol van az utolsó szövegsor (amit nem szabad indokolt legyen). Például az MSIE 4.x zavaros, ha a szövegblokkot azonnal követi egy táblázat. Ezen a képen vegye észre, hogy a szöveg utolsó sora az “egyik ügynökünk” szót egy teljes sorra húzza:

A helyzet orvoslásához az összes szövegblokkot körbe kell foglalni <P> és </P>:

Most hibás MSIE-vel a dolgok tovább sanely:

Behúzás

A weboldal bekezdések és teljes szakaszok behúzására többféle lehetőség van . A következő néhány szakasz a behúzás négy fő technikáját ismerteti:

• bekezdés behúzása
• az oldal egy részének behúzása
• az egész oldal behúzása
• Minden bekezdés első sorának behúzása

Mielőtt azonban nekilátnánk, érdemes néhány szót ejteni a <BLOCKQUOTE> . Népszerű tévhit, hogy a <BLOCKQUOTE> -t az oldal szakaszainak behúzására kell használni. Ez a meggyőződés abból fakad, hogy a legtöbb vizuális webböngésző idézett szöveget jelenít meg mint behúzott. Ne feledje azonban, hogy a HTML nem formázó nyelv, és kiszámíthatatlan eredményeket ad, amikor megpróbálja egyként használni. Használja a <BLOCKQUOTE> elemet, ha idézett szövegblokkja van, különben használja a következő bekezdésekben leírt technikákat.

Bekezdés behúzása

Stílusok segítségével egyetlen bekezdést behúzhat. Tegyük fel például, hogy egy bekezdést 50 ponttal akarunk behúzni. Először létrehozunk egy behúzott nevű osztályt a következő stílusszabályokkal. Helyezze be ezt a kódot a dokumentum “szakaszába.

Most a bekezdés osztályát behúzottra állítjuk, hozzáadva a CLASS attribútumot a <P> címke:

Ami ezt a behúzott bekezdést adja:

Oldalrész behúzása

Több par behúzása Agraph ugyanazt a stílust fogjuk használni, mint amit az előző példában állítottunk be. Helyezze be ezt a kódot az “oldal szakaszába:

Ezután a behúzott osztályt egy <DIV> element:

Ez egy ilyen behúzott szakaszt ad nekünk:

Az egész oldal behúzása

Ha az egész oldalt behúzni szeretné, állítson be egy stílusszabályt, amely a jobb és a bal oldali kitöltést állítja be az “” elemhez. Például ez a stílus a jobb és a bal oldali kitöltést 100 képpontra állítja be:

Ez a technika népszerű, ha háttérképpel kombinálva használják. Tegyük fel például, hogy azt akarjuk, hogy ez a kép lefutjon az oldal bal oldalán.

Ez a kép 56 pixel széles, ezért állítsuk a kitöltést 60-ra.A következő stílus állítja be a háttérképet, az ismétlést ismétlés-y értékre állítja (csak függőlegesen ismételje meg az oldal bal oldalán lefelé), és a bal oldali párnázatot 60-ra állítja (a megfelelő kitöltést nem állítjuk be).

Így nézhet ki:

Minden bekezdés első sorának behúzása

Az egyes bekezdések első sorának behúzása stílusszabály a szöveges behúzással. Például a következő kód az egyes bekezdések első sorát behúzza 30 ponttal. Másolja ezt a kódot az “oldal szakaszába:

Ez a kód behúzza az egyes <P> elemet, de valószínűleg bosszantó problémába ütközik. Ha olyan vagy, mint a legtöbb tervező, akkor valószínűleg nem teszel P-t az első bekezdés elé vagy egy fejléc közé, például <H1> és az ezt követő szöveg. Sajnos pontosan ezt kell tennie, ha be akarja vonni a bekezdést. A szöveg ezekben a helyzetekben az úgynevezett “névtelen blokkok” része, és nem lehet közvetlenül hivatkozni rá. Behúzáshoz be kell tenni a szöveget egy <P> elembe.

Így például a következő kódnak nincs <P> a fejléc és a szöveg között, így a szöveg nem behúzott:

Amitől kapunk:

Ennek a kódnak <P> van a fejléc és a szöveg között, így a szöveg behúzva van:

A < BR > Elem

<BR> egyetlen szekérrát beilleszt . Míg a <P> egy új bekezdés kezdetét jelzi, a <BR> csak a visszatérést jelenti ugyanabban a bekezdésben. A <BR> rendszerint egyetlen kocsi visszaadással jelenik meg.

Például ez a kód:

Ami ezt előállítja:

Mivel a <BR> nem indít új bekezdést, az összes jelenlegi bekezdésattribútum változatlan marad:

Ami ezt produkálja:

A TISZTULA Attribútum

CLEAR azt mondja, hogy a sortörés beillesztése mellett, ha kép vagy más tárgy van jobbra vagy balra, menjen túl ezen is. Például ez a kód azt mondja, hogy a képet az oldal bal oldalán kell igazítani. Ezután van egy kis szöveg, majd LEFT. A kép után következő szöveg:

Ami ezt produkálja:

Gyere le a Halloween partira! jól érezze magát.
20: 00-tól éjfélig. Viseljen jelmezt, vagy jöjjön saját félelmetes önmaga!

BOTH ugyanaz, mint a ALL, de nem annyi böngészőben támogatott, ezért inkább használja a ALL alkalmazást.

A CENTER elem

Használati javaslat: Használja a <DIV>.

Amitől kapunk:

Ami megegyezik a következővel:

Amit kapunk:

A < HR > elem

<HR> vízszintes vonalat (“vízszintes szabály”) rajzol az oldalra. Ennyi. Ennél az egyszerűbb koncepciónál a vízszintes szabályok meglepően népszerűek. Kezdjük az alapokkal. <HR> nincs végcímke és nincs szükség attribútumokra:

Ez létrehozza ezt a szabályt:

<HR> általában osztást jelez az oldalon. Cucc, mielőtt a szabály egy másik “szakaszban” van, mint az utána lévő cucc. Ezért sok tervező a <HR> logikai címkét, nem pedig elrendezési címkét tekinti.

A NOSHADE attribútum

NOSHADE azt jelzi, hogy a szabályt háromdimenziós helyett laposként kell bemutatni.Hasonlítsa össze ezt a szokásos vízszintes szabályt:

NOSHADE szabállyal:

Amit kapunk:

NOSHADE gyakran használják a SIZE:

Ezt a szabályt állítja elő:

NOSHADE azért népszerű, mert a böngészők általában nem nagyon adják meg a háromdimenziós szabályokat. Valójában sok esetben a szabály ugyanabban a színben jelenik meg, mint a háttér, így szinte láthatatlanná válik.

A SIZE attribútum

SIZE a szabály magasságát jelzi. (Feltételezem, hogy “HEIGHT” -nek hívni egyszerűen túl egyszerű lett volna.) A vízszintes szélességről lásd: WIDTH. Hasonlítsa össze a következő méreteket:

Ez adja meg nekünk ezeket a szabályokat:

A böngészők általában nem tesznek 100-nál nagyobb <HR> -t .

A WIDTH attribútum

WIDTH a szabály vízszintes szélességét állítja be. A méretet kifejezheti pixelben vagy százalékban.

Ezeket a <HR> képpontszélességekkel állítja be:

Ez megadja nekünk ezek a szabályok:

WIDTH általában százalékban vannak kifejezve. Ha százalékos szélességet használ, feltétlenül csatolja az értéket idézetek.

Ezeket a szabályokat állítja elő:

Az alapértelmezett érték 100%. Alapértelmezés szerint a szabály: középre. Egy másik igazítás beállításához használja a következőt: ALIGN.

A százalékos szélességek az o százalékot használják a rendelkezésre álló szélességet, nem pedig az oldal teljes szélességét. Például, ha a szabály egy táblázatban van, akkor a szélesség a tábla cellájának szélességének százaléka.

A táblázat előállítása:

Az ALIGN attribútum

ALIGN beállítja a szabály. Az ALIGN csak akkor hasznos, ha a WIDTH -t is használja.

Adja meg nekünk ezt:

A < PRE > elem

<PRE> az egyik legkézenfekvőbb címke a HTML eszköztárban. A <PRE> “előre formázottként” jelöli a szöveget – az összes szóköz és a kocsi visszatérése pontosan megjelenik, ahogy beírja őket.

Ami ezt előállítja:

<PRE> a szöveg rögzített szélességű betűtípusban jelenik meg, ami azt jelenti, hogy az összes karakter és szóköz a azonos szélességű. A rögzített szélesség megkönnyíti a szöveg elrendezését a kívánt módon, így a <PRE> kiválóan alkalmas a fentihez hasonló “gyors és piszkos” táblázatok létrehozására.

<PRE> NEM készteti a böngészőt a címkék figyelmen kívül hagyására. Továbbra is létrehozhat linkeket és egyéb finomságokat:

Ezt állítja elő:

Amikor elkezdi hozzáadni a jelölést , egyre nehezebb látni, hogyan alakul a szöveg (a címkék egyenletes elosztása, mint a fenti táblázat segít). A <PRE> -et gyakran használják olyan nagy szövegtömbök idézésére, amelyeket nem szeretne “HTML-formázni”, de a “szöveg elronthatja”. Néhány sornál nagyobb tábla esetén hosszú távon általában egyszerűbb a táblakódot használni.

Az “Elem

” megakadályozza a kocsi visszatérését. Például a következő kód egy hosszú sor értelmetlen versét állítja elő:

Ami ezt előállítja:

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:

Ami ezt produkálja:

Az “Elem

is for the situation where you have used a szakaszszakaszok megelőzéséhez szöveget, és akkor azt akarja mondani, hogy “de ITT megtörhet, ha akar”.”nem kényszerít sortörést, csupán megengedi:

Termel:

Miután kitalálta a következőt: div div = = 1969b8507b “> :

Ez adja meg nekünk ezt a bekezdést:

Adam műszaki író, aki a fejlesztői dokumentációkra és oktatóanyagokra specializálódott.