Creation of webpage
For creating a webpage we first need to set up our workspace. The two main basic requirements for setting up a webpage are a 'browser' and a ' text editor '.
A variety of text editors are available to us, including sublime, fleet, and atom. In spite of this, Vscode is the most widely used one, with its useful extensions and plugins.
To begin with ,In a text editor, open a folder first, then create a file in that folder naming index.html / default.html . Here we can use both '.html' as well as '.htm ' extension.
Why index.html?
Due to the server's default ability to read index.html, we use this default name. And we need to follow these servers standard as it says that if we place default.html or index.html it will serve that page.
Emmet Abbreviation
To make things easy we use emmet abbreviation which helps in writing code faster and smoother. It is included by default in the Vscode and it also auto completes the html tags/elements.
! : is used when we need to generate the whole html template .
!!! : gives doctype html snippet.
img : gives us the whole image tag with 'src'(source) and 'alt'(alternate text).
img-srcset : gives us 'srcset', 'src' and 'alt' attributes.
Html Tags
<h1>,<h2>,<h3>- heading tags with decreasing order in font size.<p>- paragraph tag used to write a paragraph.<img>-image tag is used to add image from either your computer library or from the web.
Image tag consists of several attributes like src,srcset,alt ,etc
Src is the source path of image
- Alt is alternate text attribute where if the image is not visible for somereason maybe due to a wrong path it replaces with an alternate text.
- Width and height specifies the width and height of the image in pixels.
- loading attribute has two values eager and lazy where eager specifies that image should load quickly while the lazy value specifies it load util some conditions get fulfills. long
- longdesc attribute opens a url with a long description about the image.
<a>- Anchor tag used to link one page to another.href attribute specifies the url of the page linked
target attribute specifies where we will open this linked document. It has various values the most used are _self and _blank where self means the link gets opened on the same page while blank means it gets opened in a new tab.
Lorem
lorem is used as dummy text to fill the webpage to get a glimpse of how the webpage would actually look. lorem dummy text eg.
<p> lorem50 </p>
//result
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
Now we need to check for our output on the webpage so we will take help of a useful extension.
Live Server
By using traditional method to run our code we need to refresh our code again and again which in turn reloads our current memory.
Instead, we can use live server extension by Ritwick Dey.
This Live server goes ahead and notifies about the update or change in the memory making it convenient for developers to verify the output.
Server
A web server is used to display website content .It stores, processes and delivers webpages to users.
There are other several servers like nginx but Apache is a popular open-source, cross-platform web server that is the most popular web server.
Cpanel is a web hosting site where webpages are hosted and here they install these server and these servers generate or gives a default path/root i.e /var/html/www