Learn How to Create a Webpage in 5 Minutes
Do you want to learn how to make a website of your own?
If you answered yes, keep reading!
In 5 minutes, you’ll learn how to make a webpage.
There are many services available online these days that allow you to establish a website even if you have no programming experience.
However, having some programming expertise and being able to code/program your website would be ideal.
After that, allow me to discuss some web development fundamentals with you.
I hope you find this lesson useful, especially if you want to learn how to code or programme your own website.
You may use any text editor to try the examples we will discuss as we progress through this course.
Save your file with the “.html” extension and open it in your web browser to test your code.
Let’s get started!
HTML
HTML is the most important skill to acquire while developing a website (HyperText Markup Language).
HTML is a set of codes that allows you to format your web page’s content.
Here’s a basic sample of HTML code to get you started.
An HTML code example in its most basic form.
And here’s what it came up with.
The result of a basic HTML code on a webpage.
The above-mentioned sample code’s output on a web page.
Isn’t it rather straightforward?
Yes, it is.
As your code grows larger and more programming libraries are added, HTML will get increasingly difficult.
However, the principle is almost as straightforward as our example code.
Let’s keep going.
Tags and data content are the building blocks of HTML.
Characters enclosed in open () and close (>) angle brackets are referred to as tags.
Tags such as html>, head>, title>, and body> are examples.
Data contents are data that has been tagged.
“My First Web Page” and “Hello there!” are two examples of data contents.
In the next section, I’ll go through more tags.
!DOCTYPE html> is an important line to have in an HTML code.
As a result, it’s online 1.
It instructs the browser on what kind of code to parse.
The document type in our example is HTML5.
But let’s not get too worked up about it.
For the time being, we’ll utilize the HTML5 document type, which is denoted by<!DOCTYPE html>.
So, what exactly is a tag?
Tags are the components that make up the content of a web page.
A tag instructs the browser on how to handle data.
For example, the title> tag (line 5 in our example) instructs the browser to display the data content (“My First Web Page”) in the title bar of the page.
The text My First Web Page is on the page’s title bar, as you can see in our example web page above.
To browsers, each tag has a distinct meaning/instruction.
As you have more experience with HTML code, you’ll be able to figure out what each tag’s purpose is.
Tag elements called start tag and end tag are used to identify the contents of a tag.
For example, line 5 of our example tells us that the content of the title>tag is “My First Web Page.”
It is encompassed by the start and end tags title> and /title>.
An end tag is identified by the “/” prefix.
Tag hierarchies are possible in HTML.
This means that a tag can have several tags attached to it.
As a result, parent and child tags exist.
The html> tag is the parent tag of the head> and body> tags in our example.
The title> and div> tags are parents of the head> and body> tags, respectively.
HTML Tags That Are Required
HTML has four mandatory tags.
They are as follows, in the sequence in which they must be supplied.
HTML’s fundamental structure
Let’s have a look at what each of these mandatory tags means.
<html>
The base of an html web page is html>.
It is the principal container for all web page elements.
There are two primary tags in html>.
These are referred to as head> and body>.
<head>
The information in head> is useful in rendering the page but is not displayed on the page itself.
A head> tag, for example, can contain programming scripts and styling.
Scripts and styles will undoubtedly be used as your schooling progresses.
Styles are used to style the various elements of a web page, whereas scripts are used to automate the process (e.g. setting fonts, colors, background images, etc.)
<title>
The title of a web page is contained in title>, which is shown in the page’s title bar.
<body>
All items that appear on a web page are contained in the body> tag.
The contents and layout of a web page are built within the body> tag.
In our example, the content of the body> tag is “Hello There!” and is shown on the web page.
That is all there is to it.
HTML’s fundamental premise is this.
You can improve our sample web page by using tags to add extra HTML information.
Now I’ll show you how to style your website.
The Basics of Web Page Styling
We had previously constructed a very basic web page that said “Hello There!”
Let us now design some styles to improve the appearance of our website.
Let’s modify the white backdrop to a soft violet hue, centre the words “Hello There!” and use a different font family and size.
We’ll utilise CSS to accomplish this.
Are you all set?
What exactly is CSS?
The language CSS (Cascading Style Sheets) is used to style web page elements.
You can customise the look and feel of your website with CSS.
An example of how CSS is written is shown below.
How to Make a CSS Stylesheet
Within the style> tag, CSS should be encapsulated (as shown on our example above).
The format of a CSS style is as follows.
The phrase “name-of-style” refers to the name of the style that you are developing.
For example, you can call a style “greeting,” “hello,” and so on.
The new value for an attribute is attribute-value. An attribute is a specific property that you want to change in a web element.
As you practise HTML programming, you’ll get more familiar with the various attributes that HTML understands.
Let’s make a new style named “greeting,” in which we’ll define a bold font with a size of 50px, Verdana font family, and white font colour.
The font attribute must be used to alter the font style, and the colour attribute must be used to modify the font colour.
The following is how we’ll write our CSS style.
An example of CSS
A custom-named style should, by the way, be preceded by a dot “.”.
As a result, the style name in our case is “.greeting.”
Ok.
That is how we develop a sense of style.
Isn’t it simple?
There are various ways to describe a style, but let’s start with the fundamentals.
I’ll teach you more about writing styles and how to use them in the parts that follow.
How to Design a Tag’s Style
Let’s imagine we wish to modify the white background on our HTML sample page to a pale violet colour.
We’ll style the body> tag because the background we’re modifying is for the entire web page.
Do you recall that the body> tag is the container for all elements on a web page?
The name of the tag is utilised as the style name when styling it.
As a result, we named the style “body.”
CSS on HTML: How to Use It
Let’s put some styles on our HTML sample page now that we know how to write CSS.
This is how our CSS-enhanced HTML code will look.
Styles are contained within the head> tag, as previously stated.
We created a style for the body> tag and another style called “.hello” in the HTML code above.
Don’t be intimidated by the “.hello” style’s features.
It’s just a matter of qualities and worth.
I’ll leave it to you to “google” the purpose of each characteristic and its matching value:)
To use a custom-named style, add the class attribute to the tag where the style will be used, then “=” and the style name without the dot “.”
(For example, class=”hello”).
Our sample HTML with CSS has now produced a web page.
“Hello There!”
That concludes our discussion.
I hope you learned the fundamentals of HTML from this tutorial.
Thank you for taking the time to read this!
Cheers!
