HTML Introduction

 

HTML Introduction

Today, I'm writing this tutorial to create a resource that will help you learn HTML in less than 30 days. Here's a recommended timeline for learning HTML, based on your educational background:

  • High School students and younger: Around 25 days
  • Those beyond High School: Around 20 days
  • College students and above: Around 10-20 days

You may be wondering why I'm discussing these timelines. It's important for me to set expectations before you start your journey of learning html with me.

What is HTML?

HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991 as a standard for creating web pages. It's a markup language used to structure content on the web, defining elements like headings, paragraphs, links, and images. HTML forms the backbone of web content. In layman's terms, HTML is like the skeleton of a website. It's a set of instructions that tells a web browser how to display text, images, videos, and other elements on a webpage. Think of it as the building blocks that create the structure and look of a website, similar to how bricks and mortar are used to build a house.

In a nutshell:

  • HTML is the language of the web, used to create websites.
  • HTML defines the barebone structure or layout of web pages that we see on the Internet.
  • HTML consists of a set of tags contained within an HTML document, and the associated files typically have either a ".html" or ".htm" extension.
  • There are several versions of HTML, with HTML5 being the most recent version.

Features of HTML

  • It is platform-independent. For example, Chrome displays the same pages identically across different operating systems such as Mac, Linux, and Windows.
  • Images, videos, and audio can be added to a web page (For example - YouTube shows videos on their website)
  • HTML is a markup language and not a programming language.
  • It can be integrated with other languages like CSS, JavaScript, etc. to show interactive (or dynamic) web pages

Why the Term HyperText & Markup Language?

The term 'Hypertext Markup Language' is composed of two main words: 'hypertext' and 'markup language.' 'Hypertext' refers to the linking of text with other documents, while 'markup language' denotes a language that utilizes a specific set of tags.

Thus, HTML is the practice of displaying text, graphics, audio, video etc. in a certain way using special tags.

Note: Tags are meaningful texts enclosed in angle braces, like '<...>'. For example, the '<head>' tag. Each tag has a unique meaning and significance in building an HTML page, and it can influence the web page in various ways.

Quick Exercise:

Open a webpage of your choice, right-click on the browser, and select 'View Page Source,' and then you will see the HTML code for that page.This is the code that the server sent to display the page you're currently viewing.

A beautiful analogy to understand HTML, CSS, and JavaScript:

maxoncodes


In building a webpage, think of HTML, CSS, and JavaScript as different parts of a car. HTML is like the car's skeleton, forming the basic structure and frame. CSS adds the paint and finishing touches, making the car look appealing with color, style, and design. JavaScript is similar to the engine and mechanical parts, infusing the car with functionality, movement, and interactive features. Similarly, when developing a website, HTML lays out the structure, CSS enhances its visual appeal, and JavaScript provides interactivity and dynamic content

History of HTML:

  • In 1989, Tim Berners-Lee established the World Wide Web (www), and in 1991, he created the first version of HTML.
  • From 1995 to 1997, further work was done to develop and refine different versions of HTML.
  • In 1999, a committee was organized that standardized HTML 4.0, a version still used by many today.
  • The latest and most stable version of HTML is 5, also known as HTML5.

Feel free to read more history of HTML here on the HTML Wikipedia page but I will move ahead and cover important aspects of HTML.

In the next tutorial, we'll continue our journey and understand how websites work


Read more

HTML Working

 

HTML Working

You must have heard of frontend and backend. Frontend refers to the visible part of a website or app that users interact with, like the tables, images, and buttons. It's built using languages like HTML, CSS, and JavaScript. The backend, on the other hand, handles behind-the-scenes operations like storing and processing data when users interact with the frontend. It uses languages like Python, Ruby, and Java. In essence, frontend is what users see, while backend manages the functionality.

How do websites work?

When we want to access any information on the internet, we search for it using a web browser. The web browser retrieves the content from web servers, where it is stored in the form of HTML documents.

An HTML document is created by writing code with specific tags in a code editor of your choice. The document is then saved with the '.html' extension. Once saved, the browser interprets the HTML document, reads it, and renders the web page.

Read more

HTML Installation

 

HTML Installation

Let's get our hands dirty and start preparing to write some code. In this tutorial, we will install VS Code and some related extensions for faster and more efficient HTML development.


What are the prerequisites to learning HTML?

I can safely say that there are no prerequisites to learning HTML. HTML is the language of the web and is often the first step that web developers take in learning to code.


Tools needed to make an HTML page: 

1) HTML Editor: It's a straightforward tool where every piece of HTML content must be written. You can use any text editor of your choice. In this tutorial, we're using Visual Studio Code because it's lightweight and open-source.

Popular editors for HTML development include text editors like Notepad++ and TextEdit, code editors such as Sublime Text and Visual Studio Code, and full-fledged IDEs like WebStorm and Eclipse. Online platforms like CodePen and JSFiddle are also commonly used for quick HTML editing and testing.

Note: You can write HTML even in a Notepad. Text editors like VS code make these things easier.

2) Browser: HTML tags are not displayed by browsers; instead, they are read and interpreted to render the web page. In a web browser, HTML structures are displayed in a styled and visually appealing form. In this tutorial, we are using Google Chrome. Other commonly used browsers include Chromium, Firefox, Safari on Mac, and Microsoft Edge.


Installation & Setup of Visual Studio Code for HTML:

We will install and set up HTML to optimize its utility for creating web pages. Additionally, we'll install extensions in Visual Studio Code to enhance its functionality. If you're unsure about which editor to use, you can confidently start with Visual Studio Code. You won't regret it; it's one of the best free code editors available in the market.

  • Search for "Visual Studio Code download" on Google
  • Download Visual Studio Code for your Operating System. I am using Windows so I will install it for Windows

Here is a quick video showing VS Code Installation:

Read more

HTML Execution

 

HTML Execution

Your Journey to Creating Your First Website Begins Here!


Let's mark this as an important milestone: the creation of your first website! And what's a better way to start than with the traditional "Hello, World!"?


Why "Hello, World!"?

In the programming world, "Hello, World!" is more than just a phrase. It's a tradition, an emotion, a simple program that teaches you the syntax and gets you started. And guess what? HTML is no different!

Our first website will display the text 'Hello World'


Let's Get Started: Setting Up Your VS Code

If you haven't already set up your environment, let's begin by opening Visual Studio Code (VS Code).

Read more

HTML Page Structure

 

HTML Page Structure

An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
   <!-- content -->
</body>
</html>


This is how the title appears on an HTML page:

A typical HTML page looks like this:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Almost every website uses this structure. The main content goes inside the body tag. No worries if this looks complicated; let's break it down!

Note: These are the essential elements for a basic HTML document: <!DOCTYPE html>, <html>, <head>, <title>, </head>, <body>, </body>, </html>


DOCTYPE Declaration

<!DOCTYPE html>

The <!DOCTYPE html> declaration informs the web browser about the HTML version being used. The latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype declaration will be helpful!


HTML Root Element

<html>

The <html> tag is the root element that encapsulates all the content on the page.

</html>

The </html> tag marks the end of the <html> section.


Head Section

<head>

The <head> tag contains metadata and links to external resources like CSS and JavaScript files.

</head>

The </head> tag marks the end of the <head> section.


Title Tag

<title>Document</title>

The <title> tag sets the title of the web page, which is displayed in the browser's title bar or tab.


Body Tag

<body>

The <body> tag contains the visible content of the web page. This is where text, images, and other elements go.

</body>

The </body> tag marks the end of the visible content of the web page.

Every HTML page should include at least these essential elements to define the basic layout. In upcoming tutorials, we'll dive deeper into the fascinating world of HTML.


Summary

  • The <!DOCTYPE html> tag specifies that the document is an HTML5 document.
  • The <html lang="en"> tag defines the document to be in English.
  • The <head> section contains metadata and the title of the webpage, which appears in the browser's title bar.
  • The <body> section contains the content that will be displayed on the webpage.
  • The h1 and p are two types of tags. We will learn about more tags in the later section


Visualization of an HTML Document:

The following image provides a visual representation of the HTML structure:

html.maxoncodes.com


How This Content Appears in a Web Browser:

Consider this html code:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1> This is a heading</h1>
    <p>This is a paragraph</p>
</body>
</html>

Below is an image showing how this HTML document will be rendered in a web browser:

html.maxoncodes.com

In the browser, the title bar will display the content from the <head> section, specifically the <title> tag. The main area of the browser window (usually a white background) will display the content inside the <body> tag.

In the upcoming sections, we will learn about html tags and elements. 

Read more