Tricks for Web Development with HTML, CSS, and JavaScript
Learn the tricks that developers use to work with HTML, CSS styles, and JavaScript using browser-based web developer tools. Explore the differences between desktop programs and web applications, and discover how web pages offer behind-the-scenes data accessible to anyone. See examples of desktop applications and simple web pages to understand user interfaces and functionality. The provided content showcases various elements of web development, including HTML source code snippets, images of web interfaces, and more.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Using Browser-Based Web Developer Tools Learn some of the tricks that developers use to work with HTML, CSS styles, and Javascript
Desktop Programs When you install a desktop program, you can t look inside it to see how it works. You see the user interface the windows, buttons, checkboxes, and other controls for the program, and you might be able to inspect data files related to the program, but the logic of the program is hidden from view.
Desktop application example: GedSite, my unreleased GEDCOM to HTML program: Some GEDCOM data: 0 @I2@ INDI 1 REFN 2 1 NAME George /Bezanson/ 2 GIVN George 2 SURN Bezanson 1 NAME John George // 2 GIVN John George 2 _SDATE 27 AUG 1770 1 SEX M 1 CHAN 2 DATE 11 JAN 2016 1 BIRT 2 DATE 16 MAY 1781 2 _SDATE 16 MAY 1781 2 SOUR @S1@ 3 PAGE 2, 5
Web sites are different Some simple web pages are just content. Some web pages include some scripts to provide functionality as well as content. Some web pages include complex scripts to provide full-featured web applications . In all cases, a lot of the behind-the-scenes data is available to anyone who can access the page.
A simple page Here is a portion of an overview page for Steve Morse s Ellis Island search pages. This is one user interface presented on his site. Unlike the user interface for a desktop application, you can see how the user interface for the page is built if you want to take a look.
<td> <center> <input value="Gold Form" onclick="window.location=GoldURL();" type="button"> </center> </td> <td> <center> <input value="White Form" onclick="window.location=GoldURL();" type="button"> </center> </td> The HTML Source Here s a portion of the HTML for Steve Morse s Ellis Island overview page. I ve highlighted some of the items that are visible in the previous screenshot.
All the major web browsers (Firefox, Chrome, and Internet Explorer) include a view source function that provides access to the HTML for a page. How did I access the HTML for the page? View Page Source is on the right- click menu in Firefox. Chrome and IE have similar commands on the right-click menu.
The way of the web Web sites don t provide access to the HTML source of the page as a favor to people browsing the site. They do it because HTML is the language of the web, and web sites have to send the browser HTML, they have no choice.
Why look at the source? Reading the HTML source of someone else s page is a great way to learn how HTML works. If you are trying to achieve something in an application that creates HTML for you, and not getting the results you want, reviewing the HTML source can help you determine why. Curiosity. Curiosity may have killed the cat, but it won t break any web pages.
View source is pretty limited View source is read-only, you can t change anything. Some pages block easy access to the source by intercepting the right- click menu. It s tedious and/or inconvenient to view anything except the HTML, like the CSS styles or the Javascript.
Beyond View Source: Developer Tools All major browsers include developer tools that are accessed via the [F12] key. The details vary, but all the developer tools suites include the ability to view and edit HTML, CSS styles, and Javascript. For the average person, the developer tools can simply be a better version of view source . For people who are creating HTML pages, they can be much more than that.
How to access the developer tools You can press [F12] to open the developer tools panel. [F12] opens the developer tools panel focused on the current page. You can right-click and select Inspect Element (Firefox and IE) or Inspect (Chrome). Inspect element opens the developer tools panel focused on the HTML element under the cursor, i.e., it s more specific.
Use Inspect element as a shortcut for viewing the HTML source of a particular part of a page
Developer tools typically open as a panel in the current browser window
Make the panel wide enough so you can see all the icons at the top
Developer tools reveal which CSS styles apply to an element. HTML for page Current element CSS for current element
You can disable CSS parameters The current element: Some of the CSS for that element:
Disabling background-color The current element, before and after: Background-color unchecked:
Changing background-color The current element, before and after: Background-color changed to yellow:
