Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
57 views

WE Unit-2 HTML Elements

1. Block-level elements create distinct blocks of content that are displayed on their own lines, including paragraphs, headings, and lists. They can contain other block elements and inline elements. 2. Common block elements in HTML include paragraphs (<p>), headings (<h1>-<h6>), blockquotes (<blockquote>), preformatted text (<pre>), divisions (<div>), centered text (<center>), horizontal rules (<hr>), and lists (<ul>, <ol>, <dl>). 3. Block elements result in line breaks before and after and have formatting like extra spacing that make them suitable for formatting text in paragraphs rather than inline.

Uploaded by

pankajusb
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

WE Unit-2 HTML Elements

1. Block-level elements create distinct blocks of content that are displayed on their own lines, including paragraphs, headings, and lists. They can contain other block elements and inline elements. 2. Common block elements in HTML include paragraphs (<p>), headings (<h1>-<h6>), blockquotes (<blockquote>), preformatted text (<pre>), divisions (<div>), centered text (<center>), horizontal rules (<hr>), and lists (<ul>, <ol>, <dl>). 3. Block elements result in line breaks before and after and have formatting like extra spacing that make them suitable for formatting text in paragraphs rather than inline.

Uploaded by

pankajusb
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Dynamic HTML and Web Designing Block-Level Elements

A block-level element is one that contains a significant block of content that should be displayed on its own line, to break apart long passages of text into manageable portions such as paragraphs, headings, and lists. Many nonempty, block-level elements can contain other block-level elements, and all can contain text and inline elements. As with most word processors, HTML includes several tags to delimit, and hence, format paragraphs of text. These tags include the following: <p>Formatted paragraphs <h1>through <h6>Headings <blockquote>Quoted text <pre>Preformatted text <div>A division of the document <center>Centered text <BR>Line Break, <HR> Horizontal Rule <ul>,<ol>, <dl>Unnumbered, ordered, and denition lists

Each of the block elements results in a line break and noticeable space padding after the closing tag. As such, the block elements only work when used to format paragraph-like chunks of textthey cannot be used as inline tags.

Formatted Paragraph
The paragraph tag p is used, quite simply, to mark up paragraphs of text: Example: <p> This is a paragraph of text</p> <p>and this is another paragraph.</p> The p element is one of the most commonly used building blocks of HTML. When you use the p element to begin a new paragraph in HTML, it automatically creates a line space above and below the content. This element may contain any text content, but it cant include any block-level elements: only inline or phrase elements can be included. The P element has an attribute called align that will center the content inside the two paragraphs. Example: <HTML> <HEAD><TITLE>Paragraph Example</TITLE> </HEAD> <BODY> <P>This is the first paragraph in the example about the P tag. There really isn't much to say here. </P> <P ALIGN="center"> This is the second paragraph. Again, more of the same. This time the paragraph is aligned in the center. This might not be such a good idea as it makes the text hard to read. </P> <P ALIGN="right"> Here the paragraph is aligned to the right. Rightaligned text is also troublesome to read. The rest of the text of this paragraph is of little importance. </P> <P ALIGN="justify"> Under HTML 4.0-compliant browsers, you are able to justify text. As you may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all browsers support this attribute value. </P> </BODY> </HTML>

Dynamic HTML and Web Designing


The align attribute affects the contents of the p, aligning content to the "left", "right", or "center", or setting it to "justify" on the page.

Headings
The heading elements are used to create headlines in documents. Six different levels of headings are supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>, the most important, to <H6>, the least important. Each heading uses a large, usually bold characterformatting style to identify itself as a heading. HTML automatically adds an extra blank line before and after a heading. <html> <body> <h1> Heading 1 </h1> <h2 ALIGN="center"> Heading 2 </h2> <h3 ALIGN="right"> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> <p>Plain body text: The quick brown fox jumped over the lazy dog.</p> </body> </html> An attribute that aligns the text left, right, or center can be added to the heading elements. By default, headings are usually left-aligned, but by setting the ALIGN attribute of the various heading elements, the text may be aligned to the right, left, or center of the screen.

Dynamic HTML and Web Designing


