Embed pdf to website, hide the link and display pdf directly - html

I want to add a pdf to my blog post. I found the following code on stackoverflow to add the link.
<embed src="https://mypdflink" type=""application/pdf" width="600" height="400">
This code adds a link to the pdf, which is good. But what I really want is to display the pdf on the blog page, without showing the link or asking readers to click to open the pdf. Can anyone please help me?
By the way, this is my first time building my own blog/website. I have no background in website building or computer science in general. I am using free theme on wordpress.com. I appreciate your suggestion and help!

The below worked for me, hope it helps. :)
<html>
<head>
<title></title>
</head>
<body>
<embed src="http://www.dol.wa.gov/forms/420001.pdf" type="application/pdf" width="400" height="600"/>
</body>
</html>

thanks for your help. I ended up not using any html code. The pdf I wanted to insert was a dashboard made in Tableau consisting of a graph and table. What I ended up doing was that I took a screenshot of the pdf, pasted it to painter.net, resized the photo to 300dpi, and inserted the photo to my wordpress post....:)

Related

Can anyone help me because my html page no longer loads images?

Can someone help me because when i create the html page, the browser does not load the images.Should I uninstall the chrome browser?
please check your image path URL link. And please share more info about the issue. Code and other docs.
First, we need a folder/file structure.
Please create a Folder named images, you don't need to create a folder for images, but please do it!
Home Folder
images
image.png
index.html
Now, here the basic HTML code:
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="images/image.png" alt="myImage">
</body>
</html>
Please be sure you use the correct file extension, like .png, or .jpg!
Now you can see the image in your browser!
But please send more information, when it doesn't work!
Have a great day.

Why is my HTML file not displaying to the browser?

I am learning how to use a text editor, and I've just created my first file with it. It previews with the correct output, but when I run it in the browser, it gives me a blank page.
As you can see, the doctype and html tags are in place, as well as the head and body. I am using Visual Studio Code as my text editor. Why will this not display anything in my browser? To be clear, it does preview, just won't display in browser
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Are you sure? It does display on mine. Is the file saved as a .html file? Also, try opening it on another browser. If that doesn't work, try creating a new file in Notepad or something similar, save it with a .html file extension and try opening it again.
EDIT:
Try using Notepad. Check if the file is saved with a UTF-8 encoding. If that doesn't work, try installing another browser or using Edge/Safari/Internet Explorer or whatever built-in browser you have.
In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.
Possible Reasons:
You might not have saved the changes after writing the code (most likely).
Problem with the browser (load it in another browser)
Check the extension (just for clarification)
There is no problem with !DOCTYPE html tag or html tag.
It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.
I had this same baffling problem. I quit Chrome, re-opened, and then I was able to open my .html files (from my Mac's Finder) with Chrome just like I could already open them with Safari or other browsers.
I just had this problem and the solution was very simple, so I´ll give it just in case someone runs into the same silly mistake. I was typing all the code in the wrong file.
Add this line of code inside your head element:
<meta charset="UTF-8"/>
I would recommend to put the right path under the src with the correct file location
<script src="scripts/main.js"></script>
I was facing the same issue and none of the steps mentioned helped.
So I deleted the index.html file I had, opened my project folder in VS Code, created a new index.html file there, pasted my code and clicked on go live.
Then I could see my image on the webpage. And after that I could see the image even by double clicking the index.html file from Finder. Hope this helps.
Save your file in Notepad or whatever text generator you are using and then close it before launching the html file in the browser. Mine would not open if Notepad was still open.
In visual studio code just type in a blank page
html:5
then just press the touch "tab", it will display a basic html 5 structure to start
If anyone still needs help- It worked after saving the file on VS Code!
Just remove "<html>" a the second line it's already set in the first line
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Twitter timeline is not loading

The twitter timeline is not shown properly in the web browser even though it is the original code from the twitter publish website.
At first the timeline was shown as it should. Somehow after I refreshed the site with F5 it didn't work at all. Somehow at the X time I refreshed it worked. When I restarted my computer and wanted to work on the file again it didn't work. I'm not an expert on HTML but I think the problem may be in the script tag.
I looked up other questions here on stackoverflow but none of them helped me. My code had no problems before I tried out without the timeline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/ErinCorleyGray/lists/stackers?ref_src=twsrc%5Etfw">A Twitter List by ErinCorleyGray</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
A timeline of the twitter list should be displayed instead I get only the text: "A twitter list by ..."
I just pasted your code onto a new html document and viewed it on my Chrome browser and I did not have an issue with viewing the timeline. I have attached a screenshot of what I see. Maybe it is a browser issue? screenshot of the top of the page

How can Google forms redirect to custom URL on Wordpress

I am working with a WordPress site trying to embed Google Forms. Everything seemed to be working until I tried to redirect the form to a custom thank you page. The iframe code is working perfectly fine:
<iframe src="GOOGLE FORM EXAMPLE /viewform?embedded=true" width="100%" height="1050" frameborder="0" marginwidth="0" marginheight="0">Loading...</iframe>
However, when I entered the meta code which is meant to redirect, it worked once but now it loads the thank you page instantly when the form page is opened:
<meta http-equiv="refresh" content="0; url=www.EXAMPLE.com/ThankYou">
Which I definitely do not want, so the question is how can I rewrite this so the form page won't redirect until the person filling it out presses submit? I have a feeling this is an easy problem to solve but I have found nothing online and I am starting to feel really really stupid.
Currently, Google does not support this.
also, <meta http-equiv="refresh" content="0; url="www.EXAMPLE.com/ThankYou"> refreshes the page with the iFrame in it, so that wont work. See Below:
Refrence
https://productforums.google.com/forum/#!msg/docs/90dJqCYl_fU/4OLrE6ykltIJ
In that thread there is a solution using JS but I'm not sure if it will work correctly.
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
onload="if(submitted) {window.location='whateveryourredirectis.html';}"></iframe>
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe"
onsubmit="submitted=true;">
and place your google form link there. I have not tested this code.
Another workaround is not even using Google Forms at all, and creating an HTML Form and using https://getform.org/ in your WordPress site.
Hopefully, I helped you out! Please let me know what happens afterward, and if it works, mark the correct answer.

Basic HTML image and audio file not loading properly

I am not super fluent in html, css, or really any language as a matter of fact. I wrote a super basic website just for a little fun, however the image and audio file aren't loading at all. I really feel like everything is written as it should be, but I guess I'm wrong. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>THE GOAT</title>
</head>
<body>
<center>
<img src="mango.jpg" />
<br>
<audio controls autoplay>
<source src="falco.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
The index.html is in the same folder as "mango.jpg" and "falco.mp3" so I don't think I need to make a more specific path. Here is the URL of the site:
defaultfal.co
Thanks for any help :-)
When I visit your image url directly, I get 403 forbidden. This means that the permissions are set incorrectly on your server. (Specifically that the file is set to not be readable by the public.)
Make sure your file permissions are set to be readable by everyone! You can accomplish this using the chmod command line tool.
Edit: OP fixed it on his server and it works now!