Buzz
We use websites every day, but how hard is it to create one yourself? This guide will show you how to build a simple HTML website using Notepad.
Steps
Create Your Own Website
Open Notepad. Notepad is pre-installed on all Windows computers, and you can find it in the Start menu. Once Notepad is open, click on 'File,' select 'Save As' from the dropdown menu. Then choose 'All Files' from the file type dropdown and save the file as an HTML document. Typically, the 'index.html' file is the main page that holds all links to access different sections of your website.
HTML (HyperText Markup Language) uses tags. Essentially, tags are words enclosed in <angle brackets>.
You will use many tags to build a website. Along with these, there are 'closing tags' to mark the end of a code section. For example: </text>. These tags close a bold font or a text block.
You will use many tags to build a website. Along with these, there are 'closing tags' to mark the end of a code section. For example: </text>. These tags close a bold font or a text block.
The opening of a webpage typically begins with the tag: <html>. You can place this at the top of your Notepad file.
Next, there is the <head> tag.
Then, there is <title>, a tag that lets the browser know the content displayed in the title bar, and the meta tag (optional), which helps search engines (such as Google) understand what the website is about.
Then, there is <title>, a tag that lets the browser know the content displayed in the title bar, and the meta tag (optional), which helps search engines (such as Google) understand what the website is about.
On the following line, after the head tag, place a title, for example: <title>Mytour HTML</title>
Now, type </head> to close the head section.
Next on the webpage comes the <body> tag. Keep in mind that not all browsers support every color (for example, most browsers do not support dark gray).
Between the two body tags is the content visible to users on the webpage. Start with a heading. This is the large text, specified in HTML between the <h1> and <h6> tags, with <h1> being the largest. So, at the top of your webpage, after the body tag, you can write: <h1>Welcome to my page!</h1>. Always remember to close the tag, otherwise, the entire text on the page will be enlarged!
Another tag that can be included in the webpage content is the <p>, or paragraph tag. After the heading, you can input: <p> I am learning how to create a webpage! Mytour rules! To create a new line on the page, use the break tag: <br>.
A webpage consisting solely of plain text would be quite dull. So, add some formatting. Use the <b> tag to make text bold, <i> to italicize, and <u> to underline. Don't forget to close the tags!
What really makes a webpage interesting is the inclusion of images. Even if the text is formatted, no one wants to view a page full of just text. Use the <img> tag to insert an image. However, like the body tag, this tag requires additional information. An image tag would look like this: <img alt=dog src="dog.jpg" width=200 height=200>. The src (source) data is the image name. The width and height values correspond to the image's width and height in pixels.
Almost done! If you'd like visitors to be able to view multiple pages, use the tag: <a href="otherpage.html">Other Page</a> to create a link. The content inside the tag is what users will click on to go to the next page, while the href attribute points to the link of that page. With this tag, you can easily guide users to navigate around your website.
To complete your webpage, you need to close the body tag with </body> and the entire webpage with the </html> tag.
Save the file with the '.html' extension. Then, open the .html file with your preferred browser to see how it works. Congratulations! You’ve successfully created a webpage.
If you want to publish your webpage online, learn how to create a website with a domain name.
Tip
- There are many tags available on the internet. Numerous useful websites can help you learn how to create a website (W3Schools is one of them).
- Remember to always use closing tags.
- Make sure to include the <!DOCTYPE html> tag at the very beginning, before the <HTML> tag, so the browser knows your page is in HTML5 format.
- You can change the font using the <font face="N"></font> tag before <html> and after </html>. The 'N' represents the font, such as "Verdana".
- If you want to use special characters on your website, type < (for <), > (for >), & (for &), etc., and always end the code with a semicolon “;”.
- In HTML tutorials, directory and file names are always written in lowercase, continuous without spaces or accents. While Windows allows spaces, many web hosting providers don’t, so it’s better to use consistent naming from the start to avoid issues and save time.
