Historically, HTML has been based on SGML which allows tags to be omitted under certain conditions. 

Since the `&lt;img&gt;` element cannot have any child nodes, it is defined as EMPTY and the end tag is forbidden (as it would serve no purpose).

XHTML is HTML expressed in XML, and XML does not support optional or forbidden tags (although it allows a self-closing tag to substitute for a start+end tag pair), so it has to be explicitly closed there.

HTML 5 is backwards compatible with versions of HTML that were SGML based.

The `&lt;img&gt;` tag represents what is known as a **void element** (see [HTML5 spec][1]), so called because it can&#39;t have any contents (unlike, say `&lt;a&gt;` or `&lt;div&gt;`). Therefore there is no syntactic reason why it should need to be closed in HTML.

XHTML, however, is based on XML, where every tag needs to be closed.


  [1]: http://www.w3.org/TR/html5/syntax.html#void-elements

It is what is called a void element which just means the element must not have any content (but can have attributes.) The HTML5 spec has this to say about void elements:

&gt;if the element is one of the void elements, or if the element is a foreign element, then there **may** be a single &quot;/&quot; (U+002F) character. **This character has no effect on void elements**

So there&#39;s no real reason to have the single &quot;/&quot; (U+002F) character, but it won&#39;t break anything if it&#39;s included.

 `&lt;img&gt;` tag is basically a Void element.

For your understanding:

The image does not have any content. Image tag will just give the path from where the resource will be loaded through src attribute. So, it does not require  any end element.

Whereas `&lt;img src=&quot;smiley.gif&quot; alt=&quot;Smiley face&quot; height=&quot;42&quot; width=&quot;42&quot;/&gt;`, this code is for XHTML version.

You won&#39;t put anything in the image like in `h1` you would put text but in image you won&#39;t put anything on it.

Example: 
```
&lt;h1&gt;hi&lt;/h1&gt;
&lt;img src=blblb alt=blbl/&gt;
```

I am trying to run the example from the spring guide : &lt;a href=&quot;https://spring.io/guides/gs/rest-service/&quot;&gt; Building a RESTful Web Service &lt;/a&gt;.

It works well if I open &lt;b&gt;localhost:8080/greeting.&lt;/b&gt; 

But it cannot make connection if I open either &lt;b&gt;192.168.1.111:8080/greeting&lt;/b&gt;, or &lt;b&gt;140.112.134.22:8080/greeting&lt;/b&gt; instead, despite both IPs are actually used by my computer on the internet.

Could someone suggest me how to configure the embedded Tomcat in Spring to accept HTTP request on other IP addresses, besides localhost(that is, 127.0.0.1)?

Thanks!  :)



How to configure embedded Tomcat integrated with Spring to listen requests to IP address, besides localhost?

