How to design a website from scratch? How to design a website using HTML?

How to design a website from the scratch? I am doing thorough research, reading ebooks, going through websites. In a nutshell, I am doing all things I can to design a perfect website. I decided to share my journey with you. Today I started to explore how to design a website using HTML.

How to design a website from scratch? Contents

How to use notepad for HTML?

Open notepad>>

Write the HTML code>>

Click on save as>>

Save with a file with with .html extension.

(Eg. SubarnaCreative.html)>>

Save the file on your desktop>>

Open the chrome icon with SubarnaCreative on your desktop

Each time you make a change in your code in notepad, do this. >>

Press CTRL+S to save changes. >>

In the chrome file, press F5 to refresh the page. >>

You will see the changes you made in the code reflected on the webpage.

Webpage designed using HTML

How did I create this boring-looking webpage?

What all do we have on the webpage?
Three paragraphs under three headings.
I can go to the next line whenever I want.
The code is pretty simple

Here is the notepad code.

I will show you the entire notepad code here.

<html>

<head>

<title> Hey there! I am Subarna Creative. </title>

</head>

<body>

<h1> Why did I start web development? </h1>

<p>I followed the method by Feynman. Feynman was a great physicist. He said that the best way to learn is to teach.

<br> I decided to get started in computer science somewhere. So, I decided to pick up right where I started. <br>

I decided to start from html which I had learned in high school. </p>

<h1> What do I mean by web development? </h1>

<p> By web development, I mean creating cool websites. I have used blogger and wordpress

to write blogs.<br> I have also used google sites. <br>

All this made me enamored with website building from the scratch.</p>

<h1> Is web development a dying career? </h1>

<p> To create a website is a creative process. <br> To say that artificial intelligence will

take over wevb development is wrong. <br> AI may make average websites. <br> To make

the best websites, you still need human designers. </p>

</body>

</html>

We enclose the entire HTML code inside <html> and </html>.
In the <head> and </head> tag, we put the the <title> tag.
Enclose the page heading in <head> and </head> tags.
Our heading is ‘Hey there! I am Subarna Creative.’ It does not show in the chrome browser.
Only what we code inside the <body> and </body> appears on the webpage.
We will enclose the headings inside the <h1> and </h1>. It is ‘Why did I start web development’.
What we enclose in paragraph tags <p> and </p> appears as a part of the paragraph.
We use <br> to break the line and go to the next line.
That’s all. We will make things colorful now.
I showed you this boring webpage because I wanted to show you the default settings.

I will show you how to use heading tags from h1 to h6.

HTML supports six headings from h1 to h6. You use them like you used h1.

I will put h2 to h6 under the second h1.

Webpage created using HTML

The headings appear as bold texts by default. You can see how we go from h1 to h6. We have ‘what do we mean by web development?’ to ‘why am I writing all this?’ (hardly legible). Let us take a look at the html code for it.

<html>

<head>

<title> Hey there! I am Subarna Creative. </title>

</head>

<body>

<h1> Why did I start web development? </h1>

<p>I followed the method by Feynman. Feynman was a great physicist. He said that the best way to learn is to teach.

<br> I decided to get started in computer science somewhere. So, I decided to pick up right where I started. <br>

I decided to start from html which I had learned in high school. </p>

<h1> What do I mean by web development? </h1>

<p> By web development, I mean creating cool websites. I have used blogger and wordpress

to write blogs.<br> I have also used google sites. <br>

All this made me enamored with website building from the scratch.</p>

<h2> Which languages do we need for web design? </h2>

<p>You need to learn languages like HTML, CSS, JavaScript, etc. to do web design.</p>

<h3>Why should we learn Javascript if we already know HTML and CSS?</h3>

<p>JavaScript is the most important for game developers. There are interactive elements. <br>

There are animations and graphics which act like buttons. </p>

<h4>Will I create animation in the future?</h4>

<p>If sky is the limit, why just touch it? Let's rule over it. <br>

Yes, I am excited with the posstiblities that modern technology can give us.</p>

<h5>What is modern technology?</h5>

<p>Whatever comes in the latest era, we call it modern. <br>

I think the products of digital electronics are modern technology</p>

<h6>Why am I writing all this?</h6>

<p>I had to show you the use of heading tags from h1 to h6 :-)</p>

