Its crucial to understand how are websites built if you are planning to build/own are website or trying to learn building the website. This basic knowledge will help you to build amazing websites in the right way, which shoud also help you to make wise decisions with regard to,
The Amount to be invested in Building the website
To calculate the timeframe needed to build the website
To understand the efforts/resourcs needed to build the website
To understand what kinds of websites are best
The webpages are built in HTML ( Hyper text mark up language), the webpages are combination of several HTML tags.
HTML tags are the simple commands in HTML, for every command there is a opening and closing tag.
The closing tag will have an additional forward slash. The opening tag will not have the forward slash.
The HTML comprises two parts
The HTML page will be always started with the <html> opening tags and ends with the </html> closing tag, where as the head section and body section HTML tags will be always within the <htmL> </html> tags.
Head section- Usually holds all the information for the browsers,bots, search engines and the sitelvel CSS/JS, usually the external css files and external JS files.
<head>
<title>This a Title For The DM Training Class About The HTML Basics</title>
<meta =” description” content = “ This is the place or section where the pages meta description is updated”</description>
</head>
Body Section.
<body>
<h1> This is the page heading, “The Test Page”</h1>
<p>
</body>
The following is a code for a simple HTML test page. The below code saved as .html will open in the browsers as a webpage. <html> <head> <title>This a Title For The DM Training Class About The HTML Basics</title> <meta =” description” content = “ This is the place or section where the pages meta description is updated”</description> </head> <body> <h1> This is the page heading, “The Test Page”</h1> <p>This is the any piece of information that you want to have on your webpage displayed to your audiences visiting your website</p> </body> </html> The outcome is as follows, The HTML page developed would like as in the below image. This is the example of how a simple HTML webpage would look like. The above HTML is useful to build a simple webpage that doesn’t look appealing. It doesn’t have the borders It doesn;t have the colours The alignment is not appropriate How to build beautiful webpages? The information or the content for which the website to be build has to be first developed as a mockup which is called as UI/UX designing and the same will be converted to HTML webpages. UI- Is user interface something that you can see by your eyes such as the colours, ,font styles, font sizes, images, videos, alignment, borders etc. UX- User experience is that you experidnce with the website for example, a click leads you to a cart page, or to an about us page to a pop up pops up ont he webpage. Your webpage built is HTML have to be also wrapped with th CSS ( cascading style sheets), it is used to beautify your wbepages. Which takes care of alignment, colours, presentation, etc. Refer to w3schools, this is a very good platform to practice and master HTML, CSS and JS as well. HTML and CSS are used to present the content and beautify it respectively. JS ( javaScript) is used to make the webpage functional and interactive Hence the modern era webpages are the combination of HTML, CSS and Java Script. HTML- To present the content CSS- To Beutify the content/webpage JS- It to make the webpage functional/interactive The webpages built are now dropped into the hosting sever which is connected to the domain name and hence anybody can access all these webpages by just typing the domain name in the address bar of the browser. If you need more webpages to be built you will have to write it in the HTML again. If your new page is same as your previous webpage you can replicate and change the content ( Anyways its your choice, you can prefer to type the HTML again) This process of creating same kinds of webpages ( Structure/presentation) can be automated using one of the programming languages such as Java, Python, Dot net, PHP, any other programming language. This automated platforms/system allows you to manage the content of your website and hence usually referred to as the content management system (CMS). People alternatively call it as website backend. The CMS is completely a customized platform coded in one of the programming languages as per the functionality requirements. The website backend/CMS- It gives a control to you over your website to manage content ( Edit, delete or add any new pieces of content) It allows to create the webpages without any use of HTML Dynamic Websites need a database as well connected to the websit, where the information will be pulled form the DB and dispald on the front end. The content is stored only once and at one place but then on the front end it can dispalyed on multiple pages wherever needed. Learn MERN stack, its a full stack development course. Which allows you to build the front end and the backend. The alternative & easiest way of building the website by anyone whithout knowing any of the programming languages (No HTML, CSS, JS and Backend scripting language neede) This method of building website is easier, quicker and suffices all kinds of business needs mostly Around 50% of the websites on the internet are build this way In this method the websites are build using the open source content management system (Website backed) and the pre build themes ( website front end) What is open source? Is the application built by the community and is made available for free for everyone to use, in this process anyone from the community can contribute in building the application. The applciations usually will be very advanced, compatible for multiple platforms/hosting servers. We are going to use the most popular open source CMS to build the website, Wordpress CMS is the most popular CMS in use. This application can be downloaded from the wordpress.org community for free and be installed and used on your server. More About Wordpress Wordpress is basically a platform/host that, Allows you to manage the front end/content of the website Allows you to install various plugins needed to build functionality both in the front end and in the backend Allows you to install the themes thats needed to build the website layout/design Wordpress is a backed for your website. This is for free, you don’t have to purchase it. Building websites without writing HTML, CSS, JS and Without knowing any programming language- A Wordpress website! Steps to be followed in building the website on a wordpress platform. There are freely available open source content management systems such as wordpress, Joomla etc These are the applications that can be downloaded on to your server, configured with your website and can be put in use to buid the website. The application has all the features needed to get started in building the website. Following the below steps in setting up the website on Wordpress, Add the domain for use on your hosting server Most of the cpanels will have the applications made available on the cpanel interface, you just have to download them into the respective folder where your website is created The database will also be automatically created This wordpress application will have the configuration and .htaccess file installed automatically During installation provide the basic details about your website such as the business name, tag line Create the user name and password as well in this stage In this stage a default website theme will be created or installed. You can take control of the website You can change the theme You can edit the webpages You can build new pages to your website and put them in use You can publish the blog posts You can add any new features needed by installing the respective application (Usually called as plugins) The default themes and the apps/plugins will give you a limited control, hence you will be needing the advanced and subscriptions to the better themes and apps. Installing the Theme that suits your requirements Theme A theme is a prebuilt Readymade HTML website template/front end of the website that can be installed as a package and can be configured with the website. There are many ready made themes made available on the internet Themeforest.net is the most popular platforms to browse the themes of your choice, based on the business category and various other details as you decide. There are various sources for the free themes, but then you may not get all the features needed. Adding new theme Under the themes section just click on add new, you will be taken to a section where you can browse few tens of templates/thems that can be installed. Just click on install and you could find them under the library to use them. The themes installed from this section are the promotional efforts of the respetive theme sellers/builders and you may not find all the options to build it the way you want. In order to get all the features you will have to purchase or subscribe to those themes. You can also build a them of your own and upload it f you are a wordpress theme builder or you can purchase the themes already built by other wordpress developers om the market places such as themeforest. Its not compulsory to buy an advanced/fancy theme, as you can use any simple default theme of the wordpress and you can start building your own website by using one of the webpage builders such as WP Bakery, Elementor, Page builder etc. Plugins Plugins are the pieces of code packaged in order to create a specific functionality either in the front end or Backend or both. These plugins can be downloaded from plugins section of the wordpress website or from the respective plugin developer websites. These plugins will be written in a programming language same as thst of he wordpess programming language in order to make it compatible with wordpress platforms The programming language is PHP for wordpress and the Plugins. Alternatively these plugins can be downloaded by the respective developer websites.
Manjunath Chowdary
Digital Marketing Consultant
Kandra Digital
