Introduction to HTML¶
HTML (Hyper-Text Markup Language) is a markup language that enables to display contents (text, images, videos and links etc.) on web pages. It was developed about 27 years ago by WHATWG. A Web browser processes the HTML received from Internet servers, processes it and renders it accordingly to the user. The wiki that you see now, was actually sent by the server in plain HTML to your browser and was processed by it to display it in the current layout. Inorder to view the HTML source code of a web page a view-source URI scheme is provided in modern day web browsers. For example, the URI view-source:http://example.com should show the HTML source code of the page located at http://example.com.
- Input field validation
- Animation of page elements
- Placing interactive contents like games
- Dynamic loading of hyper-text elements
- Used for making calls to API end-points
The development tools provides some fundamental features such as:
b. Web page assets, resources and network information
c. Manipulating DOM elements
d. Profiling and auditing
e. Editing and accessing HTTP cookies
Examples with Developer Tools¶
This tool basically shows all HTML tags and contents of the page that the user or the developer is currently viewing i.e. Web page assets and resources.
Here we can clearly see the html tags and contents of the page that the user or the developer is currently viewing . We could edit the DOM and check the functionality or property of the page directly using this Inspect Element rather than making permanent changes in our files.
Now lets see an example how a user could actually edit the properties temporarily and review the changes
So currently we are editing property of a webpage footer where user or developer can change the property “Background-color: #343a40” to #3a4(green). Now the page renders with our new changes made.
The page used for demo is linked with a js file “example.js”
Now let's have a look into “example.js”
console.log(“hi how are you”)
Now let's use help of the console to execute or call this function and see what it does
Here, the console successfully executed the expression
The Network Monitor shows you all the network requests the Browser makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and the details of each requests, its response and data passed through those requests .Using this, the user or the developer can edit these requests to suit his or her needs.
Here the user or developer can see several requests made to certain CSS files, images and their response code as well.
Using edit and resend options, we can actually edit our entire requests made to the server; here the user or the developer can edit request headers,request method and request body.
The following are some examples of the request and response header.
Here, the request header can be edited by the user and is user controllable ,while the response header is actually the one which is responded by the server.
|Accept||Media type(s) that is/are acceptable for the response.||
|Authorization||Authentication credentials for HTTP authentication.||
|Connection||Control options for the current connection and list of hop-by-hop request fields.||
|Cookie||An HTTP cookie previously sent by the server with Set-Cookie||
|Host||The domain name of the server (for virtual hosting), and the TCP port number on which the server is listening. The port number may be omitted if the port is the standard port for the service requested.||
|Referer||This is the address of the previous web page from which a link to the currently requested page was followed.||
|User-Agent||The user agent string of the user agent.||
This is helpful to edit, delete or create a cookie or sessions .