- [Introduction](#introduction) - [Dissecting a Website](#dissecting-a-website) - [Breaking a Website](#breaking-a-website) - [Highlighted Keywords](#highlighted-keywords)

Introduction

This part's title might be a little bit deceiving; as you might think of it as hacking the website, and shutting it down. Sorry to disappoint you, but this is not what the title amplifies. The [first part](http://som3aware.vercel.app/posts/how-does-the-internet-work-part-1) of this series finished at the website's web server replies back to your browser with the necessary HTML, CSS & JS files so that the browser can render the website. What the title indicates is to break down the website to its components (HMTL, CSS & JS), and have some fun playing with them. In order to do so, we need to open a browser (firefox...E.g.), navigate to google.com or any other website and turn on the developer's tools.

Dissecting a Website

First things first. I'll start by giving a simple explanation to each component.

HTML

- stands for hyper text markup language. - responsible for the structure of a web page. - consists of elements represented in it by tags.

CSS

- stands for cascading style sheet. - from the name, it describes the style of a HTML page and how HTML elements should be displayed.

JavaScript

- the programming language of HTML and the web. - used in writing the elements' handlers to interact with the backend.

Breaking a Website

Let's get to the fun part. In order to turn on the developer's tools, you need to click on the settings menu icon which usually looks like three vertical lines or dots, then choose Web Developer (Firefox), and check the toggle tools tab, you should be getting a result like this. developer tools screenshot

From the image, you can see that Google's home page HTML is located on the left of the image and right next to it is the CSS. Now we're going to play with the HTML code, and try to do the following: - Change Google Search Button To Your Name Search. - Delete I am Feeling Lucky Button. - Delete the whole html code. __Let's start with the first one:__ In order to do so, we need to activate **pick an element from the page** button, located next to the inspector tab to the left, by either clicking on it or by clicking **Ctrl+Shift+C** from the keyboard. Then, we pick the element we want to edit so we're going to pick **Google Search** for this one. The tools immediately highlights the html code for this button to you. What we're going to do is to change the **value attribute** to Your Name instead of Google, press ENTER, and voila you have your own search button 😃. developer tools screenshot 2

__The second one:__ we'll follow the same steps as in one, but instead of changing the attribute value, we're going to delete the following line: ```html showLineNumbers ``` developer tools attribute value

As the image shows, we successfully deleted the button. Can we do the same to the whole page, though? **The third one:** we'll do the same steps in two, but this time, we're going to delete the whole **body tag** code and see what happens. developer tools delete button

As we can see from the image, the page is totally white; no google logo image, no buttons, no tabs, nothing at all. This is mainly because the code inside the __body tag__ is the structure of the page. So, does this means you deleted google forever, and you might go to jail for this?! 😟. Absolutely not! What you just did is only deleting the copy of HTML code your browser got from Google's web servers for the request you sent earlier. If you enter google.com again in the browser's address bar and hit go, the process we talked about in [part1](http://som3aware.vercel.app/posts/how-does-the-internet-work-part-1) happens again, and you get another copy of the HTML code from Google's web servers so that your browser renders it and the full page shows up again like nothing happened. developer tools no button

Here's what I did after I played a bit, I changed it to totally Somaa's Search Engine 😂. somaa search engine

Highlighted Keywords

Term	Definition
Developer Tools	A set of software utilities integrated into web browsers, offering features for inspecting, debugging, and modifying web pages.
HTML Element	A fundamental building block in HTML, represented by tags, defining various document structures such as headings, paragraphs, links, and images.
Attribute Value	A value assigned to an HTML element's attribute, providing additional information about the element or specifying its behavior.
Body Tag	The <body> tag in HTML designates the main content area of a web page, encompassing visible elements like text, images, links, and interactive components.

my blog (0)