Rader och stycken

Detta avsnitt beskriver HTML associerad med rader och stycken. Vi börjar med den grundläggande <DIV> och <P> -taggar.

< DIV > Element

<DIV>, en element på blocknivå, definierar helt enkelt ett innehållsblock på sidan. Förutom att definiera ett block, gör <DIV> ingenting. Till exempel skapar följande kod ett <DIV> -element med två stycken inuti. Lägg märke till att du kan placera <P> -element i en <DIV>.

Vilket ger oss:

ALIGN-attributet

ALIGN ställer in inriktningen för innehållet i <DIV> -elementet. Alla fyra värden, LEFT, CENTER, RIGHT och JUSTIFY, alla stöds väl. LEFT är standardvärdet.
Den här koden visar standard:

Vilket ger oss:

Punktelementet

<P> anger början på ett nytt stycke. Detta återges vanligtvis med två vagnreturer, vilket ger en tom tom rad mellan de två styckena:

Vilket producerar detta:

ALIGN-attributet

ALIGN indikerar paragrafens inriktning.

Vilket producerar detta:

CLEAR-attributet

CLEAR känns igen av vissa webbläsare och fungerar väldigt mycket som <BR>. Det är emellertid inte standard HTML och stöds fortfarande inte, så använd <BR> istället.

Krävs P-sluttaggen?

W3C säger om </P>: ”Sluttaggen är valfri eftersom den alltid kan härledas av tolkaren.” Detta innebär att en ny <P> innebär slutet på föregående <P> (och alla justeringar som ställts in av föregående <P>).

Alla andra blocknivåelement, som <HR> eller <BLOCKQUOTE> bör också avslutas Det går dock inte alltid så. Vissa webbläsare kommer till exempel att högerjustera texten även efter en tabell. I följande exempel gör MSIE delen ”efter bordet” som högerjusterad, medan Netscape gör det som vänsterjusterat:

MSIE: s rendering	Netscapes rendering

Om du ställer in justeringen eller annan stilegenskap för ett styckeelement är det bäst att använda </P>. Om du aldrig använder ställa in några stilar kan du i allmänhet ignorera </P>.

Se W3C: s specifikationer för stycken för mer information om detta ämne.

Textjustering

Du kan ställa in justeringen för valfritt HTML-element med stilregeln text-align. text-align kan användas för att ställa in inriktningen för ett stycke, en del av dokumentet eller till och med hela dokumentet. text-align kan användas för att ställa in justering till vänster, höger, mitt eller motiverat.

Antag till exempel att vi vill centrera ett stycke.Först skapar vi en stilklass som heter centeralign genom att lägga följande kod i ”avsnittet i dokumentet:

Nu kan vi ställa in vilket stycke som helst till centeralign-klass:

Vilket ger oss detta:

Vi kan tillämpa samma klass på ett <DIV> -element för att centrera en del av sida:

Vilket ger oss:

Motivering

Som standard , de flesta webbläsare återger text med en ojämn höger kant.

Om du vill att all text ska återges som i en bok med en jämn höger kant kan du använda en enda stilregel. För att ställa in all text till motiverad kopiera följande kod i n till ”avsnittet i ditt dokument.

Problemet med motiveringen är att många webbläsare blir förvirrade över var den sista textraden är (vilket inte borde vara berättigade). Exempelvis är MSIE 4.x förvirrad när ett textblock omedelbart följs av en tabell. Lägg märke till i den här bilden att den sista raden av text sträcker orden ”en av våra agenter” över en hel rad:

För att avhjälpa denna situation omger du alla textblock med <P> och </P>:

Nu gör vårt felaktiga MSIE saker mer sanely:

Indragning

Det finns flera sätt att stryka in stycken och hela sektioner på din webbsida Nästa avsnitt beskriver de fyra huvudsakliga teknikerna för indragning:

• Indragning av ett stycke
• Indragning av ett avsnitt på sidan
• Indragning av hela sidan
• Indragning av första raden i varje stycke

