This could be something very simple, but I am having a hard time with this. I have to add some additional information into the heading information of a page. The issue is that the information always ends up in the body instead of heading.
Here is the sample code
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<text id="test">
//Wish to add some additional information here
tester
</text>
<title>Test Heading</title>
</head>
<body>
</body>
</html>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test Heading</title>
<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>
The customer is forcing the browser to behave like IE8; as a result, adding an xml tag in the heading works. Adding a line for IE8 compatibility did the trick for them.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8;" />
<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<text id="students">
<name>Name</name>
<sCode>122</sCode>
</text>
<title>Test Heading</title>
</head>
<body>
</body>
</html>
Related
I want to modify the index html during the vue cli build process. (vue.config.js)
Is there any way to do this?
This is my index html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<%= foo %>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>blabla</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui" />
</head>
<body>
<noscript>
<strong>We're sorry but tera.com-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
and I want vue/webpack to parse the value 1 to foo.
Vue will attach to the DIV with id app. So your {{foo}} will be out of range for Vue to change it.
You should look into Single File Components, that way you'll be able to wrap your whole HTML inside Vue.
This is the error while loading:
Not allowed to load local resource:
C:/UsersSANGEETHngprosrcssetsimg%13.png.
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angpro</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="background-image:url(src\assets\img\13.png)">
<app-root></app-root>
</body>
</html>
Problem: The image is not displayed. How can I fix it?
change the image path as this. It will work.
Always use forward slash instead of backward slash to specify a particular path
I'm trying to deal with a strange behavior of G+ sharing.
I wrote two lightweight HTML pages to demonstrate my problem. Those pages are almost identical except images in their bodies. On the first page, the content image is much larger that the og:image. On the second page, the content image is slightly smaller than the og:image.
First HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Test page" />
<meta property="og:description" content="This is page for G+ strange behavior testing." />
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/wikimania2014/thumb/e/e2/Ask-Logo-Small.jpg/250px-Ask-Logo-Small.jpg" />
<title>Test page</title>
</head>
<body>
<div>
<p>Hello world!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" />
</div>
</body>
</html>
Second HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Test page" />
<meta property="og:description" content="This is page for G+ strange behavior testing." />
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/wikimania2014/thumb/e/e2/Ask-Logo-Small.jpg/250px-Ask-Logo-Small.jpg" />
<title>Test page</title>
</head>
<body>
<div>
<p>Hello world!</p>
<img src="http://previewcf.turbosquid.com/Preview/2014/07/05__19_56_51/01.jpg90ddaa05-e3a9-4607-b466-29ade8412934Small.jpg" />
</div>
</body>
</html>
The problem is that in the first case, G+ shows the image from the body (ignores og:image). In the second case, G+ shows og:image as expected.
I've also tried using schema microdata, but the behavior is the same.
I share pages using https://plus.google.com/share?url=PAGE_URL.
Solved! The reason was that in the second case, the og:image had smaller width than G+ requires.
I cannot get Bootstrap 3 working on my client's site in IE8. I have scoured the web for hours reading tons of forums threads and doing all the suggestions but it is still not working. I have included respond.js and html5shiv.js and verified that they are being loaded properly. The site is http://www.drollyankees.com/ and here is what my code looks like:
<!DOCTYPE html>
<html lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
<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>Bird Feeders & Accessories | Droll Yankees</title>
<link rel='stylesheet' id='bootstrap-css' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css?ver=3.8' type='text/css' media='all' />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- blah blah blah -->
<script type='text/javascript' src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js?ver=3.8'></script>
</body>
</html>
You need to change this:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
To something like this (using whatever is the relative path for your site):
<!--[if lt IE 9]>
<script src="/path/to/your/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="/path/to/your/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</head
Becomes
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</link>
</meta>
</meta>
</head>
Multiplied by all the tags in the head it starts to get ridiculous. Making the tags self-closing prevents the behavior, but to the extent the behavior is common (this very site, arstechnica, theverge) I think there should be a workaround to disable the behavior. Is there?