Draft for Information Only
Content
HTML
Document Rendering
Example of HTML WebPage Rendering
Computer Code of HTML Document
Examples of Impermissible Computer Code
Computer Code
Rendering of HTML Document
Examples of Computer Code Rendering
HTML
Document Rendering
HTML document composes of three layers in general..
- computer code layer for constructing the HTML document dynamically.
- plain text layer for presentation and document structure
- markup layer to annotate a document's display format and describe included objects
Rules for rendering HTML document in different layer are based on different sets of
standards and specifications. Rules
used in building computer code for HTML document are usually depending
on the software used.
Example of HTML WebPage Rendering
For example, an entity '<' is the entity used to replace the reserved less-than character (<) used in ASP script. And a pair of double quot ("") is an escape character used to replace the reserved double-quote character (") used in ASP script. RAW ASP Code Input:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<%
Response.Write "<p>An ""ASP"" Code</p>"
%>
<%
Response.Write "<p>An ""ASP"" Code</p>"
%>
</body>
</html>
Translated HTML Code Input:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<p>An "ASP" Code</p><p>An "ASP" Code</p>
</body>
</html>
HTML Web Page Embedded Output:
Computer Code of HTML Document
The computer code of a HTML document is
only an encoded plain texts of the HTML Document according to some
standards and specification.
Examples of Impermissible Computer Code
-
Using the ampersand character "&" in HTML document as a
literal is not recommended because the ampersand character "&" in
HTML plain text document is a special character to mark the beginning
of an entity for HTML rendering engine. For example HTML Document Input:The literal "&" should be encoded as entity "&amp;"(&)
or code "&#x26;"(&) in the computer code of a HTML document.
e.g.
<P style="font-size:20px">`1234567890-=
~!@#$%^ & *()_+ []\ {}| ;' :" ,./<>
qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM</p>
HTML Web Page Embedded Output: -
In general, using special characters "&" in HTML computer code as literals are not recommended because these special characters may be reserved characters. For example HTML Document Input:&, <, ", and > are four reserved characters in ASP
these special characters should be encoded in the computer code
of a HTML document when using as literal characters. e.g.
<P style="font-size:20px">`1234567890-=
~!@#$%^ & *()_+ []\ {}| ;' :" ,./<>
qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM</p>
HTML Web Page Embedded Output: Using a character that is not defined in the document type may cause
trouble. For exmple: HTML Document Input:The € character with code "&#x80;" is
one of not defined codes in HTML.
The correct code for € is "&#x20AC;"(€)
or using the HTML entity "&euro;"(€).
HTML Web Page Embedded Output: Using impermissible character in URI may cause trouble. For example HTML Document Input:The first character code "&#x20AC;"(€)
and character code "&#x3C;"(<)
are impermissible characters in URI of tag a
"<a href="http://www.sideway.hk/&#x20AC;/default.asp?
a=&#x3C;"> Go to Sideway.hk/&#x20AC;</a>"
<br />
Other examples of impermissible character in URI are \, a space ( ).
The character &#x5C; is an impermissible character
while a space can be replaced by escape character %20.
HTML Web Page Embedded Output: Using special character in "href" attribute may cause trouble. All
special characters in "href" should be encoded. For example, "&"
is a reserved character in HTML, < and " is reserved character
in ASP. HTML Document Input:<a href="http://www.sideway.hk">`-= ~!@#$%^ & *()_+ []
\{}| ;' :" ,.<></a>
HTML Web Page Embedded Output:
Computer Code
Rendering of HTML Document
HTML document is a markup document. In other words, the output of a
HTML document is rendered by the tagged elements, not the computer code
of the HTML document. Therefore the layout of the computer code
of a HTML document has no effect on the output of the HTML document.
Examples of Computer Code Rendering
- Space: All spaces located outside tagged element of the
HTML computer code will be ignored in the output of a HTML document. Any number of continuous spaces in HTML
tagged elements are counted
as one space only in HTML web page output except inside a
PRE element. An additional of neighborhood space can use a special character entity " " to represent. A good practice is to add space
immediately before an opening tag and immediately after a closing tag.
HTML Document Input: <p>01234567890</p> <p>0 2 56 0</p>
<p>0 2 56 0</p>
<pre>0 2 56 0</pre>
HTML Web Page Embedded Output: -
Line Space, Carriage Return: Line space is created by entering a carriage return.line feed in the HTML
computer code. Line feed is ignored and replaced by a "Space" in rendering the HTML Web Page output. And all created "Space"s are combined together with any typed "Space"s to form one space only.
HTML Document Input:<p>01234567890</p>
<p>01234
567890</p>
<p>0123
567890</p>
<p>01234
567890</p>
<pre>01234
567890</pre>
HTML Web Page Embedded Output: -
Line Break: In HTML computer code, a line break is created
by pressing a carriage return. But in HTML web page output, a line
break is created by a tagged element "<br>". Line Break is a line feed in the same
paragraph. The HTML web page output is usually depending on the screen resolution and window size, because of word wrapping during text flow, the output results may be difference in different case .
Each"<br>" tag element will manually create a single line break
markup in the HTML code.
A "<br>" tag element will create a line feed in the HTML Web
Page only. All the typed spaces before the line feed <br> will be
combined to one space only, but all typed spaces after the <br>
tag element in the computer code will be
ignored in HTML Web Page output. Sometimes the <br> tag can also be expressed as <br /> for compatible with XHTML.
HTML Document Input:<p>01234567890</p>
<p>01234
567890</p>
<p>0123 <br />
567890</p>
<p>01234<br /> 56
567890</p>
<pre>01234<br /><br />
567890</pre>
HTML Web Page Embedded Output: - Paragraph: In HTML computer code, a paragraph indication is usually created by entering one more carriage return.
Paragraph in the HTML web page output can also be created in the same
way, However this is not a usual way. A line feed in the HTML web page
is used as a line break. A line break is only a need based on the display format of HTML
web page output. But a paragraph is a separation of HTML document according to the arrangement of idea or arguments. Usually, there is no relation between the presentation format and the organization of information of a HTML
web page. The gaps between paragraphs are usually controlled by the
margin, padding, and border styles of the paragraph .
HTML Document Input:<p>A line feed in HTML web page is created by entering a tagged element
"<br>" in the HTML code to simulate a carriage return.
Nested a "<br>" tag ...<br>... in a tagged element will insert a
line break along the inline. However in HTML web page output,
the indication of a paragraph is only the visual rendering of the
tagged element</p><p>This is another paragrah.</p>
HTML Web Page Embedded Output: - Comment: The comment tag is used to insert a comment in the HTML document. The comment
inside the tag is ignored by the browser and will not be display in the web page.
Because the code inside a comment tag is still available to the program, a comment
tag can be used to hide the content of style elements and script elements from
non-conforming browser for rendering them as text.
HTML Document Input:This is a comment tag:<br />"123<!--- Comment -->321"
<br />example.
HTML Web Page Embedded Output: - HyperLink: Hyperlink is another common tag used in the HTML Web Page. A <a> tag provide an anchor feature to link up any resource available in the web.
HTML Document Input:<a href="http://www.sideway.hk">Go to Sideway.hk</a>
HTML Web Page Embedded Output: - Image: Image is one of the common format in HTML Web Page. A <img> tag is used to embed an image in an HTML Web Page. Today there are also many other types of embedded objects can be embedded in an HTML Web Page.
HTML Document Input:<img src="http://www.sideway.hk/images/sideway.jpg"
height="30px" alt="Sideway">
HTML Web Page Embedded Output:
©sideway
ID: 100800026 Last Updated: 19/9/2010 Revision: 1
|
 |