Skip navigation

Cascading Style Sheets act upon elements in HTML called Tags so we’re firstly going to create a simple HTML page and take a look at some simple Tags.

Open a new page in Dreamweaver (File>New>HTML>layout none)

Make sure you have the viewing options set to ‘Split’. That you can see the HTML your generating whilst working in Design view. This is a great way to learn which tags do what.

The first thing to do is set the Title of the page. The page Title is the text that appears at the top of the browser, e.g. ‘Creating a Self Promotional Website’. To do this fill in the field at the top of the Dreamweaver interface called Title.

You can see in the code window that the title you entered appeared between <title> and </title>, these are tags. All tags have angled brackets around them and most tags have opening and closing sections. The opening tag has angled brackets the closing tag has a slash after the tag name. There’s a comprehensive list of tags here.
So this is general structure of a tag:
CSS

When you create a new HTML file in Dreamweaver there’s a number of tags already in there, the ones you need to worry about are <head> and <body>.

Content within the <head> tags contains information about the page, for example who created the page and where the CSS is stored. Generally content within the <head> tag won’t directly appear on the page.

All the visual elements on a page appear within the <body> tag.

Let’s add a header into our page. To make it more prominent we’ll apply a heading tag to it. Properties Panel > Format > H1

To create a space after the title hit Enter on the keyboard. You can see Dreamweaver has added <p></p>, these are paragraph tags.

For the body copy we’ll use Lorem Ipsum, it’s been used for 500 plus years for type setting. Paste this text into Dreamweaver.

Let’s use some of this text as a subheading so select the first sentence and make it bold. Properties Panel > B and italic Properties Panel > I.
You can see Dreamweaver has added <strong> and <em> (emphasis) tags around that content.

The subheading would stand out better if it started on a new line (but remained in the same paragraph).  If you hit Enter after the first sentence Dreamweaver will think it’s a new paragraph and add unnecessary vertical space into the paragraph. To add a line break without creating a new paragraph hit Shift AND Enter. You can see Dreamweaver has now added in a break tag <br />.

It’s time to save this genius piece of design. File>Save.
Save the file somewhere where you can easily find it again. Call it index.html. It’s called that so the web server you’ll (in theory) put this web page on knows it’s the first HTML file to display, the homepage. The names of your HTML files shouldn’t have spaces in them or contain uppercase letters. Some web servers can handle this, some can’t.

Find where you saved the HTML page and open it in a web browser to see it in all it’s glory. To speed things up you could go File>Preview in Browser>Browser name.

Now let’s add an image to the page. After the body copy create a new paragraph by hitting Enter. Find an image on your computer or the net, no wider than a 250 pixels, so pretty small. Place this image in the same directory as your index.html page. Click Insert>Image>imagename.jpg.

You can see Dreamweaver has inserted the image tag <img>. It has the source attribute (src) of “filename.jpg”, a width and height. The image tag like the break tag doesn’t need a closing tag.

After creating such a beautiful looking page you’ll want to credit the guy who showed you how to achieve this, understandable, so let’s add a link to this promotional site in.

Create a paragraph after the image by hitting Enter, type in something complementary and highlight the text. Paste in the URL of this site https://promotionalwebsite.wordpress.com. It’s important not to forget the http:// bit.

Dreamweaver has added in hyperlink tag <a> with a hypertext reference (href) attribute of this site’s url. Preview the site.

This page is starting to look like the web page we viewed with the style sheet off. That’s because it contains no styling or layout information. We’ll come to those later. The tags you’ve seen so far form some of the most common and important tags you’ll come across.

Now it’s your turn to create this simple page.

Open Dreamweaver
Create a blank HTML document
Make sure your viewing the page in Split mode
Insert some body copy
Create a heading <h1>
A bold, italic subheading with no line break before the body copy
Save the file as index.html
Add an image
Add a link
Stand back and admire your page

It’s important that at this stage you don’t try to change the font’s attributes, colour, size, face, using Dreamweaver’s properties panels. Dreamweaver helpfully adds in it’s own embedded style sheet which will muck up the external style sheet which we’ll add later.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: