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>
Related
Is it possible to generate let's say, two files (index1.html and
index2.html) from one markdown file (index.md)?
Or can I add HTML, CSS only for viewing the HTML files in my Browser
(don't want to use a browser plugin)?
I want to use Jekyll to generate .html snippets, which can be stored on AWS S3 and included on my website. For that purpose I don't need HTML tags like <DOCTYPE>, <head>, <footer> etc. because they are already on my website. But I require them to view the final .html document in my browser.
Some other ideas I thought about but also couldn't find a solution:
add a second .md file and include index.md, so the content is the
same
duplicate the index.html file and strip head, footer ... with another
program
I couldn't find any solution anywhere, but it can't be, that I'm the only person having this problem. I also couldn't find a Plugin to resolve that issue.
Edit:
At the moment I get this .html when I run bundle exec jekyll serve
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/styles.css" />
...
</head>
<body>
my_body_content
<footer>
</footer>
</body>
</html>
but I only want the .html file to contain this:
my_body_content
But of course when I try to view this .html file in my Browser for editing purposes no styling is applied.
But I require a styling to view the file in my Browser verify that content of the .html file is rendered correctly before uploading it to S3 and fetching it on my website where my website styling will be applied.
I uploaded index.html and CSS file in githuib pages.
like the images I uploaded.
But I don't know for what reason the CSS didn't load into index.html.
I guess it is because of the problem of the link addresse, but I don't how to fix it.
To make the CSS file to index.html file, how do i fix my codes?
enter image description here
you probably do have some problem with the linking of the css file.
normally css file should be linked between the head tag like this:
<head>
<link rel="stylesheet "href="filename.css">
</head>
to extend on this, if you have deployed your website on github pages, to see the effects there you need to push your changes to github first.
i want to add to Liemannen loop answer,
sometimes we need to add "./" on the css link like this if for some reason the css is not loaded
< link rel="stylesheet" href="./stylesheet.css">
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
I am building my first website and I'm trying to attach an external css file...
Both my index.html and test.css are in the exact same folder/directory, but for some reason my test.css file isn't being linked...
Question: Does anyone know why my test.css isn't being linked?
//HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<title>Page Title</title>
</head>
<body>
<h1>header of type 1</h1>
<p>standard paragraph</p>
<hr>
<p>HTML stands for Hyper Text Markup Language</p>
</body>
</html>
No need to worry, there's nothing wrong with your css code.
You just have to make sure that the 'href' part of your stylesheet link contains the name of the file your want to include, which in your case would be:
href="CSS Test.css"
Windows will hide the file extensions by default though, so make sure your file isn't actually called "CSS Test.css.css" after you added the extension a second time. To show all file extensions, do the following:
Open Folder Options by clicking the Start button Picture of the Start button, clicking Control Panel, clicking Appearance and Personalization, and then clicking Folder Options.
Click the View tab, and then, under Advanced settings, clear the Hide extensions for known file types check box, and then click OK.
Ok, thank you for all the quick responses, I have cleaned up my style thanks to both replies and I have kind of found the solution. I think "user5375312" was on the right track with the .css.css idea, that by adding .css I was somehow adding it twice. I don't think that's "exactly" what happened, but by creating a new css file, when I made it .css I also unchecked the "hide extension" box, which revealed a .txt, making my final file "Test.css.txt"
I removed the .txt keeping only the .css, saved the file to the same location, updated my page and the css file loaded in fine.
I'm still not sure what exactly went wrong or where, but I know it was either when I created the file the .txt was somehow still present when with previous files it was overridden or removed (something unique to creating css files maybe) or it was after I made the file, that some other setting caused it, but unchecking the hide extension box and making sure it saved correctly solved the problem, and I hope if anyone else encounters the issue that this helps.
Thanks again for the responses, it probably would have been days before I thought figured this out on my own, it was the mention of the .css.css possibility that drew that checkbox to my attention on my4th attempt at making a css file :D
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