How Does The Internet Work? Part 2: Breaking a Website
Tags: webdev, beginners
Published: 2019-09-06 18:56:30

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](https://dev.to/ahmedsomaa/how-does-the-internet-works-part-1-behind-the-scenes-4d6m) 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.

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

##### [HTML](https://www.w3schools.com/html/html_intro.asp)
```
* stands for hyper text markup language.
* responsible for the structure of a web page.
* consists of elements represented in it by tags.
```

##### [CSS](https://www.w3schools.com/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](https://www.w3schools.com/js/)
```
* the programming language of HTML and the web.
* used in writing the elements' handlers to interact with the backend.
```

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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4wjazpctzjkl806uo871.png)

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 :smiley: .
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9dnn9jqtf2gipdomkpyo.png)

#### 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:
```
<input class="RNmpXc" value="I'm Feeling Lucky" 
aria-label="I'm Feeling Lucky" name="btnI" type="submit" jsaction="sf.lck" 
data-ved="0ahUKEwi1opyl4bzkAhUI0uAKHd4BBqAQ19QECAo">
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/20vu0k1ziyz5l52byp7p.png)
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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8kurq3th9qv3oidvc2g6.png)
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?! :worried:. 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 [part 1](https://dev.to/ahmedsomaa/how-does-the-internet-works-part-1-behind-the-scenes-4d6m) 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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/moojg92cymloef9ytikq.png)

Here's what I did after I played a bit, I changed it to totally Somaa's Search Engine :joy:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xkw21iuwxefgpktd867h.png)

Cover Image Icon License: [icons8](https://icons8.com/) Free License.