I have the following implementation that gives a compiler error:

    public enum FusionStat implements MonsterStatBuilderHelper {
        ATTACK {
            @Override
            public MonsterCard.MonsterCardBuilder safeCreateBuilder(final MonsterCard baseMonsterCard, final MonsterCard fusedMonsterCard, final FusionCard fusionCard) {
                Objects.requireNonNull(baseMonsterCard);
                Objects.requireNonNull(fusedMonsterCard);
                Objects.requireNonNull(fusionCard);
                if (baseMonsterCard.equals(fusedMonsterCard)) {
                    throw new IllegalArgumentException(&quot;baseMonsterCard and fusedMonsterCard need to be different&quot;);
                }
                return new MonsterCard.MonsterCardBuilder(baseMonsterCard)
                        .attack(baseMonsterCard.getAttack() + (fusionCard.getFusionPower() * fusedMonsterCard.getAttack()));
            }
        },

        HITPOINTS {
            @Override
            public MonsterCard.MonsterCardBuilder safeCreateBuilder(final MonsterCard baseMonsterCard, final MonsterCard fusedMonsterCard, final FusionCard fusionCard) {
                Objects.requireNonNull(baseMonsterCard);
                Objects.requireNonNull(fusedMonsterCard);
                Objects.requireNonNull(fusionCard);
                if (baseMonsterCard.equals(fusedMonsterCard)) {
                    throw new IllegalArgumentException(&quot;baseMonsterCard and fusedMonsterCard need to be different&quot;);
                }
                return new MonsterCard.MonsterCardBuilder(baseMonsterCard)
                        .maximumHitpoints((int)(baseMonsterCard.getMaximumHitpoints() + (fusionCard.getFusionPower() / 100d * fusedMonsterCard.getMaximumHitpoints())))
                        .hitpoints((int)(baseMonsterCard.getHitpoints() + (fusionCard.getFusionPower() / 100d * fusedMonsterCard.getHitpoints())));
            }
        };

        protected interface MonsterStatBuilderHelper extends MonsterStatBuilder {
            default MonsterCard.MonsterCardBuilder safeCreateBuilder(final MonsterCard baseMonsterCard, final MonsterCard fusedMonsterCard, final FusionCard fusionCard) {
                return createBuilder(baseMonsterCard, fusedMonsterCard, fusionCard);
            }
        }
    }

    @FunctionalInterface
    interface MonsterStatBuilder {
        MonsterCard.MonsterCardBuilder createBuilder(final MonsterCard baseMonsterCard, final MonsterCard fusedMonsterCard, final FusionCard fusionCard);
    }


It gives a cyclic inheritance error on the first line `involving FusionStat`.

I don&#39;t exactly see what is going on. I had first implemented an abstract class and wanted to let the enum extend that, until I realized that enums cannot extend classes. Now I try to (ab)use the default methods in Java 8.

I am interested in the thought process about why my code does not compile, I was trying to remove code duplication (still have to do so), by pulling the duplicated code inside `safeCreateBuilder`.

Cyclic inheritance when implementing inner interface in enum

For curiosities sake, why is the &lt;**img**&gt; tag not closed in **HTML**?

    &lt;img src=&quot;smiley.gif&quot; alt=&quot;Smiley face&quot; height=&quot;42&quot; width=&quot;42&quot;&gt;

I also noticed that &lt;**img**&gt; tags are explicitly closed in **XHTML**...

    &lt;img src=&quot;smiley.gif&quot; alt=&quot;Smiley face&quot; height=&quot;42&quot; width=&quot;42&quot;/&gt;


**W3Schools:** [Image Tag][1]


  [1]: http://www.w3schools.com/tags/tag_img.asp

Why is the &lt;img&gt; tag not closed in HTML?

For curiosities sake, why is the &#x3C;img> tag not closed in HTML?
<pre><code class="hljs language-arduino">&#x3C;img src="smiley.gif" alt="Smiley face" height="42" width="42">
</code></pre>
I also noticed that &#x3C;img> tags are explicitly closed in XHTML...
<pre><code class="hljs language-arduino">&#x3C;img src="smiley.gif" alt="Smiley face" height="42" width="42"/>
</code></pre>
W3Schools: <a href="http://www.w3schools.com/tags/tag_img.asp" target="_blank" rel="noopener noreferrer">Image Tag</a>

## Premise
I need help copying rich text to the clipboard using JavaScript. I have searched around and haven&#39;t found anything to suit my specific needs.

