Linjer og afsnit

Dette afsnit beskriver HTML tilknyttet linjer og afsnit. Vi begynder med den grundlæggende <DIV> og <P> tags.

< DIV > Element

<DIV>, en element på blokniveau, definerer simpelthen en blok af indhold på siden. Ud over at definere en blok gør <DIV> i sig selv ikke noget. For eksempel opretter følgende kode et <DIV> -element med to afsnit inde i det. Bemærk, at du kan placere <P> -elementer inde i et <DIV>.

Hvilket giver os:

ALIGN-attributten

ALIGN indstiller justeringen af indholdet af <DIV> -elementet. Alle fire værdier, LEFT, CENTER, RIGHT og JUSTIFY, er alle godt understøttet. LEFT er standardværdien.
Denne kode viser standard:

Hvilket giver os:

Afsnitselementet

<P> angiver starten på et nyt afsnit. Dette gengives normalt med to vognreturer, der producerer en enkelt tom linje mellem de to afsnit:

Hvilket producerer dette:

ALIGN-attributten

ALIGN angiver linjering af afsnittet.

Hvilket producerer dette:

CLEAR Attribute

CLEAR genkendes af nogle browsere og fungerer meget ligesom <BR>. Det er dog ikke standard HTML og understøttes stadig bredt, så brug <BR> i stedet.

Er P-slutmærket påkrævet?

W3C siger om </P>: “Slutkoden er valgfri, da den altid kan udledes af parseren.” Dette betyder, at en ny <P> indebærer slutningen af den forrige <P> (og enhver justering indstillet af den forrige iv id = “bedd0bc64f” ).

Ethvert andet blokniveauelement, såsom <HR> eller <BLOCKQUOTE> skal også slutte Afsnittet. Det fungerer dog ikke altid på den måde. Nogle browsere vil f.eks. justere teksten selv efter en tabel. I det følgende eksempel gengiver MSIE delen “efter bordet” som højrejusteret, mens Netscape gengiver det som venstrejusteret:

MSIEs gengivelse	Netscapes gengivelse

Hvis du indstiller justeringen eller en anden stilegenskab for et afsnitselement, er det bedst at bruge </P>. Hvis du aldrig bruger indstil nogen stilarter, kan du generelt ignorere </P>.

Se W3C’s specifikationer for afsnit for mere information om dette emne.

Tekstjustering

Du kan indstille justeringen af ethvert HTML-element ved hjælp af text-align stilreglen. text-align kan bruges til at indstille justeringen for et afsnit, et afsnit af dokumentet eller endda hele dokumentet. text-align kan bruges til at indstille justering til venstre, højre, center eller retfærdiggjort.

Antag for eksempel, at vi vil centrere et afsnit.Først opretter vi en stilklasse kaldet centeralign ved at sætte følgende kode i “sektionen af dokumentet:

Nu kan vi indstille ethvert afsnit til centeralign-klasse som denne:

Hvilket giver os dette:

Vi kan anvende den samme klasse på et <DIV> -element til at centrere et afsnit af side:

Hvilket giver os:

Begrundelse

Som standard , gengiver de fleste browsere tekst med en skæv højre kant.

Hvis du vil have al tekst gengivet som i en bog med en jævn højre kant, kan du bruge en enkelt stilregel. For at indstille al tekst til berettiget kopier følgende kode i n til “sektionen i dit dokument.

Problemet med begrundelse er, at mange browsere bliver forvirrede over, hvor den sidste tekstlinje er (som ikke burde være berettiget). For eksempel forveksles MSIE 4.x, når en tekstblok straks efterfølges af en tabel. Bemærk i dette billede, at den sidste tekstlinje strækker ordene “en af vores agenter” over en hel linje:

For at afhjælpe denne situation omringes alle tekstblokke med <P> og </P>:

Nu gengiver vores vildfarne MSIE ting mere sundt:

Indrykning

Der er flere måder at indrykke afsnit og hele sektioner på din webside De næste par afsnit beskriver de fire vigtigste teknikker til indrykning:

• Indrykning af et afsnit
• Indrykning af et afsnit på siden
• Indrykning af hele siden
• Indrykning af første linje i hvert afsnit