Quoted Text
The blockquote tag gives you the option of setting off a long quotation or note that might otherwise get lost within a paragraph of text. This tag indents the entire selection on both the right and the left, and also adds a blank line above and below. The browser determines the exact amount of the indentation, and it may vary from browser to browser. Though the element is logical in nature, enclosing text within <BLOCKQUOTE> and </BLOCKQUOTE> usually indents the blocked information. <p>Renowned type designer, Matthew Carter, has this to say about his profession:</p> <blockquote> <p>Our alphabet hasn't changed in eons; there isn't much latitude in what a designer can do with the individual letters.</p> </blockquote> <p>Much like a piece of classical music, the score is written down its not something that is tampered with and yet, each conductor interprets that score differently. There is tension in the interpretation.</p>

Figure 5-2 shows the default rendering of the Blockquote example.

Divisions Tag
The <DIV></DIV> container (DIV stands for division) can be used to enclose and define the alignment for an entire block of page elements. It supports the ALIGN attribute, so you could use it to align a block of text and graphics to CENTER, as in this example:
<DIV ALIGN=CENTER> <H1>This header is centered.</H1> <P >But this text is center-aligned.</P><BR> So are the images above and this line of text.<BR> <P ALIGN=RIGHT>But this text is right-aligned.</P> </DIV>

Note that all the elements between the <DIV> and </DIV> tags are aligned according to the definition given by the <DIV> tag, except for any elements which have their own alignments defined. As is always the case with the ALIGN attribute, it can assume the values LEFT, CENTER, or RIGHT.

Dynamic HTML and Web Designing


The <CENTER> as a Block Element
In the original HTML 2based browsers, centering text was impossible. One of the major additions introduced by HTML 3.2 was the <CENTER> element because of its widespread use. To center text or embedded objects (such as images), simply enclose the content within <CENTER> and </CENTER>. In this sense, <CENTER> appears to be a text-formatting style element, but under the HTML 3.2 and transitional 4.0 specifications (and beyond), <CENTER> is defined as an alias for a block-level structuring element. Under the HTML 4.0 DTD, <CENTER> is simply an alias for <DIV ALIGN=CENTER> and is treated exactly the same way. <BODY> <CENTER> <H1>This heading is centered.</H1> <P>This paragraph is also centered.</P> <P>Many paragraphs and other block elements can be affected by a CENTER at once.</P> </CENTER> </BODY> </HTML> The <CENTER> element is unlikely to go away, considering its simplicity and widespread use. But according to specifications, two preferred ways exist to center content: the <DIV> element with a center alignment attribute, or the ALIGN attribute used in conjunction with some elements.

Preformatted Text
The <PRE> and </PRE> tags can be used to surround text that shouldnt be formatted by the browser. The text enclosed within the <PRE> tags retains all spacing and returns, and doesnt reflow when the browser is resized. Scroll bars and horizontal scrolling are required if the lines are longer than the width of the window. The browser generally renders the preformatted text in a monospaced font, usually Courier. Some text formatting, such as bold, italics, or links, can be used within the <PRE> tags. The pre element in this example displays as shown in Figure 5-3. The second part of the figure shows the same content marked up as a paragraph (p) element for comparison.

<pre> This is text with a </pre> <p> This is text with a </p>

an

example of lot of curious white space. example of lot of curious white space.

Figure 4-6. The spaces and returns remain intact when the content is rendered.

Dynamic HTML and Web Designing


Horizontal Rule
One way you can separate sections of your Web page is to use the hr tag. By default, this tag produces a thin, gray horizontal line called a horizontal rule. The <HR> element is an empty element, because it has no close tag and encloses no data, the W3C recommends using <hr/> to officially start and end this tag. Several attributes can change the appearance of the horizontal rules you use on your pages such as SIZE sets the bars thickness (height). WIDTH sets the bars width. ALIGN sets its vertical alignment. NOSHADE renders the bar without a surrounding shadow.
<HR SIZE=4 WIDTH="50%">

Line Breaks
The <br> tag is used to add a line break in your HTML page. It causes the browser to stop printing text on that line and drop down to the next line on the page. Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed. Writing it like <br /> is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.

HTML Lists
There may be times when web designers need to organize information or images in a neat format resembling a list. This allows the designer to group related pieces of items together so they can be clearly seen increasing readability and importance. HTML has tags for this purpose and supports the following three block-level list types: Unordered List Ordered List Definition Lists

