HTML For Creating Website – Learning How To Code!

Quick Summary => Want to create your own website from HTML? From its history to its practical application, we’ll explore the universe of HTML tags, delve into creating a website, and discuss the current trends and future of web development.

Welcome to the exciting world of HTML, the cornerstone of web development. As someone who’s about to delve into this subject, you’ve chosen to learn a language that, while simple in design, holds immense power in its application. HTML, or HyperText Markup Language, is the bedrock upon which every website is built!

It’s the language that gives structure to web content, allowing us to present text, images, videos, and other media in a format that’s readable and navigable by both humans and machines.

This article is your compass to navigate the landscape of HTML. From its humble origins to its present-day significance, from setting up your development environment to writing your first lines of code, from understanding basic syntax to exploring advanced elements — we’re going to cover it all.

With that said, let’s dive headfirst into this complex, yet easy to understand labyrinth!

A Brief History of HTML

The tale of HTML begins in the late 1980s with a man named Tim Berners-Lee, a physicist at CERN, the European Organization for Nuclear Research. Berners-Lee envisioned a system that could link documents and data across the network of computers at CERN. This vision led to the creation of HTML, a simple markup language that could structure text into hyperlinked documents.

HTML has evolved significantly since those early days. It has seen several major versions, each introducing new tags and attributes to keep up with the growing demands of web development. Today, we’re at HTML5, a powerful version that incorporates multimedia elements, form controls, semantic tags, and much more, which we’ll explore later in this article.

Understanding the Basics of HTML

Every website starts with a single step, and our first step into HTML is understanding its basic syntax. HTML is made up of elements, each represented by a tag. A tag, enclosed in angle brackets (<>), instructs the web browser how to interpret the content within it.

The most fundamental concept in HTML is the ‘element’. An HTML element typically consists of a start tag, some content, and an end tag. For example:

<p>This is a paragraph.</p>

In the example above, <p> is the start tag, This is a paragraph. is the content, and </p> is the end tag. The whole line is referred to as a paragraph element.

Note that not all HTML elements have end tags or content. For example, the line break element is simply <br>, with no end tag or content.

We also have the concept of ‘attributes’, which provide additional information about an element. They are included in the start tag and typically come in name/value pairs. For example:

<p> style="color:red;">This is a red paragraph.</p>

In this case, style is an attribute name, and color:red; is its value. The style attribute is used to add styles to an element, like color, font, size, and more.

Setting Up the Development Environment

Before we can start writing HTML, we need to set up our development environment. At its most basic, all you really need to write HTML is a text editor and a web browser.

Text Editor

A text editor is where you’ll write your HTML code. You can start with something as simple as Notepad on Windows or TextEdit on Mac. However, I recommend using a dedicated code editor like Sublime Text, Atom, or Visual Studio Code. These editors offer features like syntax highlighting and auto-completion, which make writing code much easier and more enjoyable.

Let’s take Visual Studio Code as an example. Here’s how to set it up:

1. Download and install Visual Studio Code from the official website.
2. Open Visual Studio Code and create a new file with the extension .html.
3. Start writing your HTML!

Web Browser

The web browser is where you’ll view your HTML page. You can use any browser you like — Chrome, Firefox, Safari, Edge, etc. Just open your .html file in the browser to see your page.

Remember, the browser renders your HTML code into a visual page. If you make changes to your HTML file, you’ll need to refresh the browser to see those changes.

Creating Your First HTML Page

Now that we’ve set up our development environment, it’s time to write some HTML. Here’s what a basic HTML page looks like:

<!DOCTYPE html>
<html>
     <head>
         <title>My First HTML Page</title>
     </head>
     <body>
         <h1>Welcome to My Website!</h1>
         <p>This is my first HTML page.</p>
     </body>
</html>

Breakdown

