| Category | Feature | Type | Result |
| Division | Generic division | div |
...
|
| Font Color | HTML Color Chart | font color="green" Your green text goes here./font | Your green text goes here. |
| Font Color | Hexadecimal Color Codes | font color="#008000" Your green text goes here./font | Your green text goes here. |
| Font Color | Default Text Color | body text="Navy" | |
| Font Size | Font Size +1 | font size="+1" Same as it ever was.../font | Same as it ever was... |
| Font Size | Font Size +2 | font size="+2" Three of a kind all over again./font | Three of a kind all over again. |
| Font Size | Font Size 4 | font size="4" Same as it ever was.../font | Same as it ever was... |
| Font Size | Font Size 4 | font size="4" Your visible text goes here and will look like this. /font | Your visible text goes here and will look like this. |
| Font Size | Font Size 5 | font size="5" Three of a kind all over again./font | Three of a kind all over again. |
| Font Size | Font Size 6 | No sizing will be applied to this text... font size="6" ...while this text will appear at size 6. /font | No sizing will be applied to this text... ...while this text will appear at size 6. |
| Font Size | Font Size 7 | font size="7" Your really big text./font | Your really big text. |
| Font Size | Font Size big | big Same as it ever was.../big | Same as it ever was... |
| Font Size | Font Size big big | big big Three of a kind all over again. /big /big | Three of a kind all over again. |
| Font Size | Font Size big big big big | big big big big Your really big text. /big /big> | Your really big text. |
| Font Size | Font Size big small | big big big small small small No sizing will be applied to this text.. /small /small /small ...while this text will appear at size 6. /big /big /big | No sizing will be applied to this text.. ...while this text will appear at size 6. |
| Font Styles | times new roman | font face="times new roman" This text will be displayed using Times New Roman. /font | This text will be displayed using Times New Roman. |
| Font Styles | times new roman & arial | font Here is some text using Times New Roman font face... /font font >Here is some text using Arial font face... /font | Here is some text using Times New Roman font face... Here is some text using Arial font face... |
| Font Style | times new roman & arial | font face="times new roman" This text is Times New Roman font face="arial" while this text uses Arial until the end tag is encountered /font ...and now the text returns to Times New Roman. /font | This text is Times New Roman while this text uses Arial until the end tag is encountered ...and now the text returns to Times New Roman. |
| Font Style | Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice, sans-serif. | Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice, sans-serif. | |
| Heading | h1 | Heading...Sub-Heading...Sub-Heading...Sub-Heading...Sub-Heading...Sub-Heading... | |
| Line | Forced Line Break | br | |
| Line | Horizontal rule | hr | |
| Line | Horizontal rule | hr width="50%" align="left" | |
| Line | Horizontal rule | hr size="5" color="purple" | |
| Quoted Text | Quoted Text | blockquote | ... |
| Paragraph | Paragraph | p | ... |
| Paragraph | Paragraph to Right | p align="right" |
In this paragraph, the text is aligned to the right.
|
| Text | Blinking Text | blink | test test |
| Text | Bold | b | test Bold test |
| Text | monospaced | code | test Your code text goes here. test |
| Text | Italics | i | test Italics test |
| Text | Scrolling Text | marquee | test test |
| Text | Underline | i | test Underline test |
| Text | Strike-through | s | test |
| Text | Subscript (H20) | sub | H2O |
| Text | Superscript (E=MC2) | sup | (E=MC2) |
| Text | Teletype | tt | test Teletypeh test |
testYour code text goes here.test |
| Category |
| To produce this effect, you place the text you wish to format as such in between the start tag and the end tag and then you add certain attributes to the start tag. To illustrate, the source code that produces the green text in Example 1A goes like this: |
| This text is using the 'times new roman' font face. It's relative size is '4' and the color is 'green'. |
| This is the first line. The next line appears here after creating some vertical blank space using a string of 'br' elements. |
In this paragraph, the text is aligned to the right.
|
| This is the first paragraph. In printed text, paragraphs are traditionally rendered by merely breaking the flow of text to the next line and then indenting the first line of the new paragraph. In web pages, however, a new paragraph is typically rendered by breaking the flow of text to the next line which then contains a line of 'white space'. The blank line is subsequently followed by the new paragraph whose first line appears flush with the left margin. This is the next paragraph. Note that any line breaks created in the source code by pressing the 'Enter' key will be ignored by the web browser when it displays the web page. Creating line breaks in the visible text can only be accomplished by using one of various HTML elements. In this case, we are using the 'p' element. |
| First paragraph starts here... Second paragraph starts here... Third paragraph starts here... |
This is the first generic division. The text will continue to flow normally until this 'div' element is terminated by the end tag.
This is the second generic division. Use the 'div' element in conjunction with CSS to achieve a much more refined control over formatting blocks of text on your web page.
|
This uses the 'div' element in conjunction with the 'style' attribute to create a paragraph style similar to printed text paragraphing. The first line of text in this generic division is indented by a space of 30 pixels.
Here is the second generic division. The flow of text breaks to the next line and the first line of text is also indented by a space of 30 pixels.
|
In the official HTML 4.01 Specification, the World Wide Web Consortium (W3C) makes this distinction between block level and inline elements:Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. |
This section will introduce the aspiring web author to fundamentals of writing Hypertext Markup Language... |
 This image's align attribute is set to left. The image 'floats' to the left as the text wraps around the right of the image. It will continue to do so as long as the block element which contains both the image and the text is not terminated by its end tag. As the text continues past the bottom border of the image, it re-aligns itself with the original left margin. |
| This image's align attribute is set to right. The image 'floats' to the right as the text flow wraps around the left of the image. Line breaks can be created using the br element. As the text continues past the bottom border of the image, it flows as it would normally to the original right margin. |
| Here's another example of an image's align attribute set to left. The image 'floats' to the left as the text flow wraps around the right. Using the br element with the clear="all" attribute-value pair you can cause the text that follows to continue on the first line that clears the bottom of all floating objects (in this case, mycoolpic.gif). ...some more text clearing the bottom... |
| This image's align attribute is set to top. The text aligns with the top of the image. |
| This image's align attribute is set to middle. The text aligns with the vertical center line of the image. |
| This image's align attribute is set to bottom. The text aligns with the bottom of the image or more specifically the image rides on the baseline of the text. This is the default setting when no align attribute is declared in the |
| This image has its align attribute set to left which floats the image to the left and causes the text to wrap around the right. My Cool PictureIn addition to this, the hspace and the vspace attributes are used whose values represent lengths in pixels. The hspace attribute defines how much white space to allot on either side of the image while the vspace attribute defines how much white space to allot on the top and bottom of the image. In this example, 20 pixels of white space border on the left and right side of the image respectively while 30 pixels of white space border on the top and bottom of the image. |
| This image is placed in the center of the page using the center element. The text does not wrap around the image. All text that appears before the |
No comments:
Post a Comment