My browser is showing a blank page when I open an html file with the following code
<!doctype html>
<html>
<head>
<title>Learning CSS</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
</head>
<body>
<p> test </p>
</body>
</html>
I originally copy pasted the source code from example.com and then deleted the css, but nothing was showing up, So i made this test, still nothing showing up
The <style> tag in the <head> is missing its expected matching </style>.
Works as expected when adding the closing </style> tag.
Note: A helpful method to debug HTML is W3C Validator. If you go here: https://validator.w3.org/#validate_by_input and copy/paste your code, it will also show the missing </style> tag error in its output.
Missing closing <style> tag, you have:
<style type="text/css">
But it should be removed or closed:
<style type="text/css">
</style>
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src
I've spend several hours trying to figure out what's wrong with the following html.
<!DOCTYPE=html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Location Status</title>
<link rel="stylesheet" type="text/css" href="location_status.css">
<meta http-equiv="refresh" content="900">
</head>
validator w3.org tells me:
The character encoding was not declared.
End of file seen without seeing a doctype first. Expected <!DOCTYPE html>
Element head is missing a required instance of child element title
Your <!DOCTYPE html> wasn't right and you forgot to close the <html> tag.
Here's the code in the right format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Location Status</title>
<link rel="stylesheet" type="text/css" href="location_status.css">
<meta http-equiv="refresh" content="900">
</head>
<body>
// Your page code here
</body>
</html>
You have forgotten to close your <html> tag. You should always remember to close the html tags otherwise it can create unecessary problems.
You have not used <!DOCTYPE html> correctly.
<head> requires a <title> tag which specifies the title of your page and it will appear whenever you will open your html page in the browser.
Generally <head> contains all the metadata.
You can do like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title of your page</title>
<link rel="stylesheet" type="text/css" href="yourCSSFile.css">
<meta http-equiv="refresh" content="900">
</head>
<body>
// Your Code
</body>
</html>
I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
I created a site with a bogus CSS code:
a {
foobar: 8888;
}
Then opened the page in Firefox. I looked in the web console and I can see no errors/warnings. Why?
My html head is:
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="http://localhost:35729/livereload.js"></script>
</head>
There is no warning in web console because wrong CSS rules simply has no effect in the page.