Understanding the Mechanics of Website Functionality
Written on
Chapter 1: Introduction to Website Functionality
To effectively take advantage of a website, it’s essential to comprehend the underlying mechanics of its construction.
If you're interested in exploring the room, click here.
Table of Contents
- Understanding Website Functionality
- Task 1: Exploring Website Basics
- Task 2: HTML Fundamentals
- Task 3: Introduction to JavaScript
- Task 4: Recognizing Sensitive Data Exposure
- Task 5: HTML Injection Techniques
Section 1.1: Exploring Website Basics
What term accurately describes the aspect of a website that your browser displays?
Answer: Client side.
Section 1.2: HTML Fundamentals
Let’s experiment with HTML! On the right side, you’ll find an area to input HTML code. Enter some HTML and hit the green “Render HTML Code” button to see it displayed on the page. You should see a collection of cat images.
No response is required (just click the completed button).
If one of the images on the cat site is broken, fix it to unveil the hidden text answer: HTMLHERO.
To add a dog image, insert an additional <img> tag on line 11, using the location img/dog-1.png.
Image Description: DOGHTML
Subsection 1.2.1: Introduction to JavaScript
Click the “View Site” button for this task. On the right side, add JavaScript to change the demo element’s text to “Hack the Planet.”
JavaScript Code: document.getElementById("demo").innerHTML = "Hack the Planet";
Additionally, include the button HTML from this task that alters the element’s text to “Button Clicked.” Update the code by clicking the “Render HTML+JS Code” button, then click the button.
No response is required.
Note: If you’re curious, adding the following line between lines 7 and 8 in the HTML editor will yield the same result:
<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button>
Section 1.3: Recognizing Sensitive Data Exposure
Access the website for this task. What is the password concealed in the source code?
Answer: testpasswd.
Section 1.4: HTML Injection Techniques
Explore the website for this task and inject HTML to display a malicious link to http://hacker.com.
HTML Injection Code:
<a href="http://hacker.com">link text</a>
Note: For guidance on creating an HTML link, consult the W3Schools website. The initial example they provide will suffice to achieve the desired result in this task.
If you found this content helpful, consider supporting me as a Medium member by clicking the link below. Memberships are just $5 a month, and your support helps me continue creating valuable content. Alternatively, you can also buy me a coffee to support me directly!
The first video titled "How Websites Work | Simply Explained with Examples" offers an accessible overview of website creation, making complex concepts easy to grasp.
The second video, "How Websites Work," dives deeper into the technical aspects of website functionality, providing valuable insights for beginners and experienced users alike.