My Technical Notes & Others...: HTML

Showing posts with label HTML. Show all posts

Monday, 1 April 2013

Centering An Image Or Text Within A Div

This post explains how to center an image or text in HTML using CSS. The code example is available on GitHub in the Center-Image-Text-Div directory.

Centering An Image Vertically And Horizontally Within A Div

The method described here requires to know the size of the image. The HTML is the following:

<div id="myDiv">
    <img id="myImg" src="SomeImg.jpg">
</div>

The CSS is the following:

#myDiv {
    height: 100%;
    width: 100%;
}

#myImg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* My image height divided by 2 */
    margin-top: -47px;
    /* My image width divided by 2 */
    margin-left: -188px;
}

The image is always positioned at the center of the window, even when it is resized. This example is inspired from the solution provided by deviousdodo on a StackOverflow question.

Centering Text Within A Div

The HTML is the following:

<div id="width:100%">
    <div id="someText">This text is always centered!</div>
</div>

The CSS is the following:

#someText {
    width: 300px;
    margin: 0px auto;
    text-align: center;
}

One must set a width larger than the text, and set the text alignment to centered.

Thursday, 17 January 2013

About The Meaning Of Colours...

This post collects a couple of 'good' posts about the meaning and psychology of colours:

As someone said: "Never use pure black, it does not exist in nature!"

Friday, 11 January 2013

How To Create A Focussable Image Button?

Surprizingly, it has not been that easy to create a focussable image button. There is a lot of incongruent information available out there. Hence, this post. The solution is quite simple when you know it:

<html>
<head></head>
  <body>
    <script>
      function doSomething() {
        alert('Hello!'); 
      }
    </script>
    <input type="image" tabindex="0" onclick="doSomething()"
      src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG" 
    />
    </body>
</html>

The JSFiddle is available here.

Wednesday, 31 October 2012

Overview Of HTML5 Features

This post is general overview of the new HTML5 features. It describes what you can do with these, but not how. If you are looking for tutorials, check the free DZone cheat sheets or Tutorials Point for code examples.

For a list of special HTML characters, see here.

Reminder

Before we cover HTML5, here is reminder about HTML. It stands for HyperText Markup Language. HTML documents are nothing more than traditional documents with text, plus extra annotations describing the nature of the corresponding text (i.e., markup).

For example, some parts of the text can be marked with a header tag (<h1>, <h2>...) to denote a paragraph header. Many tags are available, they structure the document. A HTML document can contain references to other HTML documents, facilitating the navigation between HTML documents. A document can be used to collect information from users via forms.

This an example of a very simple HTML5 document:

<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>My HTML5 Document!</title>
</head>
<body>
    This is the content of the document!
</body>
</html>

The styling and display of documents is configured with CSS style sheets. For example, one can select fonts, font sizes, font colors, etc... The web browser combines the HTML document with any attached CSS style sheet to render a corresponding version on the screen, including videos, images or sounds. It no style is provided, a default style is applied by the browser.

HTML documents can be made more interactive and dynamic with the help of Javascript, a scripting language running inside web browsers. For example, if a mouse pointer passes over an image, one can display a special message box, and close it once the pointer leaves the image. These actions are triggered by events (mouse click, mouse hovering over an image, etc...).

Before HTML5

Before version 5 of HTML, the community was suffering from the following issues:

Multiple DOCTYPEs and Document Type Definitions (DTD) - A DOCTYPE is linking an HTML document to a DTD. DTD's were used to define different types of HTML markup. HTML 4.01 had 3 DTDs. This level of complexity did not add value. HTML5 has only one DTD, triggered by one DOCTYPE only. It is compatible with older versions of HTML.
Different processing of invalid HTML documents - Browsers were processing invalid HTML differently, leading to different user experience. HTML5 specifies how errors should be handled.
Users were exposed to HTML document errors - This lead to a bad user experience.
Some HTML tags were purely presentational - These tags (bgcolor, align, big, center, etc...) have been removed in HTML5, since these are better handled with CSS.
Usability of frames, frameset and noframes - Frames allowed one to divide the screen displaying HTML into several parts. Each part would display some HTML content. This feature has been suppressed in HTML5.
No support for multimedia documents - Before HTML5, one needed to use 3rd party products, such as Flash to play videos, for example. HTML5 introduced new markup such as <video> to solve this issue.
Multiple character encodings - Specifying the character encoding is now mandatory in HTML5.

New HTML5 Features

The new features of HTML5 are:

Document Object Model (DOM) - HTML5 documents are now represented as a tree structure, where each tag is a leaf, which may contain child tag leaf elements. This facilitates the selection of tags in CSS with selectors. One can also manipulate this structure (with Javascript) to add or remove elements.
New Tags - A set of new tags (<footer>, <article>, <audio>...) to better describe the contents of HTML documents.
New Attributes - HTML tags can have attributes (for example, the class attribute in <p class="someLayout">). HTML introduces new ones (hidden, content, editable...).
New Input Elements - New elements can be used in forms to get input from customers (date, email, number, range...).
Canvas - This new tags enables the drawing of graphs within HTML documents. This can be performed dynamically with Javascript.
Mathematical Markup Language MathML - This is a set of new tags for mathematical content.
Offline Storage - Contrary to cookies, which are limit to 4K and which are transferred with each HTTP request, this feature allows the storage of structured information on the client side.
New Events - HTML5 defines new media, windows, form, drag-n-drop and mouse events.
Geolocation API - This API can be used to retrieve the location of the user.
Scalable Vector Graphics SVG - This tag enables the creation of graphics using the SVG language. This is different than canvas, since it does not require Javascript.
Web SQL - This API offers the possibility of accessing databases on the client side.
Server-Sent Events SSE - This is a possibility to send events from the server to the client.
WebSockets - This features enables bidirectional communication between client and server.
Microdata - It is a mean to parametrize HTML content, by fetching items and extracting content to be inserted from their properties.
Web Workers - This is the possibility to run long tasks on a different thread than the Javascript thread.

Wednesday, 26 September 2012

Sending Plain Text Or HTML Emails In Java

This post describes how to send plain text or HTML emails from Java. The code examples are available from Github in the Java-Email-Sending directory. To make these work, you will need to set a proper 'to' email address in the code, and eventually a sending email server login and password.

Plain Text Email

The following creates a simple email with plain text content and sends it to the recipient:

String to = "jverstry@gmail.com";
String from = "ffff@ooop.com";

// Which server is sending the email?
String sender = "localhost";

// Setting sending mail server
Properties ps = System.getProperties();
ps.setProperty("mail.smtp.host", sender);

// Providing email and password access to mail server
ps.setProperty("mail.user", "jverstry@gmail.com");
ps.setProperty("mail.password", "xxxxxxxxxxxxx");

// Retrieving the mail session
Session session = Session.getDefaultInstance(ps);

// Create a default MimeMessage
MimeMessage m = new MimeMessage(session);

m.setFrom(new InternetAddress(from));
m.addRecipient(
    Message.RecipientType.TO, new InternetAddress(to));

m.setSubject("This an email test !!!");
m.setText("Some email message content");

// Sending the message
Transport.send(m);

The email will look like this:

HTML Email

The same procedure can be used for an HTML email. The m.setText("Some email message content"); line should be replaced with:

StringBuilder htmlContent = new StringBuilder();
htmlContent.append("<h1>My Email Content Header</h1>");
htmlContent.append("Some body text");

m.setContent(htmlContent.toString(), "text/html" );