Scribd
Upload
33 views10 pages

Unit 3 - Debugging HTML

The document outlines essential debugging techniques for HTML, focusing on two main types of errors: syntax errors, which are spelling mistakes in the code, and logic errors, which occur when the code runs incorrectly despite correct syntax. It introduces the DOM Inspector as a developer tool for inspecting and editing the Document Object Model of web pages, and provides basic actions for using it. Additionally, it mentions the HTML Validator for checking errors in HTML documents through the Markup Validation Service.

Uploaded by

caogialinh02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views10 pages

Unit 3 - Debugging HTML

The document outlines essential debugging techniques for HTML, focusing on two main types of errors: syntax errors, which are spelling mistakes in the code, and logic errors, which occur when the code runs incorrectly despite correct syntax. It introduces the DOM Inspector as a developer tool for inspecting and editing the Document Object Model of web pages, and provides basic actions for using it. Additionally, it mentions the HTML Validator for checking errors in HTML documents through the Markup Validation Service.

Uploaded by

caogialinh02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Essentials

Debugging HTML

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1


Overview
1. Syntax error
2. Logic error
3. Dom inspector
4. HTML Validator

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2


1. Syntax error and Logic error
Ø There are two main types of error that you'll come across:
§ Syntax error: Relate to spelling errors in your code.
Easy to fix as long as you are familiar with the language's syntax and know
what the error messages mean.
§ Logic error: The syntax is actually correct, but the code is not what you
intended it to be so the program runs incorrectly
Often harder to fix than syntax errors, because there isn't an error message
to direct you to the source of the error.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3


2. DOM Inspector
Ø Dom Inspector: A developer tool used to inspect, browser, and edit
the Document Object Model of documents - usually web pages
Ø Basic actions of the DOM Nodes viewer:
ü Selecting elements by click
ü Searching for Nodes in the DOM
ü Updating the DOM Dynamically

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4


2. DOM Inspector

Right click on
=> the web page
to use Dom
Inspector

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5


2. DOM Inspector

Click to choose
=> the node

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6


2. DOM Inspector

Press Control+F,
Type to the
=> search bar at the
bottom of the
DOM Tree

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7


2. DOM Inspector

Double click to
the content or
the tag to edit
=> then press Enter
to confirm the
change

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8


3. HTML Validator
Ø HTML Validator: We can check error for our HTML Document by running your
HTML page through the Markup Validation Service via
https://validator.w3.org/

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9


Thank you

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10

You might also like