I've just created my own website with my own domain with IONOS.
On the side, I had created a webpage which was hosted using XAMP, so currently to view my webpage I have to use the URL http://localhost/project1/index.html#
However, I'd like to integrate it into my website if possible?
For example have a section on my webpage where I show a thumbnail of the webpage and when clicked it takes me to www.mywebsite.co.uk/project1
I'm not sure how to go about this though?
You can use Iframe.
See Html Standard and w3schools for more detail about it.
like:
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
<iframe src="www.mywebsite.co.uk/project1" title="My HTML Page"></iframe>
I'm trying to write a student web site for school using only html5 and css3. I want to showcase all of the websites I've made in an iFrame within my student web site using only local files but it's not loading anything. Here's the code I'm using:
<iframe src="yoga/ch7/index.html" name="frame"></iframe>
<p>
<span>Home</span>
<span>Classes</span>
<span>Schedule</span>
</p>
and this is what I'm seeing:
Screenshot
I have tried your code and it did work on my computer, please make sure the src="url" is correct.
copy and paste (yoga/ch7/index.html) it in your browser and make sure there's a result
I have multiple .html files that is been created through notepad.
the 1st .html page is link to the rest of the pages
I need a solution to have all the data inserted into 1st page of html but it should open the same way as they open while they are separate pages.
i don't want to create a particular folder and past all files into it so that it opens from there only.
if anyone has a solution please help me with the coding for the same.
I think you're after an <iframe>
i.e.
<iframe src="file1.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="file2.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="file3.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
It almost sounds like you are looking to create a dynamic web page. This means that you want to have several pages that look very similar but with different text and picture elements. To do this you will need to create a database with each element inside it. Then you can create a MENU page with all of the links to all of the pages on it. The links will be assigned to a dedicated ID in the database. When you click on the link it will open up your DYNAMIC web page. Then you can grab the correct database row with POST, run a QUERY on that particular row and then display the elements as you see fit. We can help you, but as Leandro stated, we need some code to be sure of what you are looking for.
Here is an array with a loop to help create a link to all of your pages...
$pages = array('page1','page2',);
foreach($pages as $value) {
echo "<a href='http://www.yourwebsite.com/$value'>$value</a><br>";
}
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
You can use PDFJs library. Using just JS you can render pdf files.
Please , check here : https://mozilla.github.io/pdf.js/
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p>Download Instead</p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
Here is my solution to this problem.
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</object>
Explanation:
<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag.
Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.
Q) Why can't we directly use tag for all cases?
You can actually, but since the embed tag is loading file from
drive, it does not gives any user controls for the pdf that we see
with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.
Q) Direct drive links don't work....so why this solution?
In the above google drive URL, view is changed to preview.
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharing
becomes,
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing
So, we can make direct drive links work with this little modification
Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.
<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>
replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on
src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
Using Adobe PDF Embed API solved my problem.
Adobe PDF Embed API
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF.
Looks like this:
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
Use an object tag with a iframe tag inside your object tags.
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
Have fun guys!
Can I do this so that I can run my web app within its website?
The app does not require webkit.
Will it require Javascript?
iFrame
The HTML iframe Element (or HTML inline frame element) represents a nested browsing context, effectively embedding another HTML page into the current page.
With iframes you can embed a web page inside another, so I think it will suit your needs.
Example:
<iframe src="a_web_page.html" width="300" height="300" style="margin-left:auto; margin-right:auto;">
<!-- The following is displayed if the browser doesn't
support iFrames (unlikely scenario nowadays). -->
<p>Your browser does not support iframes.</p>
</iframe>
The web page inside the iframe is in a separate context from the "host" page (the one including the iframe). Your JavaScript code should run okay inside the iframe.
I don't know what for you is diffrent between web app and website, but I think that iframe could be a solution for you.