Tag Archives: HTML

Marquee tag in HTML and its attributes

The HTML marquee tag provides a way for browsers to creates a scrolling effect (can be tailored to include any HTML content) vertically or horizontally without having to resort to JavaScript techniques.

 

 

The marquee is non-standard HTML tag but you can enjoy (or possibly suffers from) good browser support.

 

You can change the marquee attributes on MARQUEE tag by following ways.

 

Attributes:

 

BGCOLOR=”#CCCCCC” – Set background color.

LOOP – Determines how many times the text will scroll. -1 is indefinite and will continuously scroll. You can set this to whatever you’d like.

SCROLLAMOUNT – Determines the speed your text will scroll.

WIDTH – Determines the width of your marquee.

HEIGHT – Determines the height of your marquee.

Direction – Determines the direction in which the text should scroll – up or down.

BEHAVIOR=”slide” – Defines the type of scrolling.

SCROLLDELAY=”500″ – Defines how long to delay between each jump.

HSPACE – Specifies horizontal space around the marquee.

VSPACE – Specifies vertical space around the marquee.

 

<marquee
bgcolor="color name or hex value"
loop="value (number of loops)"
align="{ top | middle | bottom }"
direction="{ left | right }"
behavior="{ scroll | slide | alternate }"
height="integer (pixels or %)"
width="number (pixels or %)"
hspace="integer (pixels or %)"
vspace="number (pixels or %)"
scrollamount="number"
scrolldelay="number">
</marquee>

 

Event Attributes:

onclick
Script runs when a mouse click

ondblclick
Script runs when a mouse double-click

onmousedown
Script runs when mouse button is pressed

onmouseup
Script runs when mouse button is released

onmouseover
Script runs when mouse pointer moves over an element

onmousemove
Script runs when mouse pointer moves

onmouseout
Script runs when mouse pointer moves out of an element

onkeypress
Script runs when key is pressed and released

onkeydown
Script runs when key is pressed

onkeyup
Script runs when key is released

 

Convert HTML to PDF using PHP code

Convert HTML to PDF using PHP code (HTML2FPDF Class library)

In web development, you often need to create PDF (Portable Document Format) to view or download/ print a document.

 

Here is a simple class that will provide you a simple way to do create PDF.HTML2FPDF Class library consist of three classes namely PDF, HTML2FPDF and FPDF (modified FPDF class). The class PDF extends the class HTML2FPDF that extends the class FPDF.

 

Convert a sample html page into a PDF file using HTML2FPDF Library by following below simple steps.

<?php
require('html2fpdf.php');
$pdf=new HTML2FPDF();

$pdf->AddPage();
$fp = fopen("scriptarticle-sample.html","r");
$strContent = fread($fp, filesize("scriptarticle-sample.html"));
fclose($fp);

$pdf->WriteHTML($strContent);
$pdf->Output("sample.pdf");
echo "PDF file has been generated successfully!";

?>

 

The HTML2FPDF class library will work best with the XHTML 1.0.
Download the full code by the link below.

html2pdf-generator.zip

 

Basic difference between GET and POST method in PHP

What are the basic difference between get and post method in php?

 

In form submission with GET method, browser constructs a URL by taking the value of the action attribute appending a? to it, then appending the form data set (encoded using the application/x-www-form-urlencoded). The browser then processes this URL as if following a link (or as if the user had typed the URL directly).

 

Submission of a form with POST method causes a POST request to be sent, using the value of the action attribute and data will treated according to the content type specified by the enctype attribute.

 

Here are the list of some differences between GET and POST methods.

 

1) GET allows only ASCII characters whereas no restrictions in POST, binary data (images and other files) is also allowed.

 

2) History of last data sent remain in browser history using GET but POST method never remain history.

 

3) GET data can be cached but POST never cached.

 

4) It is easier to hack data in GET method with respect to POST.

 

5) In GET a complete URL string with data can be bookmarked, but it can’t happen in POST.

 

6) In GET application/x-www-form-urlencoded encoding is possible but POST can opt multipart/form-data as well.

 

7) GET requests are re-executed. The browser usually alerts the user that data will need to be re-submitted using POST data.

 