Før vi begynder, er det dog værd at sige et par ord om <BLOCKQUOTE> Der er en populær misforståelse om, at <BLOCKQUOTE> skal bruges til at indrykke sektioner på siden. Denne tro kommer fra det faktum, at de fleste visuelle webbrowsere gengiver citeret tekst som indrykket. Husk dog, at HTML ikke er et formateringssprog og giver uforudsigelige resultater, når du prøver at bruge det som et. Brug <BLOCKQUOTE>, hvis du har en citeret tekstblok, ellers brug de teknikker, der er beskrevet i de næste par afsnit.

Indrykning af et afsnit

Du kan indrykke et enkelt afsnit ved hjælp af typografier. Antag for eksempel, at vi vil indrykke et afsnit 50 point. Først opretter vi en klasse kaldet indrykket med følgende stilregler. Sæt denne kode i “sektionen i dit dokument.

Nu indstiller vi afsnittets klasse til indrykket ved at tilføje en CLASS-attribut til <P> tag:

Hvilket giver os dette indrykkede afsnit:

Indrykning af en sektion på en side

Indrykning af mere end et par agraph bruger vi den samme stil som vi indstillede i det foregående eksempel. Sæt denne kode i “sektionen på din side:

Så bruger vi den indrykkede klasse i en <DIV> element:

Hvilket giver os et indrykket afsnit som dette:

Indrykning af hele siden

Hvis du vil have hele siden indrykket, skal du indstille en stilregel, der angiver højre og venstre polstring for “elementet. For eksempel indstiller denne stil højre og venstre polstring til 100 pixels:

Denne teknik er populær, når den bruges i kombination med et baggrundsbillede. Antag for eksempel, at vi ønsker, at dette billede skal løbe ned på venstre side af siden.

Dette billede er 56 pixels bredt, så lad os indstille polstringen til 60.Den følgende stil indstiller baggrundsbilledet, indstiller gentagelsen til gentagelse-y (gentages kun lodret ned på venstre side af siden) og indstiller venstre polstring til 60 (vi indstiller ikke den rigtige polstring).

Sådan ser det ud:

Indrykning af første linje i hvert afsnit

Indrykning af første linje i hvert afsnit sæt en stilregel ved hjælp af tekstindryk. For eksempel indrykker følgende kode den første linje i hvert afsnit 30 point. Kopier denne kode til “sektionen på din side:

Denne kode indrykker den første linje i hver <P> element, men du vil sandsynligvis støde på et irriterende problem. Hvis du er som de fleste designere, lægger du sandsynligvis ikke en P før første afsnit eller mellem en overskrift som <H1> og teksten, der følger den. Desværre er det præcis, hvad du skal gøre, hvis du vil have afsnittet indrykket. Teksten i disse situationer er en del af noget, der kaldes “anonyme blokke” og kan ikke henvises direkte til. For at indrykke det skal du sætte teksten i et <P> -element.

Så for eksempel har følgende kode ikke et <P> mellem overskriften og teksten, så teksten ikke er indrykket:

Hvilket giver os:

Denne kode har en <P> mellem overskriften og teksten, så teksten er indrykket:

< BR > Element

<BR> indsætter en enkelt vognretur . Mens <P> angiver starten på et nyt afsnit, betyder <BR> kun en vognretur inden for samme afsnit. <BR> gengives normalt med en enkelt vognretur.

For eksempel er denne kode:

Hvilket producerer dette:

Fordi <BR> ikke starter et nyt afsnit, forbliver alle de nuværende afsnitsattributter de samme:

Hvilket producerer dette:

CLEAR Attribute

CLEAR siger, at ud over at indsætte et linjeskift, hvis der er et billede eller en anden genstand til højre eller venstre, skal du også gå forbi det. For eksempel siger denne kode, at billedet skal være justeret på venstre side af siden. Så er der noget tekst, så LEFT. Teksten efter, der er forbi billedet:

Hvilket producerer dette:

Kom ned til Halloween-festen! har en god ol ‘tid.
20.00 til midnat. Brug et kostume eller kom som dit eget skræmmende selv!

