WE Unit-2 HTML Elements

7/29/2019 WE Unit-2 HTML Elements

1/12

1Dynamic 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 itsown 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 cancontain text and inline elements.

As with most word processors, HTML includes several tags to delimit, and hence, format paragraphs oftext. These tags include the following:

Formatted paragraphs through Headings Quoted text Preformatted text A division of the document Centered text
Line Break, Horizontal Rule ,, Unnumbered, ordered, and definition lists

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

Formatted Paragraph

The paragraph tag p is used, quite simply, to mark up paragraphs of text:

Example:

This is a paragraph of text

and this is another paragraph.

The p element is one of the most commonly used building blocks of HTML. When you use the p elementto 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 orphrase elements can be included. The P element has an attribute called align that will center thecontent inside the two paragraphs.

Example:

Paragraph Example

This is the first paragraph in the example about the P tag. Therereally isn't much to say here.

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.

Here the paragraph is aligned to the right. Right-

aligned text is also troublesome to read. The rest of the text of this

paragraph is of little importance.

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.


2/12


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

Headings

The heading elements are used to create headlines in documents. Six different levels of headings aresupported: , , , , , and . These range in importance from ,the most important, to , the least important. Each heading uses a large, usually bold character-formatting style to identify itself as a heading. HTML automatically adds an extra blank line before andafter a heading.

Heading 1 Heading 2 Heading 3

Heading 4 Heading 5 Heading 6

Plain body text:The quick brown fox jumpedover the lazy dog.

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.


3/12


Quoted Text

The blockquote tag gives you the option of setting off a long quotation or note that might otherwise getlost within a paragraph of text. This tag indents the entire selection on both the right and the left, andalso 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 and usually indents the blocked information.

Renowned type designer, Matthew Carter, has this to say about hisprofession:

Our alphabet hasn't changed in eons; there isn't much latitude in

what a designer can do with the individual letters.

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.

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

Divisions Tag

The container (DIV stands for division) can be used to enclose and define the alignmentfor an entire block of page elements. It supports the ALIGN attribute, so you could use it to align ablock of text and graphics to CENTER, as in this example:

This header is centered.

But this text is center-aligned.

So are the images above and this line of text.

But this text is right-aligned.

Note that all the elements between the and tags are aligned according to the definitiongiven by the tag, except for any elements which have their own alignments defined. As isalways the case with the ALIGN attribute, it can assume the values LEFT, CENTER, or RIGHT.


4/12


The as a Block Element

In the original HTML 2based browsers, centering text was impossible. One of the major additionsintroduced by HTML 3.2 was the element because of its widespread use. To center text orembedded objects (such as images), simply enclose the content within and . Inthis sense, appears to be a text-formatting style element, but under the HTML 3.2 and

transitional 4.0 specifications (and beyond), is defined as an alias for a block-levelstructuring element. Under the HTML 4.0 DTD, is simply an alias for and is treated exactly the same way.

This heading is centered.

This paragraph is also centered.

Many paragraphs and other block elementscan be affected by a CENTER at once.

The element is unlikely to go away, considering its simplicity and widespread use. Butaccording to specifications, two preferred ways exist to center content: the element with acenter alignment attribute, or the ALIGN attribute used in conjunction with some elements.

Preformatted Text

The and tags can be used to surround text that shouldnt be formatted by thebrowser. The text enclosed within the tags retains all spacing and returns, and doesnt reflowwhen the browser is resized. Scroll bars and horizontal scrolling are required if the lines are longer thanthe 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 tags.

Thepre element in this example displays as shown in Figure 5-3. The second part of the figure shows

the same content marked up as aparagraph (p) element for comparison.

This is an example of

text with a lot of

curious

white space.

This is a example of

text with a lot of

curious

white space.

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


5/12


Horizontal Rule

One way you can separate sections of your Web page is to use the hr tag. By default, this tag producesa thin, gray horizontal line called a horizontal rule. The element is an empty element, because ithas no close tag and encloses no data, the W3C recommends using to officially start and end thistag. Several attributes can change the appearance of the horizontal rules you use on your pages suchas SIZE sets the bars thickness (height). WIDTH sets the bars width. ALIGN sets its verticalalignment. NOSHADE renders the bar without a surrounding shadow.

Line Breaks

