header 2000

1 Create a Basic Web Page

Welcome to the first chapter in our course, Learn HTML and CSS. In this chapter, we will explain how to use the Bluefish HTML Editor to more easily and rapidly create a basic web page. Our method is to learn by doing. We will learn HTML and CSS by creating a series of web pages – typically one web page for each section in our course – or four web pages in each chapter of our course. Chapter 1, Create a Basic Web Page, is divided into the following four sections:

1.1 HTML Terms, Structure & the Bluefish Editor

1.2 Headings & Paragraph Tags

1.3 Table Tags to Display Data

1.4 Ordered, Unordered & Nested Lists

Section 1.1, HTML Terms, Structure & the Bluefish Editor, introduces the most important HTML terms as well as providing an overview of how to use the Bluefish HTML editor.

Section 1.2, Headings & Paragraph Tags, shows how to use the Bluefish Editor to automagically insert heading and paragraph tags into a simple web page.

Section 1.3, Table Tags to Display Data, explains how to create a basic HTML table.

Section 1.4, Ordered, Unordered & Nested Lists, describes how to make HTML lists. This is just the beginning. Much more information is provided on headings, paragraphs, tables and lists in later chapter. So let’s get started!

1.0.00

In this article, we will begin with a brief introduction to HTML structure and then use a text editor to create an HTML document. We will then use an amazingly simple and free tool called Bluefish to create a basic web page.

HTML Structure and the Bluefish Editor

HTML stands for the hypertext markup language. This language was developed by Tim Berners-Lee in 1991. It has been used as the primary language to create web pages ever since. There are now literally billions of web pages made using HTML. HTML uses markup opening and closing tags to let a browser know how to display what is inside of the tag. For example, the h tag is used to display a heading, the p tag is used to display a paragraph and the image tag is used to display an image.

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.

1.1.01

Right click on any web page, then click on View Page Source to see the real version of the web page which is its hidden or underlying HTML code . For example, here is the home page for Learn HTML and CSS:

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 Tag

The Bluefish Tag tool will automatically insert the correct tag syntax. However, it is useful having a basic understanding of HTML tags. They tend to look like the following:

<tagname>Content</tagname>

Note the slanting line in the ending tag.

Here are some examples of simple tags:

<p>This is my paragraph</p>
<li>This is my list item</li>

The Two Most Important HTML Tags

There are more than one hundred HTML tags. But most of the time, we will use the following two common tags:

Heading Tags

Every HTML doocument should begin with 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 paragraphs for use as structural 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. Headings form the structure of your web page and your entire website.

Paragraph tags

Every paragraph should begin with an opening <p> tag and end with a closing </p> tag.

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 run Firefox in the right half of the screen. Our goal is to create the document with Bluefish and then view the result with Firefox. Here is what the end result should look like on our desktop:

1.2.01

Create Your Website Root Folder
Open Your File Manager and create a folder called My First Website. Create folders in your Root folder for your website articles, css, extensions, html_files, images and videos. Your Root folder will look like the following:

HTML Tables have lots of uses. Here is one:

TIP

You can use a single row table to create a simple feature box that points out important information!

HTML Table Tags have gotten a bit of a bad name in the past 10 years. For the first 10 to 20 years of the internet, HTML Table tags were used on nearly every website to layout the position of content on each web page. All content was placed in Table boxes called Table Rows and Table Cells. However, this resulted in Static looking web pages that had a fixed with for the entire page and a fixed width for every column and cell on the web page.

The rapid rise of mobile screens, thanks to internet enabled smart phone and tablets, required the move from Static Layouts to Responsive Layouts – or layouts that changed on the fly depending on the width of the screen used by the reader to view the web page. Responsive layouts meant replacing HTML Table tags with floating divides – which we will cover in Chapter 3.

Thus, most courses on HTML now insist that Table tags only be used for displaying data. This is not entirely good advice. Tables can and should be used for creating colorful Feature Boxes to break up and add interest to a web page. Tables can even be responsive to the width of screen readers. We will cover this topic in Chapter 9.

Table tags are also used to create color HTML Email newsletters. This is because many email services are extremely primitive and may not support the Divide tag or Floating boxes. If you want your HTML newsletters to display properly, you will need to create them using Table Tags. We will cover this topic in Chapter 10.

Thus, in this Chapter, we will introduce HTML Table Tags and explain how to use them to display data. Open up your Bluefish Editor and use the Quick Start icon to create the head of a new HTML document like we did in our previous sections. Call the HTML document My First HTML Table and save it to your HTML documents folder remembering to add the dot html extension at the end of the file name. You should now have four html files in your html folder.

1.3.01

There is a minor problem with the Bluefist Quick Start method for creating HTML files. There is no language attribute in the html opening tag. It should look like this: <html lang=”en”>

Instead, it looks like this: <html>

To solve this problem, whenever we create an HTML document with Bluefish, copy and paste the lang=”en” attribute into the html opening tag. Then save the document. Here is what the head section of the document now looks like before we have added any content.

1.3.02

Remember that all HTML documents should begin with a heading in an H1 tag to be recognized by search engines. They should also have at least one sentence in a paragraph tag as we typically want to anchor images and other elements to paragraphs. To create the H1 and P tags for this document, let’s use the quick icons rather than the top menu.

Here is what our workspace looks like after adding a Heading and Paragraph:

I am not a fan of either ordered or unordered lists because they display unpredictably in different web browsers and when imported into CMS editors. I try to avoid lists whenever possible. However, since nearly all menus consist of lists, you should have at least a basic understanding of list tags. We will therefore begin with simple lists and then conclude with an example of a more complex list. We will describe the formatting of a list to turn it into a menu in a later chapter. The three tags we will review in this article are the unordered list tag, the ordered list tag and the list item tag.

<ul></ul> The  element represents an unordered list in HTML.
<ol></ol> The  element represents an ordered list in HTML.
<li></li> The  element represents a list item. List items are used inside of both unordered and ordered list.

Make a Simple Unordered List
Unordered lists are often used to create menu horizontal and multi level menus. Open the Bluefish Editor and create a new HTML document called My First Web Lists. Below is the HTML lists document with a title and sentence.

1.4.01

It is open to the List tab which has 7 quick launch icons. Create a new line below the paragraph closing tag. Then click on the first icon which is the Quick List Wizard. Set it for three rows as an unordered list. Then click OK.

Here is the Quick List Wizard.

1.4.02

Here is the resulting HTML code.