Posts

Showing posts from May, 2017

A brief Introduction of CSS Box Model

Image
In this blog I will explain you basic introduction of CSS Box Model...!! First we will discuss what is CSS? CSS stands for Cascading Style Sheets which acts as a presentation layer in any webApplication. CSS is used to add styles, design and how our elements will display on Screen or Broser Window. CSS Box Model? All HTML elements are rectangular in nature when it renders on webpage,so it has box like architechture which consists of padding, border and margin and visible content. "The content part of any HTML element is wraps around a box which is called as CSS Box Model." Here we will explain you different component of Box Model by example- We will use design of our previous blog i.e. How to make website in 10 easy steps? Please read the above blog to know the structure of a basic webpage which we will modify to demonstrate examples below: Now we will modify the HTML page which we have used in the above blog by inserting a <div> container in th...
3 comments
Keep reading

How to Make a simple Website in 10 easy steps?

Image
In this blog I will explain you how to make a website in easy steps..!! Step1 :  Open a notepad  or any text editor on your computer. Step2 :  Save your webpage with a .html extension by giving any name you want like "MyFirstPage.html". Step3 : Tell your browser that this is a HTML Page by adding <html> tag in it. Step4 :  Add a title to your webpage which appears on top of your your browser window.              Always add <title> tag in head section which consists of meta information for your website. Step5 :  Now its time to add some visible content for your webpage. Add <body> tag and start adding content within it.               Step6 : Add heading in your webpage by using <h1> tag.You can use any tag from <h1> to <h6>. Step7 :  Now we will add some text content to your webpage...
1 comment
Keep reading

How to use Rasterize.js with PhantomJS?

Image
In the previous blogs we have explained you how to take screenshot of a web page with PhantomJS in a PNG format. In this blog we will teach you how to use Rasterize.js in PahntomJS  to capture  any Webpage/Render HTML in a PDF format. What is Rasterize.js? It is a Javascript API runs on PhantomJS Engine which capture any Webpage/Render HTML in PDF format.   Please follow the below steps to make a PDF Convertor on your machine:- Step 1 :  First download and configure PhantomJS in your machine with the help of my previous blog . Step 2 :  Now hopefully you have installed and checked  PhantomJS running in your system. Download Rasterize.js   by clicking this URL  or simply copy paste the updated script from below: " use strict " ; var page = require ( ' webpage ' ). create (), system = require ( ' system ' ), address, output, size, pageWidth, pageHeight; if ( system . args . length < 3 || system . a...
Post a Comment
Keep reading

How to use PhantomJS as a PDF Convertor?

Image
In the previous blog we have installed PhantomJS in our local system now we will see how to use PhantomJS as PDF convertor. As we know PhantomJS is a web browser so it has a rendering engine which will render HTML  page directly into many forms like PNG, PDF. First we will see how to take Screenshot of a HTML page into PNG format. Here we will render the HTML page into PNG file with the help of PhantomJS Engine. If you don't want to type you can directly copy paste the code from below: var page = require ( 'webpage' ). create (); page . open ( 'http://google.com/' , function () {   page . render ( 'google.png' );    console.log("Success");   phantom . exit (); }); Place the above code in a Javascript file and save this file at the same location where you saved PhantomJS like google.js. Open command prompt   go to the location where you have placed Phantomjs. Now run the Javascript file you made into Ph...
Post a Comment
Keep reading

How to install Phantomjs in windows as a PDF convertor?

Image
What is PhantomJS? PhantomJS is simply a browser as a console i.e. it works as a command prompt console which renders HTML through it own engine which used to capture screen, Page Automation, Testing and many more. It is a browser without user interface. How to install PhantomJS in windows? To install PhantomJS first download it from   phantomjs-2.1.1-windows.zip   . When you redirect to download page like shown above PhantomJS is available for both Windows and MAC Operating System. When you click on the download link you will get it downloaded in zip file. Window users first place the downloaded package in C :\Windows. Before placing the downloaded package  follow some steps to set environment variable for PhantomJS       First update the downloaded package as shown below. Right click on MyComputer and click on properties you will get this window.  Click on Advanced settings then click on Envir...
Post a Comment
Keep reading

Total Pageviews