• <!DOCTYPE html>: This is the doctype declaration and it must be the very first thing in your HTML document. It’s not an HTML tag; it’s an instruction to the web browser about what version of HTML the page is written in.
• <html>: This is the root element of an HTML page.
• <head>: This contains meta-information about the HTML document that isn’t displayed on the page. One such piece of information is the title of the document, defined by the <title> tag.
• <title>: The title of the document. This is displayed in the browser’s title bar or tab.
• <body>: This contains the content of the document, such as text, images, links, etc. This is the part of the HTML document that’s displayed in the web browser.
• <h1>: This is a heading. HTML headings are defined with the <h1> to <h6> tags.
• <p>: This is a paragraph. HTML paragraphs are defined with the <p> tag.

Creating The First HTML Page

1. Open your text editor (we’re using Visual Studio Code).
2. Create a new file and paste the above HTML code into it.
3. Save the file with a .html extension (for example, index.html).
4. Open this file in your web browser to see your first HTML page in action!

Congratulations, you’ve just created your first HTML page!

Diving Deeper into HTML Tags

HTML tags are the building blocks of all websites. They define the structure and layout of a web page and tell the browser how to display the content. Let’s dive deeper into some of the most common HTML tags:

• Headings: Headings are defined with the <h1> through <h6> tags, with <h1> being the largest and <h6> being the smallest. They’re used to create different sections of your content.

  <h1>Heading level 1</h1>
  <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>

• Paragraph: The <p> tag is used to define a paragraph. Browsers automatically add some space (margin) before and after each <p> element.

  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>

• Line Break: The <br> tag is used to insert a line break or end a line of text. It’s an empty tag, which means it doesn’t have a closing tag.

  <p>This is a paragraph.<br>This is a new line in the same paragraph.</p>

• Horizontal Rule: The <hr> tag is used to create a horizontal line in an HTML page. It’s often used to separate content or define a change in topics.

  <p>Topic One</p>
  <hr>
  <p>Topic Two</p>

• Bold and Italic: The <strong> tag is used to define important text, while the <em> tag is used to define emphasized text. By default, browsers render <strong> as bold and <em> as italic.

  <p>This is <strong>important</strong> and this is <em>emphasized</em>.</p>

Working with Text in HTML

Text is a fundamental part of any webpage. HTML provides several tags to format text:

• Headings and Paragraphs: We’ve already covered how to use the heading tags (<h1> through <h6>) and the paragraph tag (<p>).
• Bold, Italics, and Emphasis: We’ve covered the <strong> and <em> tags. There’s also the <b> tag for bold and the <i> tag for italic, but <strong> and <em> are preferred because they have semantic meaning.
• Lists: There are two types of lists in HTML – unordered lists (<ul>) and ordered lists (<ol>). Unordered lists have bullet points, while ordered lists have numbers. Each item in the list is marked with a list item tag (<li>).

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>

<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>

Creating Links and Anchors in HTML

Links are a defining feature of the web, allowing us to navigate from one page to another. In HTML, we create links using the anchor tag (<a>).

• Hyperlinks: A hyperlink links to another webpage. The href attribute is used to specify the destination of the link.

  <a href="https://www.example.com">Visit Example.com</a>

• Anchors: Anchors are used to create links to specific sections within a webpage. To create an anchor, you need to define an id for an element. Then, you can link to that id.

  <h2 id="section1">Section 1</h2>
  <p>Some content...</p>
  
  <a href="#section1">Go to Section 1</a>

This is just the beginning. HTML has many more tags to explore, each with its own purpose and usage. As we continue, we’ll learn how to add images, create tables, gather user input, and more.

Adding Images to Your HTML Page

Images play a crucial role in making web pages visually attractive and engaging. In HTML, we use the <img> tag to insert images into a webpage. The source of the image is specified in the src attribute, and the alt attribute holds a text description of the image, which improves accessibility.

<img src="path-to-your-image.jpg" alt="Description of the image">

Remember, it’s important to have the correct path in your src attribute. If your image is in the same directory as your HTML file, you only need to specify the image file name. If it’s in a different directory, you’ll need to specify the path to that directory.

Understanding Tables in HTML

