Why is Live Server only loading half my HTML code? - html

I have searched the internet for hours trying to find someone else who shared my issue, but it seems to be entirely unique to me.
So basically, I launch my very small HTML file with live server, but only 2 divs are loaded on the webpage, and I have no idea why. I have tested it and narrowed it down to purely being an issue caused by live server, as my html file loads completely fine when the file itself is double-clicked on from file explorer, and I still have the issue when i remove my links to my css and js files from the hmtl file.
this happens on the simplest of code, and its so annoying.
here is some simple code:
and here is the screenshot of the elements not loading:
and i also show the "code injected by live server" bit, cause i think that might be the issue?
please help, this is driving me crazy.
ps. i am a newbie to live server and website making.

There can only be one body tag in whole HTML file.
You can try this instead :
<html>
<head>
<title>HTML page</title>
</head>
<body>
<div>
<p>text</p>
</div>
<div>
<p>text</p>
</div>
<div>
<p>text</p>
</div>
<div>
<p>text</p>
</div>
</body>
</html>

Related

can't add image to HTML

i am struggling to add any images whatsoever to html, for them to show when i open in browser
i have tried different images, using them in the correct directories, relative and absolute url
i really do not know why im getting nothing to show...
<!DOCTYPE html>
<html>
<head>
<title> how to</title>
</head>
<body>
<div>
<img src="‪https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
</html>
even the image address copied won't show
any ideas???
As shown in the figure below, there is a special character in your url, causing the browser to treat it as a file on your server instead of on squarespace. Remove that, and your image should be displayed as normal.
<body>
<div>
<img src="https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
This seems to work, deleted first double quotes and then added it back
Or delete the first quotes and then the first h to be sure, then retype

Why does innerHTML behaves differently when it has <html> as a content?

Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.

HTML I cannot load up image?

My image wont load up on page? I am not sure what is going on here, i have made many websites uptil now, but I think i made a mistake in my code. I am trying to load up this image, but it wont! :c
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Error 404</title>
</head>
<body>
<h1>Oops!</h1>
<p>What you have just encountered is Error 404. This means that the page you were trying was not found. Try checking the <abbr title="Uniform Resource Locator">URL</abbr> for any mistakes. Even a small typo counts.</p>
<p>If that doesn't work, we have provided a map of the site below. Click on anyone of the pages and you will be magically directed there.</p>
<?php
include 'sitemap.php';
?>
<hr />
<p align="middle">Your IP address is <?php echo $_SERVER['REMOTE_ADDR']; ?>. You are visiting <b>danishhumair.base.pk</b>.</p>
<img src="advertisement.png" />
</body>
</html>
I can show you a picture of my files too.
if you are using Adblock try to disable it and reload the page, with that name, any advertisement block extension will stop the image from loading.
Browser problem see extensions

html5 img not displayed in gedit

I am trying to learn HTML5 and I wrote a code in html to display the image.
Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>imageDemo.html</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>This is Pacman Ghost</h1>
<p>
<img src="Pacman.png" alt="Pacman Ghost" />
</p>
</body>
</html>
My image Pacman.png is on the desktop and my test.html file is also on the desktop. I am using gedit in ubuntu 14.04 to write the code. When i run my file test.html, I don't see the image but see Pacman Ghost as text.
What am I doing wrong here??
Hope to hear soon from you guys.
Thanks
You wrote that you image is on the desktop. You use an relative path. So the best way is to make a folder and put all your files in that folder.
Your code looks correct but i think your your image is in the wrong place.
And you should have a look at the case sensitivity of your file.
Use the debug bar in Chrome or Firefox and go to Network to find some problems and look if the code isn't loading.
Solution remove the space between filename and .png extension.
https://developer.chrome.com/devtools
Try not closing the tag and adding height and width of the image.
<img src="Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >
Also check if the filename is correct. It might not be able to find your Pacman.png. Try to use an absolute link if possible.
Edit: Absolute path with ubuntu:
<img src="/home/(your user name)/Desktop/Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >

Creating a website in html not xml

Call me crazy but I have been trying to make an HTML website using Visual Studio 2012 but every time I open the program and create a webpage it automatically makes it an XML. Is this normal? Is this the normal start to an HTML webpage or do I need to do something to change it?
I have looked through the Microsoft webpages help and the Visual Studio help and I cannot find anything that explains this to me.
All I want to do is make an HTML website
<head>
<style>
</style>
</head>
<body>
<h1></h1>
<h2></h2>
</body>
</html>
I know I can do this using a notepad.
Thanks for any help.
That is not XML brother. That is what HTML is like. Anywhere you go, you'll find the same pattern, and so does Visual Studio follows.
<html>
<head>
<style>
</style>
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
</body>
</html>
That is HTML, you don't need to do anything just add the content for the heading or paragraph elements. XML is something else, if you're confused you should first atleast try to check what's the difference here. :)
Good luck!