This tutorial guides beginners through the process of creating a basic web page using HTML5 and CSS3. It covers setting up the workspace, writing HTML code, and understanding the structure of a web design page, including the use of essential tags like doctype, html, head, and body. By the end, readers will have created their first web page and learned fundamental coding practices.
Welcome to the second part of the Web Designers HTML5 and CSS beginners tutorial. In this segment, we will build a very basic web page using HTML5 coding. This tutorial is designed for beginners who want to understand the foundational elements of web development.
Before we dive into coding, we need to set up our workspace. Here are the steps:
- Create a Folder: On your desktop, create a new folder and name it “website design”.
- Open Notepad++: Launch Notepad++, which will be our code editor.
- Prepare Google Chrome: Open Google Chrome, which we will use to view our web page.
Once you have both applications open, arrange them side by side for easy access.
Step 1: Start a New Document
In Notepad++, click on the new document button to ensure you have a blank document.
Step 2: Save Your Document
Go to File > Save As, navigate to your “website design” folder, and save the document as index.html. This file will serve as the main page of your website.
Step 3: Open the HTML File in Chrome
Drag and drop the index.html file into Google Chrome to view it. Initially, it will be a blank page since we haven’t added any content yet.
Step 4: Declare the Document Type
To inform the browser that we are using HTML5, we need to add a doctype declaration at the top of our document. Type the following:
<!DOCTYPE html>
Step 5: Structure Your HTML Document
Next, we will structure our HTML document. Here’s how:
- Open HTML Tag: On a new line, type <html> and then on a new line, type </html> to close the tag.
- Add Head and Body Tags: Inside the <html> tags, add the <head> and <body> tags:
<head> </head>
<body> </body>
Step 6: Indent Your Code
To make your code more readable, use the tab key to indent the lines within the <head> and <body> sections. This practice helps in organising your code better.
Step 7: Insert Content in the Body
In the <body> section, type some content. For example:
This is my first website page.
Step 8: Save and Refresh
After adding your content, save the document by pressing Ctrl + S or clicking the save icon. Then, refresh the page in Google Chrome by clicking the refresh button or pressing the F5 key. You should now see your text displayed on the web page.
Step 9: Add a Title
To give your web page a title that appears in the browser tab, add a <title> tag inside the <head> section:
<title>My First Website Page</title>
Step 10: Save and Refresh Again
Save your changes and refresh the page in Chrome. You will now see the title you set in the browser tab.
As you build your web page, it’s important to understand that the tags you write do not perform actions like programming languages. Instead, they instruct the web browser on how to display content. For example, the <body> tag indicates where the main content of the page goes, while the <title> tag specifies what the page is about.
Congratulations! You have successfully built your first web page using HTML5. You have learned how to set up your workspace, write basic HTML code, and understand the structure of a web page. This foundational knowledge is crucial as you continue to explore more advanced topics in web development, such as CSS for styling and JavaScript for interactivity.
In the next tutorial, we will delve into more advanced HTML tags and coding techniques. For now, give yourself a pat on the back for completing your first web page!
