Create an HTML page

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design.

The topic we are covering today is: How to create your first HTML page.

In the previous tutorial we looked at how to define a site which you need to do first. Now we are going to look at creating our very first HTML page. It’s going to be nice and basic. We are going to preview it and then we are going to work on to some more advanced parts. For the first session, we need to look at creating our first Dreamweaver page.
File > new HTML page

So first go up to ‘File’ and then ‘New’. Within here, we need to be on this one that says ‘Blank Page’. And we are going to be creating an HTML page. An HTML page is a very common, normal, standard web page. You should be able to leave all of the defaults. If you are using an earlier version of Dreamweaver you wont have this doc type ‘HTML 5’. You will have HTML4.1 transitional. It’s just an older style of HTML. The new version of Dreamweaver, CC and above, uses HTML 5 but if you’ve only got this older version this will work just fine for what we are going to do in this course.

Hit ‘Create’, this creates an untitled document. First, you need to save it. Go to ‘File’ and then to ‘Save’. It’s going to allow us to name it as this HTML file.
Name your page index.html

When it comes to naming your files there’s one specific file which is your home page, which needs to have a very specific name. It needs to have the word ‘index. html’. This is the very first page that somebody, google, chrome or firefox or internet explorer is going to go looking for in your website to load first. This is the first page that an audience is going to see when they go to your website. So it has to be named like this. If you have a website and it has 100 other pages but it doesn’t have an index, someone like Firefox or Google Chrome won’t load any pages. So you have to have at least one page called ‘index.html’. So make sure you use a lower case ‘i’ and let’s hit ‘Save’. So it’s named ‘index’ and it’s going to be our home page.
Adding a page title in Dreamweaver CC

The first thing you should do when you create a home page is to give it a title. Now the title in here is important for a number of reasons. The first reason is for the Google search engine. If you want your website to list well you need a clear title. So if you leave it as the default ‘untitled’, its going to end up with a really bad ranking. So let’s explore that.

The title for this page is going to be ‘Dreamweaver Tutorial Website’. Make your title unique to your website. We are going to make sure to have good clear key words in there. So this website is about Dreamweaver tutorials. Once you have typed in here, go to down the bottom here. This is your body area. This is where your website goes. We are going to type a little bit of text. We are going to say ‘creating a website is easy with Dreamweaver’.
Testing your HTML page in Dreamweaver

To find out what this title does, I am going to hit file save and then go to ‘File Preview’ and ‘Browser’. So this is going to try to preview it on one of the browsers installed on your machine. If you’re using a PC its going to use I Explore which uses Internet Explorer. If you’re using a MAC it’s probably going to have Safari. As a designer I like to install Firefox and Google Chrome which are alternatives and preview using these as well. If you have installed them and they are not appearing on this list. You will have to go to ‘Edit Browser List’ and go and find them.

I'm going to preview this using Google Chrome. It’s the more popular one. Its over ridden Firefox and Internet Explorer. You will see that it has done a couple of things. It has previewed the bit of text in here. And you will see up here in this little tab that it has given me the page title ‘The Dreamweaver Tutorial Site’. So that’s one of the reasons you put a title in, it appears up here. And when someone book marks your site, its this little bit of text that gets included in your book mark. But what it’s really good for is Google search results.

Why have a page title

So if I go to google.com.au and I do a search for ‘Dreamweaver tutorial’, the page title is the bit that appears, the blue part here. So if you leave it as the default, you can imagine the problems you will have. Google will never rank a page that has the words ‘untitled document’ as the title. You need to have really clear keywords. You will see that the words ‘dreamweaver tutorial’ are repeated here in these titles. It’s one of the many things that google uses. It’s really important to use a page title to describe to google what your page is about. So make sure when you put in the title in Dreamweaver, you put a title in every time you create a new page.

So make sure the title describes your page well. It needs to be unique for every page. So if you have 10 pages you will need to have a page title for every single page. So it could be a little monotonous. Make sure that it reflects the content of your page well. We don’t have a lot of content yet.

Conclusion

So we have created a new page. We have made sure that it is called ‘index.html’. We have saved it. And we have made sure it has a title and we have added a little bit of text in here. But now we are going to go through and add a bit more content in the next tutorial.