## Code

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function ctrlA1(corp) {
      with(corp) {}
      if (document.all) {
        txt = corp.createTextRange()
        txt.execCommand(&quot;Copy&quot;)
      } else
        setTimeout(&quot;window.status=&#39;&#39;&quot;, 5000)
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;sc1&quot;&gt;hello &lt;br&gt; &lt;b&gt; world &lt;/b&gt; &lt;/div&gt;
    &lt;button onclick=&quot;ctrlA1(document.getElementById(&#39;sc1&#39;) )&quot;&gt;&lt;/button&gt;

&lt;!-- end snippet --&gt;

## Problem
The aforementioned code isn&#39;t working and is resulting in an `object expected error`. Any help is appreciated!
I have seen a library out there called `zeroclipboard`, but would prefer to write my own function.

---
# Edit:

I now have this function to select text on the page. is it possible to write a formula to copy the selected range as is?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function containerSelect(id) {
      containerUnselect();
      if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(id);
        range.select();
      } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(id);
        window.getSelection().addRange(range);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;label onclick=&quot;containerSelect(this); select_all()&quot;&gt;
      &lt;p&gt;hello world&lt;/p&gt;
      &lt;img src=&quot;imagepath.png&quot;&gt;
    &lt;/label&gt;

&lt;!-- end snippet --&gt;



How can I copy rich text contents to the clipboard with JavaScript?

I have found a few different posts and even questions on stackoverflow answering this question. I am basically implementing this same thing as [this post][1].


  [1]: https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading

So here is my issue. When I upload the photo, I also need to submit the rest of the form. Here is my html:

    &lt;form id=&quot;uploadImageForm&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;input name=&quot;imagefile[]&quot; type=&quot;file&quot; id=&quot;takePictureField&quot; accept=&quot;image/*&quot; onchange=&quot;uploadPhotos(\&#39;#{imageUploadUrl}\&#39;)&quot; /&gt;
      &lt;input id=&quot;name&quot; value=&quot;#{name}&quot; /&gt;
      ... a few more inputs ... 
    &lt;/form&gt;

Previously, I did not need to resize the image, so my javascript looked like this:

    window.uploadPhotos = function(url){
        var data = new FormData($(&quot;form[id*=&#39;uploadImageForm&#39;]&quot;)[0]);

        $.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: &#39;POST&#39;,
            success: function(data){
                ... handle error...
                }
            }
        });
    };


This all worked great... now that I need to resize the images... how can I replace the image in the form so that the resized one is posted and not the uploaded image?

    window.uploadPhotos = function(url){

        var resizedImage;

        // Read in file
        var file = event.target.files[0];

        // Ensure it&#39;s an image
        if(file.type.match(/image.*/)) {
            console.log(&#39;An image has been loaded&#39;);

            // Load the image
            var reader = new FileReader();
            reader.onload = function (readerEvent) {
                var image = new Image();
                image.onload = function (imageEvent) {

                    // Resize the image
                    var canvas = document.createElement(&#39;canvas&#39;),
                        max_size = 1200,
                        width = image.width,
                        height = image.height;
                    if (width &gt; height) {
                        if (width &gt; max_size) {
                            height *= max_size / width;
                            width = max_size;
                        }
                    } else {
                        if (height &gt; max_size) {
                            width *= max_size / height;
                            height = max_size;
                        }
                    }
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext(&#39;2d&#39;).drawImage(image, 0, 0, width, height);
                    resizedImage = canvas.toDataURL(&#39;image/jpeg&#39;);
                }
                image.src = readerEvent.target.result;
            }
            reader.readAsDataURL(file);
        }


       // TODO: Need some logic here to switch out which photo is being posted...

        var data = new FormData($(&quot;form[id*=&#39;uploadImageForm&#39;]&quot;)[0]);

        $.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: &#39;POST&#39;,
            success: function(data){
                ... handle error...
                }
            }
        });
    };

I&#39;ve thought about moving the file input out of the form and having a hidden input in the form that I set the value of to the value of the resized image... But I&#39;m wondering if I can just replace the image that is already in the form.

Use HTML5 to resize an image before upload

I have a JavaScript code which save string to the Local storage, the string size is 400000,

    var dataURL = canvas.toDataURL(&quot;image/jpg&quot;).toString();
    localStorage.setItem(&quot;dataURL&quot;, dataURL);

I open the html file from chrome, in one computer its OK in the other computer i get 

&gt; Uncaught QuotaExceededError: Failed to execute &#39;setItem&#39; on
&gt; &#39;Storage&#39;: Setting the value of &#39;dataURL&#39; exceeded the quota.

In this computer I allowed to save string length no more than 100000 chars.
Both computers have the same chrome&#39;s Version 35.0.1916.114 m 
Why?

Setting the value of &#39;dataURL&#39; exceeded the quota

I want to set a minimum font size to every element in my HTML page.

For example if there are elements with font-size less then 12px, then they will change to 12px.  
But if there are elements with font-size grater then 12px, they will not change.

Is there any way to do it with CSS?

How to set min-font-size in CSS

I am facing problem while setting tbody height width overflow scroll. 
 
   

    &lt;style&gt; 
         tbody{
           height:50px;display:block;overflow:scroll
         }
       &lt;/style&gt;
    
           &lt;h3&gt;Table B&lt;/h3&gt;
        &lt;table style=&quot;border: 1px solid red;width:300px;display:block&quot;&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;td&gt;Name&lt;/td&gt;
                    &lt;td&gt;phone&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody style=&#39;height:50px;display:block;overflow:scroll&#39;&gt;
                &lt;tr&gt;
                    &lt;td&gt;AAAA&lt;/td&gt;
                    &lt;td&gt;323232&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;BBBBB&lt;/td&gt;
                    &lt;td&gt;323232&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;CCCCC&lt;/td&gt;
                    &lt;td&gt;3435656&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

[Visit my fiddle here]( http://jsfiddle.net/amit4mins/f2XYF)

I want table B like Table A with overflow scroll.

Any help will be appreciated.

Many Thanks,
M.

How to set tbody height with overflow scroll

I am using Picasso to display image in my android app:

    /**
    * load image.This is within a activity so this context is activity
    */
    public void loadImage (){
        Picasso picasso = Picasso.with(this); 
    	picasso.setDebugging(true);
    	picasso.load(quiz.getImageUrl()).into(quizImage);
    }

I have enable debugging and it always shows either red and green .But never shows yellow

Now if i load same image next time and internet is not available the image is not loaded.

Questions:

1. Does it not have local disk cache?
2. How do i enable disk caching as i will be using same image multiple times.
3. Do i need to add some disk permission to android manifest file?

How do I use disk caching in Picasso?


I am trying to crop/resize user profile image using jquery plugin namely crop.js which sends user image as base64 via ajax to my controller as 

    $.ajax({
             type: &quot;post&quot;,
             dataType: &quot;json&quot;,
             url: &quot;${g.createLink(controller: &#39;personalDetail&#39;, action:&#39;uploadUserImage&#39;)}&quot;,
             data: { avatar: canvas.toDataURL() }

            });

 but I unable to decode this base64
    
    &#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...==&#39; 
string as Image,Can you guys guide me how can I save my base64 string as image on my server?.

Convert base64 string to image

I&#39;m developing a web app on Node.js (+ express 4) where users can set their profile image by uploading it to the server. We already limit the file mimetype and max filesize, so the user can&#39;t upload more than 200KB png or jpeg images.

The problem is we&#39;d like to resize (serverside) the uploaded image resolution to 200x200 to improve page loading and saving space on disk. After some research, all answers pointed to using any module based on ImageMagick or GraphicsMagick. 

However, having to install ImageMagick/GraphicsMagick to do a simple image resizing seems too overkill for me, so, is there any other solution other than this for Node.js?

**Edit:** I&#39;ve changed the accepted solution to [sharp][1] as the previous solution (lwip) is no longer maintained. Thanks for all your feedback!


  [1]: https://sharp.pixelplumbing.com/

Node.js: image resizing without ImageMagick

Can you do this? I&#39;m having users upload images into a container that is width:100%, but I don&#39;t want the images to be larger than their original size. Many thanks!

CSS image max-width set to original image size?

I have an image at this link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

As you can see, this is a normal image with correct orientation. However, when I set this link to src attribute of my image tag, the image becomes upside down. http://jsfiddle.net/7j5xJ/

&lt;!-- begin snippet: html --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg&quot; width=&quot;200&quot;/&gt;

&lt;!-- end snippet --&gt;

Do you have any idea what is going on?


img tag displays wrong orientation

I have been having trouble with the tag `&lt;f:facet&gt;`. I am working form other examples of code which use it, but I&#39;m not sure exactly what purpose it serves.

I have written some code which in method is exactly the same as other code I have seen which works, except there&#39;s is wrapped in a `&lt;f:facet name=actions&gt;` tag. When I add this around my code the drop down box I am wrapping it around disappears when I deploy. Anyone able to suggest a reason for this or give me an insight into how and when to use facet?

Here is my code, I won&#39;t bother adding the bean code as they&#39;re just basic getters and setters and I don&#39;t think they&#39;re causing the trouble.

    &lt;f:facet name=&quot;actions&quot;&gt;
        &lt;p:selectOneMenu id=&quot;SwitchWeekDrpDwnMenu&quot; 
                         value=&quot;#{depotWorkloadBean.selectView}&quot;
                         partialSubmit=&quot;true&quot;&gt;
            &lt;p:ajax update=&quot;mainForm&quot; 
                    listener=&quot;#{depotWorkloadBean.updateView}&quot; /&gt;
            &lt;f:selectItem itemLabel=&quot;Day view&quot; itemValue=&quot;Day&quot;/&gt;
    		&lt;f:selectItem itemLabel=&quot;01/01/2014&quot; itemValue=&quot;Week&quot;/&gt;
    	&lt;/p:selectOneMenu&gt;
    &lt;/f:facet&gt;

If I remove the facet tag the dropdown box displays, but doesn&#39;t function as it should with the beans.

What does &lt;f:facet&gt; do and when should I use it?

I am revising some **XHTML** files authored by another party. As part of this effort, I am doing some bulk editing via **Linq to XML**.

I&#39;ve just noticed that some of the original source XHTML files contain the [`&amp;quot;` HTML entity][1] in text nodes within those files. For instance:

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;Greeting: &amp;quot;Hello, World!&amp;quot;&lt;/p&gt;

And that when recovering the XHTML text via [XElement.ToString()][2], the **`&amp;quot;`** entities are being replaced by **plain double-quotes**:

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;Greeting: &quot;Hello, World!&quot;&lt;/p&gt;

**Question:** Can anyone tell me what the motivation might have been for the original author to use the `&amp;quot;` entities instead of plain double-quotes? Did those entities serve a purpose which I don&#39;t fully appreciate? Or, were they truly unnecessary as I suspect?

I do understand that **`&amp;quot;`** would be necessary in certain contexts, such as when there is a need to place a double-quote within an HTML attribute. For instance:

&lt;!-- language: lang-html --&gt;

    &lt;a href=&quot;/images/hello_world.jpg&quot; alt=&quot;Greeting: &amp;quot;Hello, World!&amp;quot;&quot;&gt;
      Greeting&lt;/a&gt;

  [1]: http://www.fileformat.info/info/unicode/char/22/index.htm
  [2]: http://msdn.microsoft.com/en-us/library/bb341005%28v=vs.110%29.aspx


Content Type	Original Author	Original Content on Stackoverflow
Question	ѺȐeallү	View Question on Stackoverflow
Solution 1 - Html	Quentin	View Answer on Stackoverflow
Solution 2 - Html	kmoe	View Answer on Stackoverflow
Solution 3 - Html	Josh Davenport-Smith	View Answer on Stackoverflow
Solution 4 - Html	Azeez	View Answer on Stackoverflow
Solution 5 - Html	Sur	View Answer on Stackoverflow

Why is the <img> tag not closed in HTML?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Cyclic inheritance when implementing inner interface in enum

How to configure embedded Tomcat integrated with Spring to listen requests to IP address, besides localhost?

Attributions