How to embedd cgi in html - html

I have no problem executing a cgi file under the normal url like this:
http://www.myhost.com/mydir/cgi-bin/test.cgi
However when I tried to embedd it into HTML file (called index.html) like this:
<HTML>
<BODY>
<P>Here's the output from my program:
<FORM ACTION="/var/www/mydir/cgi-bin/test.cgi" METHOD=POST>
<!-- This doesn't work also -->
<!-- FORM ACTION="cgi-bin/test.cgi" METHOD=POST-->
</FORM>
</P>
</BODY>
</HTML>
The CGI doesn't get executed when I do:
http://www.myhost.com/mydir/index.html
The CGI file (test.cgi) simply looks like this:
#!/usr/bin/perl -wT
use CGI::Carp qw(fatalsToBrowser);
print "Test cgi!\n";
What's the right way to do it?

The problem is the path you are providing in the action property of the form.
You need to change it to be a path relative to the current document. (index.html)
From your example, it looks like this would be cgi-bin/test.cgi

There isn't a good way to do this in HTML. It is a job better suited for SSI using an exec or virtual directive.

Use templates. It's bad idea to mix different code together. Even JS and CSS are separated from (X)HTML for readability and maintainability.

Have you tried using an iframe:
<HTML>
<BODY>
<P>Here's the output from my program:
<iframe src="http://www.myhost.com/mydir/cgi-bin/test.cgi" />
</P>
</BODY>
</HTML>

Related

Separating HTML page into 'objects'

So i have an HTML file my problem is i want to create an "About Me" section in one DIV section, the issue is the About Me section is rather long and contains a lot of text and as a result of that makes the code look untidy. I mean from a functionality point of view it works but i like making HTML files look as good as i can.
Is there someway i can link my about me section from a separate HTML file containing just that info, almost has is if it was a separate class in OOP and i am in essence just calling to an 'About Me' object?
You can simply use an <iframe> for that, pointing to your other HTML file.
<html>
<head>
..
</head>
<body>
...
<iframe src="link/to/your/file.html" scrolling="no" frameborder="0" ></iframe>
</body>
</html>

How to assemble HTML documents with Webpack?

Is there a way to piece meal your HTML too with Webpack so you have HTML chunks instead of large HTML files?
Example:
<html>
<body>
<div>Here is the main page </div>
<script>
// inject a chunk of HTML here
require.include('./header.html');
</script>
</body>
</html>
I saw the HTML loader but I don't think I can use it for this purpose.
Maybe you need this html-loader
Edited:
You can use interpolate flag to enable interpolation syntax for ES6 template strings, like so:
require("html?interpolate!./file.html");
<img src="${require(`./images/gallery.png`)}" />
<div>${require('./partials/gallery.html')}</div>

loading a new html file

i am a beginner in html. i would like to do something like this,I am using the below code to create tabs, now i have the contents of the section in a different html file. Please tell me how to load that html file inside the section.
<html>
<head>
<link rel="stylesheet" href="tabs.css">
<body>
<article class="tabs">
<section id="tab1">
<h2>NewRecord</h2>
<p>This content appears on tab 1.</p>
</section>
</article>
</body>
</head>
</html>
Option 1
Use iframes to archive this. It will display another page.
Option 2
Use Ajax Example
HTML is the structure, CSS is the style (appearance), and JavaScript is the behavior. You can't load data with just structure alone, you'll need to introduce some scripts in there. jQuery is a common library that's fairly easy to learn, but there's many available.
You can load the content from another HTML file via jQuery '.load()' method.
Step 1 - Include jQuery in your code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Step 2 - Add this code before the closing </body> tag.
<script>
$(document).ready(function() {
$('#tab1').load('html-file-1.html');
});
</script>
Step 3 - Your external html file html-file-1.html contains nothing but simple html tags to represent the content you want to load within the section.

Stuff that will change on every page

I would like to know that if there is a way that a certain piece of HTML code change on every page I create. In simple words for example, I make a HTML page called 1.html and add a footer code. For example <div class="footer">, and I need to add this footer to every page I make. But then, I don't wanna add this footer code manually on every page since that would take time.
So making it more simple, I make 1.html, 2.html and 3.html and make footer.html and add footer code to it. So instead of adding the actual footer code on every page, I add footer.html to 1.html, 2.html and 3.html and then later edit footer.html that will update on 1.html, 2.html and 3.html.
Hope you get my point.
Thanks.
There is no way of doing that in plain HTML. You either have to use a scripting language (like Python, Ruby, PHP...), or a static website generator like jekyll or hyde.
If you are just writing static HTML files, I would go with the second approach.
You can use a server side language like PHP to do that
1.php
<html>
<body>
Title 1
<?php include('footer.html') ?>
</body>
</html>
2.php
<html>
<body>
Title 2
<?php include('footer.html') ?>
</body>
</html>
If your webserver supports it (many do), you could use Server Side Includes.
rough summary:
change the extension on your html file to .shtml
add this to your page wherever you want your footer to appear
<!--#include virtual="../path/to/footer.txt" -->
the footer file should only include the HTML fragment that you need to replace the SSI tag, so that when the tag is replaced with the footer you have a well-formed HTML page
In your pastebin example your 'footer.txt' file should contain this:
<div class="footer">
bla bla here....
</div>
And your .shtml file, in which you want the footer to appear, should look something like this
(this assumes that your footer.txt file is in the same folder as the .shtml file)
whether you use php or ssi remember that 'footer.html' must only be the code that would appear between the 'body' tags in a normal html page, or you will duplicate.

Is it possible to write the 2 html codes in the same html file?

Is it possible to write the 2 html codes in the same html file and call it when required with help of name property
<html name ="abc1">
<body>
</body>
</html>
<html name ="abc2">
<body>
</body>
</html>
Thanks in advance
- Miss subanki
I don't believe that is valid. Depending on what you're doing, couldn't you just do the same things with div tags?
<html>
<body>
<div id="abc1">
<!-- Content goes here -->
</div>
<div id="abc2">
<!-- Content goes here -->
</div>
</body>
</html>
You can use a scripting language if you want to add conditions like these.
PHP example for page.php?show=abc1
<?php
if ($_GET['show'] == 'abc1') {
echo 'something';
} elseif ($_GET['show'] == 'abc2') {
echo 'something else';
}
?>
I agree with Alec's post that you should probably use a Server Side Scripting (http://www.w3schools.com/web/web_scripting.asp) to achieve what you are trying to do. It sounds like you are taking users input and deciding what to show them.
So a very high general overview of how server side scripting works is you generate a page request with information from the user and then on the server side, a script parses the url and decides based on the parameters passed in, what to show the user.
The desired effect of showing one section at a time can also be achieved through Javascript or any client side scripting - http://www.w3schools.com/js/default.asp