There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.
Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.
How to Add an Extension or Add-on to Your Web Browser
To add an extension or add-on tool to your browser:
Go to the page or site for your browser’s extensions or add-ons:
Follow the instructions.
Posted in Web Design, WordPress Under the Hood |
Tagged browser bookmarklets, browser extensions, browser testing, browsers, chrome, code, css, debug, debug web pages, debugging, debugging web pages, evaluate web pages, firefox, HTML, html inspection, html inspector, inspector, testing, testing web pages, valid code, valid css, valid html, validation, web accessibility, writing code |
This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:
View the source code of a web page.
How to save a web page to your computer
How to view a saved web page on your computer
How to open a web page in your text editor
How to view the CSS/Stylesheet for a web page
How to inspect the HTML and CSS of a web page
How to view and edit a web page at the same time
To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.
How to view the source code of a web page
Go to a web page such as the test page for the class,
Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server. Right click on an empty space on the web page and choose
View Page Source or View Source. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
You may save this to your hard drive or go back and save the entire web page to your computer.
Posted in Web Design, web writing, WordPress Under the Hood |
Tagged css, edit html, firebug, firefox, HTML, inspect web page, save web page, source code, view html, view source, view source code, Web Design, Web Development, web development tools, web page, web page source, Web Publishing, web writing |
The following video contains useful web browser tips to help you speed you your browsing, WordPress, and web design work.
Basic Web Browser Tips by Lorelle VanFossen for Clark College from Lorelle VanFossen
Please note that the video refers to the Windows keyboard shortcuts using the CTRL key. This is the equivalent to the CMD key on Mac.
For mobile devices, long presses usually activate the equivalent of keyboard shortcuts and right clicks, though not all of them may be available in the apps you are using.
Here are some of the specific tips covered in the video.
Editing (just like in a word processor)
CTRL+C = Copy
CTRL+X = Cut
CTRL+V = Paste
CTRL+Z = Undo
CTRL+T = Open New Tab
F5 = Reload/Refresh Page
Zoom in and out of a web page (magnify): CTRL+Plus and CTRL+Minus
Right click on links on the page brings up the right click menu to access link specific options and features.
Right click on blank or empty spaces on a web page brings up the right click menu for page specific options and features.
Learn to open web pages in tabs not windows. This saves on computer memory issues and speeds up your browser process.
Use Mouse and Keyboard shortcuts: CTRL + Left Click on Link = Opens Linked Page in New Tab
Fast Navigation through Browser Tabs
CTRL+T = Opens New Tab
CTRL+1 = Goes to Tab #1
CTRL+ 2, 3, 4, etc. goes to that tab number
CTRL+Arrow = moves focus to next and previous tab
Working on web page design or WordPress? Refresh and you don’t see changes? You need to clear the cache and do a "hard" clearing page reload. F5 or SHIFT+F5 OR do a Cache Refresh
CTRL+F5 (Firefox and Chrome)
CTRL + R (Chrome)
(You may have to repeat a couple times)
To view the source code of a web page: Right Click > View Page Source
Web Developer Tools
Posted in Web Design, WordPress, wordpress tips |
Tagged browser, chrome, firebug, firefox, firefox extensions, how to use a browser, HTML, speed blogging, tutorial, video, web browser, Web Design, web developer, web programming |