Welcome to the world of web development! If you're new to creating websites, understanding the basics of HTML is your first crucial step. HTML, or HyperText Markup Language, is the standard markup language for creating and structuring content on the World Wide Web. Let's dive into a simple, yet comprehensive HTML website example to get you started.
Before we begin, remember that HTML is not a programming language, but a markup language. It uses tags to define and describe the structure of web content. Now, let's create a basic HTML website example, step by step.
Setting Up the Document Structure
Every HTML document starts with a declaration that defines the version of HTML the document is using. In our case, we'll use HTML5, the latest version.
Next, we'll create the basic structure of our document using the following tags: <!DOCTYPE html>, <html>, <head>, and <body>. The <head> section contains meta-information about the document, while the <body> section contains the visible page content.
Defining the Document Type
The <!DOCTYPE html> declaration helps with browser compatibility and ensures that the page is rendered in standards mode. It should be the very first thing in your HTML document.
Here's how it looks: <!DOCTYPE html>
Creating the Basic Structure
Now, let's create the basic structure of our HTML document:
<html>
<head>
</head>
<body>
</body>
</html>
Adding Content to the Page
With our basic structure in place, let's start adding content to our page. We'll use various HTML tags to create headings, paragraphs, lists, and even a simple table.
Remember, HTML tags are not case-sensitive, but it's a good practice to write them in lowercase.
Creating Headings
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Let's use <h1> for our main heading and <h2> for subheadings:
<h1>Welcome to My Website</h1>
<h2>About Me</h2>
Creating Paragraphs
We'll use the <p> tag to create paragraphs. Here's an example:
<p>This is a paragraph about me. I'm a web developer learning HTML.</p>
Creating Lists
HTML provides two types of lists: ordered (<ol>) and unordered (<ul>). Let's create an unordered list of my hobbies:
<ul>
<li>Reading</li>
<li>Hiking</li>
<li>Coding</li>
</ul>
Creating a Simple Table
Tables in HTML are created using the <table> tag, with rows defined using <tr> and data cells using <td>. Let's create a simple table with my contact information:
<table>
<tr>
<td>Email</td>
<td>johndoe@example.com</td>
</tr>
</table>
And that's it! You've just created a basic HTML website. To view your creation, save the code in a file with a .html extension (e.g., index.html) and open it in your web browser.
Now that you've got the basics down, you can start exploring more advanced HTML topics, like forms, images, and multimedia. Happy coding!