XHTML Formatting In general XHTML formatting is handled by cascading style sheets styles however there are a few simple default ways to format text in XHTML Most of the elements mentioned in this document are logical elements they give structure by describing what they contain while also providing default formatting Additionally there are times when styles are overkill for a simple page because only basic formatting e g bold faced or italicized text is required NOTE The parts of an example that appear in a bold faced red font are the parts of the example that are being emphasized Bold and italic text To bold face text use the b element To italicize text use the i element h2 After Computers h2 p Programming became b significantly b more interesting after the computer was invented at least until i COBOL i made its way onto the scene p This is how the markup may appear in the browser After Computers Programming became significantly more interesting after the computer was invented at least until COBOL made its way onto the scene Text size To change the text size use the big and small elements These elements have a cumulative effect For example you can make text twice as small as the surrounding text by using small small miniscule small small h2 After Computers h2 p Programming became b significantly b more interesting after the computer was invented at least until i COBOL i made it s way onto the scene big Hint big Don t spend your time learning COBOL right now learn C or Java small Your mileage may vary offer not valid in some areas small p This is how the appear may appear in the browser After Computers Programming became significantly more interesting after the computer was invented at least until COBOL made its way onto the scene Hint Don t spend your time learning COBOL right now learn C or Java Your mileage may vary offer not valid in some areas Monospaced font Every browser should have two fonts available a proportionally spaced font such as Times and a monospaced font such as Courier Some examples of text that should be displayed in a monospaced font are computer code URLs and commands to enter using the keyboard There are four elements that format text using a monospaced font tt code kbd and samp These elements represent typewriter text computer code keyboard instructions and sample text respectively p Some of us had typewriters and would practice our skills using the phrase tt The quick brown fox jumped over the lazy dog tt Now we can do repeated text in Perl code print n x 60 code Simply type kbd perl foo pl kbd and enter the phrase samp sample text samp p This is how the markup may appear in the browser Some of us had typewriters and would practice our skills using the phrase The quick brown fox jumped over the lazy dog Now we can do repeated text in Perl print n x 60 Simply type perl foo pl and enter the phrase sample text Pre formatted text Browsers usually remove all extra newlines and spaces creating line breaks according to the size of the window Preformatted text lets you maintain the original line breaks and spacing and is denoted using the pre element NOTE The pre tag is typically formatted in a monospaced font and is a block level element h2 Printing Arrays in Sorted Order h2 pre foreach sort foo print n pre This is how the markup may appear in the browser Printing Arrays in Sorted Order foreach sort foo print n Two significant disadvantages of the pre element are that text between angle brackets and is interpreted as XHTML and any formatting elements in the text will be interpreted For example pre include stdio h b do not bold face me b pre will be displayed in the browser as include do not bold face me Note that the text in the angle brackets does not get displayed and that the text within the b elements is displayed in boldface To prevent text within angle brackets from being interpreted as an XHTML element use the character entity references for and namely lt and gt In the example markup below the semicolon after the lt tells the browser not to insert a space after the character pre include lt stdio h gt lt b gt do not bold face me lt b gt pre Notice how unreadable this makes the text The xmp element is an alternative to pre that tells the browser display text verbatim including angle brackets until it encounters xmp For example xmp include stdio h b do not bold face me b xmp will be displayed in the browser as include stdio h b do not bold face me b NOTE The xmp tag is not defined for XHTML 1 0 Transitional Quoted text There are two ways to identify quoted text Block level quotes denoted by the blockquote element are generally indented by the browser Inline quotes denoted by the q element are automatically enclosed in quotation marks or whatever character is used to indicate quoted text in the target language p You might appreciate these words of wisdom from Donald Knuth p blockquote p Programming isn t for everyone It s hard and often frustrating However when it s done well it s downright fun p blockquote p I hear you screaming q lang en Frustrating You said this would be fun q Read on my friends and fear not p This is how the markup may appear in the browser You might appreciate these words of wisdom from Donald Knuth Programming isn t for everyone It s hard and often frustrating However when it s done well it s downright fun I hear you screaming Frustrating You said this would be fun Read on my friends and fear not Subscripts and superscripts Subscripts and superscripts are denoted using the sub and sup elements respectively p Your first fun program will be to sort the elements of a list a sub 0 sub through a sub n 1 sub I recommend using a straight forward O N sup 2 sup algorithm at first p This is how the markup may appear in the browser Your first fun program will be to sort the elements of a list a0 through an 1 I recommend using a straight forward O N2 algorithm at first Horizontal rules A horizontal rule is a horizontal line that spans a page and visually divides the page into sections Its most basic form is hr however several attributes can control the appearance of the line hr size n width w align direction The size attribute is the desired line thickness in pixels The width attribute is the desired line length in pixels or a percentage of the document s width The alignment attribute can be left right or center To create a solid line rather than a line with a shadow specify shade noshade to create a solid bar rather than a line with a shadow
View Full Document
Unlocking...