header2000

3 Build a Basic Web Page

Below are links to the articles and assignments for the two class sessions in Week 3. In these two class sessions, we will explain how to use the Bluefish Web Editor to more easily and rapidly create a basic web page. Our method is to learn by doing. We will learn HTML by creating a series of web pages.

Paste or Type Your HTML in this box!
View Your Result Below...

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:

In the last section, we introduced the Bluefish Editor. In this article, we will use the Bluefish Editor to add Heading and Paragraph tags to a web page. But first, we will take a closer look at the anatomy of an HTML tag.

Anatomy of a Simple HTML Element
The Bluefish Editor comes with a Tag tool that will automatically insert the correct tag syntax as you type in new lines on your web page documents. We will look at how this tag tool works in a moment. However, it is useful to first have a basic understanding of HTML tags. HTML tags come in pairs and tend to look like the following: <tagname>Content</tagname>

Note the slanted forward slash in the end tag or closing tag.

01

Note that there is a slight difference between the terms “HTML element” and “HTML tag.” An HTML element has a pair of tags and includes the content between the tags. Here is an example of an HTML element: <p>This is my first paragraph</p>

The Two Most Important HTML Elements
There are more than one hundred HTML elements. But most of the time, we will use the following two common elements: Heading Tags and Paragraph Tags.

Heading Tags
Every HTML document should include a heading tag because Search Engines will look for the heading tag in order to categorize the web page. HTML defines six special types of tags for use as headings on a web page. The six are <h1> through <h6>. The intent of these tags is to define divisions and subdivisions in the document, similar to chapters, sections or topics of a book. Headings form the structure of your web page and the structure of your entire website. Here is an example of a pair of heading tags: <h1>This is my first heading!</h1>

Paragraph tags
Paragraphs are containers used to hold our sentences. A paragraph can have a single sentence. Or it can have a bunch of sentences. Every paragraph should begin with an opening <p> tag and end with a closing </p> tag. Here is an example of a pair of paragraph tags:
<p> This is an example of a paragraph that has more than one sentence. This paragraph has two sentences. </p>

Side by Side Editing
Now that we have a better understanding of the Bluefish Editor, we are almost ready to create our first web page. But first, resize the Bluefish Editor so that it only takes up the left half of the screen. Then open your web browser in the right half of the screen. Our goal is to create the document with Bluefish and then view the result with our web browser. Here is what the end result should look like on our desktop:

02

Four Ways Bluefish Makes Coding Super Easy
In a moment, we will use the Bluefish Editor to make more paragraph and heading tags. But before we do, we should explain that Bluefish offers four different tools to create HTML code. These are a Code Template Tool, a Code Completion Tool, a Code Insertion Tool and a Code Wizard Tool.

03

Let’s review how each of these tools work.