The
tag is used to add a line break in your HTML page. It causes the browser to stop printing texton that line and drop down to the next line on the page. Because the
tag has no end tag (orclosing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that allelements must be closed. Writing it like
is a future proof way of closing (or ending) the taginside 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 formatresembling a list. This allows the designer to group related pieces of items together so they can beclearly seen increasing readability and importance. HTML has tags for this purpose and supports thefollowing three block-level list types:

Unordered List Ordered List Definition Lists

Unordered Lists: Unnumbered or unordered lists are usually displayed with bullets, which depict eachnew line of information to be displayed in the list structure. Unordered lists should be used whenneeding 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:

Unordered List Example

List Item 1

List Item 2

List Item 3List Item 4

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


6/12


Numbered Lists: Numbered lists are coded identical to an unnumbered list except for the openingand closing tag, which are: . Numbered lists should be used when needing to display datawhen order is important.

NOTE: The following is a listing of the possible numbering styles for the type="" attribute:

VALUE MEANING1 Arabic (1, 2, 3, ...) [default]A Alphabetic uppercase

a Alphabetic lowercaseI Roman numeral uppercasei Roman numeral lowercase

Definition Lists: Definition lists can be used for two purposes. If needing to list terms withdefinitions, designers can use alternating definition tags and definition data tags . Note thatusing closing tags when using the and tags is optional. Designers can also use a definitionlist when using a custom bullet image instead of the standard bullet types of numbered and unorderedlists. If using a custom bullet, only opening and closing tags should be used to list the bulletimages and items. To begin and end a definition list, use the start and closing tags.

The following examples illustrate the two types of definition lists:

Word 1

This corresponds to the meaning of word 1.

Word 2


Word 3


The above HTML code would produce the following results in a web browser:

List Item 1

List Item 2

List Item 3

List Item 4


7/12



8/12


Text-Level Elements

These Text-Level Elements are also called phrase elementsbecause 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 setsit apart from the other words that surround it. Text elements in HTML come in two basic flavors:

physical and logical.

Physical elements, such as for bold and for italic, are used to specify how text should bedisplayed. Logical elements, such as and , indicate what text is, butnot necessarily

how it should look.

Physical Character-Formatting Elements:HTML supports various elements that can be used to influence physical formatting. They have the sameeffect in all the browsers such as Netscape Navigator, Internet Explorer and Mozilla.

Element: Anything that appears in a element is displayed in bold. Note: This element has the same effect as the element, which you will meet later, and is used toindicate that its contents have strong emphasis.

This is in bold text.

Element: The content of an element is displayed in italicizedtext. The elementhas the same effect as the element, which you will meet later, and which is used to

indicate that its contents have emphasis.

This is in italic text.

Element: The content of a element is underlinedwith a simple line:This text is underlined.

and Element: The content of an or element is displayed with athin line through the text ( is just the abbreviated form of ).

This is a strikethough example.

The Elemen: The content of a element is written in monospacedfont.This is in TT>teletype text.

The Element: The superscript element moves the text higher than thesurrounding text and (if possible) displays the text in a smaller size font.

This is a superscript.

The Element: The subscript element moves the text lower than the surrounding textand (if possible) displays the text in a smaller size font.

This is a subscript.

The Element: The content of the element is displayed one font size larger thanthe rest of the text surrounding it. If the font is already the largest size, it has no effect. Youcan nest several elements inside one another, and the content of each will get one sizelarger for each element.

This is big text.

The Element: The content of the element is displayed one font size smallerthan the rest of the text surrounding it. If the font is already the smallest, it has no effect. Youcan nest several elements inside one another, and the content of each gets one sizesmaller for each element.

This is small text.


9/12


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 waythey look when they appear in the browser window depends on a style sheet, either one you

provide or the browsers built-in default rendering.


10/12


Adding emphasis to text

There are two elements that indicate that text should be emphasized: em for emphasized text andstrong for strongly emphasized text. Emphasized text elements almost always display in italics bydefault.

Garamond is a really popular typeface, but Times is a

really really popular typeface.

Short quotationsUse 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, Our alphabet hasn't changed in eons.

Abbreviations and acronymsMarking up shorthand terms as acronyms and abbreviations provides useful information for searchengines, screen readers, and other devices. Abbreviations, indicated by the abbr element, areshortened 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 wordsin a phrase (such as WWW or USA). Both elements use the title attribute to provide the long version ofthe shortened term, as shown in this example.

ATFpts.

CitationsThe cite element is used to identify a reference to another document, such as a book, magazine, articletitle, and so on. Citations are typically rendered in italic text by default. Heres an example:

Passages of this article were inspired by The Complete Manual of

Typography by James Felici.

Defining termsThe element allows you to specify that you are introducing a special term. Its use is similar tothe words that are in italics in the midst of paragraphs in this book when new key concepts are

introduced.

Script typefaces are based on handwriting.

Program code elementsA 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).


11/12


Code, sample, and keyboard elements typically render in a constant-width (also called monospace) fontsuch as Courier by default. Variables usually render in italics.

The browser displays the content in code element as given below in the following figure.

Inserted and deleted textThe ins and del elements are used to mark up changes to the text and indicate parts of a document thathave been inserted or deleted (respectively).

Chief Executive Officer:Peter PanPippi Longstockings

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 start tag and closed with the end tag. Unless attributes are assigned in the start tag, there is no effect of using a FONTelement.

The FONT element can be used inside of any other text container and it will modify the text based uponthe 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 theviewing software to use when displaying your document. The parameter for this attribute is thename of the desired font.

The SIZE Attribute: The SIZE attribute of the FONT element allows the document author tospecify character height for the text. Font size is a relative scale from 1 though 7 and is basedupon the "normal" font size being 3.

The COLOR Attribute: Text color can be specified in the same manner as the face orthe size. The COLOR attribute accepts either a hexadecimal RGB value or one of the standardcolor names.

Font Selection Example

This is an example of font element with different fonts, size of 4 and color

red.

The TagThe tag is used to establish the standard font size, face, and color for the textin the document. The choices made in the tag remain in place for the rest ofthe 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 tag at any time in the document. Note that BASEFONT is a tag and not a container. Thereis no end tag.


12/12


Date post:	04-Apr-2018
Category:	Documents
Upload:	pankajusb
View:	218 times
Download:	0 times

WE Unit-2 HTML Elements

Documents