Innan vi börjar är det dock värt att säga några ord om <BLOCKQUOTE> . Det finns en populär missuppfattning att <BLOCKQUOTE> ska användas för att dra in delar av sidan. Denna tro kommer från det faktum att de flesta visuella webbläsare återger citerad text som indragen. Kom dock ihåg att HTML inte är ett formateringsspråk och ger oförutsägbara resultat när du försöker använda den som en. Använd <BLOCKQUOTE> om du har ett citerat textblock, annars använd de tekniker som beskrivs i de närmaste styckena.

Indragning av ett stycke

Du kan dra in ett enda stycke med hjälp av stilar. Antag till exempel att vi vill stryka in ett stycke 50 poäng. Först skapar vi en klass som kallas indragen med följande stilregler. Sätt den här koden i ”avsnittet i ditt dokument.

Nu ställer vi in klassens stycke till indraget genom att lägga till ett CLASS-attribut till <P> tagg:

Vilket ger oss det här indragna stycket:

Indragning av en sektion på en sida

För att indrycka mer än ett par agraph använder vi samma stil som vi satte i föregående exempel. Sätt den här koden i avsnittet ”på din sida:

Då använder vi den indragna klassen i en <DIV> element:

Vilket ger oss ett indragat avsnitt så här:

Indragning av hela sidan

Om du vill ha hela sidan indragen, ställ in en stilregel som anger höger och vänster vaddering för ”elementet. Den här stilen ställer till exempel in höger och vänster stoppning till 100 pixlar:

Denna teknik är populär när den används i kombination med en bakgrundsbild. Antag till exempel att vi vill att den här bilden ska springa ner till vänster på sidan.

Den här bilden är 56 pixlar bred, så låt oss ställa in stoppningen till 60.Följande stil ställer in bakgrundsbilden, ställer repetitionen till repetering-y (endast upprepas vertikalt längs vänster sida av sidan) och ställer in vänster stoppning till 60 (vi ställer inte in rätt stoppning).

Så här kan det se ut:

Indragning av första raden i varje stycke

För att indraga den första raden i varje styckeuppsättning en stilregel med textindrag. Till exempel indragar följande kod den första raden i varje stycke 30 poäng. Kopiera den här koden till ”avsnittet på din sida:

Den här koden indrycker den första raden i varje <P> element, men du kommer förmodligen att stöta på ett irriterande problem. Om du är som de flesta designers lägger du antagligen inte ett P före första stycket eller mellan en rubrik som <H1> och texten som följer den. Tyvärr är det precis vad du behöver göra om du vill att stycket ska vara indraget. Texten i dessa situationer är en del av något som kallas ”anonyma block” och kan inte hänvisas direkt. För att dra in det måste du lägga texten i ett <P> -element.

Så till exempel har följande kod inte <P> mellan rubriken och texten, så texten inte är indragen:

Vilket ger oss:

Den här koden har en <P> mellan rubriken och texten, så texten är indragen:

< BR > Element

<BR> infogar en enda vagnretur . Medan <P> anger början på ett nytt stycke, innebär <BR> bara en vagnretur inom samma stycke. <BR> återges vanligtvis med en enda vagnretur.

Till exempel den här koden:

Vilket producerar detta:

Eftersom <BR> inte startar ett nytt stycke, förblir alla nuvarande styckeattribut desamma:

Vilket producerar detta:

CLEAR-attributet

CLEAR säger att förutom att infoga en radbrytning, om det finns en bild eller annat objekt till höger eller vänster, gå förbi det också. Den här koden säger till exempel att bilden ska vara inriktad på vänster sida av sidan. Sedan finns det lite text, sedan LEFT. Texten efter som är förbi bilden:

Vilket producerar detta:

Kom ner till Halloween-festen! ha en fantastisk ol tid.
20:00 till midnatt. Bär en kostym eller kom som ditt eget läskiga jag!

BOTH är detsamma som ALL, men är inte stöds i så många webbläsare, så använd ALL istället.

