Post a Simple Web Page

Ok, let's play with the web server and see what we've got!

Test #1: Try a simple file. Remember that hello.txt file you created in the 'Quick emacs Tutorial'? Let's copy that file to the /var/www/html directory so that the web server can serve it. Note that the Super User owns the /var/www/html directory, so you need to use sudo to copy files into that directory:

ubuntu@ubuntu:~$ sudo cp hello.txt /var/www/html/

ubuntu@ubuntu:~$ ls /var/www/html

hello.txt index.html

ubuntu@ubuntu:~$

 

Now in your browser, append /hello.txt to your IP address in the URL window and press 'return' and you should see your 'Hello Dean!' text. You've just posted your first file!

Test #2: let's make a web page! Simple web pages are created using HyperText Markup Language, or HTML, which consists of a bunch of tags in <brackets> that describe how to display the content.

The basic structure of an HTML file looks like this:

<html>

    <head> (data about the webpage goes here, like the title and the language)

    </head>

    <body> (actual web page content goes here)

    </body>

</html>

 

Note that most HTML tags have a beginning tag and an ending tag that includes a slash ('/').

Let's create an HTML version of our 'Hello Dean!' text file. Run emacs -nw hello.html and add the following content:

<html>

    <head>

        <title>Greetings</title>

    </head>

    <body>

        Hello Dean!

    </body>

</html>

 

Note that as your are typing this, you can press 'tab' and emacs will correctly indent your line to help remind you of where you are with your tags.

Save and exit this file, and then copy it to /var/www/html with the following command: sudo cp hello.html /var/www/html. Then open your browser and append '/hello.html' to your Raspberry Pi IP address in the URL window to view this file.

How is the display of this file different from 'hello.txt'? Did you notice that the title bar of your browser has changed?

Copyright 2020
  • Facebook - Black Circle
  • Twitter - Black Circle
  • YouTube - Black Circle
  • Instagram - Black Circle
Follow us on these platforms