<h1> Is web development a dying career? </h1>

<p> To create a website is a creative process. <br> To say that artificial intelligence will

take over wevb development is wrong. <br> AI may make average websites. <br> To make

the best websites, you still need human designers. </p>

</body>

</html>

How to design a website from scratch?

Under my third h1, I have included a link. ‘This is my website’ comes as an underlined text. It also has a blue color. It means it is a link. How did I include it?

Take a look at the HTML code

<html>

<head>

<title> Hey there! I am Subarna Creative. </title>

</head>

<body>

<h1> Why did I start web development? </h1>

<p>I followed the method by Feynman. Feynman was a great physicist. He said that the best way to learn is to teach.

<br> I decided to get started in computer science somewhere. So, I decided to pick up right where I started. <br>

I decided to start from html which I had learned in high school. </p>

<h1> What do I mean by web development? </h1>

<p> By web development, I mean creating cool websites. I have used blogger and wordpress

to write blogs.<br> I have also used google sites. <br>

All this made me enamored with website building from the scratch.</p>

<h2> Which languages do we need for web design? </h2>

<p>You need to learn languages like HTML, CSS, JavaScript, etc. to do web design.</p>

<h3>Why should we learn Javascript if we already know HTML and CSS?</h3>

<p>JavaScript is the most important for game developers. There are interactive elements. <br>

There are animations and graphics which act like buttons. </p>

<h4>Will I create animation in the future?</h4>

<p>If sky is the limit, why just touch it? Let's rule over it. <br>

Yes, I am excited with the posstiblities that modern technology can give us.</p>

<h5>What is modern technology?</h5>

<p>Whatever comes in the latest era, we call it modern. <br>

I think the products of digital electronics are modern technology</p>

<h6>Why am I writing all this?</h6>

<p>I had to show you the use of heading tags from h1 to h6 :-)</p>

<h1> Is web development a dying career? </h1>

<p> To create a website is a creative process. <br>

<a href="http://www.subarnacreative.blogspot.com"> This is my website. </a>

<br>To say that artificial intelligence will

take over wevb development is wrong. <br> AI may make average websites. <br> To make

the best websites, you still need human designers. </p>

</body>

</html>

We include the website url (http://subarnacreative.blogspot.com in this case) in inverted commas in the anchor (<a>) tag after href. Then, we close the anchor tag (</a>).

Anchor tag has href attribute.

Let us see what happens if I click on the link.

I will show you how to change the link color. Can I highlight the link in pink color? Can I make its color green after I click on it? Yes, I will show you how but for that, we have to learn CSS. We could also make the link appear as a button. For that, we again need CSS. We can also make an image a clickable link. I will show it all to you in the future.

HTML webpage link default settings.

The default link colors are:

The unvisited link appears blue.

The visited link appears purple.

The active link appears red.

What is an active link?

When you just click on the link on the webpage, it appears red. Even if you right-click on the link then it appears red. Means it is an active link. The browser is processing the link.

HTML webpage active link color is red

I will explain some nerdy concepts now.

HTML is not case-sensitive.

You could write <html> or <HTML>, it makes no difference. You could write <br> or </BR>, it makes no difference.

Nested HTML elements

You have written the above code. You must have noticed that <html> is the root.

Between <html> and </html>, there are many tags. For example, there is the <body> and </body> tag.

Inside the <body> and </body> tag, there are <p> and </p> tags.

Inside the <p> and </p> tags, there is the <br> tag.

So, there is nesting.

<html>

<head>

</head>

<body>

<p>....

…. </p>

….</p>

…. </p>

…..</p>

….</p>

</body>

</html>

Empty HTML element

If an HTML tag contains nothing inside it then it is an empty HTML element.

Some content is there between <body> and </body> so it is not empty.

Again, <h2> and </h2> contains some content so it is not empty.

But, <br> has no closing tag and contains no content. So, it is an empty tag.

Means, there is nothing called </br> tag in HTML.

Conclusion

Loved the way I explained the stuff? Follow me. Visit my website. I have decided to design a website from the scratch. And, I decided to share all the steps I take to make it with you, dear reader.

A website has to look appealing too. Right? So, I am exploring UI tips to choose the perfect design for my website too. Read the blogs here.

Email me at subarnacreative@gmail.com.

Search This Blog

Notebook