Embedding documents in an HTML page

By Feb 24, 2015


Embedding documents in an HTML page


To incorporate a document in a page of a website, you have several options.
You can convert it to HTML format and insert it into the page, or save it to a directory on the site and place a tag of incorporation in the HTML page that refers to the file. In the latter case, it will be embedded in the HTML page provided that the browser is equipped with a plugin to handle this type of file otherwise it will attempt to view the file by an external application.
Converting to HTML format can be complicated. It depends on the type of file in your source document. Conversions are often accompanied by a loss of quality.
The second method assumes that a visitor to your site has on his machine a reader associated with the type mimes of your document. But certain formats of files as the PDF are often sopported by the browser.
Let's see how to incorporate different types of documents in an HTML page.

Text and HTML Documents

To embed plain text (typed with notepad.exe for example), you can copy and paste directly into your HTML file or place in the HTML page the following code:

<embed src="path to resource name of file" width="500" height="400" type='text/plain'/>

You can also use the object tag:

<object data="path to resource name of file" type="text/plain" width="500" style="height:400px">
<a href="path to resource name of file">Link</a>

to an HTML file, just change the mime type:

<embed src="path to resource name of file" width="500" height="400" type='text/html'/>

Let us give an example of text file incorporated in the page:

PDF Documents

Often used as interchange and archiving PDF format is very widespread and almost all texts treatments allow to generate a PDF file. It is possible under Windows to embed a PDF file in an HTML page with the following code:

<embed src="doc.pdf" width="500" height="400" type='application/pdf'/>

In the following example, the width of the object has been replaced by a percentage, which is advisable in case the page is "responsive".