Learn How to Create a Webpage in 10 Minutes
Do you want to learn how to create your own webpage? If your answer is yes, read on!
These days, there are many services online where you can create your website even with zero programming skills. However, it would be nice if you have some programming knowledge and can code/program your website. Having said so, allow me to share with you some basics of web programming. I hope this tutorial will be helpful, especially to those who want to learn to code/program their website.
As we go along in this tutorial, you may use any text editor to try the examples we shall discuss. To test your code, save your file with “.html” extension and open the file using your web browser.
Let’s begin!
HTML
The foremost skill you need to learn when creating a web page is HTML (HyperText Markup Language). HTML is a structure of codes that allows you to format the content of your web page. To give you an overview here’s a basic example of an HTML code.
And here is its output.
It looks pretty simple, right? It is. HTML will only look complicated as your code gets longer and with the addition of other programming libraries. But the concept is pretty much as simple as our sample code.
Let’s continue.
HTML is composed of tags and data content. Tags are those characters enclosed in open (<) and close (>) angle brackets. Example, <html>, <head>, <title>, and <body> are tags. Data contents are data enclosed with tags. For example, “My First Web Page” and “Hello there!” are data contents. I will discuss more tags in the subsequent section.
In a HTML code, <!DOCTYPE html> is an important line to have. Hence, we have it on line 1. It tells the browser what type of code it will parse. In our example above, the document type is HTML5. Let’s not worry much about this, though. For now, we will use HTML5 document type which is identified by <!DOCTYPE html>.
So what is a tag?
Tags are elements that we use to form the content of a web page. A tag tells the browser how to process data. For instance, <title> tag (line 5 in our example) tells the browser to place the data content (“My First Web Page”) on the page’s title bar. As you can see on our sample web page above, the text My First Web Page is on the page’s title bar.
Each tag has a specific meaning/instruction to browsers. You can learn the purpose of different tags as you practice your HTML programming.
To identify the contents of a tag, we have tag elements called start tag and end tag. For instance, in our example, line 5 tells us that “My First Web Page” is content of <title>tag. It is enclosed with start tag <title> and end tag </title>. Note that a “/” prefix identifies an end tag.
In HTML, there can be hierarchies of tags. This means that a tag may contain multiple tags. Thus, there are parent and child tags. In our example, <html> tag is the parent tag of <head> and <body>. <head> and <body> tags are parents of <title> and <div> tags respectively.
Required HTML Tags
There are 4 required tags in HTML. They are as follows and are given in the required order.
A HTML page must have all these tags.
Let us now learn the meaning of each of these required tags.
<html>
<html> is the root of a html web page. It is the main container of all elements of a web page. <html> is divided into 2 main tags. These are <head> and <body>.
<head>
<head> contains those information that are useful in rendering the page but not displayed on the web page itself. For instance, programming scripts and styles can be placed within a <head> tag. As you advance your learning, you will definitely use scripts and styles. Scripts are used for automation and styles are used for styling the different elements of a web page (e.g. setting fonts, colors, background images, etc.)
<title>
<title> contains the title of a web page and is displayed on a page’s title bar.
<body>
<body> contains all elements that are displayed on a web page. It is within <body> tag where we build the contents and layout of a web page. For instance, in our example, “Hello There!” is a content of <body> tag and is displayed on the web page.
That’s it. That’s the basic concept of HTML. You can improve our sample web page by adding more HTML content using tags.
Let me now teach you how to style your web page.
The Basics of Styling A Web Page
Earlier, we created a very simple web page that says “Hello There!”. Let us now create some styles to make our web page look nicer. Let us change the white background into palevioletred color, center the text “Hello There!”, and change the font to a different font family and size. To do this, we will use CSS.
Are you ready?
What is CSS?
CSS (Cascading Style Sheets) is the language used to style web page elements. With CSS, you can design the look and feel of your web page. Here’s an example of how CSS is written.
How to Write a CSS Style
CSS should be enclosed within <style> tag (as shown on our example above). Following is the format of a CSS style.
Name-of-style, from the term itself, refers to the name of the style that you are creating. For instance, you can name a style as “greeting”, “hello”, etc.
An attribute is a specific quality that you want to change in a web element, and attribute-value is the new value for that attribute. As you practice your HTML programming, you will learn the different attributes that HTML recognizes.
Let us now create a style called “greeting” where we will define a bold font, with a size of 50px, font-family of Verdana, and white font color. The attribute that we must use to change the font style is the font and the attribute to change font color is color. Our CSS style will be written as follows.
By the way, a custom-named style should be preceded with a dot “.”. Hence, in our example, the style name is “.greeting”.
Ok. That is how we create a style. Easy, right? There are other ways to define a style but for now let us first learn the basics.
In the following sections, I will teach you more about writing styles and how to use them.
How to Create a Style for a Tag
In our HTML sample page, let’s say we want to change the white background into palevioletred color. Since the background that we are changing is for the entire web page, we are going to style <body> tag. Do you still remember that <body> is the container of all elements displayed on a web page?
Our CSS will look like this.
To style a tag, the tag’s name is used as the style name. Hence, we used “body” for the style name.
How to Implement CSS on HTML
Now that we know how to write a CSS, let us now apply some styles on our HTML sample page.
Here is how our sample HTML code will look like with CSS.
As I mentioned earlier, styles are placed within <head> tag.
In the HTML code above, we created a style for <body> tag and another style which we named “.hello”. Don’t be overwhelmed by the attributes we used in style “.hello”. They are simply attributes and value. I will let you “google” and find out the purpose of each attribute and their corresponding value :)
To implement a custom-named style, class attribute is added to the tag where we want to implement the style, followed by “=” and the name of style without dot “.” (e.g. class=”hello”).
Here now is the web page output of our sample HTML with CSS.
That’s it! I hope you were able to learn the basics of HTML from this tutorial.
Thanks for reading!
Cheers!
