Using includeHTML(); from w3.js german special chars - html

I want to have a header include in my HTML pages to avoid changing any page in case I have header changes as the header can grow easily.
Problem:
Expected textoutput : "Schüttgut"
Received textoutput: "Schüttgut"
Here is what I did:
Creating a header - saved as inc_head.html:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Including w3 at the end of the index.html page
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
w3.includeHTML();
</script>
Setting the head-part in the index-page like
<head>
<div w3-include-html="inc_head.html"></div>
</head>
Opening the page shows that the UTF-coding is not working, I receive "ü" signs instead of "ü".
When I replace the w3-include part directly by the two header lines it works correctly.
Any idea why the include fails for this special-chars?
Thank you

Related

Why is browser loading CSS/JS/img assets in unexpected order (not the order of HTML source)?

My understanding
So my understanding is, if you have a website with the following source:
<!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>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.

When form submitted: The character encoding of the html document was not declared (although it is)

I've seen a few questions relating to this, but almost all of them use php. I have just a simple html file, with an input and a button. I've tried using proposed solutions, but I always get the error after I submit the form with the button. I have included the character enconding as utf-8. I also have the <meta charset="utf-8" /> but commented out upon seeing other solutions on SO, which I have implemented to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="index.js"></script>
<title>My Page</title>
</head>
<body>
<form name="data-form" enctype="multipart/form-data" method="post">
<input type="file" id="file-input">
<button id="form-btn" type="submit">Load File</button>
</form>
</body>
</html>
Based on my rudimentary understanding, this should read the file no problem. I'm trying to upload a JSON file, not sure if that's the issue. It is a valid JSON, I have checked and double-checked.
The index.js file that is linked, currently does not interact with the file upload in anyway, so in the interest of brevity I have not included it.
EDIT
I "solved" this, I guess. More like bypassed it. I wrote a JS function (readFile()) to read on click, and changed the button's type to type="button" and put an onclick="readFile()" and now it reads the file and eecutes properly. Hopefully maybe this will help someone else who has a similar problem. I guess this can be closed.
See edit. I used a modified version of the IFFE answer posted in this question How to access data of uploaded JSON file?. I'm not sure if this is "technically" the solution but it works for my purposes.

CKEditor deletes content between <title></title> tags

After a few days of searching and trying to solve, got nowhere.
CKEditor 4.7.0 is stripping the content between the <title></title> tags. I need CKEDitor to leave the title content alone no matter how / where the title tag is used.
I have tried:
allowedContent: true,
extraAllowedContent : 'title',
extraAllowedContent: 'title[*]',
config.allowedContent = true; (in config.js)
CKEDITOR.dtd.$removeEmpty['title'] = false; (in config.js)
No luck with above. Then tried suggestion here ckeditor deteles page <title></title> title which works, but I end up with:
<!DOCTYPE html>
<html>
<head>
<title>OK Title</title>
</head>
<body> </body>
</html>
<p><br />
<title></title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Web template presented with pure css."><meta name="keywords" content="css template"></p>
<link href="style.css" rel="stylesheet" />
<link href="red.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /><!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>
What I am doing is pasting into CKEditor an example CSS templates from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h
I understand this is not the way standard HTML should be displayed (not to spec), but I need to prevent CKEditor from modifying the title tag no matter, just ignore it and let me use it wherever:) This is just a simple project for classroom where no one sees source of page and I need title tag to show in browser tab when I project page on whiteboard for students.
UPDATE: did discover if I save with the source in view, CKEditor does not modify the title tag. Works this way but not when in visual mode which like to have:)
After what seemed like endless searches found some info on a drupal forum. Had so many links open lost track of exact site where obtained the info, sorry.
Solved the problem by adding the following to my config.js in CKEditor 4.7.0:
config.allowedContent = true;
config.protectedSource.push(/<title>[\s\S]*?<\/title>/gi); // allow content between <title></title>
Hope this will help someone else:)

HTML Mandarin isnt working

Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?

How to not decode special characters in links?

If you save this file and hover over the link, firefox will decode %2F%2F to // and hence the link is broken.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
linux%2F%2Funix_servers.html
Are there ways to prevent the browser from decoding the special characters in links?
If the URL is to contain the real percent sign “%”, then by the applicable encoding rules, it must be %-encoded, as “%25”. Thus the URL should be written as linux%252F%252Funix_servers.html
It only displays the text of the link as // since %2f is a slash in HTML. The link itself is fine and should link to the file you had with no issue. Use % to represent a % in html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
linux%2F%2Funix_servers.html
</body>