A Brief Introduction To HTML Tags In Dreamweaver CS4

So what's all this about HTML tags you may wonder. Dreamweaver does all the coding for you so you can concentrate on the contents of your web pages. Quite right, but you might want to look at how the page is built and in the future you might be interested in exploring the HTML coding which Dreamweaver uses to build each page. (HTML stands for Hyper Text Markup Language).

When you launch Dreamweaver CS4 you're first taken to the Welcome screen. By choosing an option under the middle column headed "Create New" you can create a new blank web page. The first option "HTML" builds this page using only HTML coding and is a popular choice when first starting to create web pages. The others options use HTML code combined with additional specialised code, for example, to create web pages to be linked to a database. In this article we'll look at HTML code on its own. So under the "Create New" heading click the option HTML. This creates a new blank page using HTML code.

With your new page open ensure that you're viewing in Design mode - the Design toolbar button should be on. Although the new page is blank, Dreamweaver has already created HTML code for it. To have a look at the code select the Code button. You'll now see ten lines of code (Dreamweaver helpfully numbers the lines) which come as standard for all new pages. The top two lines are automatically created in each HTML pages and should not be touched.

The HTML code which follows consists of paired tags, and for each pair there is an opening and a closing tag. The text surrounded by angle brackets (the less than and more than symbols) is called an opening tag, and if the text has a forward slash as well, then it's called a closing tag. For example < BODY > is an opening body tag and < /BODY > is a closing body tag.

HTML applies features to text or other page content by placing an opening tag before the item and a closing tag after it. So the enclosed item will show that feature when displayed in Design view. The body tag is used to enclose all the page contents, so everything which appears between the body tags will appear on the web page.

We can illustrate using tags by editing the HTML code. But first we'll add some text to our page. So still in Code view, ensure the cursor is just right of the body tag, but after the angle bracket. Now type "This is a test" without the quotes. Switch to Design view (click the button) and voila there is your text. Staying in Design view type " to show an example" without the quotes, immediately after the previous text, then switch back to code view. You'll see the text continuing within the body tag. So you can work in either Design view or Code view to create content.

Now we'll use an HTML tag to apply bold formatting to some text, so switch back to Code view and place the cursor immediately before the word "test". The tag for making text bold is < STRONG >, so type the less than symbol "<". Notice that Dreamweaver creates a drop down to help you choose the tag. Type "s" without the quotes and the drop down changes to show all the tags starting with "s". Type a "t" and the pop down shows all tags beginning with "st" and so on. Double click "strong" on the pop down to apply that tag, then type ">" to complete it. Next place the cursor immediately right of the word "test" and type the ">/" symbols. Dreamweaver knows you're closing the previous tag and adds < /STRONG > for you. Now switch to Design view to see the bold text.

Another useful HTML tag is the pair < P > and used to create a new paragraph. By the way is you stay in Code view and type a return after the exit, and then type some more text, you'll notice that in Design view the text does NOT start a new paragraph. You need to add a paragraph tag to the required text to achieve this. So still in Code view remove the return you just applied. Instead add the < P > tag immediately before the text intended for the new paragraph, and immediately after it. Remember to add a close tag after the target text or item as otherwise you can created unintended effects. Switch back to Design view and now you should see a neat second paragraph.

You can learn much more about HTML tags by attending one of the many courses available on using HTML in Dreamweaver. This would be a really good way to develop your HTML skills.