I have an HTML project that I want to convert into an executable. I've managed to do so however some bits don't work well. The html basically allows me to download another executable that is in the same directory as a project. The project is something like the NVidia website where you go to download drivers etc. The downloads work just fine when I run the project in my browser however when I compile the html to an executable the download button doesn't work. my code is given below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,900;1,100&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section class="header">
<nav>
<img src="images/logo.png" />
<div class="nav-links">
<ul>
<li>HOME</li>
<li></li>
<li>ABOUT</li>
<li></li>
<li>FAQ</li>
<li></li>
<li>HELP</li>
<li></li>
<li>FORUMS</li>
<li></li>
</ul>
</div>
<div class="textboxim2">
<h5>Instrument Monitor</h5>
<p>some random text about the software etc etc</p>
<a href="./instrumentmonitor.exe" class="herobtn"
>Download Instrument monitor</a
>
</div>
</nav>
<img src="images/IM.jpg" class="instrumentmonitor" />
</section>
</body>
</html>
I've tried using a URL instead of path thinking that maybe when I compile it the path changes, but then again it works in the browser and not in the compiled html. I'm currently using 'HTML compiler' to compile my projects.
Related
I am making a website by watching this video: https://www.youtube.com/watch?v=oYRda7UtuhA&t=490s. timing: 25:10. I did as shown in the video, but the icons on the site are not displayed for me. When I add these commands, my section texts are moved to the center. and there are no icons. I looked on the Internet to solve this problem, but I did not find anything.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InkoGreat Website - Everything about programming</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Anek+Odia:wght#100;300;500;700;800&display=swap" rel="stylesheet">
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-
free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<img src="images/profile-logo.jpg">
<div class="nav-links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>COURSE</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa-solid fa-bars"></i>
</nav>
<div class="text-box">
<h1>Welcome to InkoGreat's website!</h1>
<p>This site publishes useful programs for programming,
new chips, tips and much more!<br>Python/HTML/CSS/JavaScript</p>
Visit Us To Know More
</div>
</section>
</body>
</html>
Change your font-awesome cdn url to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css. The link used by you seems to be invalid. Changing the link should solve your issue
This thing has happened multiple times to me. Most of the time, when using Edge, it does not display the icons.
This is probably a compatibility issue. So you are recommended to remove the line
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome- free#5.15.4/css/fontawesome.min.css">. As a developer, a more recommended way is to go to https://fontawesome.com/start (The latest version of FontAwesome) and create an ID. There, you will have more customisability to your icon pack and hence, make your icon pack light. You will also be provided with an option to add a js file in the HTML file which works without any problems.
This is the code for the site I'm trying to make and there are to main problem i'm having i have to clear my web cache every time I search something and the second being that font-awesome icon wont show up
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Home.css">
<script src="https://kit.fontawesome.com/yourcode.js"></script>
</head>
<body>
<nav>
<input type="checkbox" id-"check">
<label for="check">
<i class="fa fa-bars"></i>
</label>
<label class="logo"> Logo</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
</html>```
Regarding the Font Awesome issue, have a look at the link in your script. You have it set to a placeholder link which doesn't lead anywhere. You need to replace where it says "yourcode" with your Font Awesome account's kit code. See here: https://www.w3schools.com/icons/fontawesome5_intro.asp
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
UPDATE: By locally when I preview my work in the browser. My files are stored in the same folder structure on one of our severs.
UPDATE: Which jpeg reference do you mean? Is this before I try your way of doing it?
UPDATE: this page doesn't load comments or answers so I'll be posting my answers here.
UPDATE: the console does say that the files are missing, but they're not. The site files in their entirety have been uploaded several times. I can provide a screenshot of the folder within the sever if need be.
I have a background video inserted into my index page but it doesn't play once the site is live. I believe it uses the image fallback. It works fine locally but having problems with absolute urls. I downloaded this from github and the update for this problem is below but the package I downloaded was a newer version anyways. Test link is below the github link.
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
http://bit.ly/1xLpFiu
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<span>Printing</span>
<div class="subnav" id="subnav">
<ul>
<li>Digital Printing</li>
<li>Offset Printing</li>
<li>Business Cards & Stationery</li>
<li>Manuals, Reports & Catalogues</li>
<li>Bindery Services</li>
<li>Canada Post</li>
<li>Graphic Design & Typesetting</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><span class="doubleLine">Promotional Products</span>
<div class="subnav">
<ul>
<li>Awards & Mounting</li>
<li>Binders</li>
<li>Clothing & Apparel</li>
<li>Bags</li>
<li>Drinkware</li>
<li>Lanyards</li>
<li>Magnets</li>
<li>Pens & Writing Instruments</li>
<li>Presentation Folders</li>
<li>USB Flash Drives</li>
<li>Umbrellas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><span class="doubleLine">Banners & Signage</span>
<div class="subnav">
<ul>
<li>Drafting & CAD services</li>
<li>Coroplast & FoamCore</li>
<li>Retractable Banners</li>
<li>Posters & Banners</li>
<li>Wraps & PVC</li>
<li>Displays & Canvas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><span>POOL</span></li>
<li class="blue"><span>Volumes</span></li>
<li class="green"><span>Contact</span>
<div class="subnav">
<ul>
<li>Locations</li>
<li>Media</li>
<li>Digital Link</li>
<li>FTP site</li>
<li>Client Login</li>
<li>Estimate Request</li>
<li>Submit A File</li>
<li>Recognition</li>
<li>Graphics Factory</li>
<li>Careers</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><span></span></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li>M&T Printing Group - © 2014</li>
</ul>
<ul class="footer-right">
<li>Client Login</li>
<li>Locations</li>
<li>Pool</li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
I would just do something like this, using jquery. You can have the videoURL go to whichever you like and it will load right up. I have done this in the past for several websites and it works wonderfully. The below is just html and JQUERY. Your issue seems to me seems to be were you have the video stored. You said it works fine "locally" Well where are you hosting your webpage? Your video should be stored in the same venue.
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
I see the edit you added. Remove the jpeg or reference the mp4 file.
--Sorry for editing your comment but it's the only way I can respond.Which jpeg reference do you mean?
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>