Tables are a structured way of displaying data on your webpage. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag, table headers with the <th> tag, and table data with the <td> tag.

Here’s a basic example of an HTML table:

<table>
     <tr>
          <th>Firstname</th>
          <th>Lastname</th>
     </tr>
     <tr>
          <td>John</td>
          <td>Doe</td>
     </tr>
     <tr>
          <td>Jane</td>
          <td>Doe</td>
     </tr>
</table>

In this example, Firstname and Lastname are the headers, and John, Doe, Jane, and Doe are the data. Note that <th> elements are bold and centered by default, while <td> elements are regular and left-aligned.

HTML Forms and User Input

Forms are one of the main points of interaction between a user and a web page. They allow users to send data to a server for processing. An HTML form is created using the <form> tag.

Within a form, we can have several types of controls, including text fields, checkboxes, radio buttons, and more. Each control is represented by an HTML element such as <input>, <textarea>, or <select>.

Here’s an example of a simple form with a text field and a submit button:

<form action="/submit_form" method="post">
     <label for="fname">First name:</label><br>
     <input type="text" id="fname" name="fname"><br>
     <input type="submit" value="Submit">
</form>

In this example, when the user clicks the “Submit” button, the form data is sent for processing to a page on the server called “/submit_form“. The method="post" attribute specifies that we’re using the HTTP POST method to send the form data.

HTML5: The Next Evolution of HTML

HTML5 is the latest evolution of HTML, and it brings a host of new elements, attributes, and behaviors to our web development toolkit. HTML5 introduces semantic tags that give meaning to the content they contain, making our webpages more accessible and easier for search engines to index.

Imagine you’re developing a webpage for a blog. Instead of using generic <div> tags to structure your content, you can use semantic tags like <article>, <section>, <header>, <footer>, and <nav>. This gives the browser (and the developers who might read your code) a better understanding of how the content is structured.

Here’s a practical example:

<!DOCTYPE html>
<html>
<head>
     <title>My Blog</title>
</head>
<body>
     <header>
          <h1>Welcome to My Blog</h1>
     </header>
     <nav>
          <a href="#latest-post">Latest Post</a> |
          <a href="#archive">Archive</a>
     </nav>
     <article>
          <h2 id="latest-post">My Latest Post</h2>
          <p>This is an awesome blog post...</p>
     </article>
     <footer>
          <p>Thank you for visiting my blog!</p>
     </footer>
</body>
</html>

In this snippet, we’re using HTML5 semantic tags to give structure to a blog webpage. We have a <header> for the blog title, a <nav> for navigation links, an <article> for the blog post, and a <footer> for the closing note.

HTML Best Practices

As with any programming language, writing clean, well-organized HTML is crucial. It not only makes your code easier to read and maintain but also can improve your website’s performance and accessibility. Here are a few best practices to keep in mind:

• Indentation: Indent nested elements. This makes your code easier to read and understand.
• Comments: Use comments to explain your code. This can be especially helpful when you come back to your code after a break.
• Quotation Marks: Always enclose attribute values within quotation marks.
• Closing Tags: Always close your HTML tags. This is not only a good practice but also a requirement for some tags in HTML.

Here’s a real-world example of what this looks like:

<!DOCTYPE html>
<html>
     <head>
          <!-- This is the head of the document -->
          <title>"My Web Page"</title>
     </head>
     <body>
          <!-- This is the body of the document -->
          <h1>Welcome to My Web Page!</h1>
          <p>"Hello, world!"</p>
     </body>
</html>

Debugging HTML Code

Debugging is an essential part of any coding process. When it comes to HTML, the most common issues usually involve missing or incorrect tags and attributes. Here’s how to tackle those pesky bugs:

• Validation: Use an HTML validator like the W3C Markup Validation Service. Simply paste your code into the validator and it will check it against the HTML standards and highlight any errors or warnings.
• Browser Developer Tools: All major browsers have built-in developer tools that can help you inspect and debug your HTML. You can access these tools by right-clicking on your webpage and selecting “Inspect” or “Inspect Element”.
• Search and Learn: If you’re stuck with an error, chances are someone else has faced the same problem. Use search engines to find related discussions and solutions. Websites like Stack Overflow can be a goldmine of information.

