Regels en alinea’s

Deze sectie beschrijft HTML die is gekoppeld aan regels en alinea’s. We beginnen met de basis <DIV> en <P> tags.

Het < DIV > Element

<DIV>, een blokniveau-element, definieert eenvoudig een blok met inhoud op de pagina. Naast het definiëren van een blok, doet <DIV> zelf niets. De volgende code maakt bijvoorbeeld een <DIV> -element met twee alinea’s erin. Merk op dat u <P> elementen in een <DIV> kunt plaatsen.

Wat ons geeft:

Het ALIGN-kenmerk

ALIGN stelt de uitlijning van de inhoud van het <DIV> -element in. Alle vier waarden, LEFT, CENTER, RIGHT en JUSTIFY, worden allemaal goed ondersteund. LEFT is de standaardwaarde.
Deze code toont de standaardwaarde:

Wat ons geeft:

Het alinea-element

<P> geeft het begin van een nieuwe alinea aan. Dit wordt meestal weergegeven met twee regelteruggaven, waardoor een enkele lege regel tussen de twee alinea’s wordt geproduceerd:

Wat dit oplevert:

Het ALIGN-kenmerk

ALIGN geeft de uitlijning van de alinea aan.

Wat dit oplevert:

Het CLEAR-kenmerk

CLEAR wordt door sommige browsers herkend en werkt ongeveer zoals <BR>. Het is echter geen standaard HTML en wordt nog steeds niet ondersteund, dus gebruik in plaats daarvan <BR>.

Is de P Endtag vereist?

De W3C zegt over </P>: “De eindtag is optioneel omdat deze altijd kan worden afgeleid door de parser.” Dit betekent dat een nieuwe <P> het einde impliceert van de vorige <P> (en elke uitlijning ingesteld door de vorige <P>).

Elk ander blokniveau-element, zoals <HR> of <BLOCKQUOTE> moet ook eindigen de alinea. Het werkt echter niet altijd zo. Sommige browsers zullen de tekst bijvoorbeeld rechts uitlijnen, zelfs na een tabel. In het volgende voorbeeld geeft MSIE het gedeelte ‘na de tabel’ weer als rechts uitgelijnd, terwijl Netscape het weergeeft als links uitgelijnd:

MSIE’s rendering	Netscape’s rendering

Als u de uitlijning of een andere stijleigenschap voor een alinea-element instelt, kunt u dit het beste gebruiken </P>. Als je nooit set-enige stijlen gebruikt, kun je in het algemeen </P> negeren.

Zie de specificaties van W3C voor paragrafen voor meer informatie over dit onderwerp.

Tekstuitlijning

U kunt de uitlijning van elk HTML-element instellen met de stijlregel text-align. text-align kan worden gebruikt om de uitlijning voor een alinea, een sectie van het document of zelfs het hele document in te stellen. text-align kan worden gebruikt om de uitlijning links, rechts, gecentreerd of gerechtvaardigd in te stellen.

Stel dat we een alinea willen centreren.Eerst maken we een stijlklasse met de naam centeralign door de volgende code in de “sectie van het document:

Nu kunnen we elke alinea als volgt in de centeralign-klasse instellen:

Wat ons dit geeft:

We kunnen dezelfde klasse toepassen op een <DIV> -element om een gedeelte van de pagina:

Dat geeft ons:

Rechtvaardiging

Standaard , geven de meeste browsers tekst weer met een gekartelde rechterrand.

Als u alle tekst wilt weergeven zoals in een boek met een gelijkmatige rechterrand, kunt u een enkele stijlregel gebruiken. Om alle tekst gerechtvaardigd te maken, kopieert u het volgende code i nnaar het “gedeelte van uw document.

Het probleem met de rechtvaardiging is dat veel browsers in de war raken over waar de laatste regel tekst is (wat niet zou moeten gerechtvaardigd zijn). MSIE 4.x is bijvoorbeeld in de war wanneer een blok tekst onmiddellijk wordt gevolgd door een tabel. Merk in deze afbeelding op dat de laatste regel tekst de woorden “een van onze agenten” over een volledige regel strekt:

Om deze situatie te verhelpen, plaatst u alle tekstblokken tussen <P> en </P>:

Nu geeft onze foutieve MSIE dingen meer weer sanely:

Inspringen

Er zijn verschillende manieren om alinea’s en hele secties van uw webpagina te laten inspringen De volgende secties beschrijven de vier belangrijkste technieken voor inspringen:

• Een alinea laten inspringen
• Een sectie van de pagina laten inspringen
• De hele pagina laten inspringen
• De eerste regel van elke alinea laten inspringen

