HTML

The latest evolution of the Hypertext Markup Language, brings innovation to web development, enables the creation of modern, interactive websites and applications for a richer user experience.

Unleashing the Power of JavaScript: multiple event techniques

by

Incorporating dynamic and interactive elements into your content can significantly elevate the user experience. In this tutorial, we’ll explore the fascinating world of JavaScript, covering essential techniques to enhance your technology blog. Prerequisites Before diving into JavaScript, ensure the following: Step 1: Including JavaScript in Your HTML Start by adding JavaScript to your HTML document. … Read more

Mastering HTML Essentials to start your Tech Blog 🔥

by

As a technology blogger, having a strong foundation in HTML is fundamental for crafting engaging and well-structured content. In this tutorial, we’ll delve into the key HTML elements and techniques that will empower you to create compelling and accessible posts on your technology blog. Prerequisites Before we embark on this HTML journey, ensure the following: … Read more

Text Tags: Blocks, headings and Inlines a quick start ✍

by

In the world of HTML, text is a fundamental component, and understanding the various tags associated with it is crucial. In the body tag of an HTML document, you’ll often encounter two main categories of elements: block elements and inline elements. Block Elements vs. Inline Elements Before delving into specific tags, it’s essential to grasp … Read more

Creating your first web page in pure HTML 🎉

by

In our previous HTML example, we aimed to provide you with a quick overview to get you started. However, we need to delve deeper into the essential elements of a proper HTML file to ensure clarity and correctness.

Let’s revisit we wrote initially

<p>A paragraph of text</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

While this allowed us to create a functional HTML page, it lacked some fundamental elements necessary for a well-formed HTML document. Consider the following improved version:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <p>A paragraph of text</p>

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>

Now, let’s break down the key components

  • <!DOCTYPE html>: This declaration, placed at the top, signals to the browser that the document is an HTML file.
  • <html>: The root element that wraps the entire HTML document. Inside it, you’ll find the <head> and <body> sections.
  • <head>: This section contains meta-information about the document, such as the title, character set, linked stylesheets, and more. In this example, it’s left empty for simplicity.
  • <body>: The container for the visible elements of the page. It encompasses the content you want to display, including paragraphs, lists, images, and more.

It’s crucial to note that an HTML document should have only one occurrence of the <html>, <body>, and <head> elements.

Additionally, notice the indentation used in this example. Each nested tag, such as <head> inside <html> or <ul> inside <body>, is indented for clarity. Indentation helps maintain a “tree structure,” making it easier to visually parse and understand the hierarchy of elements in an HTML file.

Whether you prefer a 2-character or 4-character indentation (or tabs), consistency is key to ensuring a clean and organized HTML structure. Adopting a systematic approach will greatly enhance your ability to navigate and modify HTML files effectively.

Introduction to HTML đź“–

by

HTML, or Hyper Text Markup Language, is the fundamental building block of the World Wide Web. In the early days of the internet, HTML files served as the backbone of web content, stored on centralized servers and accessed by browsers to display information.

Despite its importance, HTML is not a programming language; instead, it is a markup language structured using tags. When creating a basic HTML file, it is conventionally saved with the .html file extension.

In essence, an HTML file contains textual content, such as paragraphs or titles, organized with markup that instructs the browser on how to present the content to the user.

Simple example

<p>A paragraph of text</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

This HTML snippet says that A paragraph of text is a paragraph. And then we have a list of 3 items.

p stands for paragraph, ul stands for unordered list, and li stands for list item.

For each of them, we have an opening tag (like <p>), the content, and a closing tag (like </p>).

So <opening tag> â€¦content … </closing tag>.

Definition

Now I want to tell you something about HTML you should know.

HTML is not presentational. It’s not concerned with how things look.

Instead, it’s concerned with what things mean.

You don’t tell “make this paragraph red” in HTML.

That’s a presentational aspect.

Conclusion

HTML is just concerned with content.

It just adds some predefined styles here and there, like for example with the list. But that’s it. There’s no customization you can do on how it looks, in HTML.

This will be the job of CSS, but that’s a story for another lesson.

CSS Selectors: Class and ID basic filtering for HTML elements

by

We’ve seen the basics of selectors.CSS selectors offer versatile ways to target specific HTML elements for styling. While we’ve covered basic tag selectors, let’s delve into class and id selectors, showcasing their syntax and usage. Class Selectors To target elements with a specific class, use the class selector syntax: .class {}. Here’s an example: HTML: … Read more