Skip to content

Getting Started

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.

It is important to know that HTML is not a programming language. This is because it doesn’t do anything like a programming language, it just structures the page. However, programming languages like JavaScript can be embedded into HTML. The web browser executes JavaScript code on the user’s system and produces output accordingly, which then can be used to interact with the user, and make changes in the web page as required. We’ll see much more on JavaScript in the upcoming section.

Introduction to JavaScript

JavaScript is a programming language which was introduced by Brendan Eich. It is based on ECMAScript specification. JavaScript is one of the core technologies of the World Wide Web. JavaScript was first introduced as a client-side scripting language to be used within the web browsers. But, it has now emerged as a popular server-side language, namely Node.Js. There are also many other web frameworks based on it (Eg. Angular.js, AJAX, Vue.js etc.)

Client-side JavaScript is primarily used for the following purposes (but not limited to):

  • 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

Development Tools

Modern web browsers have a feature known as developer tools which enables the end user or a developer to interact with DOM elements, CSS and also execute JavaScript on their browser. They can be used for testing and development purposes.

The development tools provides some fundamental features such as:

a. JavaScript debugging
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

Inspect Elements

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.

basic


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.

basic


Now lets see an example how a user could actually edit the properties temporarily and review the changes

basic


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.

basic


Console

Browser console is like a web console but applied to the whole browser rather than a single content tab. Console basically logs network requests, JavaScript, CSS, and security errors and warnings, and messages of current webpage or web application.

Console are also capable of executing JavaScript expressions and helps in interacting with javascript codes that the browser renders


The page used for demo is linked with a js file “example.js”

basic


Now let's have a look into “example.js”

This is a basic javaScript function which executes console.log(“hi how are you”)

basic


Now let's use help of the console to execute or call this function and see what it does

basic


Console is also capable of executing JavaScript expression

Here, the console successfully executed the expression alert(“hey”)

basic


Network

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.

basic


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.

basic


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.

basic


Request headers

Header Description Example
Accept Media type(s) that is/are acceptable for the response. Accept: text/html
Authorization Authentication credentials for HTTP authentication. Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Connection Control options for the current connection and list of hop-by-hop request fields. Connection: keep-alive
Cookie An HTTP cookie previously sent by the server with Set-Cookie Cookie: $Version=1; Skin=new;
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. Host: wiki.bi0s.in
Referer This is the address of the previous web page from which a link to the currently requested page was followed. Referer: https://inctf.in/
User-Agent The user agent string of the user agent. User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/12.0

This is helpful to edit, delete or create a cookie or sessions .

basic

Practice Challenges