Voordat we beginnen, is het echter de moeite waard om een paar woorden te zeggen over <BLOCKQUOTE> . Er is een populaire misvatting dat <BLOCKQUOTE> moet worden gebruikt om secties van de pagina te laten inspringen. Deze overtuiging komt voort uit het feit dat de meeste visuele webbrowsers geciteerde tekst weergeven zoals ingesprongen. Onthoud echter dat HTML geen opmaaktaal is en onvoorspelbare resultaten geeft wanneer u het als een taal probeert te gebruiken. Gebruik <BLOCKQUOTE> als u een geciteerd tekstblok heeft, gebruik anders de technieken die in de volgende paragrafen worden beschreven.

Een alinea laten inspringen

U kunt een enkele alinea laten inspringen met behulp van stijlen. Stel dat we een alinea 50 punten willen laten inspringen. Eerst maken we een klasse met de naam inspringen met de volgende stijlregels. Zet deze code in de “sectie van uw document.

Nu zetten we de klasse van de alinea op inspringend door een CLASS-attribuut toe te voegen aan het <P> tag:

Dit geeft ons deze ingesprongen alinea:

Een sectie van een pagina laten inspringen

Om meer dan één par te laten inspringen agraph zullen we dezelfde stijl gebruiken als in het vorige voorbeeld. Zet deze code in het “gedeelte van uw pagina:

Vervolgens gebruiken we de ingesprongen klasse in een <DIV> element:

Dit geeft ons een ingesprongen gedeelte als volgt:

De hele pagina laten inspringen

Als je de hele pagina wilt laten inspringen, stel dan een stijlregel in die rechts en links opvulling instelt voor het element “. Deze stijl stelt bijvoorbeeld de opvulling rechts en links in op 100 pixels:

Deze techniek is populair in combinatie met een achtergrondafbeelding. Stel dat we willen dat deze afbeelding langs de linkerkant van de pagina loopt.

Deze afbeelding is 56 pixels breed, dus laten we de opvulling instellen op 60.De volgende stijl stelt de achtergrondafbeelding in, stelt de herhaling in op herhalen-y (herhaal alleen verticaal langs de linkerkant van de pagina) en stelt de linker opvulling in op 60 (we zullen de rechter opvulling niet instellen).

Zo zou dat eruit kunnen zien:

De eerste regel van elke alinea laten inspringen

De eerste regel van elke alinea-set laten inspringen een stijlregel die text-indent gebruikt. De volgende code laat bijvoorbeeld de eerste regel van elke alinea 30 punten inspringen. Kopieer deze code naar het “gedeelte van uw pagina:

Deze code laat de eerste regel van elke <P> element, maar je zult waarschijnlijk een vervelend probleem tegenkomen. Als je net als de meeste ontwerpers bent, plaats je waarschijnlijk geen P voor de eerste alinea of tussen een koptekst zoals <H1> en de tekst die erop volgt. Helaas is dat precies wat u moet doen als u de alinea wilt laten inspringen. De tekst in deze situaties maakt deel uit van iets dat “anonieme blokken” wordt genoemd en er kan niet rechtstreeks naar worden verwezen. Om het te laten inspringen, moet u de tekst in een <P> -element plaatsen.

De volgende code heeft bijvoorbeeld geen <P> tussen de koptekst en de tekst, zodat de tekst niet inspringt:

Wat ons geeft:

Deze code heeft een <P> tussen de koptekst en de tekst, dus de tekst is ingesprongen:

De < BR > Element

<BR> voegt een enkele regelterugloop in . Terwijl <P> het begin van een nieuwe alinea aangeeft, impliceert <BR> alleen een regelterugloop binnen dezelfde alinea. <BR> wordt gewoonlijk weergegeven met een enkele regelterugloop.

Deze code bijvoorbeeld:

Wat dit oplevert:

Omdat <BR> geen nieuwe alinea begint, blijven alle huidige alinea-attributen hetzelfde:

Wat dit oplevert:

The CLEAR Attribute

CLEAR zegt dat naast het invoegen van een regeleinde, als er een afbeelding of ander object rechts of links is, daar ook voorbij moet gaan. Deze code zegt bijvoorbeeld dat de afbeelding aan de linkerkant van de pagina moet worden uitgelijnd. Dan is er wat tekst en dan LEFT. De volgende tekst is voorbij de afbeelding:

Wat dit oplevert:

Kom naar het Halloweenfeest! veel plezier.
20:00 uur tot middernacht. Draag een kostuum of kom als je eigen enge zelf!

BOTH is hetzelfde als ALL, maar is het niet ondersteund door zoveel browsers, dus gebruik in plaats daarvan ALL.

