I'm trying to find a way of enriching information about images in a web page using schema.org.
The following code, however, doesn't seem to pass muster:
<figure itemscope itemtype="http://schema.org/ImageObject" class="figure-container" style="width: 580px">
<img itemprop="image" src="http://cdn.donaldjenkins.com/media/blog-posts/gtd-apps-1.jpg" alt="The Omnifocus Mac app" width="580" height="450" title="The Omnifocus Mac app">
<figcaption itemprop="description"><span itemprop="name">The Omnifocus Mac app window</span>, showing the Perspectives settings panel. This is a powerful feature that allows you to conceal part of the app's inherent complexity when you want to. But Things allows you to do the same more easily with its 'Areas of responsibility' feature.</figcaption>
</figure>
Including a <span>element as a child of a <figure>element doesn't validate, but I haven't found another way of appending the nameattribute to another tag, since the text doesn't actually require formatting.
Any suggestions as to how to achieve this would be welcome. I'm also at a loss to understand why <span>can't be a child of <figure>...
Try the validator at http://validator.w3.org/nu/, I copy/pasted your fragment and it validated just fine.
Related
Is there any way to reverse WordPress shortcode tags to get plain HTML?
The only solution I have come up with has been to parse out any HTML contained between the tags, however this doesn't work with some plugins like Caldera Forms.
Example from WP docs:
[caption id="attachment_6" align="alignright" width="300"]<img src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]
Expected:
<img src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" />
The Great Wave
You can try inspecting the element using Chrome dev tools to see what's rendered. Then you can copy that. Knowing your ultimate goal could be helpful
The project I'm working on has a standard that HTML5 code must also be well formed XML. This requirement is built into automated tests. This means empty elements like img, link, br, hr, ... must have a /> closing delimiter - not just a >.
For example:
1) good: <img src="foo.png" alt="stuff" />
2) bad: <img src="foo.png" alt="stuff">
I'm using Intellij IDEA 2018.2. I have Emmet enabled. To create an img element I type img followed by a TAB. Emmet expands this to <img src="" alt=""> but that's not well formed XML. I want it to automatically self-close resulting in <img src="" alt="" />. I've also tried CTRL+SPACE auto-complete with the same result.
Question: How do I get Intellij IDEA to automatically self close HTML5 empty elements?
This is a simple question and I've done internet searches and looked at Intellij Settings and documentation but still haven't found an answer. Maybe I'm just missing it ...
In HTML5 tags like <br> or <img> do not require a "/ " for closing them like <br/> (http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element,
http://www.w3.org/TR/html5/syntax.html#void-elements).
However, you can easily change current behavior in Settings | Editor | Live Template | Zen Html | br/img by modifying the templates accordingly:
I get HTML code from the backend via $http of AngularJS, and log the code retrieved and is OK, but to see it in the browser, the html structure changed.
This is the code that I get:
<a href=" http://www.google.com" target="_blank">
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true" />
</figure>
<p> Some text</p>
</a>
and this is what the browser displays:
<a href=" http://www.google.com" target="_blank">
</a>
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true">
</figure>
<p> some text</p>
Then I did the following test, log the code retrieved
$log.debug(vm.myHtml);
and then sanitize the code with
$log.debug($sce.getTrustedHtml(vm.myHtml))
and I get the same previous difference.
I was having the same problem and so played around with the Plunker available on the AngularJS docs.
I then modified it by placing some <h1> tags within <a> tags (see this plunker). The good news was that it worked in this most basic case. This had me scratching my head for ages.
In the end, I was just guessing that maybe the version of ngSanitize that I was using was maybe a little old and at some point they had slightly changed the way the tags were mapped, split and then rendered. I looked through the history but couldn't find anything. In the end, i updated to 1.5.7 the same as the version in the plunker. And smiling again :)
I have a product page that uses Microdata. At the moment the itemprop="image" attribute is specified on the first thumbnail from my thumbnail gallery. What I'd like to do is specify it for the high-res image I have.
The trouble is, that's not actually displayed on the page, it's loaded via JavaScript using a lighbox. I know I can do something like:
<img itemprop="image" src="/img/high-res.jp" style="display:none" />
and the image won't show and it's tagged as the product image. But, of course the image is still download.
Any way I can specify itemprop="image" on an image but not actually download the image?
I tried changing <img> to <span> but the testing tool didn't recognise it.
Perhaps the link element would be useful here - it's not displayed in the rendered HTML, but it is available in the HTML source and therefore available to JavaScript:
<link itemprop="image" href="/img/high-res.jpg">
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>