Mask-group

Web Programming



Intorduction

  • Today we are in the digital era, expecting everything to be done within no time at our fingertips. The digitalisation has really been the key aspect of this fast moving era. We are using the internet on almost all days and all the time. It has been an integral part of our life. Everything that is situated with our life  has been digitalized nowadays. The digitalization has really helped everyone to get the things done in real quick time. Booking flight tickets, ordering a pizza, reserving  a rail ticket , paying a coconut vendor etc are few best examples of how digitalization has helped us get the tasks done in a fast way. It's really fascinating to see how technology has evolved in recent times. It has helped in many ways to human beings.

  • The Internet paves the way to digitize things. A way of communicating through a network or a network of networks is termed with the name Internet. The Internet makes digital content available to everyone who wishes to view it. The internet makes use of several sets of standards and sets of rules to share the digital content to the world. The set of rules that are defined to share the resources across the globe is referred to as HTTP. Hypertext Transfer Protocol which let's users at different parts of the world share , communicate in an easier manner. It defines the communicating path for the users. 

  • Web Programming is a way of designing, developing the web content to run it through a server hosted on a network. A programming practice to design web pages, develop the web content, deploying to a server and maintaining. It comprises several technologies such as HTML, CSS, JavaScript, Perl, PHP and several more to build the content of web pages. 

  • Web is a common name for the World Wide Web , mostly used for transferring the information which can be termed as web resources using browsers. Browsers are the softwares which makes use of the internet to share web related resources to the world. The web resource can be text, images , documents, articles etc which can be represented using web browsers. Web pages are the documents which represent exact resources shared on the internet. These web pages are designed with the hypertext markup language namely HTML. It represents the structural layout of the web pages or web documents. These HTML web pages contain hyperlinks, which takes us to new resources on the web. The hyperlinks are universal resource locators commonly known as URLs which will help us to navigate through the web related documents. 

  • Tim Berners Lee was the person who developed the world wide web. Since then it has evolved so much that now its named as one of the most technology and more need for the same in the world. Various web services are being served in recent times with the help of web applications. Web Applications are those which allow users to interact with web pages. User performing some set of actions on web pages leads to the development of web applications. It has helped a lot of organizations, business owners, individuals to carry out their work in a much simpler manner.

  • The HTTP has been defined with a certain set of rules. The HTTP works on the principle of Client-Server Communication. This can also be called a request-response model. The request is initially started from the client. The client here is our web browser. The web browser initiates the request on behalf of the user. Then the request will be sent to the server. The server is going to verify the request , process it and respond back to the client with appropriate response.

HTTP Request Format:

  • The HTTP request contains a request line consisting of several parts which contribute to the request generation.

HTML - Hypertext Markup Language.

  • Every web page that we design is with the help of HTML, Hypertext Markup Language. The basic structure of any web page is designed using HTML. It provides the entire layout for the web pages. It contains several elements which represent different parts of the web page. The content displayed on the web page is  determined by the kind of element that is used for it. Every element has got its own feature to display the content in some specific manner. The elements that are used in a web page might be indicating a paragraph, a heading , an image, a link etc. 

<!DOCTYPE html>
<html>
    <head>
        <title>Web Programming</title>
        <style>
        <!– The styles related to the web page are written here→
        </style>
    </head>
    <body>
        <!-- The body of the web page , where the content is displayed.-->
    </body>
    <script>
        //Scripts are added here.
    </script>
    
</html>

  • The series of lines mentioned above , represents the basic structure of any web page. Every web page that we design must have this basic structure for sure. The structure contains several elements which help in designing the web page. Those elements are termed as tags in web programming. 

  • In the above mentioned structure , the first line <!DOCTYPE html> indicates the type of file written is HTML5. The <html> indicates the start of the web page. The <head> indicates the section where the unique set of information related to the webpage, scripts, styles etc can be added. The <body> indicates the starting point for displaying the content in the web page.The <script> part is where the scripts for adding behavioral properties are added.

  • The tags will let the content be displayed in the web page. The tags help us render the content of the web page on the browser. These tags have predefined names. Each tag will have two sections , i.e opening tag and closing tag. 

  • The tags are used in the following fashion while designing the web page.

<Opening Tag Name> Content </Closing Tag>

  • Every tag name should be enclosed between the left and right angular brackets.( < and  >) There is not much difference between opening and closing tags. The Closing tag will have a forward slash ( / ) before the start of the tag name.

<p> Hello and welcome to web programming. This is really Exciting. </p>

  • The above example represents a simple paragraph element in a web page. This <p> tag is used for writing paragraphs in a web page.

  • A basic question that strikes our mind is, where to write these lines of html.? A simple and straightforward answer is , notepad. We can make use of notepad to write the html lines of code.

  • The following is the procedure for writing your first html web page.

Fig:  Notepad with html code.

  1. Step 1: Open notepad application. type the html code as typed in the fig.

Fig: Saving of file.

  1. Step 2: Save the file (Ctrl+s) with the name and type as shown in the figure.

Fig: The html file on desktop

  1. Step 3 : Double-click on the html file which is saved on the desktop.

Fig: The output of the HTML file.

  • The web pages that we are going to create should be with an extension of .html. The dot HTML is going to indicate it is an HTML file which can be run on a browser.  we should make sure that the file extension is .HTML(dot).

  • There are a lot of tools available to write the HTML code. These tools are termed as editors. Those are notepad, Notepad++, sublime text, Visual Studio code, Brackets etc. these tools are built with the features which help the programmers to write the code in an efficient manner. These editors are open source softwares which will help us in programming. Any one of these editors can be used for writing HTML codes. 

  • Any text that we are going to write inside the <body> tag Is going to be represented on the web page. We can have any kind of data inside the pair of body tags to make it visible on the web page. There are different kinds of tags available for us to represent the data in various forms in a  web page. The first kind of tag that we will be using most oftenly is the headings.

  • We have several types of headings that can be represented on a webpage. Those are listed below with the representation of their output.

<h1>First Heading</h1>

<h2>Second Heading</h2>

<h3>Third Heading</h3>

<h4>Fourth Heading</h4>

<h5>Fifth Heading</h5>

<h6>Sixth Heading</h6>

  • The H1 to H6 are the six types of headings  available to represent 6 different levels of headings inside an HTML webpage.The output of those six headings are shown in the above image. 

  • We usually want to have paragraphs of Information about any topic. In order to represent the paragraph information we should be using <p> tag. The paragraph can contain a huge amount of data about a certain topic. Many paragraphs can be represented with more number of <p> tags.The <p> tag will align the data in the form of paragraph on the webpage.

Fig: The output <p> tag in html web page.