01Kicking off with Nano

Nano, a simple yet powerful text editor native to many Unix-like systems, is our tool of choice. Check it is installed on your system with nano --version and press Enter. If it's missing, install it with Homebrew on macOS with brew install nano.

Let's create and open a new HTML file with Nano by typing the following command:

$ nano mywebpage.html

This will open a new blank file named mywebpage.html in Nano.

02Writing the basic structure of an HTML page

In the newly opened mywebpage.html file, we will start by adding the basic structure of an HTML page. Here's what you need to type:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body></body>
</html>

Here, <!DOCTYPE html> is the document type declaration. The <html> element is the root of an HTML page. The <head> section is used for metadata and the <title> tag specifies the title of the webpage. The <body> tag contains the content of the webpage.

03Adding content to your webpage

Let's add some content to our webpage. In the <body> section of your HTML document, add the following lines:

<h1>Welcome to My Webpage!</h1>
<p>
  This is a simple webpage created using Nano, the terminal-based text editor.
</p>

The <h1> tag is used for the main heading and the <p> tag is used for a paragraph.

Adding style to your webpage

Well, this is where we will have to draw the line. Remember the terminal is text-based and the Lynx browser that we going to use to view our webpage doesn't allow visual changes at all. You can add styles for later viewing in a browser like Chrome or Safari as these browsers will display styles. Using the h1 tag for the title will display the title a bit differently to differentiate it from the p tags in Lynx.

04Saving and closing your file

Now that you've written your basic webpage, you need to save your changes and close the file. To do this in Nano, press Ctrl+O to save the changes, hit Enter to confirm the filename, and then press Ctrl+X to close Nano.

05Viewing your webpage

You can view your newly created webpage directly from your terminal using a text-based web browser like Lynx.

$   lynx mywebpage.html

You've just created a simple webpage using nothing but your terminal and the Nano text editor. This demonstrates the power of the terminal and how it can be used to perform even web development tasks.