header2000

In this class session, we will begin with a brief introduction to HTML terms and structure. We will then use an amazingly simple and free tool called Bluefish to create a basic web page. Our method is to learn by doing. We will learn HTML by creating a series of web pages. So let’s get started!

01

HTML Structure and the Bluefish Editor
HTML stands for the hypertext markup language. HTML is the primary language used to create web pages. There are literally billions of web pages made using HTML. HTML uses opening and closing tags to let a browser know how to display what is inside of the tag. For example, the p tag is used to display a paragraph.

02

Every page on the internet comes in two versions. There is the colorful page intended to be viewed by the public – and then the actual page rendered by the web browser.

03

Use your File Manager to Create Your Website Root Folder
The first step in building any website is to create the website root folder. Open Your File Manager and create a folder called My First Website. There are two ways you can create a new folder with your file manager. The first way is to go to your file manager top menu and click File, Create New Folder:

 

04

This will place a folder in your file manager called Untitled Folder.

05

You can rename this folder by right clicking on it. Then select Rename.

06

Select and delete the old name. Then type in My First Website as the new name for the folder. Then press Enter on your keyboard to confirm the new name.

07

To delete a folder, select and right click on the folder. Then click DELETE. This warning will appear:

08

Click Delete because we are going to learn a slightly quicker way to make a folder. Right click anywhere in the File Manager white workspace.

09

Click Create New Folder. This will place a new folder called Untitled Folder in the workspace. Right click on this folder and click Rename. Then name the folder My First Website. Then press Enter on your keyboard to confirm the new name. Then double click on this folder to open it. There will be nothing in this folder to start.

10

Right click on the workspace and click Create New Folder. Name this folder css (use lower case letters). Then press Enter on your keyboard to confirm the new name. Then right click on the workspace again and click Create New Folder. Name this second folder images. Then press Enter on your keyboard to confirm the new name. Your Website Root folder will look like the following.

11

How to Name Folders and Files
Note that other than the website root folder, the folder names above use only lower case letters. File names should also only use lower case letters. Avoid using capital letters with either folder or file names. If there is more than one word in a folder name or file name, for example, if you have a file for a web page called About Us, the file should ideally use dashes between the lower case words. For example, name the file about-us.html. You can also use lower case names with no spaces, for example aboutus.html. In addition to avoiding the use of capital letters, you should avoid using folder names or file names with spaces or dots or underscore marks between the names. Avoid about us.html or about_us.html or about.us.html.

Make a New HTML File with your File Manager
Each page on our website will have its own HTML file. The first and most important file for any website is called index.html. We can make this file or any other HTML file with either our file manager or the Bluefish Web Editor. We will first learn how to make web page files with our file manager. Open your website root folder, My First Website, and right click on the screen.

12

Click Create New Document.

13

This will bring up a second option. Click Empty Document.

14

This will place a new document called Untitled Document in the workspace. Right click on this document and click Rename. Then name the document index.html. Then press Enter on your keyboard to confirm the new name.

15

To get some practice creating HTML files, right click on the workspace again and click Create New Document, Empty Document. Name this second file about-us.html. Press Enter on your keyboard to confirm the new name. Then create a third document called contact-us.html. Here is what our workspace now looks like:

16

Before we can see what one of these files looks like with a web browser, we first need to put some content - such as a typing a sentence - in it.

Right click on index.html. Then click Open with Text Editor. A text editor is a simple version of a Web Editor.

17

There is nothing in this document. In the text editor work space, type This is my first web page! Then click File Save. Then click File Close. Your index.html file now looks different from your other two files.

18

It has a cute little globe to the left of its name. Right click on index.html again. This time click Open With (Firefox, Waterfox or whatever your default web browser is).

19

Your web browser will open any file that has dot html at the end of the name. While you have created your first web page, it is only text. It has no style. To make the web page prettier, we will need to add HTML tags.

We could add HTML tags with our text editor. Let’s give it a try to see how it is done. Close your browser and re-open the index.html file with your text editor. Type a new sentence. This time put HTML heading tags before and after the sentence. The opening tag or tag at the beginning of the sentence will look like this: <h1>

The closing tag or tag at the end of the sentence will look like this: </h1>. Note the forward slash after the greater than bracket.

Here is what the complete sentence should look like.
<h1> This is my first heading!</h1>

Then add a sentence with paragraph tags:
|<p> This is my first paragraph.</p>

Here is what our text editor workspace now looks like:

20

Click File Save, File Close. Then right click on your index.html file and open it with your web browser again.

21

HTML tags help the web browser tell what kinds of sentence each sentence is. Once the web browser saw that one of the sentences had heading tags, the web browser made that sentence bigger than the other sentences.

But the problem with adding tags to our HTML file is that it is very slow and very hard to add these tags. Did you notice how hard it was to create tags in front of and at the end of your sentences?

Thankfully, there is a way to make websites without having to add these tags one at a time. That way is to use the Bluefish editor instead of a Text Editor to make our web pages. Close the browser and delete the three files we just made by right clicking on them and clicking Delete. We are going to start over and make new and better HTML files. From now on, we will use the Bluefish web editor to make our HTML files.

Why the Bluefish Web Editor
In the early days of the web, folks used a simple text editor to create web pages. Writing HTML with a text editor takes a lot of time because each opening and closing tag has to be typed in manually. Because we want to make learning HTML easier, we will use a very nice, free, open source code editor called Bluefish. It will add the HTML tags for us and allow us to quickly view our progress while at the same time helping us to learn the code syntax without having to actually type in the opening and closing brackets. Bluefish will provide numerous clues as we make our document and even help us learn HTML as we create documents (which is the whole reason we are using Bluefish for this course).

