Introduction to Web and HTML

Introduction to Web:

The internet is full of websites and webpages. A website is a collection of web pages grouped together and are interconnected in various ways. In the early days of Internet era, a web page is a document which you publish on the web browser such as Firefox, Chrome etc consisting the basic text and images only. Nothing more than that.

These web pages were published to the web servers and the web server is the software which is responsible for hosting the website and returning it to the user when he requests for the information via a browser. This is majorly done via HTTP protocols.

Though now many web servers are popular such as Tomcat, Liberty, WebSphere the Apache HTTP server was the primary server in the initial days for hosting the websites.

What is a Web Page

A web page is a simple document written majorly with HTML, CSS and a JavaScript added to provide functionality to the components. All the web pages in the internet are accessible via a unique address.

What is a Web Server?

A web server is a software where you can host your web pages or websites. The web server is primarily responsible for sending the page when a request is made from browser for a specific web page.

Apache HTTP Server:

Apache HTTP server is most popular HTTP client on the web. It is a free and open-source web server that delivers web content through the internet. Addresses on the web are composed of URL's - Uniform Resource Locators which specify a protocol (http), a server name(apacheserver.org), a URL path (Eg: /var/html/index.html).

A client (e.g., a web browser) connects to a server (e.g., your Apache HTTP Server), with the specified protocol, and makes a request for a resource using the URL-path. The server will send a response consisting of a status code and, optionally, a response body. The status code indicates whether the request was successful, and, if not, what kind of error condition there was. This tells the client what it should do with the response.

The default page for apache server was index.html or default.html. The index.html is the primary page which will be returned to the browser in case of non-availability of the web page.

Though index.html and default.html are the entry points of the web page, per the current industry standards, it is the index.html which is mostly used to define any web project. Having said that, default.html is not deprecated and can still be used.

What is cPanel?

cPanel was used as an interface behind the Apache HTTP Server. cPanel is a web hosting control panel software based on Linux designed to simplify the hosting of website. It enables administration through a standard web browser using a three-tier structure.

How to write a web page?

A web page can be written in HTML. HTML is Hypertext markup language that helps creating a web page consisting of text, hyperlinks, images etc. A developer can start writing web pages in simple software like Notepad and access it in browser. However, to make the life of a developer easy, there are several Web Integrated Development environments (IDE's) like Sublime Text, Atom, Visual Studio Code which helps designing web pages in easy and fast pace. These software's are open source and can be downloaded for free from Internet.

How to publish your web page to localhost?

The first way of publishing your web page to your browser (localhost) is by double clicking on the index.html file which opens up your web page. However, it comes with few issues as well. When you serve your web page to the browser, the web page is loaded into your memory (RAM) and then is served to browser. Thereby, when you modify the content you cannot see your changes reflecting until and unless you refresh your web page which inline refreshes your memory and serves the new page. Here is where the concept of live server comes in

Live Servers:

Live server is a little extension that is created by the developers. It holds the capacity of detecting the new changes done in your html file and informs the in-memory(RAM) about the change. The memory when informed about the change loads it again and serves it to the browser. Here is where, there is no necessity for the developer to reload the webpage in the browser. He can see his changes incorporated into the browser which saves him/ her a lot of time.

There are different live servers available. You can have it installed into your visual studio code as a plugin and enable it for your development use. You can start your index.html page via live server option. With Live servers, the web page gets hosted on a port and renders on the browser. You got to access your web page via the port which is popped up in your visual studio code when you start live server.

Live Server Preview:

Live Server Preview is another plugin available in your Visual Studio Code IDE which you can install and enable it. The Live Server Preview is initialized via typing >live onto your Command line pallete. You can use cmd + shift + p in case you are a MAC user , ctrl + shift +p in case you are a windows user. The Live Server Preview splits your screen into 2 halves shows your code on the left and browser on the right. The disadvantage with the Live Server Preview is that you cannot do a inspect or view page source while using it.

Both Live Server and Live Server Preview have their own advantages and disadvantages. You can use them based on your requirements. Live Server when you are okay with the toggle process and want to leverage the view page source and inspect features of web browser and liver server preview when you want to avoid the toggle and have both visible on the same screen.

Emmet:

Emmet is an essential toolkit for web developers. It is a set of plugins which you can install it in your IDE's. Emmet helps developers in writing the code fast by providing shortcuts and structured code formats. Emmet is the most used plugin in the industry for writing fast-paced code.

Getting started with HTML:

HTML is made up of elements which in turn has an opening and a closing tag. The basic ones which we as developers use are the head and body tags the h1, paragraph, image, anchor tags.

The basic HTML page consists of two parts - head and body. The head is the part which user cannot see on the web page and body is the vice versa of it.

The Head part:

head is primarily used to show the metadata of the web page. Metadata includes information about the webpage - what is it's use? why is it used? who has written it? We have several meta tags in the head section like the viewport which helps in viewing the web pages in small screens and big screens, the character encryption type default to UTF-8 or UTF-16 and a lot more. The only section which can be visible to the user in head is the title and the favicon.

The Body part:

body section is where you can render your content and can be actually seen by the end user. You can use several h1, paragraph tags to render the content.

Lorem Ipsum:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Emmet helps you in adding 100's and 1000's of lines of Lorem Ipsum in your paragraph elements in web page. Typing the huge amount of text in your paragraph will be a lot of time taking process for web developers. You can specify lorem(no of words) and then tab to specify those number of words in lines of paragraph.

For Eg: lorem20 prints 20 words in your paragraph. You can specify the number as you wish to display in web page.

Attributes:

Attributes are the properties of element which is not displayed to the user in the web page. However, it helps adding features to the element.

HTML Images:

In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added.

To add image to the Web page use img tag along with the src attribute and alt attribute. The image can be either on the internet or can be in your local computer. You can specify the url or path respectively based on your requirement. The alt tag specifies the description of the image. Alternative text is important to specify as it helps us identifying the image element on web page when there are 100's of images in case the image url or path breaks. In absence of alternative text and url not working or moved or broken, the image will not be rendered on the web page.

The additional attributes that can be added are image srcset and image sizes. Image sizes helps you in sizing the image in your web page. It works along with the srcset attribute. The srcset attribute helps you in grouping sources of images along with the sizes and helps you in loading multiple images in web page.

img:
<img src="" alt="" />

img:srcset, img:s
<img srcset="" src="" alt="" />

img:sizes, img:z
<img sizes="" srcset="" src="" alt="" />

Alternatively, if you don't want to specify srcset option, you can use the width and height attributes to resize your image in your web page

<img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

Anchor tags:

Anchor tags helps us in placing hyperlinks to another web pages. It helps us in navigating back and forth in web pages. href: You can use href as attribute to specify the other web page url. download: download is another attribute where the browser treats your url as a download link target: You can use target to specify whether you want the URL to open in same tab or a new tab or new
link.

<a href="https://www.mozilla.com"> Mozilla </a>

We will discuss further HTML in next blog.