Category Archives: html

Make jQuery library available to any webpage using Browser JavaScript Console

Hey there,

jQuery is a powerful & easy to use JavaScript library for DOM manipulation. You can do alot of activities in the HTML DOM with this awesome library. Normally I play with jQuery within the Browser Console (Using Firebug in Mozilla Firefox/Chrome Dev Tools in Google Chrome) So I can play inside HTML DOM using this library with one condition that JQuery has to be present in the webpage already. But in some cases, You might have noticed an unavailability of jQuery in some websites. So In that case, you can’t apply any jQuery methods using the browser console. But You can still play with jQuery functions by dynamically including the library using the Console itself. The below JavaScript will help you to do so.



Now you can perform normal jQuery functionalities inside HTML DOM just like the below example.

That’s it. Cheers..!! :)

Simple HTML parsing using PHP DomDocument With Example

Hey there,

Here I’m just giving an example about how to parse a HTML document with the help of PHP’s DomDocument class. This example is intended for a beginner, with little or limited knowledge about parsing HTML using PHP. In this example I’m using this web page (Included in the Source Code Zip) as a HTML document. This web page is a list of all top country level domains owned by Google & related details (which include Extension, Country Name, Language & ISO etc.). We’ll look into how to fetch all those data using DomDocument class. If you refer to the HTML source, you could see all those data like Top level domain, Extension contained with in <td> elements within different <tr> elements . So our main task is to fetch all <td> values. I’m giving the PHP code used to fetch those data.

I’ll explain the source code below :

Initially I’ve created an object variable ($dom) for DOMDocument class

Here used PHP’s file_get_contents function to fetch the HTML content.

Loading HTML source using DomDocument loadHTML function.

Get all <tr> elements

Loop through all <td> elements & respective elements to fetch all required data.

You could see I’ve used getElementsByTagName again to fetch all <td> elements as well. If you execute this PHP code, you can print all values contained within all <td> elements.

That’s it. You can Download the source Here.¬† Share it..Cheers..:)

HTML, HTML5 : What does DOCTYPE mean?

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE “sniffing” or “switching”, wherein the DOCTYPE in a document served as text/html determines a layout mode, such as “quirks mode” or “standards mode”. The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don’t use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a “mostly useless, but required” header only to trigger “standards mode” in common browsers.

Why do I want to use it?

The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode. See example:

 Declaring that the document contains HTML5 Markup

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

Doing so will cause even browsers that don’t presently support HTML5 to enter into standards mode, which means that they’ll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don’t support.

This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.

Cheers..:)