My website has a font error, when I open the chrome developer tool, I see the image as attached.
My error text is hard-coded.
I added a meta tag utf-8 to the head tag.
I do not understand why it's buggy, while still having one of my pages using the same code does not get this error.
Help me
Thanks
First of all use in your head section:
<head>
<meta charset="utf-8">
</head>
Second: when you are saving your HTML files,
please try to use NOTEPAD before putting files on the server.
The reason for that is, you may use some editor that
converts your characters in a way that gives an error...
Related
Just created a simple html file in TextEdit on Mac. It looks like this.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is an HTML page that I created in TextEdit.</p>
</body>
</html>
Afterwards I saved it using an .html extension, and tried to open this file in multiple browsers.
However, instead of displaying the correct layout, I got this same code on web page again: see the pic below.
The result persisted across all browsers and after refreshing the page, too. Though if I first saved the document as an RTF file, and later changed the extension manually to HTML, browsers displayed some stuff, but not as expected and shown in a textbook. Below the second result.
The intended result is from the textbook and is shown on the next picture.
Any ideas why doesn't Safari (or Firefox, Opera, Chrome, DuckDuckGo likewise) show the file correctly?
My first instinct is to make line 1 read <!DOCTYPE HTML> to see if that would make your webbrowser read the code as HTML instead of a plain text. Not sure if that would work, but I would try it.
The problem must have been with TextEdit, since it worked immediately and as expected after I copied the same text to Brackets.
A ascii-encoded text file is not the same as a TextEdit file. TextEdit will be using RTF by default which is more similar to a Word document doc type format than raw text. When you save the file, TextEdit is actually saving it to a RTF file containing your HTML text.
TextEdit can edit HTML but, in default mode, it writes the HTML for you from how you format the text in the editor (You might hear this called WYSIWYG)
You can change the TextEdit settings to edit the HTML file as text in TextEdit -> Settings but I feel you would be far better to find a more appropriate programmers editor to edit text. On macOS, you have the command line programs installed by default:
vim and nano or you can install a GUI based editor such as Sublime Text
There are a few properties you are missing, which should be included to enable browsers to parse the file correctly.
The following is a minimal snippet, passing https://validator.w3.org/
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Your Title</title>
</head>
<body>
<p>Your Content</p>
</body>
</html>
the doctype is a declaration informing the browser in which version of html the document is written in, by default html5
head is a container for metadata
meta charset=utf-8 specifies the character encoding
the rest are html tags you are probably familar with
Are you using any sort of IDE like VS Code, for instance, to write this html?
I ask because there are other html elements you are missing which the browser - no matter what browser it is - requires in order to fully render a page.
Those details are automatically populated to the minimum extent required to render an html webpage in a browser when you use an html boilerplate. That link will give you more info on WHY you need all the stuff in a boilerplate, but basically it's like a pre-fab template for your html page that already comes with all the basics you need there... just start adding content and you're off to the races.
On VS Code, you can add boilerplate by typing the ! (exclamation mark) and then enter; VS Code will open a dropdown to autocomplete this line to be boilerplate for html5 and when you hit enter, populate the page with that boilerplate.
Then you can simply copy in the content you wrote yourself, remove what is duplicate, and you should be good to go.
I am learning how to use a text editor, and I've just created my first file with it. It previews with the correct output, but when I run it in the browser, it gives me a blank page.
As you can see, the doctype and html tags are in place, as well as the head and body. I am using Visual Studio Code as my text editor. Why will this not display anything in my browser? To be clear, it does preview, just won't display in browser
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Are you sure? It does display on mine. Is the file saved as a .html file? Also, try opening it on another browser. If that doesn't work, try creating a new file in Notepad or something similar, save it with a .html file extension and try opening it again.
EDIT:
Try using Notepad. Check if the file is saved with a UTF-8 encoding. If that doesn't work, try installing another browser or using Edge/Safari/Internet Explorer or whatever built-in browser you have.
In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.
Possible Reasons:
You might not have saved the changes after writing the code (most likely).
Problem with the browser (load it in another browser)
Check the extension (just for clarification)
There is no problem with !DOCTYPE html tag or html tag.
It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.
I had this same baffling problem. I quit Chrome, re-opened, and then I was able to open my .html files (from my Mac's Finder) with Chrome just like I could already open them with Safari or other browsers.
I just had this problem and the solution was very simple, so I´ll give it just in case someone runs into the same silly mistake. I was typing all the code in the wrong file.
Add this line of code inside your head element:
<meta charset="UTF-8"/>
I would recommend to put the right path under the src with the correct file location
<script src="scripts/main.js"></script>
I was facing the same issue and none of the steps mentioned helped.
So I deleted the index.html file I had, opened my project folder in VS Code, created a new index.html file there, pasted my code and clicked on go live.
Then I could see my image on the webpage. And after that I could see the image even by double clicking the index.html file from Finder. Hope this helps.
Save your file in Notepad or whatever text generator you are using and then close it before launching the html file in the browser. Mine would not open if Notepad was still open.
In visual studio code just type in a blank page
html:5
then just press the touch "tab", it will display a basic html 5 structure to start
If anyone still needs help- It worked after saving the file on VS Code!
Just remove "<html>" a the second line it's already set in the first line
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
I have set my coding on website using <meta charset="Utf-8"> I have it right written, so if there is a mistake, it is not in my website. Now.. It does not work. I think it is because of website coding is set by "windows-1208" or something like that. But I can not find out how to fix this, because is defined by my computer... any ideas?
<meta charset="Utf-8"> tells the browser to display the page in UTF-8. But if you used an other encoding in your editor (e.g. windows-1208 or so) and saved your html page in that encoding, the page won't be displayed correctly.
Make sure, you saved your file in the same encoding as you declared in the meta tag.
To fix it, open the html document in e.g. Notepad++, choose in the menu «Encoding» «Encode in UTF-8 without BOM»
I've a text as Bharat written in hindi in PDF.
I am creating a web page where in i need to display this as it is in my webpage. when trying to copy the content and paste it is getting rendered as some garbled text. I've installed the corresponding font and when seen in ms-word it is showing correct, can you please let me know how can i show/display it as it is.
I get the below when i paste it directly.
fpfdRlh;
Thanks
Make sure you save the files as using UTF-8 encoding. Also use UTF-8 as the webpage's charset in the head.
<meta charset="utf-8" />
EDIT: I just tried this and it works great for me. Could it be a browser issue?
Code I tried for reference:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>देवना</h1>
</body>
</html>
And a JsFiddle for you: http://jsfiddle.net/zuymyz00/