Unordered Lists: Unnumbered or unordered lists are usually displayed with bullets, which depict each new line of information to be displayed in the list structure. Unordered lists should be used when needing to display a related group of data without stressing the order in which the data is presented. The following code illustrates an example of an unordered list: <html> <head><title>Unordered List Example</title></head> <body> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4 </li> </ul> </body> </html>

NOTE: The type="" attribute can be used in the opening <ul> tag to specify a square, circle, or disc shaped bullet. If no bullet is specified, the default solid disk shape is used. Also note that the closing </li> tag is optional when entering <li> items.

Dynamic HTML and Web Designing

Numbered Lists: Numbered lists are coded identical to an unnumbered list except for the opening
and closing tag, which are: <ol> </ol>. Numbered lists should be used when needing to display data when order is important. <html> <body> <ol type="A"> <li>List Item <li>List Item <li>List Item <li>List Item </ol> </body> </html>

1 2 3 4

NOTE: The following is a listing of the possible numbering styles for the type="" attribute: VALUE 1 A a I i MEANING Arabic (1, 2, 3, ...) [default] Alphabetic uppercase Alphabetic lowercase Roman numeral uppercase Roman numeral lowercase

Definition Lists: Definition lists can be used for two purposes. If needing to list terms with
definitions, designers can use alternating definition tags <dt> and definition data tags <dd>. Note that using closing tags when using the <dt> and <dd> tags is optional. Designers can also use a definition list when using a custom bullet image instead of the standard bullet types of numbered and unordered lists. If using a custom bullet, only <dd> opening and closing tags should be used to list the bullet images and items. To begin and end a definition list, use the <dl></dl> start and closing tags. The following examples illustrate the two types of definition lists: <html> <body> <dl> <dt><b><i>Word 1</i></b></dt> <dd>This corresponds to the meaning of word 1.</dd><br><br> <dt><b><i>Word 2</i></b></dt> <dd>This corresponds to the meaning of word 2.</dd><br><br> <dt><b><i>Word 3</i></b></dt> <dd>This corresponds to the meaning of word 3.</dd><br><br> </dl> </body> </html> The above HTML code would produce the following results in a web browser:

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing Text-Level Elements


These Text-Level Elements are also called phrase elements because theyre intended to wrap around a short string of a few words, or even a single word, to give it added meaning and formatting that sets it apart from the other words that surround it. Text elements in HTML come in two basic flavors: physical and logical. Physical elements, such as <B> for bold and <I> for italic, are used to specify how text should be displayed. Logical elements, such as <STRONG> and <EM>, indicate what text is, but not necessarily how it should look.

Physical Character-Formatting Elements:


HTML supports various elements that can be used to influence physical formatting. They have the same effect in all the browsers such as Netscape Navigator, Internet Explorer and Mozilla. <b> Element: Anything that appears in a <b> element is displayed in bold. Note: This <b> element has the same effect as the <strong> element, which you will meet later, and is used to indicate that its contents have strong emphasis. This is in <B>bold</B> text. <i> Element: The content of an <i> element is displayed in italicized text. The <i> element has the same effect as the <em> element, which you will meet later, and which is used to indicate that its contents have emphasis. This is in <I>italic</I> text. <u> Element: The content of a <u> element is underlined with a simple line: This text is <U>underlined</U>. <s> and <strike> Element: The content of an <s> or <strike> element is displayed with a thin line through the text (<s> is just the abbreviated form of <strike>). This is a <STRIKE>strikethough</STRIKE> example. The <tt> Elemen: The content of a <tt> element is written in monospaced font. This is in TT>teletype</TT> text. The <sup> Element: The superscript element moves the text surrounding text and (if possible) displays the text in a smaller size font. This is a <SUP>superscript</SUP>. The <sub> Element: The subscript element moves the text lower than the surrounding text and (if possible) displays the text in a smaller size font. This is a <SUB>subscript</SUB>. The <big> Element: The content of the <big> element is displayed one font size larger than the rest of the text surrounding it. If the font is already the largest size, it has no effect. You can nest several <big> elements inside one another, and the content of each will get one size larger for each element. This is <BIG>big</BIG> text. The <small> Element: The content of the <small> element is displayed one font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has no effect. You can nest several <small> elements inside one another, and the content of each gets one size smaller for each element. This is <SMALL>small</SMALL> text. higher than the

