The web page design can seem like a very overwhelming thing, especially given how many advanced techniques there are. Don’t worry too much about it, we are here to help you with your own DIY webpage design! You can easily break the overall project into smaller tasks, and plenty of online resources can guide you along the way. Even if you plan to use templates or site builders to establish the foundation, you should still follow some key principles to ensure your site looks professional. However, we should note that before you can begin designing your own website you will need to buy a URL to build your site on. If you already have a URL (aka domain) that you have in mind, then please proceed.
With a text editor ready to go, such as Notepad, it’s time to get started. After reading this guide, you will type out the basic format, save it as an HTML file, and then view it successfully in a web browser.
DIY Webpage Structure
Basic Formatting
Every page has the same basic skeleton hidden beneath it. To understand the structure, you will need to learn what the basic tags are.
Tags
Tags are the text in between the < and > brackets. If you have ever seen code before, you have seen these tags.
Structure
In addition to pages having structure, tags have their own form of structure too. Some tags are “starters,” such as <i>, while others are “end tags,” such as </i>. Together, this pair of tags create an HTML element. For the provided example, this would italicize text. Most elements require an ending tag, which is simply a forward slash in front of the element’s name.
Designing the webpage
To get things started, open your text editor and type in the following tags:
<html>
</html>
Every page uses this as the standard tags, and they can have either text or additional HTML elements in between them.
Fill out the rest of the Notepad file so that it reads as follows:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>A Basic HTML Page</title>
</head>
<body>
Content will go here.
</body>
</html>
Your first line may look complicated at first, but don’t worry! It simply tells your web browser which HTML version to use. While not the latest, this example uses HTML 5.
HTML Webpage Design
There are two basic parts to an HTML page: the head and the body. The head section contains advanced elements like meta tags, but for now, you only need to focus on the title tag, which sets the webpage title.
As for the body section, this is the main part that displays anything you put here as its content. Type anything in here that you want to appear. In the above example, the phrase “Content will go here” would appear if you view your file as a website.
Now you have successfully made the bare-bones skeleton for Web page design. There are more complicated techniques, but everything boils down to this skeleton at the end of the day and your basic structure for DIY webpage design.
Saving the File
When you use a text editor like Notepad to create a website, it can be a little tricky trying to give your file the proper “.html” file extension. By default, it will try to save the file as “.txt” and not even give you the option to switch it to an HTML file.
Don’t fret: All you need to do is type in a file name — go for all lowercase letters to be safe — and type in the file extension, wrapping the entire thing in quotes. For example: “index.html” is how you would type it. Click “Save” and remember where the file saves so you can find it again. In the future, you’ll only need to click “Save” because the computer will already recognize the file as an HTML document.
Webpage Filenames
The filename for your page can be any alphanumeric character, a hyphen, and an underscore combination. However, it is generally best to keep everything lowercase; otherwise, people may confuse capitalization problems. The home page to your website should always be “index.html” as well.
You may notice that some websites have a “.htm” extension. Back in the 90s, extensions could only consist of three letters. You could name your file “index.htm,” but since few people use older computers, it’s best to stick with the full “.html” extension.
DIY Design – Word Processors vs Text Editors
It is noted here that you should use a text editor like Notepad, not a word processor like Microsoft Word. If you absolutely must go with the latter, you do not want to save all of the margin values and formatting as the Web browser cannot read them. To avoid this, save it as a text-only file, meaning only the important information is saved and relayed to the browser.
Viewing the webpage File
After all of this work, you will likely want to know what this page even looks like and whether it works properly. Open a new window or a new tab in your Web browser. Click “File,” followed by “Open.” Locate the file that you just saved and double-click it. It should appear as a Web page in your browser.
Because it is a basic file, it should only appear as a white page with nothing more than whatever you put between the body tags. However, this is just the first step into creating something new and more advanced in your ongoing journey to DIY webpage design.
Design a fan webpage
Creating a website for World Cup qualifiers requires a strategic approach to ensure fans stay informed and engaged. Start by designing a user-friendly layout that highlights key sections such as match schedules, team standings, player stats, and live updates. Incorporate dynamic elements like real-time score tracking, news articles, and video highlights to enhance the experience. Using a CMS like WordPress or a custom-built platform can help manage content efficiently. Additionally, optimizing for mobile devices and integrating social media sharing options will keep fans connected. With a well-structured website, you can provide an interactive hub for football enthusiasts to follow their favorite teams on the road to the World Cup.