How to create websites from Coding in 2022?

As I told you in the previous post what is coding, that coding is a computer language that is used to create websites, apps or robotic devices. There are thousands of languages to write coding, but each of them perform different work. Some languages are used to make websites, some apps, some software programs and many other tasks that each language perform.

So, In this post we will know how to create websites from coding.

How to create websites from coding?

Websites that you see like divyatechgyan.com or amazon.in or w3schools.com are made from many coding languages. divyatechgyan.com is made by HTML, CSS, JavaScript, PHP, MySQL coding languages.

Let’s know about languages from which you can create websites.

Languages to create websites

So, There are so many languages to create websites, but we will talk about only HTML, CSS, and JavaScript.

Let’s Know about the languages and why it is used for?

HTML

HTML is known as ‘HyperText Markup Language’. It is like to be the skeleton of your body, it is used to describe the structure of a webpage. If you have to add images, texts, headings, buttons, tables, etc. you use HTML. But, HTML is used in every website because without structure you don’t have a website. Everything that you see in a website an input where you write texts, an image or texts are created by HTML. In other words, You can also say that HTML is a main language in any website.

Example of HTML Coding:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML</title>
    </head>
    <body>
        <img src="image.jpg" alt="A Beautiful Nature"/>
        <h1>This is a sample heading</h1>
        <p>This is a sample paragraph</p>
    </body>
</html>

As you can see above, this is an example of HTML Coding. The result of this code is:

Create Websites from Coding - HTML Use

You can also write this coding and see the result. Open Notepad in PC and create a file named ‘index.html’. You can write any name instead of index, but you have not to change the file extension (.html) or else it will not be HTML file. The, copy the code and paste in your file and open it to see the result.

CSS

Let’s know about CSS. CSS known as ‘Cascading StyleSheet’ designs a webpage. It gives style to the elements that you created in HTML. By CSS, You can change the color or size or the font of your texts. Like HTML, it is like to be the clothes or design of your body.

There are three ways to write CSS:
1) Internal CSS
2) External CSS
3) Inline CSS

Internal CSS

In Internal CSS, You write CSS in your HTML file like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Use</title>
        <style>
            img{
                height: 50px;
                width: 50px;
                object-fit: cover;
            }
			p{
    			color: red;
			}
        </style>
    </head>
    <body>
        <img src="image.jpg" alt="A Beautiful Nature"/>
        <h1>This is a sample heading</h1>
        <p>This is a sample paragraph</p>
    </body>
</html>

As you can see, I have written CSS in this HTML file. You can also see the result of this coding, only you have to do as I told you before. You have to write the extension of the file as (.html) because this is also an HTML file.
The result of this coding is:

External CSS

As from the name, in this way to write CSS you create another file named as ‘style.css’. You can write anything instead of style, but you have not to change the extension. One thing you have to do is you have to link your CSS file to your HTML file to change the style of elements in your HTML file from this link of code <link rel="stylesheet" href="[cssfilename].css".

Example of External CSS:

<!DOCTYPE html>
<html>
    <head>
        <title>External CSS Use</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <img src="image.jpg" alt="A Beautiful Nature"/>
        <h1>This is a sample heading</h1>
        <p>This is a sample paragraph</p>
    </body>
</html>
body{
    background-color: blue;
}

img{
    height: 460px;
    width: auto;
}

p{
    color: white;
    font-size: 18px;
}

As you can see, There are two files, one is HTML file and the other is CSS file. This CSS file linked to the HTML file by the code on line 5 in HTML. This is how you can use External CSS.

Inline CSS

In Inline CSS, You write coding in your HTML Tag like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS Use</title>
    </head>
    <body>
        <img src="image.jpg" alt="A Beautiful Nature"/>
        <h1>This is a sample heading</h1>
        <p style="color:red;">This is a sample paragraph</p>
    </body>
</html>

As you can see, how I used Inline CSS. I have changed the color of paragraph to red using this way of CSS.

Now, You think which way of CSS do you use. Internal CSS and External CSS are good ways to write CSS instead of Inline CSS. I prefer you to use External CSS. Let’s see some advantages of External CSS:
1) Your HTML file will not be heavy.
2) You can change the style of all HTML files which you have linked only from a CSS file.
And more…

I only use External CSS. And I know, Everyone likes most External CSS.

So, Now, You know three ways to write CSS and you also know what is CSS, It is a coding language to give style to your content.

JavaScript

JavaScript is used to create functions like what will happen when a button is clicked, etc. So, we usually say that JavaScript is like to be the muscles of your body.

Example of JavaScript Code:

var fname = prompt("Write your first name:");
var lname = prompt("Write your last name:");
var full_name = fname + " " + lname;
alert("Your full name is " + full_name);

Like External CSS, You have to connect your JS file to HTML like this:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Connect to HTML</title>
    </head>
    <body>
        <h1>Lorem Ipsum</h1>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac varius nulla, non tincidunt lectus. Etiam ultrices cursus quam eu consectetur. Fusce non purus aliquam, porttitor turpis id, dapibus erat. Cras bibendum faucibus malesuada. In commodo elit nec est auctor ornare. Vestibulum sed velit dignissim, cursus enim sed, egestas ipsum.</p>
        <script src="script.js"></script>
    </body>
</html>

You can see how I connected JavaScript to HTML by the code on line 10. In short, JavaScript add behaviors to a website.

HTML, CSS and JavaScript in body

Now, You know what is HTML, CSS and JavaScript, and now we will learn to use these languages, and you also know how to create websites from coding. If you like this post, share to other friends, so they also know how they can create their own website from coding. If you have any questions, feel free to ask us at comment below.

Leave a Reply

Your email address will not be published.