Dynamic HTML and Web Designing


Figure 1-12 shows the use of the all physical tags.

Logical Elements (Phrase Elements)


The semantic text elements describe the enclosed texts meaning, context or usage. The way they look when they appear in the browser window depends on a style sheet, either one you provide or the browsers built-in default rendering.

Dynamic HTML and Web Designing


Adding emphasis to text
There are two elements that indicate that text should be emphasized: em for emphasized text and strong for strongly emphasized text. Emphasized text elements almost always display in italics by default.
<p>Garamond is a <em>really</em> popular typeface, but Times is a <strong>really really</strong> popular typeface.</p>

10

Short quotations
Use the quotation (q) element to mark up short quotations, such as To be or not to be in the flow of text, as shown in this example. Matthew Carter says, <q>Our alphabet hasn't changed in eons.</q>

Abbreviations and acronyms


Marking up shorthand terms as acronyms and abbreviations provides useful information for search engines, screen readers, and other devices. Abbreviations, indicated by the abbr element, are shortened versions of a word ending in a period (Conn. for Connecticut, for example). Acronyms, indicated by the acronym element, are abbreviations formed by the first letters of the words in a phrase (such as WWW or USA). Both elements use the title attribute to provide the long version of the shortened term, as shown in this example. <acronym title="American Type Founders">ATF</acronym> <abbr title="Points">pts.</abbr>

Citations
The cite element is used to identify a reference to another document, such as a book, magazine, article title, and so on. Citations are typically rendered in italic text by default. Heres an example: <p>Passages of this article were inspired Typography</cite> by James Felici.</p> by <cite>The Complete Manual of

Defining terms
The <dfn> element allows you to specify that you are introducing a special term. Its use is similar to the words that are in italics in the midst of paragraphs in this book when new key concepts are introduced. <p><dfn>Script typefaces</dfn> are based on handwriting.</p>

Program code elements


A number of inline elements are used for describing the parts of technical documents, such as code (code), variables (var), program samples (samp), and user-entered keyboard strokes (kbd).

Dynamic HTML and Web Designing


Code, sample, and keyboard elements typically render in a constant-width (also called monospace) font such as Courier by default. Variables usually render in italics. The browser displays the content in code element as given below in the following figure.

11

Inserted and deleted text


The ins and del elements are used to mark up changes to the text and indicate parts of a document that have been inserted or deleted (respectively). Chief Executive Officer:<del title="retired">Peter Pan</del><ins>Pippi Longstockings</ins>

The FONT Element


The method that HTML uses for providing control over the appearance of the text is the FONT element. The FONT element is a container that is opened with the <FONT> start tag and closed with the </FONT> end tag. Unless attributes are assigned in the start tag, there is no effect of using a FONT element. The FONT element can be used inside of any other text container and it will modify the text based upon the appearance of the text within the parent container. Using the FACE, SIZE, and COLOR attributes, you can use FONT to drastically modify the appearance of text in your documents. The FACE Attribute: The FACE attribute allows you to specify the font that you would like the viewing software to use when displaying your document. The parameter for this attribute is the name of the desired font. The SIZE Attribute: The SIZE attribute of the FONT element allows the document author to specify character height for the text. Font size is a relative scale from 1 though 7 and is based upon the "normal" font size being 3. The COLOR Attribute: Text color can be specified in the same manner as the face or the size. The COLOR attribute accepts either a hexadecimal RGB value or one of the standard color names. <HTML> <HEAD> <TITLE>Font Selection Example</TITLE> </HEAD> <BODY> <FONT FACE="Verdana", "Arial", "Helvetica" SIZE=4 COLOR="#FF0000"> This is an example of font element with different fonts, size of 4 and color red. </FONT> </BODY> </HTML>

The <BASEFONT> Tag


The <BASEFONT> tag is used to establish the standard font size, face, and color for the text in the document. The choices made in the <BASEFONT> tag remain in place for the rest of the document, unless they are overridden by a FONT element. When the FONT element is closed, the BASEFONT characteristics are returned. BASEFONT attributes can be changed by another <BASEFONT> tag at any time in the document. Note that BASEFONT is a tag and not a container. There is no</BASEFONT> end tag. <BASEFONT SIZE=6 FACE="GEORGIA">

Dynamic HTML and Web Designing

12

You might also like