Trying to organize my first website project, I want to set aside an html template to be used in several of my files.
From what I read about mhtml, this format is supposed to solve this problem, and the way to use it seems to be to simply change the extension to .mhtml. I then included the template in the .mhtml file like so:
<!DOCTYPE html>
<html lang="en">
<!--#include virtual="/templates/my_template.shtml" -->
<body>
I am a unique body!
</body>
</html>
With the included server side my_template.shtml looking like so:
<head>
I appear at the top of multiple sites where I am included.
</head>
When I do this and try loading the main page in firefox nothing is displayed anymore and I get a blank page.
What part of the syntax or procedure did I get wrong?
Can I achieve what I want to do without using mhtml
are there any other differences between mhtml and html?
Thanks in advance.
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
[enter image description here][1]I am creating a website and I have a pdf page that I wish to insert into my website for people to download.
This is my link below:
Download the pdf
Harry.pdf is inside my Books folder. I already put the Books folder inside my workspace on VSCode. However, my website saids the file is not there.
I have also tried it with my website name as well before the Books/Harry.pdf and it had the same problem. If anyone knows how to just put a pdf link inside a HTML page and how it is done inside VSCode, I would appreciate it.
Try this code
Download
Or it will default to the filename on the serverside if you leave it empty, like this:
<a href="./Books/Harry.pdf" download>Download the pdf</a>
Should just be this:
Download
It should be the same in VSCode as anywhere else not sure why it isn't working, try setting the href as a URL like from google photos, to see if your file is compatible. Another equivalent is to get the url from the file source. So if you own the domain example.com your html file would be at example.com/index.html and therefore your pdf would be at example.com/Books/Harry.pdf. So you could try that if you have a url. It would look like.
Download
If you want to provide me with the .html file and the .pdf file I could probably set it up, but my guess is that is confidential.
As #Spectric said
Try clearing your cache. It would also be helpful if you showed us the file structure.
That is some good advice.
As per comment you appear to be using relative paths in common parental subfolders e.g. VSyes and Books are both folders together.
With index.html in the former and Harry.pdf in the latter.
Thus your Harry.pdf is a 1st cousin of your index.html in which case you need to use:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- meta http-equiv="X-UA-Compatible" content="IE=Edge" // Should not be needed -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="download">
<!-- if you have other canvas elements on this page
which have been tainted with cross-origin content
they can become dirty and not readable by html2xxx -->
Download Not so Dirty Harry
</div>
</body>
</html>
Beware that since both parental folders are independent of each other that in a production environment although within the same domain (thus not subject to CORS), you may still need to be aware of testing access rights.
if Books is a sub folder in VSyes then remove one dot.
I emplemented two html pages separately. how can put them in the same page (tabs system). ALl the example found on the net are more about simple content tabs (text or so..)
thanks
Call the files using iframe in tab content just keep your markup in html files and don't put any styles or script in that file.
How about using HTML includes?
https://www.w3schools.com/howto/howto_html_include.asp
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="<path to html file goes here>"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
working example here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
Thank you for your answers! but I'm looking more for showing the content of the page. I'm already using frames in each page so putting it in frame is not the best solution for my case.
I think I found my answer in the load() function of jquery to load dynamically a page! here's an example: http://www.jquery-tutorial.net/ajax/the-load-method/
where you can simply add the link of the page.
http://www.jquery-tutorial.net/ajax/the-load-method/
this library is not bad too but I'm going for a tab system and a jquery load for each tab!
I have an html file which is linked to a CSS stylesheet and it is saved into my USB. I send it to a compressed folder and sent it via facebook to my friend, but when he opened it, the design in the first page is not loaded and the following pages cannot be displayed whereas here in my pc, it's working. It seems like it cannot locate the files and I think that it has something to do with the links and directories...
How am I going to send it so that my friend will be able to open it and see it in the same way?
Any help would be greatly appreciated.
If it's in a compressed folder, your friend will need to extract the folder for each file to be able to use eachother.
Or, if your friend isn't that tech-savvy, you could inline all the css (i.e. not link to it externally) and JavaScript into one .html file:
<html>
<head>
<style>
/* All your styles here */
</style>
</head>
<body>
<h1>HTML here</h1>
<script>
//Some js code...
</script>
</body>
</html>
I have a really hard time searching for this, because I have no idea how to call it.
I'll try to describe the process I want, and see if any of you know such an editor.
I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line.
What I do, is copy the menu over to every place. If I change the menu, I need to do it all again.
I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.
I was wondering if there was a way to do this.
I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.
Thanks
Have a look at server side includes ... create a menu.shtml page and then include it like so :
<!--#include virtual="/menu.shtml" -->
Its supported by most web servers out of the box (including IIS, Apache and lighttpd)
Have you heard about MasterPage Concept
The below link will give you a quick start
Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!
You can do this with jquery
Assume you have page1.html page2.html etc.
You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- page content -->
<div id="contact"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact").load("info.txt");
;
});
</script>
Whatever you place in 'info.txt' will be put on the spot of were you put
You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload