Part 1: The HTML Foundations

HTML stands for HyperText Markup Language, and it is the language that defines the structure and content of web pages. it consists of elements, attributes, and tags that tell the browser how to display the text, images, links, and other elements on a web page. HTML is not a programming language, but a markup language that describes the meaning and presentation of the information on a web page.

Setting Up Your System

You don't need much to make web pages. Your plain text editor and a web browser are about all you need.

Web browsers are programs that read HTML documents and display them. They rely on HTML tags to determine how to display the document correctly. Common examples are Safari, Chrome, Edge, Firefox, etc.
Text editors are simple programs for creating and editing plain text files, without formatting or layout. They are used for programming, writing scripts, and configuring systems. Examples include Sublime Text, Atom, Visual Studio Code (VS Code), and Notepad++. I prefer VS Code text editor, but this is just a personal choice as there are tons of other editors you may prefer.

HTML VS HTML5

In the bad old days, the web was an informal affair. People wrote HTML pages any way they wanted. This caused several problems like lack of standardization, inconsistent websites across different browsers, etc. In 2000, the World Wide Web Consortium, or W3C came up with a stricter form of markup, or eXtensible Markup Language (XML) that complied with standards. There have been several changes made to HTML since then and we are now in HTML5.2.

HTML Basics

HTML Tags

HTML tags are the text inside angle braces (<>). They aren't meant to be displayed on the webpage but offer instructions to the web browser about the meaning of the text. The tags are meant to be embedded into each other to indicate the organization of the page.

HTML Elements

HTML elements on the other hand refer to all the content starting from the opening tags to the closing tags.

Though most HTML elements are in the order shown in the picture above, there are however a less popular set of elements called void elements, empty elements, or self-closing elements. For instance:

<img src="image.jpg" alt="An image">
<br>
<input type="text" placeholder="Enter your name">

In the code above, <img>, <br>, and <input> are void elements. They don't require a closing tag because they don't have content that needs to be enclosed.

Nested Elements

HTML allows you to nest elements within one another. This means you can place one element inside another to create a hierarchy or structure for your content. For example:

<body>
    <h2>Hello Africa</h2>
    <p>Hello Altschool</p>
</body>

In the code above, the <h2> and <p> elements are nested within a <body> element. This nesting helps organize and style content effectively.

Attributes

In HTML, all elements can be accompanied by attributes. These attributes serve the purpose of supplying supplementary information about the elements. They are consistently specified within the opening tag of an element. Typically, attributes are structured as name/value pairs, following the format of 'name="value"'. This mechanism enables elements to convey specific properties or behaviors, enhancing the versatility and functionality of HTML in web development.

It's important to know that different HTML elements may have different attributes.

Creating a Basic HTML page

Here's the great news: The most important web technology you need is also the easiest. No more talking! Fire up a computer and build a web page!

create a text document and save it with myFirst.html. The ".html" part of the name is the extension suggesting that the created document is of type HTML. The first part of the name, myFirst is the the name of the file. You can name it whatever you like as long as it follows the file naming guide of your Operating system.
Open the created file, myFirst.html file in your chosen editor.

Copy the code below and paste it into your editor.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My First Webpage</title>
 </head>
 <body>
     <h1>Hello World</h1>
     <p>Hello Altschool</p>
 </body>
 </html>

Save the changes and open the myFirst.html file in your browser. What do you see?

If what you see is anything like the image below, then congratulations on writing your first webpage.

Understanding the Basic HTML Page Code

Now that we've introduced the concept of HTML and touched on the structure of web pages, let's take a closer look at the HTML code we used earlier to create our first webpage. Understanding this code is crucial as it forms the foundation of web development.

Let's break it down step by step:

<!DOCTYPE html>: This declaration specifies that the document type is HTML5, the latest and most commonly used version of HTML.
<html lang="en">: The <html> element is the root of an HTML document. It indicates where the page begins and ends. The lang="en" attribute specifies the language of the document as English.
<head>: The <head> element contains meta information about the document. This is where we specify the character encoding with <meta charset="UTF-8">, which tells the browser to use the UTF-8 character set, commonly used for English text. The <meta name="viewport" content="width=device-width, initial-scale=1.0"> element plays a crucial role in making your web page responsive and mobile-friendly.
<title>My First Webpage</title>: The <title> element sets the title of the webpage, which appears in the browser's title bar and is used by search engines for page descriptions.
<body>: The <body> element contains the main content of the webpage. It's where you place text, images, links, and other elements that users will see and interact with.
<h1>Hello World</h1>: This line defines a top-level heading using the <h1> element. Headings provide structure to your content, with <h1> being the highest level (most important) heading.
<p>Hello Altschool</p>: Here, we have a paragraph enclosed in <p> tags. Paragraphs are used for text content. You can have multiple paragraphs to organize your text.

What You've Achieved So Far

By following the code and explanations, you've successfully created your first HTML webpage and viewed it in your browser. You've gained a solid understanding of the basic structure of HTML documents.

Next in the Series: More on HTML Elements

In the next part of this series, we'll go deeper into HTML elements. Get ready to enhance your HTML skills and continue building your web development knowledge!

Stay tuned!