How to make a screenshot of an HTML page?

Discussion in 'Web Design' started by Aduardo, Sep 7, 2017.

  1. Aduardo

    Aduardo New Member

    Joined:
    Sep 6, 2017
    Messages:
    4
    Likes Received:
    1
    Hi,

    Could you please suggest me - How to make a screenshot of an HTML page properly?

    Any suggestion would be highly appreciated.

    Thanks.
     
  2. Jacklin

    Jacklin New Member

    Joined:
    Sep 7, 2017
    Messages:
    5
    Likes Received:
    0
    Screenshots of HTML pages are used everywhere today, whether you're a designer giving a preview of your latest coded template, or trying to make thumbnails for your portfolio.

    Unfortunately, with HTML you can't simply export the image like with a PSD (Photoshop) file, so you end up taking a screenshot of it in your browser. Now, everything your computer sees, including your taskbar and browser toolbars will be included in the screenshot, and that can get in the way when you're trying to be professional. You are also unable to see the portion of the page that extends beyond your screen resolution.

    Luckily there is a way to overcome this. My following guide describes how to complete the task with Internet Explorer.

    1) Open up the page you want to make a screenshot of in Internet Explorer.

    2) Go to View > Full Screen in the menu bar, or press F11.

    3) Right click on the toolbar on the top and click Auto-Hide, it should now disappear when you move your mouse away.

    4) Take a screenshot using the Prt Scrn key on your keyboard, and paste this into your favorite graphics program.

    5) Return to Internet Explorer, scroll to the bottom of the page and repeat step 4. This step is not necessary if your whole page fits onto your screen vertically.

    6) Align the two images in your graphics program, overlapping to give the proper page view.

    7) Slice off the bits that you don't want, including the Internet Explorer scroll bars and any blank spaces on the page created for resolution compatibility.

    8) Export your image file. There you go, you now have a full image of your coded HTML page without exposing to the public your browser or what programs you have in your Quick Launch menu!
     
  3. Carlos E.

    Carlos E. Moderator
    Staff Member

    Joined:
    Jan 28, 2015
    Messages:
    21
    Likes Received:
    3

Share This Page