Parse some HTML tags with a Java SAX XML parser

1

5. Mai 2012

Parsing XML with Java is very simple. If you want to parse some HTML tags, then you just have to add a root element around those tags (to make it a valid XML structure) and then you can use the Java SAX XML parser.

Code

import java.io.StringReader;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.InputSource;
 
public class NewMain {
 
  public static void main(String[] args) throws Exception {
    String html = "<h1>Headline</h1><p><b>Hello World.</b><b>This is a test.</b></p>";
    html = "<root>" + html + "</root>";
 
    DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
    DocumentBuilder builder = factory.newDocumentBuilder();
    Document document = builder.parse(new InputSource(new StringReader(html)));
    NodeList elementsByTagName = document.getElementsByTagName("b");
    for (int i = 0; i < elementsByTagName.getLength(); i++) {
      Node element = elementsByTagName.item(i);
      String text = element.getTextContent();
      System.out.println(text);
    }
  }
}

Result

Hello World.
This is a test.

Tags: Java, HTML, Java, Parser, SAX, XML

Get user agent with Server Side Includes

0

25. April 2012

This is how you can show the user agent with Server Side Includes:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>SSI Page</title>
  </head>
  <body>
    <!--#echo var="HTTP_USER_AGENT" -->
  </body>   
</html>

Tags: HTML, HTML, Server Side Includes, SSI, user agent

Custom website image and description for Facebook Share

0

19. April 2012

If you share a link of a website on Facebook, then Facebook will display the title, description and an image of that website. If you are a webmaster, then you can define what will be shown on Facebook. Let’s have a look at my example:

<title>Der Blog von Benny Neugebauer</title>
<meta name="description" content="Benny Neugebauer schreibt in seinem Blog über Tipps und Tricks in der Webentwicklung. Zu den Themen zählen JavaScript, Java, PHP, HTML5, SEO und Photoshop." />
<meta name="medium" content="blog" />
<link rel="image_src" href="http://www.bennyn.de/images/logo.png" / >

Explanation:

Facebook will show the standard HTML title of your webpage.
You can set description, which will be shown. It can be 160 characters long but to be compatible with the Google search, it should not be longer than 130 characters.
It is recommended to determine the type of your website. Possible values are: audio, image, video, blog, news and mult (multiple).
Finally you can set a thumbnail picture for your website. The size should be 100×100 pixels.

Here is the final result of my customization:

More information can be found in the Facebook Share documentation.

Tags: HTML, description, Facebook, HTML, Image, title, website

How to create a custom Twitter button

0

18. April 2012

To create a custom twitter button you need to encode some strings and insert a few lines of JavaScript. This is how it can be done:

HTML code:

<a id="twitterLink" target="_blank">
  <img src="./images/twitter.png" alt="Twitter button" />
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

JavaScript code:

var url = window.location.href.split('?')[0];
var twitterUrl=encodeURIComponent(url);
var twitterText=encodeURIComponent('Hello World:');        
var twitterLink='https://twitter.com/share?text='+twitterText+'&url='+twitterUrl+'&count=none';
document.getElementById('twitterLink').href=twitterLink;

Tags: JavaScript, button, custom, HTML, JavaScript, js, Twitter

Create a link with an image in JavaScript

0

16. März 2012

With JavaScript you can dynamically create every HTML element that you want. Here is an example on how to create a link with an image:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Create a link with an image in JavaScript</title>
    <style type="text/css">
      .googleImage{ border: 2px solid blue; }
    </style>
  </head>
  <body>  
    <script type="text/javascript">
      // Link
      var link = document.createElement('a');
      link.href = 'http://www.google.de/';
      // Alternative:
      link.setAttribute('href', 'http://www.google.de/');
 
      // Image
      var image = document.createElement('img');
      image.className = 'googleImage';
      image.src = 'http://www.google.de/images/logo.png';
 
      // Create a link with an image inside
      link.appendChild(image);
      // Display the link
      document.body.appendChild(link);
    </script>
  </body>
</html>

Tags: JavaScript, create, DOM, HTML, Image, JavaScript, js, Link

Div Element horizontal und vertikal zentrieren

0

27. Januar 2012

Ein Code sagt mehr als tausend Worte:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centering a Div horizontally and vertically</title>
    <style type="text/css">
      html
      {
        background-color: black;
      }
 
      body
      {
        width: 100%;
        height: 100%;
        position: static; /* don't make it relative! */
      }
 
      #centered
      {
        position: absolute;
        height: 396px;
        width: 400px;
        margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */
        top: 50%;
        left: 50%;
        background-color: violet;
        border: 1px solid white;
      }
    </style>
  </head>
  <body>  
    <div id="centered"></div>
  </body>
</html>

Tags: CSS, HTML, CSS, div, element, horizontal, HTML, vertikal, zentrieren