8) In GET 2000 character maximum size (depends on browser).8 MB max size for the POST method.

 

9) GET method is visible to everyone (it will be displayed in the browser’s address bar) and has limits on the amount of information to send.
POST method variables are not displayed in the URL.

 

10) GET is less secure compared to POST.

 

11) GET method should not be used when sending passwords or other sensitive information.

 

12) There are restrictions on form data length in GET.

 

HTML form enctype Attribute

HTML form enctype Attribute

The HTML form enctype attribute’s main purpose is to indicate how the form data/values should be encoded prior to it being sent to the location defined in the action attribute on the form.

 

for e.g.

<form action=”scriptarticle/post_page.php” method=”post” enctype=”multipart/form-data”>

 

By default, form data is encoded to “application/x-www-form-urlencoded” so that spaces are converted to “+” symbols,and special characters like apostrophes, percentage and other symbols are converted to their ASCII HEX equivalent values.

 

The form’s enctype attribute is supported almost in all browsers.

 

The enctype attribute is supported only if method=”post” is used.

 

Other options of enctype attibute are.

  • application/x-www-form-urlencoded
    Default value.All characters are encoded before sent to server(spaces are converted to “+” symbol and special characters are converted to ASCII HEX values)
  • multipart/form-data
    No characters are encoded.
    This value “multipart/form-data” should be used for submitting forms that contain files, non-ASCII data, and binary data.
  • text/plain
    Spaces are converted to “+” symbol but special characters are not encoded.

 

If you want some more information about HTML form enctype attribute follow W3 Schools link.

PHP: How to prevent image caching & prevent browser caching using HTTP headers

Prevent Image Caching & Prevent Browser Caching

 

The Browser(s) saves a copy of a file (like a logo image) and uses this cached (saved) copy on each page that needs the same, but some time you will not need of this i.e you want that every image and CSS and java script should be reloaded when page loads, for implementing this we need some sort of techniques as below.

 

Simple way to disable image caching (Prevent Images Caching in Browsers) is to append time stamp with the image name.

 

eg.

<img src='image_name.jpg?<?php echo time() ?>' />

 

By this browser understand a new image at every call, but HTML parser understand ‘image_name.jpg’.

 

Prevent Browser Caching

By meta tag

<meta content="Fri, 20 Jan 1984 01:11:11 GMT"/>
<meta http-equiv="Pragma" content="no-cache" />

 

Here Meta tag tells the browser,cached copy of the page in back date.That means browser never get the cached page.

 

In PHP you can also achieve this approach by header function.
Here is the example.

<?php
header('Expires: Fri, 20 Jan 1984 01:11:11 GMT');
header('Pragma: no-cache');
?>

 

Or by the use of below code you can go

<?php
header('Expires: Fri, 20 Jan 1984 01:11:11 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
?>

 

By making cache disable your site visitor will always see the latest contents.

 

 

What is the HTML DOM(Document Object Model)?

The HTML DOM views an HTML document as a tree-structure. The tree structure that is defined known as a node-tree.All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

 

Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed with JavaScript (Client side programming language).
The programming interface of the DOM is defined by standard properties and methods.

 

HTML DOM Properties are
x known as HTML element or object of DOM
x.innerHTML – the text value of x
x.nodeName – the name of x
x.nodeValue – the value of x
x.parentNode – the parent node of x
x.childNodes – the child nodes of x
x.attributes – the attributes nodes of x

 

HTML DOM Methods
Some simple DOM methods are
x.getElementById(id) – get the element with a specified id
x.getElementsByTagName(name) – get all elements with a specified tag name
x.appendChild(node) – insert a child node to x
x.removeChild(node) – remove a child node from x

 

The innerHTML Property
The easiest way to get or modify the content of an element is by using the innerHTML property.innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browser.

 

Events
Every element on a web page has certain events which can trigger JavaScript functions. Events are normally used in combination with functions, and the function will not be executed before the event occurs!
Events examples
> A mouse click
> A web page or an image loading
> Mousing over a hot spot on the web page
> Selecting an input box in an HTML form
> Submitting an HTML form
> A keystroke