<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie= edge">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool
Related
Building a Flask project for a simple login screen project I plan to expand on, but here I am stuck on what I would have guessed would have been simple.
Why is my html below not updating to be styled by my login.css?
Here is a snippet up until the link relation:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=devilce-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="/webapp/templates/login.css">
</head>
It is inside of the same folder, but to make it what I believe to be fool-proof I specifically ran it through the full folder directory.
I have the .scss, the .cssmap from the compiler, and the output login.css in the same folder as the .html as well.
I've downloaded SASS, ran a Live Sass Compiler through VSCode, and now it's compiled to a .css
"What do"?
Not sure exactly the specifics, but from my understanding using {{ url_for--}} worked.
(If someone can follow up with an explanation that would be beautiful.)
Noticed when scanning examples from PythonHow
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="functions.js"></script>
<script src="main.js" defer></script>
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
Added to #test by JS:
<div class="letter">A<sub>1</sub></div>
Website: https://test.edgeloop.repl.co
Screenshot: screenshot
Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.
Your code should thus look as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>test</title>
....
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
If this does not immediately solve your problem, try clearing the google chrome cache as follows:
Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:
If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
...
</html>
If your Google Translate does still pop up, you have the following options:
add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag
Your code should look as follows:
<html lang="en" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate"/>
....
</head>
....
</html>
#Lawrence Cherone's comment about adding more text seems to fix the problem, as does #unknown6656's suggestion of adding <meta name="google" content="notranslate">. I still don't know why subscripts are considered Arabic text, but adding English text seems to fix the problem. Thanks for all the answers.
I'm trying to learn html and I'm trying to add an image, I put the image in the same folder as my html file and named it spoder.png. When I tried to load it up in my browser, the image won't appear and only the alt message comes up. How do I fix this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="/spoder.png" alt="image cannot load">
</body>
</html>
If it's in the same folder, the src atrribute must be src="spoder.png" (no slash)
Agree with the previous answer and will just add that the leading slash always points back to the root.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-divice, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
I ask if there is a lacking code that need to put
You can use this meta tags for SEO if you want
<meta name="keywords" content="wood, furniture, garden, gardentable, etc">
<meta name="description" content="Official dealer of wooden garden furniture.">
This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.
<meta name=”robots” content=”noindex, nofollow” />
Why is this tag useful for SEO? First of all it’s a simple way to prevent the indexation of duplicate content, for example the print version of a page. It might also be useful for incomplete pages or pages with confidential information.
Also i sometimes use
<meta name="author" content="John Smith">
You have a typo in your viewport declaration - it needs to be "device-width". Other than that, your head declaration includes all the necessary parts and looks valid to me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode