Sideway
output.to from Sideway
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..

  1. computer code layer for constructing the HTML document dynamically.
  2. plain text layer for presentation and document structure
  3. 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 '&lt;' 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 "&lt;p&gt;An ""ASP"" Code&lt;/p&gt;"
        %>
    </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>&lt;p&gt;An "ASP" Code&lt;/p&gt;
    </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

  1. 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 "&amp;" should be encoded as entity "&amp;amp;"(&amp;) 
    or code "&amp;#x26;"(&#x26;) in the computer code of a HTML document. 
    e.g.
    <P style="font-size:20px">`1234567890-= 
    ~!@#$%^   &amp;   *()_+ []\ {}| ;' :&quot; ,./<> 
    qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM</p>
    
    HTML Web Page Embedded Output:
  2. 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:
    &amp;, &lt;, &quot;, and &gt; 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-= 
    ~!@#$%^   &amp;   *()_+ []\ {}| ;' :&quot; ,./&lt;&gt; 
    qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM</p>
    
    HTML Web Page Embedded Output:
  3. Using a character that is not defined in the document type may cause trouble. For exmple:

    HTML Document Input:
    The &#x20AC; character with code &quot;&amp;#x80;&quot; is 
    one of not defined codes in HTML.
    The correct code for &#x20AC; is "&amp;#x20AC;"(&#x20AC;) 
    or using the HTML entity &quot;&amp;euro;&quot;(&euro;).
    
    HTML Web Page Embedded Output:
  4. Using impermissible character in URI may cause trouble. For example

    HTML Document Input:
    The first character code "&amp;#x20AC;"(&#x20AC;) 
    and character code "&amp;#x3C;"(&#x3C;) 
    are impermissible characters in URI of tag a
    &quot;&lt;a href="http://www.sideway.hk/&amp;#x20AC;/default.asp?
    a=&amp;#x3C;"&gt; Go to Sideway.hk/&amp;#x20AC;&lt;/a&gt;&quot;
    <br />
    Other examples of impermissible character in URI are \, a space ( ). 
    The character &amp;#x5C; is an impermissible character 
    while a space can be replaced by escape character %20.
    
    HTML Web Page Embedded Output:
  5. Using special character in "href" attribute may cause trouble. All  special characters in "href" should be encoded. For example, "&amp;" is a reserved character in HTML, &lt; and &quot; is reserved character in ASP.

    HTML Document Input:
    &lt;a href="http://www.sideway.hk">`-= ~!@#$%^ &amp; *()_+ []
    \{}| ;' :&quot; ,.&lt;>&lt;/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

  1. 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 "&nbsp;" 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 &nbsp;56 &nbsp;&nbsp;0</p> 
          <pre>0 2  56   0</pre> 
    
    HTML Web Page Embedded Output:
  2. 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:
  3. 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:
  4. 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 
    "&lt;br&gt;" in the HTML code to simulate a carriage return. 
    Nested a "&lt;br&gt;" 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:
  5. 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 />&quot;123<!--- Comment -->321&quot;
    <br />example.
    
    HTML Web Page Embedded Output:
  6. 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:
  7. 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


Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 761

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 11

Biology 1

Geography 1


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 06 September 2019