Creating Common HTML Elements with BlueGriffon

Creating the most common HTML elements

Below you will find a map to the most common elements that I utilize in Blue Griffon. As you are learning the tool and HTML markup, create each item type and then toggle to the source view to see the resulting markup.

1. This pull down lets you assign an element type to any selected text.
2. This tool lets you insert a table or access the table properties dialog modify an existing one. Check out this page for more information on creating and working with tables.
3. This is the insert picture tool. Selecting it will allow you to embed an image and assign properties to the image. Prior to inserting an image, it is a good idea to put all your images in a directory near where your page(s) are located, such as /images. This will allow you to create a relative link to the page and make it more portable once you are moving it to a web server. Note the option to use a relative location will not be enabled unless you have saved the page. You should have done this at the very beginning of your project, though, so you're probably all set. By default you have to enter a value for Alternate text. This is a good practice, but if you are too lazy to come up with something and willing to sacrifice accessibility standards, you can check the option to allow it to be empty.
4. This is the link tool. It is used to create links to other pages (anchor tags) or create a link to an email address (mailto: link). Like the image insertion dialog, once you have saved your page, you will have the option to create relative links. Those are in use on the left side navigation of this page. If you identify your link as an email address, it will make a mailto link like the one below. I did this with my name in the footer of this page.
   

   <a href="mailto:dmundorff@gmail.com">Deborah Mundorff</a>

5. This is the tool to insert video. There are limited supported video formats.
6. This is the insert audio menu option.
7. This in the unordered list tool. (ul) This can be used either by selecting text and then choosing the tool to convert it to a list or clicking to start the creation of a new list. An unordered list will create a bullet list item that is unnumbered.
8. This is the ordered list tool, used to create a numerical list. It was used to create this list. (ol)