CENTER-elementet

Användningsrekommendation: Använd <DIV> istället.

Vilket ger oss:

Vilket är detsamma som:

Vilket ger oss:

< HR > Element

<HR> drar en horisontell linje (en ”horisontell regel”) över sidan. Det är det. För ett så enkelt koncept är horisontella regler förvånansvärt populära. Låt oss börja med grunderna. <HR> har ingen sluttagg och kräver inga attribut:

Vilket skapar denna regel:

<HR> indikerar vanligtvis en uppdelning på sidan. Saker innan regeln finns i ett annat ”avsnitt” från grejerna efter. Därför anser många designers att <HR> är en logisk tagg, inte en layouttagg.

NOSHADE-attributet

NOSHADE anger att regeln ska presenteras som platt istället för tredimensionell.Jämför denna vanliga horisontella regel:

Med en NOSHADE -regel:

Vilket ger oss:

NOSHADE används ofta i kombination med SIZE:

Producerar denna regel:

NOSHADE är populärt eftersom webbläsare vanligtvis inte gör tredimensionella regler så bra. Under många omständigheter presenteras regeln i samma färg som bakgrunden, vilket gör den nästan osynlig.

SIZE-attributet

SIZE anger regelns höjd. (Jag antar att det hade varit för lätt att kalla det ”HEIGHT”.) För horisontell bredd se WIDTH. Jämför några av dessa storlekar:

Vilket ger oss dessa regler:

Webbläsare ger i allmänhet inte <HR> större än 100 .

WIDTH-attributet

WIDTH anger regelns horisontella bredd. Du kan uttrycka storleken i pixlar eller i procent.

Dessa <HR> är inställda med pixelbredder:

Vilket ger oss dessa regler:

WIDTH uttrycks vanligtvis som en procentsats. Om du använder en procentbredd, se till att ange värdet i citat.

Producerar dessa regler:

Standard är 100%. Som standard är regeln För att ställa in en annan inriktning, använd ALIGN.

Procentbredder använder procenten o f den tillgängliga bredden, inte hela sidans bredd. Till exempel, om regeln finns i en tabell, är bredden en procentandel av bredden på tabellcellen.

Som producerar denna tabell:

ALIGN-attributet

ALIGN ställer in regel. ALIGN är bara användbart om du också använder WIDTH.

Ge oss detta:

< PRE > Element

<PRE> är en av de smidigaste taggarna i HTML-verktygslådan. <PRE> markerar texten som ”förformaterad” – alla mellanslag och vagnreturer återges exakt som du skriver dem.

Vilket producerar detta:

<PRE> texten återges i ett teckensnitt med fast bredd, vilket innebär att alla tecken och mellanslag är samma bredd. Fast bredd gör det enkelt att lägga ut texten precis som du vill ha den, så <PRE> är utmärkt för att skapa ”snabba och smutsiga” tabeller som ovan.

<PRE> får INTE webbläsaren att ignorera taggar. Du kan fortfarande skapa länkar och andra godsaker:

Producerar detta:

När du börjar lägga till markering blir det svårare att se hur texten blir (avståndet mellan dina taggar liksom tabellen ovan hjälper). <PRE> används ofta för att citera stora textblock som du inte vill ”HTMLize”, men en ”kan förstöra texten. För en tabell som är större än några rader är det vanligtvis lättare i det långa loppet att använda tabellkod.

”Elementet

” förhindrar att en vagnretur uppträder. Till exempel producerar följande kod en nonsensdikt av en lång rad:

Vilket producerar detta:

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:

Vilket producerar detta:

”Elementet

is for the situation where you have used för att förhindra radbrytningar i ett avsnitt av text, och sedan vill du säga ”men du kan bryta HÄR om du vill”.”tvingar inte en radbrytning, det tillåter bara en:

Producerar:

Efter att ha uppfunnit , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, så här:

Vilket ger oss detta stycke:

Adam är en teknisk författare som specialiserat sig på utvecklardokumentation och handledning.