98.7% Of all customers recommend us, we're so confident about our results we publish all reviews and stats
View Live Stats View ReviewsPrevious article Next article Dreamweaver articles
A Brief Introduction To HTML Tags In Dreamweaver CS4
Mon 21st September 2009
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 </ P > 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 </ P > 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.
Author is a freelance copywriter. For more information on dreamweaver training courses, please visit https://www.stl-training.co.uk
Original article appears here:
https://www.stl-training.co.uk/article-579-a-brief-introduction-html-tags-in-dreamweaver-cs4.html
London's widest choice in
dates, venues, and prices
Public Schedule:
On-site / Closed company:
TestimonialsP&O Ferries Limited
Revenue Analyst Pauline Hasler Access Introduction This has been a really good course and will now help me to understand some of the things I can achieve in Access. I would love to do the Intermediate course. People 1st
Accounts Sharon Garcha Excel Intermediate The training was very helpful and useful. Thank you. Stanley Gibbons Ltd
Cataloguer Claire Cocks Excel Intermediate I was very happy with the course and discovered lots of useful hints for helping me with my work. |
PUBLICATION GUIDELINES