I was looking into MIME types and there is something I don't understand yet.
I want to display a Base64 image in my page body.
I know this example works:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" alt="beastie.png">
I am wondering, can I also achieve it with something like this?
<head>
<meta http-equiv="content-type" content="image/png;">
</head>
<body>
<img src="iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" alt="beastie.png"> </body>
No.
<meta http-equiv="content-type" content="image/png;"> describes (poorly) the content-type for the HTML document.
src="iVBORw0KG etc etc is a relative URL that will be fetched over whatever scheme (usually HTTP) was used to fetch the HTML document.
If you want to switch schemes (which you need to do for a data: URI) then you need an absolute URI.
(That simplifies slightly. Scheme relative URIs do exist, but don't help with your problem.)
Related
I'm trying to set a local site-root using the base tag. The following code isn't working. Am I doing something wrong? How do I set the mysite folder as base?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="file:///home/me/mysite"></base>
<title> Asset Take On Process </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
some stuff
</body>
</html>
The site folder structure is
mysite
|___css
|___img
|___js
and so on..
When I load the web-page it doesn't see the main.css in the css folder at all.
If you remove that /, it should make it relative off the current path, which, when a base tag is present would be
http://localhost/website/.
You will also need to add a trailing / to the end of the href, to indicate that it's a folder.
Full working example:
<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>
Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.
kindly refer this link
http://social.msdn.microsoft.com/Forums/ie/en-US/c51bb8b9-40ab-437b-a125-88b660f3e1ca/ie8-base-tag-issues
A correct tag would be
<base href="file:///home/me/mysite/"/>
if you wish to set file:///home/me/mysite/ as the base address, so that e.g. css/main.css refers to file:///home/me/mysite/css/main.css. Note the importance of the slashes. In an href value in base, anything after the last slash is ignored: file:///home/me/mysite means the same as file:///home/me/ there.
This is a confusing topic, and it is further confused by some browsers’ implementation that may support relative URLs in the value; by the specifications, only absolute URLs are permitted.
There is normally no reason to use the base element. Relative URLs such as css/main.css or ../css/main.css work just fine, specifying addresses as relative to the address of the HTML page. This means that they need not be changed if the site is uploaded onto a server.
Just to clarify the other answers:
The base tag must end in a slash.
The following URL's must not begin with slashes:
It's logical, because adding them together makes a complete address. But it's counterintuitive because we're used to using /images/image.jpg to make things work everywhere.
I was looking at YouTube's HTML source code for video pages and saw these tags:
<div id="watch7-container" itemscope itemtype="http://schema.org/VideoObject">
<link itemprop="url" href="http://www.youtube.com/watch?v=ikbEBp5BeCM">
<meta itemprop="name" content="THE TEST">
<meta itemprop="duration" content="PT1M10S">
<meta itemprop="unlisted" content="False">
<link itemprop="embedURL" href="http://www.youtube.com/v/ikbEBp5BeCM?autohide=1&version=3">
<meta itemprop="playerType" content="Flash">
<meta itemprop="width" content="640">
<meta itemprop="height" content="480">
Every time the value is a URL, YouTube uses the link tag instead of the meta tag.
http://validator.w3.org/ validated both <meta content="http://..." itemprop="url"> and <link href="http://..." itemprop="url"> as being valid HTML.
What is the benefit of doing this?
On the page for the type http://schema.org/VideoObject you can find the "Expected Type" for each property.
For url and embedURL it says: "URL".
If you want to provide a URL in HTML5, you have to use the href attribute (on link, a, …), the src attribute (img, …), or any other ways that are defined.
If you use a URL as value of the content attribute of a meta element, it will represent a string (looking like a URL), not a URL.
You can find the relevant part in the Microdata spec, 5.4 Values.
They might think that link elements will be processed in normal indexing robot operations (even when not trying to interpret microdata as per Schema.org), since they generally follow links. Another possible reason is that link checkers can be used to verify URLs when they appear as href attribute values or otherwise in attributes that specifically take URL values.
Note, however, that the sample code on the Google instructions page Schema.org for Videos uses meta for embedURL.
I'd like know if having the title tag positioned at the end of <head> tag or in any other position, always inside the <head></head>, can lead to some kind of problem, I'm not talking about SEO stuffs, I'm talking about standards, browser rules, web application rules, or something like this.
I'd like to load a page from two different php file like this, is it a wrong way?
<!-- file1.php -->
<html>
<head>
....
<!-- file2.php -->
<title><?php echo($var)?>
</head>
<body>
...
<head> tag is not closed, because with e second file I dynamically add the <title>
tag
The title must be in the <head>
If you use non-ASCII in it then it really should be after any <meta> that specifies character encoding.
Since it is important, it is probably a good idea to put it near the top of the <head> so it gets picked up by tools that only grab the first $n bytes of the document.
I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);