HTML / HTML Basics
Creating Your First HTML Page
In this tutorial, you'll create your first HTML page from scratch, using everything you've learned so far.
Section overview
5 resourcesIntroduces the fundamental concepts of HTML, including elements, attributes, and basic document structure.
1. Introduction
Tutorial's Goal
In this tutorial, we aim to take you through the process of creating your first HTML page from scratch. We will start with understanding the basic structure of an HTML document and then gradually move towards adding different elements to the page.
What Will You Learn
By the end of this tutorial, you will be familiar with:
- HTML document structure
- Basic HTML tags and their usage
- Creating a simple webpage
Prerequisites
No prior knowledge of HTML is required. This tutorial is designed for absolute beginners.
2. Step-by-Step Guide
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It's used to describe the structure of web content. HTML consists of a series of elements, which you use to enclose different parts of your content to make it appear or act a certain way.
HTML Tags
HTML tags represent the root of an HTML document. All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.
HTML Paragraphs
Paragraphs are defined with the <p> tag.
HTML Links
Links are defined with the <a> tag. The link's destination is specified in the href attribute.
Here are some best practices and tips:
- Always close your tags.
- Use comments to describe your code. You can add comments to your HTML code with the following syntax: <!--This is a comment-->
- Keep your code clean and organized. It will help you and others understand it better.
3. Code Examples
Let's create a simple webpage that includes a heading, a paragraph, and a link.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<!-- This is a heading -->
<p>This is a paragraph.</p>
<!-- This is a paragraph -->
<a href="https://www.google.com">This is a link</a>
<!-- This is a link -->
</body>
</html>
In the above code:
- <!DOCTYPE html>: This declaration helps with the proper rendering and functioning of web elements.
- <html>: This is the root of an HTML document.
- <head>: This contains metadata (data about data) about the document like its title.
- <title>: The content inside this tag will be displayed on the browser tab.
- <body>: This contains the content visible to web users.
- <h1>: This is the main header.
- <p>: This is a paragraph.
- <a href="https://www.google.com">: This is a link to Google's homepage. The href attribute is used to specify the link's destination.
4. Summary
In this tutorial, you learned about the basic structure of an HTML document, and how to use different HTML tags to create a simple webpage.
Next Steps
The next step in learning HTML is to start experimenting with more HTML tags, like <img> for adding images, <ul> and <ol> for adding lists, and <table> for creating tables.
Additional Resources
For further learning, you can refer to:
- Mozilla Developer Network
- W3Schools
5. Practice Exercises
Now, let's practice what you've learned:
- Create an HTML page with two paragraphs and a heading.
- Create an HTML page with a link to your favourite website.
- Create an HTML page with a heading, two paragraphs, and two links.
Solutions
- HTML page with two paragraphs and a heading:
<!DOCTYPE html>
<html>
<head>
<title>Practice Exercise 1</title>
</head>
<body>
<h1>My First Heading</h1>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>
- HTML page with a link to your favourite website:
<!DOCTYPE html>
<html>
<head>
<title>Practice Exercise 2</title>
</head>
<body>
<a href="https://www.yourfavouritewebsite.com">Link to my favourite website</a>
</body>
</html>
- HTML page with a heading, two paragraphs, and two links:
<!DOCTYPE html>
<html>
<head>
<title>Practice Exercise 3</title>
</head>
<body>
<h1>My First Heading</h1>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<a href="https://www.yourfavouritewebsite.com">Link to my favourite website</a>
<a href="https://www.secondfavouritewebsite.com">Link to my second favourite website</a>
</body>
</html>
Remember, practice is key to mastering any new skill! Happy coding!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article