BOTH er det samme som ALL, men er ikke understøttet i så mange browsere, så brug ALL i stedet.

CENTRE-elementet

Anbefaling til brug: Brug <DIV> i stedet.

Hvilket giver os:

Hvilket er det samme som:

Hvilket giver os:

< HR > Element

<HR> trækker en vandret linje (en “vandret regel”) hen over siden. Det er det. For et så simpelt koncept er vandrette regler overraskende populære. Lad os starte med det grundlæggende. <HR> har intet sluttag og kræver ingen attributter:

Hvilket skaber denne regel:

<HR> angiver normalt en opdeling på siden. Ting før reglen er i et andet “afsnit” fra tingene efter. Af denne grund betragter mange designere <HR> som et logisk tag, ikke et layout-tag.

NOSHADE-attributten

NOSHADE angiver, at reglen skal præsenteres som flad i stedet for tredimensionel.Sammenlign denne almindelige vandrette regel:

Med en NOSHADE -regel:

Hvilket giver os:

NOSHADE bruges ofte i forbindelse med SIZE:

Producerer denne regel:

NOSHADE er populær, fordi browsere normalt ikke gengiver tredimensionelle regler meget godt. Under mange omstændigheder præsenteres reglen i samme farve som baggrunden, hvilket gør den næsten usynlig.

SIZE-attribut

SIZE angiver højden på reglen. (Jeg gætter på at kalde det “HEIGHT” ville bare have været for let.) For vandret bredde se WIDTH. Sammenlign nogle af disse størrelser:

Hvilket giver os disse regler:

Browsere vil normalt ikke gengive en <HR> større end 100 .

WIDTH-attributten

WIDTH indstiller regelens vandrette bredde. Du kan udtrykke størrelsen i pixels eller i procent.

Disse <HR> er indstillet med pixelbredder:

Hvilket giver os disse regler:

WIDTH udtrykkes normalt som en procentdel. Hvis du bruger en procentbredde, skal du sørge for at medtage værdien i citater.

Producerer disse regler:

Standard er 100%. Som standard er reglen centreret. For at indstille en anden justering skal du bruge ALIGN.

Procentbredder bruger procenten o f den tilgængelige bredde, ikke den fulde bredde af siden. Hvis reglen f.eks. Er i en tabel, er bredden en procentdel af bordcellebredden.

Hvilket producerer denne tabel:

ALIGN-attributten

ALIGN indstiller justeringen af Herske. ALIGN er kun nyttig, hvis du også bruger WIDTH.

Giv os dette:

< PRE > Element

<PRE> er en af de smukkeste tags i HTML-værktøjskassen. <PRE> markerer teksten som “præformateret” – alle mellemrum og vognreturer gengives nøjagtigt som du skriver dem.

Hvilket producerer dette:

<PRE> tekst gengives i en skrifttype med fast bredde, hvilket betyder at alle tegn og mellemrum er samme bredde. Fast bredde gør det let at lægge teksten ud, som du vil have den, så <PRE> er fantastisk til at oprette “hurtige og beskidte” tabeller som ovenstående.

<PRE> får IKKE browseren til at ignorere tags. Du kan stadig oprette links og andre godbidder:

Producerer dette:

Når du begynder at tilføje markup bliver det sværere at se, hvordan teksten viser sig (afstand jeres tags jævnt som tabellen ovenfor hjælper). <PRE> bruges ofte til at citere store tekstblokke, som du ikke vil “HTMLize”, men en “kan ødelægge teksten. For en tabel, der er større end et par linjer, er det normalt lettere i det lange løb at bruge tabelkode.

“Elementet

” forhindrer en vognretur i at forekomme. For eksempel producerer følgende kode et nonsensdigt af en lang linje:

Hvilket producerer dette:

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:

Hvilket producerer dette:

“Elementet

is for the situation where you have used for at forhindre linjeskift i et afsnit af tekst, og så vil du sige “men du kan bryde HER, hvis du vil”.”tvinger ikke en linjeskift, det tillader kun en:

Producerer:

Efter at have opfundet , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, sådan her:

Hvilket giver os dette afsnit:

Adam er en teknisk forfatter, der har specialiseret sig i udviklerdokumentation og tutorials.