Embed a PDF in a webpage

This post is aimed at Grade 11 & 12 learners looking to improve their DBE CAPS CAT PAT marks (Hint: this is ALL of you). In the Phase 3 HTML website post, I described the method for embedding your Google Form questionnaire on your web page. This post will explain how you can link or embed a PDF version of your Word questionnaire.

1. Link

The PDF can be coded as a hyperlink, with the href attribute being the name of the PDF. In this example, the PDF file must be in the same directory as the web page on which the hyperlink appears. The target attribute will result in the PDF opening in a new tab.

<p>Questionnaire PDF here: <a href="questionnaire.pdf" target="_blank">Questionnaire PDF</a></p>

2. Download link

Adding the download attribute results in the PDF being downloaded to the client machine when the link is clicked.

<p>Questionnaire PDF here: <a href="questionnaire.pdf" target="_blank">Questionnaire PDF</a></p>

3. Embed

The src, width and height attributes work in the same manner as they do when using the <img> tag.

<embed src="questionnaire.pdf" width="500" height="700" type="application/pdf">

References:

1. https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html
2. https://www.w3schools.com/tags/tag_embed.asp
3. https://www.w3schools.com/tags/att_a_download.asp