How To Create A Simple Webpage?
Howdy! My name is Palak. Do you remember when you need to do a project for school, your dad goes to the computer and types something in and then you see pictures and words which you can read. Friends, this is called a website. So website is a collection of related web pages that provides information. It is just like a book with many pages. Webpage is a part of website. It contains text, pictures, sounds, videos or animation.
You can create your own website as well. It is very simple. Let me help you to create one.
Okay! Here we go. The best way for creating the website is HTML or Hyper Text Markup Language. HTML describes all the headings, paragraphs, or images that make up the website.
Let’s create your first world page with a text editor or notepad. Now, we’re going to create a tag <!DOCTYPE HTML> is the doctype for the document. Doctype refers to the type of document. It basically lets the browser know that this page is written in HTML.
Now, let’s type in the HTML tag. The open angle bracket html <html> and close angle bracket html tag </html> tells the browser that this is an HTML document. Most tag has an opening and a closing part.
Next we come to the HEAD tag and the BODY tag. The HEAD tag is the area where the important stuff is processed first, like CSS and Javascript. The BODY tags are the ones that contain the website content. We will here add some content later.
Now friends, we should give this webpage a title using TITLE tag. So, let’s type in the title here, for example ‘My First Webpage’. Great! Now our webpage has a title. Let’s add in some contents now.
So let’s add a header in between the body tag. H1 simply means header. There are different types of header. Let’s try them out later. Then, let’s add some texts in the header, let’s add in ‘Hello World!’
<h1> Hello World! </h1>
At this point we should save the file as ‘index.html’. Preview your file with your web browser. Preview your file with your web browser. Drag and drop it into the browser area, and you should see it pop up.
Now, we are going to add a paragraph to our webapage. This can be done by <p> tag. For example:
<p> This is a test page. </p>
Now, we are going to add the image of the earth to the website. Let’s type in the image tag. The word src which is also known as the source defines the location of an image. In this case, the location of the image would be ‘world.jpg’. This will be written as <image src=‘world.jpg’ </image>.
Now, let’s preview the index.html file with the browser. You’ll see that the image of the earth is added to the website.
Now, let’s add in more information below the earth image. Let’s add the <ul> and <li> tag. <ul> stands for unordered list. You can add as many <li> tags as you want. Now, let us add in some information. For example,
<li>Only planet in the solar system that has life.</li>
<li>It is called the Blue Planet.</li>
Then let us preview the website again. Simply click the refresh button. There we go, we have added information of the Earth.
Now, let’s add <b> tag to the <li> tag. <b> tag means bold. Simply click the refresh button of the webpage. Great! Now we have made the text bold. You can even make the text italic by using <em> tag.
Now, let’s add information about the other planets of the solar system with the anchor tag, <a>. This tag means anchor. It defines the hyperlink, which is used to link one page to another. Hyperlink simply means link. Usually the anchor tag comes with the href attribute. It specifies the URL of the page the link goes to. For example, <a href=https://google.com/solarsytem’.
Then let us preview the website again. When you click on the link, we will go to the webpage which contains information about the other planets of our solar system.
Here we are. We have set up a simple website. You should give it a try yourself and make your own website. See ya!
Responses