Debugging can sometimes be frustrating, but remember, it’s also an opportunity to learn and become a better coder.

Building a Sample Homepage

Creating a webpage involves bringing together many of the elements and tags we’ve discussed. Let’s now craft a more complex example: a mock-up of a homepage for a personal website.

<!DOCTYPE html>
<html>
     <head>
          <title>John Doe's Homepage</title>
     </head>
     <body>
          <header>
               <h1>Welcome to John Doe's Personal Website!</h1>
          </header>
          <nav>
               <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#work">Work</a></li>
                    <li><a href="#contact">Contact</a></li>
               </ul>
               </nav>
               <section id="about">
                    <h2>About Me</h2>
                    <p>Hello! I'm John Doe, a web developer based in New York. I have a passion for creating responsive, user-friendly websites.</p>
               </section>
               <section id="work">
                    <h2>My Work</h2>
                    <p>Here's a selection of my most recent work.</p>
                    <!-- Add images and descriptions of your work here -->
               </section>
               <section id="contact">
                    <h2>Contact Me</h2>
                    <p>Interested in working together? Awesome, I'd love to hear from you!</p>
                    <form action="/submit_form" method="post">
                         <label for="name">Your Name:</label><br>
                         <input type="text" id="name" name="name"><br>
                         <label for="email">Your Email:</label><br>
                         <input type="email" id="email" name="email"><br>
                         <input type="submit" value="Submit">
                    </form>
               </section>
               <footer>
                    <p>© 2023 John Doe. All rights reserved.</p>
               </footer>
     </body>
</html>

This is a basic structure for a homepage. Of course, a real-world homepage would include more complex elements like CSS for styling and JavaScript for interactivity.

Popular HTML Editors

Writing HTML involves using an editor where you can write, format, and test your code. Here are some popular HTML editors:

1. Visual Studio Code: A free, open-source code editor developed by Microsoft. It’s lightweight, extensible, and has built-in support for JavaScript, TypeScript, and Node.js.
2. Sublime Text: A sophisticated text editor for code, markup, and prose. It offers a slick user interface and notable features like Goto Anything, quick navigation to files, symbols, or lines.
3. Atom: A free and open-source text and source code editor developed by GitHub. It supports plug-ins written in Node.js, and embedded Git Control.
4. Brackets: A modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers.
5. Notepad++: A free source code editor and Notepad replacement that supports several languages. It runs in the MS Windows environment.

Each of these editors has its own strengths and unique features. Choose the one that best suits your needs and preferences.

The Shift to Pre-Built Websites

As we delve further into the 21st century, the world of web development is seeing a growing trend towards pre-built websites. Platforms like WordPress, Wix, and Squarespace have made it possible for anyone to create a website, even without understanding HTML, CSS, or JavaScript.

These platforms come with ready-made templates and drag-and-drop interfaces that make web design as easy as pie. This democratization of web development has enabled more people to create their online presence, from personal blogs to e-commerce stores.

However, this doesn’t mean that HTML is becoming obsolete. On the contrary, understanding HTML (and CSS and JavaScript) gives you greater control over your website. It allows you to customize your site beyond what pre-built templates offer. Most importantly, it gives you a deeper understanding of how the web works, which is a valuable skill in our digital age.

Conclusion

And with that, we’ve reached the end of our HTML extravaganza. We’ve covered the basics of HTML, from creating a simple HTML page to understanding the structure of a full-blown homepage. We’ve explored how to format text, create links, add images, and even debug our code. I hope you’ve found this journey as exciting as I did.

But remember, this is just the beginning. HTML is a vast subject, and there’s always more to learn. So keep exploring, keep coding, and most importantly, have fun. After all, that’s what coding is all about!

Further Resources

If you’re eager to continue your HTML journey, here are some resources you might find useful: