Module 7.1 - Editing Text Files

Before we begin working with HTML, you need to be able to create and edit a text file.

Text Editor

You may be familiar with Microsoft Word, a popular word processor. Microsoft Word is what is known as a WYSIWYG editor: What You See Is What You Get. When you bold text in Microsoft Word, the text appears bolded on the screen, and when you insert a picture into a document, you can see the picture. WYSIWYG editors are great tools, but they hide and obscure much of the formatting "language" that is used. For the next few modules, you should not be using a WYSIWYG editor. Instead, you should be using what is known as a plain text editor.

Both Windows and Mac are equipped with plain text editors, but there are alternative editors that you can download that are easier to use and more powerful. Windows has Notepad, but a much better alternative is Notepad++. Mac OSX has TextEdit, but a much better alternative is TextWrangler.

File Extensions

In this module you want to generate files with an .html file extension (e.g., "hello.html").

Some text editors may try to add an additional .txt at the end of your files so you end up with awkwardly named file such as "hello.html.txt". This problem may be compounded if your operating system is hiding the file extensions of your files. If your operating system is hiding the extensions of your files, simply google "how to show file extensions on a pc" or "how to show file extensions on a mac" to change this behaviour.

Your First Web Page

Open up your text editor, and type out the following text exactly (you can cut & paste), and then save it as hello.html.

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello, World!
</body>
</html>

As you might have guessed, this is an HTML file. It may look a little scary, but we will explain everything shortly.

You should be able to view the file in your web browser. If you try to launch your hello.html file (e.g., "double-click" the file) it will most likely launch your web browser and display the Hello, World! message. Alternatively, you can drag & drop the file into an open web browser.

.html files are most likely associated with your web browser, so your web browser is opened to view the file. Because of this, to edit (modify) an .html file, you will have to open it from within your text editor.

You can also upload the file to your personal web space as you did in assignment 5 (consult that assignment for further instructions).

If you upload the file correctly, you will be able to view your file by visiting it at your web page:

https://www.student.cs.uwaterloo.ca/~YOURUSERNAME/hello.html.