title: giving each file a proper html5 tag based on MIME type to be displayed in an html+bootstrap template
body: <p>I created a web server in java that basically list all the files on a device. I want to create a cool, responsive UI using bootstrap to display those files on the client's browser; however, I know that just creating an link to each file won't get me anywhere.</p>
  
  <p>Here is some code before I continue:</p>
  
  <pre><code>for (File f : files.toArray(new File[files.size()])) {
      filesAsLinks += "&lt;a href=\"/Files"
              + f.toURI().getPath().replace(":", "") + "\"&gt;"
              + f.getPath() + "&lt;/a&gt;" + "&lt;br&gt;";
  
  }
  </code></pre>
  
  <p>I am thinking to create a <code>Handler</code> that is responsible for giving the file that it receives a proper html5 tag. For example:</p>
  
  <pre><code>Handler.handle (String path) {
      Path source = new Path(source);
      String contentType = Files.probeContentType(source);
      // last two lines to get the content type of a file 
      if (contentType.startsWith("video")) {
          return "video width=\"320\" height=\"240\" controls&gt; "
                  + "&lt;source src=\"pathRelated/video.mp\" ;type=" + contentType + " &gt;";
  
      }
  }
  </code></pre>
  
  <p>Would that be the relatively right thing to do before even thinking about making a template with bootstrap, or should I make the template first?</p>
  
  <p>So far I have been replacing the generated links String with a simple html template that contains some placeholders like "ContentGoesHere" in the following template:</p>
  
  <pre><code>"&lt;html xmlns=\"http://www.w3.org/1999/xhtml\"&gt; "+
                      "&lt;head&gt;"+
                      "   &lt;title&gt;Max Server&lt;/title&gt;"+
                      "&lt;/head&gt;"+
                      "&lt;body style=\"width: 100%; height:100%;\"&gt;"+
                      "   &lt;table width=\"100%\"&gt;"+
                      "       &lt;tr&gt;"+
                      "           &lt;td colspan=\"2\" style=\"background-color: #FFA500;height:10px\"&gt;"+
                      "               &lt;h1&gt;  HTTP Server&lt;/h1&gt;"+
                      "           &lt;/td&gt;"+
                      "&lt;td colspan=\"1\" style=\"background-color: #FFA500;height:10px;white-space: nowrap;\"&gt;&lt;/td&gt;"+
                      "       &lt;/tr&gt;"+
                      "       &lt;tr&gt;"+
                      "           &lt;td style=\"background-color: #FFD700; width: 100px;\" valign=\"top\"&gt;"+
                      "               &lt;b&gt;Menu&lt;/b&gt;&lt;br /&gt;"+
                      "               &lt;a href=\"/Files/\"&gt;Files&lt;/a&gt;&lt;br /&gt;"+
                      "               &lt;a href=\"/messages\"&gt;Messages&lt;/a&gt;&lt;br /&gt;"+
                      "               &lt;a href=\"/contacts\"&gt;Contacts&lt;/a&gt;&lt;br /&gt;"+
                      "               Settings&lt;br /&gt;"+
                      "               Info"+
                      "           &lt;/td&gt;"+
                      "           &lt;td style=\"float: left; margin: 5px;width:100%\" align=\"left\" valign=\"top\"&gt;"+
                      "               ContentGoesHere"+
                      "           &lt;/td&gt;"+
                      "       &lt;/tr&gt;"+
                      "       &lt;tr&gt;"+
                      "           &lt;td colspan=\"2\" style=\"background-color:#FFA500;clear:both;text-align:center;height:20px;\"&gt;"+
                      "           
                      "           &lt;/td&gt;"+
                      "       &lt;/tr&gt;"+
                      "   &lt;/table&gt;"+
                      "&lt;/body&gt;"+
                      "&lt;/html&gt;";
  </code></pre>
  
  <p>The final result string (template+content) is written to the client's socket output stream and sent to the client.</p>