Bluefish is a multi-platform code editor that runs on most desktop operating systems including Linux, MacOS-X and Windows. You do not need a license to download and run Bluefish. Bluefish is not merely a great HTML editor. It is also one of the best editors for creating CSS files. If you have a Windows or Apple computer, you can download Bluefish from the Bluefish download page: http://bluefish.openoffice.nl/download.html

If you have a Linux Mint computer, just open the Software Manager and type Bluefish in the Search Box. Then click on Bluefish and click INSTALL. Either way when you open Bluefish, you will see this Editor screen.

Sections of the Bluefish Editor

22

Initially, this interface might seem a bit complex – even intimidating with all of its options. But most of these options are rarely used. Because we want to focus on the workspace, we will hide the Side Panel, Status Bar and Snippets menu. These can all be re-opened with a click of a button if and when we need them. This will create a much simpler interface.

Sections of the Simplified Bluefish Editor
Click on the View Menu Item in the Top Main Menu, then un-check the Side Panel, Status Bar and Snippets Menu. This is the Bluefish Editor after hiding the Side Panel, Status Bar and Snippets Menu.

23

This important change will help us focus on the workspace.

Make an HTML Document with a the Bluefish Editor
When you open the Bluefish editor, you should find the following already on your screen.

24

If the screen is blank, copy and paste this into it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
<h1> This is a Heading </h1>
<p>This is a one sentence paragraph. </p>
</body>
</html>

Note that the doctype should be set for html and the character encoding or charset should be set for utf-8. These are required for all real HTML files. There are also several HTML tags already added to this document. But you did not need to remember or type in any of these HTML tags because the Bluefish editor has already done all of this for you. What you are seeing is called the default HTML5 Template. A template is a pre-made HTML document that you can modify however you want.

Save the file as an html file in your website root folder by clicking on File, Save As in the Bluefish top menu. This will bring up your file manager. Click on your website root folder to open it. Your screen will look like this:

26

Before you save the file, change the name from Untitled 0 to index.html Then click Save. Open your file manager. Here is what our index.html file now looks like in our file manager:

27

Right click on this index.html file and open it with your Web Browser.

28

Congratulations! You have made your first official web page – and you did it without typing in a single HTML tag!

Tip: If you would like to change your default HTML5 template, it is super easy to do with Bluefish. Simply open your file manager and click File System to open this folder. Then click USR to open this folder. Then click SHARE to open this folder. Then click Bluefish to open this folder. Then click Templates to open this folder. Then right click on the workspace and click Open as Root. Then right click on the HTML_5 file and select Open with Bluefish Editor to open it. Make whatever changes you want and then click File Save, File Close. Then close your file manager.

Now close your web browser. Let’s go back to our Bluefish workspace screen and take a quick look at the parts or components of an HTML document. Here is our initial Bluefish workspace screen:

29

There are 11 lines. What do these lines mean?

Structure of an HTML Document
An HTML document typically includes the following four parts:
#1 DOCTYPE… Telling the browser this is an HTML document.
#2 HTML ELEMENT Opening the HTML document
#3 HEAD including the meta data of the HTML document.
#4 BODY including the visible content of the HTML document.

Let’s take another look at our default Bluefish document to see if we can spot these four parts.
#1 DOCTYPE… Tells the browser this is an HTML document. Line 1 is the only sentence with an opening tag <> but no closing tag. Here is what the doctype should always look like:<!doctype html>

#2 HTML ELEMENT Opens the HTML document. Line 2 has an opening tag that also tells the browser what language to use. Whenever there is a statement such as lang equals followed by a property in parenthesis it is called an attribute. This is the language attribute for the html element. 

< html lang=”en”>The closing html tag for line 2 is on line 11: </html>

#3 HEAD opening tag: <head> Each HTML document can have only one HEAD element and one BODY element. Line 3 is the opening tag for the head of the document. Line 4 is a meta data statement telling the browser to use the utf 8 character set. This is the standard character encoding declaration: <meta charset=utf-8”>

Line 5 is the meta data title of the document that will appear in the top of the browser window. Meta key words and descriptions can also be added here as we will do later. Links to CSS Style sheets will also be placed in the head of the document as can links to Javascript files.

<title>My First Web Page</title>

Line 6 is the closing tag for the head of the document. </head>

BODY tag (also called the BODY element) signals the beginning of the visible content of the HTML document. Line 7 is the opening tag for the body of the document: <body>

Line 8 begins with a heading opening tag which is also called an element. This is followed by the heading of the visible part of the document. Then Line 8 ends with a heading closing tag.

<h1> This is a Heading!</h1>

Each HTML document should only have one H1 element – but it can have as many sub-headings as you want. So no limit on H2, H3, etc.

Line 9 begins with a paragraph opening tag. This is followed by a one sentence paragraph. Then Line 9 ends with a paragraph closing tag.

<p>This is a one sentence paragraph. </p>

The paragraph tag is also called an Element. Line 10 is the body closing tag and Line 11 is the html document closing tag.

What’s Next?
Now that we have a better understanding of the Bluefish Editor, in the next article we will take a closer look at the two most common HTML tags. These are the Heading and Paragraph tags.