The CENTER Element

Gebruiksaanbeveling: gebruik <DIV> in plaats daarvan.

Wat ons geeft:

Wat hetzelfde is als:

Wat ons geeft:

Het < HR > Element

<HR> tekent een horizontale lijn (een “horizontale regel”) over de pagina. Dat is alles. Voor zo’n eenvoudig concept zijn horizontale regels verrassend populair. Laten we beginnen met de basis. <HR> heeft geen eindtag en vereist geen attributen:

Die deze regel creëert:

<HR> duidt meestal op een onderverdeling in de pagina. Dingen voordat de regel zich in een andere “sectie” bevindt dan de dingen erna. Om die reden beschouwen veel ontwerpers <HR> als een logische tag, niet als een layout-tag.

Het NOSHADE-kenmerk

NOSHADE geeft aan dat de regel moet worden gepresenteerd als plat in plaats van driedimensionaal.Vergelijk deze normale horizontale regel:

Met een NOSHADE regel:

Wat ons geeft:

NOSHADE wordt vaak gebruikt in combinatie met SIZE:

Produceert deze regel:

NOSHADE is populair omdat browsers driedimensionale regels meestal niet zo goed weergeven. In veel gevallen wordt de regel inderdaad in dezelfde kleur weergegeven als de achtergrond, waardoor deze bijna onzichtbaar is.

The SIZE Attribute

SIZE geeft de hoogte van de regel aan. (Ik denk dat het gewoon te gemakkelijk zou zijn geweest om het “HEIGHT” te noemen.) Zie voor horizontale breedte WIDTH. Vergelijk enkele van deze formaten:

Wat ons deze regels geeft:

Browsers zullen over het algemeen geen <HR> groter dan 100 weergeven .

Het WIDTH-kenmerk

WIDTH stelt de horizontale breedte van de regel in. U kunt de grootte in pixels of als een percentage uitdrukken.

Deze <HR> ’s zijn ingesteld met pixelbreedtes:

Dat geeft ons deze regels:

WIDTH wordt meestal uitgedrukt als een percentage. Als u een percentagebreedte gebruikt, zorg er dan voor dat u de waarde tussen aanhalingstekens.

Produceert deze regels:

De standaard is 100%. Standaard is de regel gecentreerd. Om een andere uitlijning in te stellen, gebruik ALIGN.

Percentagebreedtes gebruikt u het percentage o f de beschikbare breedte, niet de volledige breedte van de pagina. Als de regel bijvoorbeeld in een tabel staat, is de breedte een percentage van de breedte van de tabelcel.

Wat deze tabel oplevert:

Het ALIGN-kenmerk

ALIGN stelt de uitlijning van de regel. ALIGN is alleen nuttig als u ook WIDTH gebruikt.

Geef ons dit:

Het < PRE > Element

<PRE> is een van de handigste tags in de HTML-toolbox. <PRE> markeert de tekst als “vooraf opgemaakt” – alle spaties en regelteruggaven worden exact weergegeven zoals u ze typt.

Wat dit produceert:

<PRE> tekst wordt weergegeven in een lettertype met vaste breedte, wat betekent dat alle tekens en spaties de dezelfde breedte. Vaste breedte maakt het gemakkelijk om de tekst precies zo op te maken als u dat wilt, dus <PRE> is geweldig voor het maken van “snelle en vuile” tabellen zoals hierboven.

<PRE> veroorzaakt NIET dat de browser tags negeert. U kunt nog steeds links en andere goodies maken:

Produceert dit:

Wanneer u begint met het toevoegen van markeringen , wordt het moeilijker om te zien hoe de tekst eruit komt te zien (je tags gelijkmatig uit elkaar plaatsen zoals de tabel hierboven helpt). <PRE> wordt vaak gebruikt om grote blokken tekst te citeren die u niet wilt “html-formaat”, maar een “kan de tekst verknoeien. Voor een tabel die groter is dan een paar regels, is het op de lange termijn meestal gemakkelijker om tabelcode te gebruiken.

Het “Element

” voorkomt dat een regelterugloop optreedt. De volgende code produceert bijvoorbeeld een onzingedicht van één lange regel:

Wat dit oplevert:

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:

Wat dit oplevert:

Het “Element

is for the situation where you have used om regeleinden in een sectie te voorkomen tekst, en dan wil je zeggen “maar je kunt HIER breken als je wilt”.”forceert geen regeleinde, het staat er slechts één toe:

Produceert:

, Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within uitgevonden hebben, zoals dit:

Wat ons deze paragraaf geeft:

Adam is een technisch schrijver die gespecialiseerd is in ontwikkelaarsdocumentatie en tutorials.