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)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47) (click on video below)
  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.


Adding CSS to Hello World (The Class and ID Selectors)

Web Developer Primer for PL/SQL


5. Adding CSS to Hello World the Class and ID Selectors


>> Patrick:  We need to talk a little bit about Class and ID in the HTML world. Class and ID are the hooks that allow you to get Cascading Style Sheet and JavaScript to talk to one another. 




The Class here we’ve got “Hi Canada!” and here we have “Hallo Netherlands!” – two countries. These paragraphs that contained countries have been given the common class of country. This allows us to define some Cascading Style Sheet styles for that class. So if I had 115 countries or 115 paragraphs, each one associated with the class country, I could style all of those paragraphs in one place in the Cascading Style Sheet file. And that avoids having to do the styling 115 separate times. 




Then you have the concept of ID. This is like a primary key for you database developers. If you want to get very, very surgical here and be able to manipulate one individual paragraph on your page or one individual element, you give it an ID. That ID, in this case, Canada for the country is unique on this particular page. Those are the two hooks that allow your Cascading Style Sheet stuff and JavaScript stuff to manipulate your HTML. 




We’re going to do a little demo here. I just added a little bit of styling, very simple Cascading Style Sheet to our Hello World. Here we’ve got the default paragraph. We are setting the paragraph text color to blue by default. 


This syntax here, this .country is referring to the class country. That’s .country refers to the class. We’re just going to set out country backgrounds to light green. Then we have some syntax here that are specific to Canada and the Netherlands. That’s the hash symbol with your ID for Canada refers to that one paragraph. We’re setting the color for that to red to match the Canadian maple leaf flag and setting the font size to 200%. 


Let’s have a quick look at that.



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!