Lecture 2 Basic Text formatting Block formatting elements are used for the formatting of whole blocks of text within an HTML document, rather than single characters. They should all (if present) be within the body of the document (that is, within the <BODY>...</BODY> elements). The essential block formatting elements are: Text Formatting Elements Description <Hx>...</Hx> Format six levels of heading <P>...</P> Specify what text constitutes a paragraph and it's alignment <align> <BR> Force a line break <ADDRESS>...</ADDRESS> Format an address section <BASEFONT SIZE=...> Specifying the 'default' font size for the document <BLOCKQUOTE>...</BLOCKQUOTE> To quote text from another source <CENTER>...</CENTER> Centering text on the page <COMMENT>...</COMMENT> To enclose text as a comment <DFN>...</DFN> Defining Instance <DIV>...</DIV> Allow centering, or left/right justification of text <FONT ...>...</FONT> Setting/changing the font size, color and type <HR> Renders a sizeable hard line on the page <LISTING>...</LISTING> Text formatting <MARQUEE> Highlighted scrolling text <NOBR> Specifying that words aren't to be broken <PLAINTEXT> For text formatting <PRE>...</PRE> Use text already formatted <WBR> Specifying that a word is to be broken if necessary <XMP>...</XMP> Text formatting Header tag: <Hx>...</Hx> HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading. The highest level of headings is <H1>, followed by <H2>...<H6>. <H1>...</H1> Bold, very-large font, centered. One or two blank lines above and below. <H2>...</H2> Bold, large font, flush-left. One or two blank lines above and below. <H3>...</H3> Italic, large font, slightly indented from the left margin. One or two blank lines above and below. <H4>...</H4> Bold, normal font, indented more than H3. One blank line above and below. <H5>...</H5> Italic, normal font, indented as H4. One blank line above. <H6>...</H6> Bold, indented same as normal text, more than H5. One blank line above. Code for Heading Appearance at the browser <html> <body> This is heading 1 This is heading 2 <h1>This is heading 1</h1> <h2>This is heading 2</h2> This is heading 3 <h3>This is heading 3</h3> This is heading 4 <h4>This is heading 4</h4> This is heading 5 <h5>This is heading 5</h5> This is heading 6 <h6>This is heading 6</h6> </body> </html> Paragraphs: <P>...</P> The paragraph element indicates a paragraph of text. No specification has ever attempted to define exactly the indentation of paragraph blocks and this may be a function of other elements, style sheets, and so on. One can also format paragraph with align elements. HTML paragraphs are defined with the <p> tag. Code for paragraph Appearance at the browser <html> In coding HTML tags you can use capital letters, lower case, or a combination of both. <body> For easy editing it is recommended that you use capital letters for most purposes and lower case letters for special cases. <p>In coding HTML tags you can use capital letters, lower case, or a combination of both. For easy editing Browsers treat white spaces in HTML it is recommended that you use capital letters for most documents as a single blank space; defining purposes and lower case letters for special cases.</p> the layout of your web page with the necessary white space requires the use of the <p>Browsers treat white spaces in HTML documents as a single blank space; defining the layout of your appropriate tags web page with the necessary white space requires the use of the appropriate tags. </p> </body> </html> The “align” attribute The align attribute indicates whether the heading appears to the left, center, or right of the page (the default is the left). It can take the three values discussed in the table that follows. Value Meaning Example left The heading is displayed to the left of the browser < h1 align=”left” > Left-Aligned Heading < /h1 > window (or other containing element if it is nested within another element). This is the default value if the align < p > This heading uses the align attribute with a attribute is not used. value of left. < /p > center* The heading is displayed in the center of the browser < h1 align=”center” > Centered Heading < /h1 > window (or other containing element if it is nested within another element). < p > This heading uses the align attribute with a value of center. < /p > right The heading is displayed to the right of the browser < h1 align=”right” > Right-Aligned Heading < /h1 > window (or other containing element if it is nested within another element). < p > This heading uses the align attribute with a value of right. < /p > * <center></center) is also used as separate tag to denote the same. Line Breaks Using the < br / > Element The line break element specifies that a new line must be started at the given point. <P> Mary had a little lamb<BR/> Its fleece was white as snow<BR/> Everywhere that Mary went<BR/> She was followed by a little lamb. </p> <HR> Element - Inserting a Horizontal line A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic. The <HR> element specifies different horizontal rules. <HR ALIGN=left|right|center> set to display centered, left, or right aligned. <HR COLOR=name|#rrggbb> specifying of the hard rule color <HR NOSHADE> specify that the horizontal rule should not be shaded at all. <HR SIZE=number> specifies how thick the rule will be, in pixels <HR WIDTH=number|percent> specify an exact width in pixels Code Appearance <h1>Using Horizontal Line </h1> <HR ALIGN=”left”> <HR COLOR=”blue”> <HR SHADE> <HR SIZE=”1”> <HR WIDTH=”50%”> Presentational Elements These are used to format the text in the page like word processor. In the web page they are used to make text bold, italic, or underlined etc. The tags elements for presentation are < b > , < i > , < u > , < s > , and < tt > etc. i. The < b > Element Anything that appears in a < b > element is displayed in bold, like the word “bold” here: The following word uses a <b> bold</b> typeface. The contents of a < b > element will be displayed in the same way as the contents of the < strong >. ii. The < i > Element The content of an < i > element is displayed in italicized text, like the word “italic” here. The following word uses an <i>italic</i> typeface. It can also be performed using <em> </em> element. iii. The < u > Element (Deprecated) The content of a < u > element is underlined with a simple line. The following word would be < u > underlined < /u >. The < u > element is deprecated, although it is still supported by current browsers. iv. The < s > and < strike > Elements (deprecate) The content of an < s > or < strike > element is displayed with a strikethrough, which is a thin line through the text ( < s > is just the abbreviated form of < strike > ). The following word would have a < s > strikethrough < /s > . Both the < s > and < strike > elements are deprecated, although they are still supported by current browsers. v. The < tt > Element The content of a < tt > element is written in monospaced font (like that of a teletype machine). The following word will appear in a < tt > monospaced < /tt > font. vi. < sup > Element The content of a < sup > element is written in superscript; it is displayed half a character’s height above the other characters and is also often slightly smaller than the text surrounding it. Written on the 31 < sup > st < /sup > February. The < sup > element is especially helpful in adding exponential values to equations, and adding the st , nd , rd , and th suffixes to numbers such as dates. vii. The < sub > Element The content of a < sub > element is written in subscript; it is displayed half a character’s height beneath the other characters and is also often slightly smaller than the text surrounding it. The < sub > element is particularly helpful to create footnotes. viii. The < big > Element The following word should be < big > bigger < /big > than those around it. When this element is used, it is possible to nest several < big > elements inside one another, and the content of each will get one size larger for each element. ix. The < small > Element The < small > element is the opposite of the < big > element, and its contents are displayed one font size smaller than the rest of the text surrounding it. The following word should be < small > smaller < /small > than those around it. Example HTML Code Appearance in the browser <html> <body> <h1>This is Presentational Elements</h1> <p><i>This is an italic paragraph.</i> </p> <p><b>This is a bold or strong paragraph.</b></p> <p><u>This is a underlined paragraph.</u> </p> <p><s>This is a striked paragraph.</s> </p> <p><tt>This is teletype paragraph.</tt> </p> <p>This is 31<sup>st</sup> Jamuary.</p> <p>This is H<sub>2</sub>O i.e. Warer.</p> <p><big>This is big font.</i> </p> <p><small>This is small font.</small> </p> </body> </html> Phrase Elements Some of the elements in this section are displayed in a manner similar to the Presentational Elements < b > , < i > , < pre > , and < tt > that you have just read about, but the following elements are not just for presentational purposes; they also describe something about their content. <em> and < strong > for emphasis < cite > , and < q > for quotations and citations < abbr > , < acronym > , and < dfn > for abbreviations, acronyms, and key terms < address > for addresses The < em > ... </em> Element Adds Emphasis The content of an < em > element is intended to be a point of emphasis in your document, and it is usually displayed in italicized text. The kind of emphasis intended is on words such as “must” in the following sentence: <p> You <em> must </em> remember to close elements in XHTML. </p> The < acronym > Element Is for Acronym Use The < acronym > element allows to show the acronym and indicates the elaboration when pointing to the acronym. For example: Use of Acronym HTML Code Appearance in the browser <html> <body> <acronym title = "Extensible Hypertext Markup Language"> XHTML </acronym> </body> </html The < q > Element Is for Short Quotations The < q > element is intended to be used when you want to add a quote within a sentence, rather than as an indented block on its own. For example: The < cite > Element Is for Citations If you are quoting a text, you can indicate the source by placing it between an opening < cite > tag and closing < /cite > tag. For example: HTML Code Appearance in the browser <H2>Use of cite</H2> <p> This chapter is taken from <cite> Beginning Web Development </cite> </P> <H2>Use of quotation </h2> <p>Teacher said, <q> Close the book. </q> </p> Address <ADDRESS>...</ADDRESS> As its name suggests, the <ADDRESS>...</ADDRESS> element can be used to denote information such as addresses, authorship credits and so on. Typically, an Address is rendered in an italic typeface and may be indented, though the actual implementation is at the discretion of the browser. The <ADDRESS> element implies a paragraph break before and after, as shown in the following example: Use of Address tag. HTML Code Appearance in the browser <html> <body> <ADDRESS> <strong>Dr. Saiful Alam</strong><BR> Associate Professor<BR> Dept of Information Science<BR> University of Dhaka<BR> Dhaka 1000<BR> Bangladesh </ADDRESS> </body> </html> Font Font tag supports different types of font, size, colors etc. its attributes are: SIZE= “value” FACE= “name” COLOR = “color name” Code Appearance in Browser <html> <body> <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. </font> </p> <p>The font element is deprecated in HTML 4. Use CSS instead!</p> </body> </html> NB: The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations and suggested to include in CSS Preformatted text <PRE>...</PRE> It allows the browser to show as formatted between <pre> and </pre>. For example HTML Code Appearance in the browser <pre> This is P R E F O R M A T T E D T E X T SPACES are ok! So are RETURNS! </pre> HTML Style Attribute The purpose of the style attribute is to provide a common way to style all HTML elements. Note that, Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files). However, for the learning purpose, we aspire to mention the tags and attributes and details are further discussed in the CSS section. It is recommended to avoid using deprecated tags and attributes in future versions of HTML and XHTML. Tags Description <center> Defines centered content <font> and <basefont> Defines HTML fonts <s> and <strike> Defines strikethrough text <u> Defines underlined text Attributes Description Align Defines the alignment of text Bgcolor Defines the background color Color Defines the text color SPECIAL CHARACTERS The following entity names are used in HTML, always prefixed by ampersand (&) and followed by a semicolon. They represent particular graphic characters which have special meanings in places in the markup, or may not be part of the character set available to the writer. HTML Entity Punctuation ISO code Name or meaning – – – en dash — — — em dash ¡ ¡ ¡ inverted exclamation ¿ ¿ ¿ inverted question mark " " " quotation mark “ “ “ left double curly quote ” ” ” right double curly quote ' ' apostrophe (single quote) ‘ ‘ ‘ left single curly quote ’ ’ ’ right single curly quote « « « guillemets (used as quotation marks in some languages, e.g., French) » » » (Its there, but you   non-breaking space can't see it!) Symbols & & & ampersand ¢ ¢ ¢ cent © © © copyright ÷ ÷ ÷ divide > > > greater than < < < less than µ µ µ micron · · · middle dot ¶ ¶ ¶ pilcrow (paragraph sign) ± ± ± plus/minus € € € Euro £ £ £ British Pound Sterling ® ® ® registered § § § section ™ ™ ™ trademark ¥ ¥ ¥ Japanese Yen Diacritics á á á lower-case "a" with acute accent Á Á Á upper-case "A" with acute accent à à à lower-case "a" with grave accent À À À upper-case "A" with grave accent â â â lower-case "a" with circumflex Â Â Â upper-case "A" with circumflex å å å lower-case "a" with ring Å Å Å upper-case "A" with ring ã ã ã lower-case "a" with tilde Ã Ã Ã upper-case "A" with tilde ä ä ä lower-case "a" with diaeresis/umlaut Ä Ä Ä upper-case "A" with diaeresis/umlaut æ æ æ lower-case "ae" ligature Æ Æ Æ upper-case "AE" ligature ç ç ç lower-case "c" with cedilla Ç Ç Ç upper-case "C" with cedilla é é é lower-case "e" with acute accent É É É upper-case "E" with acute accent è è è lower-case "e" with grave accent È È È upper-case "E" with grave accent ê ê ê lower-case "e" with circumflex Ê Ê Ê upper-case "E" with circumflex ë ë ë lower-case "e" with diaeresis/umlaut Ë Ë Ë upper-case "E" with diaeresis/umlaut í í í lower-case "i" with acute accent Í Í Í upper-case "I" with acute accent ì ì ì lower-case "i" with grave accent Ì Ì Ì upper-case "I" with grave accent î î î lower-case "i" with circumflex Î Î Î upper-case "I" with circumflex ï ï ï lower-case "i" with diaeresis/umlaut Ï Ï Ï upper-case "I" with diaeresis/umlaut ñ ñ ñ lower-case "n" with tilde Ñ Ñ Ñ upper-case "N" with tilde ó ó ó lower-case "o" with acute accent Ó Ó Ó upper-case "O" with acute accent ò ò ò lower-case "o" with grave accent Ò Ò Ò upper-case "O" with grave accent ô ô ô lower-case "o" with circumflex Ô Ô Ô upper-case "O" with circumflex ø ø ø lower-case "o" with slash Ø Ø Ø upper-case "O" with slash õ õ õ lower-case "o" with tilde Õ Õ Õ upper-case "O" with tilde ö ö ö lower-case "o" with diaeresis/umlaut Ö Ö Ö upper-case "O" with diaeresis/umlaut ß ß ß ess-tsett ú ú ú lower-case "u" with acute accent Ú Ú Ú upper-case "U" with acute accent ù ù ù lower-case "u" with grave accent Ù Ù Ù upper-case "U" with grave accent û û û lower-case "u" with circumflex Û Û Û upper-case "U" with circumflex ü ü ü lower-case "u" with diaeresis/umlaut Ü Ü Ü upper-case "U" with diaeresis/umlaut ÿ ÿ ÿ lower-case "y" with diaeresis/umlaut ´ ´ acute accent with no letter ` ` grave accent/reversed apostrophe with no letter Lists There are many reasons one can add a list to the pages. Modern HTML has three basic forms of lists: i. Unordered lists (<ul>)- which are like lists of bullet points ii. which use a sequence of numbers or letters instead of bullet points iii. Definition lists (<dl>)- which allow you to specify a term and its definition Unordered lists (<ul>): An unordered list, signified by <ul> and </ul>, is used for lists of items in which the ordering is not specific. A browser typically adds a bullet of some sort (a filled circle, a square, or an empty circle) for each item and indents the list. A type attribute can be used to set the bullet type for a list. The allowed values for type are disc, circle, or square. Ex < ul type="square"> < li > Bullet point number one < /li > < li > Bullet point number two < /li > < li > Bullet point number three < /li > < /ul > Ordered lists (<ol>)- An ordered list, as enclosed by <ol> and </ol>, defines a list in which order matters. Ordering typically is rendered by a numbering scheme, using Arabic numbers, letters, or Roman numerals. Ordered lists are suitable for creating simple outlines or step-by- step instructions because the list items are automatically numbered by the browser. The <ol> tag has three basic attributes, none of which is required: compact, start, and type. The compact attribute simply suggests that the browser attempt to compact the list, to use less space onscreen and most browsers ignore the compact attribute. Each <li> tag can have a local type attribute set to a, A, i, I, or 1. The <ol> element also has a start attribute that takes a numeric value to begin the list numbering e.g. <ol type="a" start="10">. Ex. <ol type="a" start="10">. < li > Point number one < /li > < li > Point number two < /li > < li > Point number three < /li > < /ol > Definition Lists The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the < dl > element. The < dl > element then contains alternating < dt > and < dd > elements. The content of the < dt > element is the term you will be defining. The < dd > element contains the definition of the previous < dt > element. For example, <dl> <dt>Gadget</dt> <dd>A useless device used in many HTML examples.</dd> <dt>Gizmo</dt> <dd>Another useless device used in a few HTML examples.</dd> </dl> Nesting Lists You can nest lists inside other lists. For example, you might want a numbered list with separate points corresponding to one of the list items. Each nested list will be numbered separately unless you specify otherwise using the start attribute. Example: Code Appearance <ol type=”I”> <li> Item one </li> <li> Item two </li> <li> Item three </li> <li> Item four <ol type=”i”> <li> Item 4.1 </li> <li> Item 4.2 </li> <li> Item 4.3 </li> </ol> </li> <li> Item Five </li> </ol> Understanding Block and Inline Elements Now that you have seen many of the elements that can be used to mark up text, it is important to make an observation about all the elements that live inside the < body > element, because each one can fall into one of two categories: i. Block - level elements ii. Inline elements i. Block - level elements appear on the screen as if they have a carriage return or line break before and after them. For example, the < p > , < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , < h6 > , < ul > , < ol > , < dl > , < pre > , < hr / > , < blockquote > , and < address > elements are all block - level elements. They all start on their own new lines, and anything that follows them appears on its own new line, too. ii. Inline- elements can appear within sentences and do not have to appear on new lines of their own. The < b > , < i > , < u > , < em > , < strong > , < sup > , < sub > , < big > , < small > , < ins > , < del > , < code > , < cite > , < dfn > , < kbd > , and < var > elements are all inline elements.