Web Development Tips for PL/SQL Programmers

How Does a PL/SQL Programmer Get Started with Web Development?

Learn FireFox’s Firebug or Chrome’s developer tool, HTML, CSS, DOM, AJAX, and JavaScript

Are you an expert server side software developer who needs to migrate to a browser based environment like Oracle Application Express (APEX)? Then this free tutorial is for you; it will help you to “break the back” on the somewhat steep learning curve that is required when you start learning how to effectively use client side browser tools like FireFox’s Firebug and Chrome’s developer tool. APEX expert and author Patrick Cimolini leads you, step by step, from a simple “hello world” web page to some real-world APEX pages; showing you along the way how to use the browser tools to inspect, test, and debug your HTML, CSS, DOM, AJAX, and JavaScript code.

The tutorial introduces the audience to the important browser development tools that are required in order to take advantage of the web’s browser based environment. Students are shown how to analyse and debug a web page by using the development tools that are built into the FireFox and Chrome browsers. The webinar starts with a simple “hello world” web page and then progresses, step by step, into real-world APEX pages where HTML, CSS, DOM, AJAX, and Javascript must be inspected, tested, and debugged. We’ll de-mystify the web tools and help you achieve a level of comfort and confidence when working with the client side web tools.

This free training is segmented into several separate lessons:

  1. Introduction & Agenda (2:11)
  2. Languages and Tools You Should learn (4:03)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41)
  4. Using Hello World to Learn Chrome’s Inspect Element Tool (4:39) (click on video below)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47)
  6. Demonstration: Adding CSS (5:56)
  7. A Word About Webkit (1:58)
  8. Introduction to and Debugging JavaScript (2:43)
  9. Demonstration: Debugging JavaScript (5:37)
  10. Inspecting AJAX Network Traffic (7:33)
  11. Oracle APEX Example: Borrowing HTML Elements from Existing Pages (8:41)
  12. CSS in APEX (1:37)

Date: Dec 17, 2013

For more Web Development Training see out HTML5, CSS3 and JavaScript class.

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Using Hello World to Learn Chrome’s Inspect Element Tool

Web Developer Primer for PL/SQL


4. Using Hello World to Learn Chrome’s Inspect Element Tool


>> Patrick:  What we’re going to do here for this next demo, we’re going to bring this webpage up and this is the entire source code for this page. We’ll use that to illustrate the tool. 




Let’s just drag in this tool. There we go. I just drag that in from my Windows Explorer. There we go. “Hello World!” Not too interesting. But when we right-click on this using Chrome and then select “Element,” we see the essentials here that we have in the tool. Note that when I right-clicked on Hello World, the body container was highlighted down here in the HTML area by default, and this really helped to zero in on something very quickly. 




You can notice here that we are in the “Elements” tab here in the upper left in this top menu. This is where you’re going to live here most of the time when you’re in this tool. 




When you hover over this body element, notice that in the live area of your page in the upper part, that particular element is highlighted together with the margin that surrounds it, a very handy way to correlate the code that’s in your HTML region with what you’re seeing up in your page, so it’s a very handy feature. 




Also, down here in the lower right here there’s this graphic for the box model. This box model here surrounds almost every element in HTML. You can see I’m hovering over the interior here and it’s indicating that the width of this content is 368 pixels wide by 18.6 pixels high. Then as you go outside of your content you have a padding area – in this case we have none. We have a border which is usually a line around your content. Again, we don’t have anything here but we’ll show that at a bit later. You can see on the outside we have this margin and these numbers here at the top, right, the bottom, and the left indicate that there’s 8 pixels surrounding this per margin. 




Another feature here that’s quite handy is down in the lower left corner here. We have a dock and undock little icon. That means if you have a couple of monitors you can actually take this web development tool and put it onto another monitor if you like. It’s kind of a handy feature. 


On the HTML area notice that you can actually collapse your HTML structure. This is quite handy because HTML by its nature gets heavily nested, and so being able to collapse things makes it much, much easier to navigate and see the essentials of what you’re looking at. 


Another very important feature here in this HTML area, not only does it allow you to inspect your HTML, if you right-click here, you actually have an option here that says, “Edit as HTML,” and this turns this into a bit of a playpen so you could actually add some more markup here. I’m just going to add a paragraph, /p for the intake and I can put in something like silly like “Canada” and I click out of here. You could see the result immediately up in your live area. This is a really a nice way to learn how to configure your page because you can actually use it as playpen or a sandbox, if you like. 


Of course, this does not affect your underlying source code. This is strictly in memory in your browser. So if we come back up here and we refresh the page, our playpen stuff actually disappears. So if you actually see something that you like and you want to keep, you got to remember to copy and paste it to somewhere a little more permanent.



Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!