How to create a new HTML page in Dreamweaver & put in your logo.

In this tutorial we're going to create a brand new page. We're going to call it Index. We're going to bring in a Logo. We're going to link it to our Home Page. We're going to add some Alt Text. All the good stuff to start any good website. Let's go and do that now.

So five videos in, and we still don't have anything, so let's actually make a Page. Either go to 'File', 'New', or I'll use this one here, 'New'. Now the essential part of any website is an HTML document. So go to 'New Document', we're going to use 'HTML'. And when it comes to 'Bootstrap' or 'None', we're going to use 'None'. If you are keen on Bootstrap I've got another full course on how to use Bootstrap, but this one here, we're going to create our own responsiveness rather than using the Bootstrap template.

So 'None', make sure it's 'HTML5'. We're going to give our document a title. Title is really important, you can use any text you like. So I'm going to use 'Daniel Walter Scott Web Design Portfolio'. Why am I putting all that test in there? It's because whatever you put in this Title here appears in here in Google. So if I do a search for my handsome self you'll see that-- see all that stuff in blue here? This is actually pulled from the Page Title, so here in Dreamweaver, see this here, that is where the blue writing comes from. So it's really important, don't leave it as untitled because you'll never ever rank on any sort of search.

So you can see here, that's where it appears, it also appears if I click on bringyourownlaptop.com. Can you see at the top here, that's where it appears also. This little name in here. You can see here, I've thrown in lots of good keywords Adobe Tutorials by Daniel Walter Scott, bringyourownlaptop.com, blah, blah… So that is also where it appears. So both the blue in Google, and on that little tab up the top there. So don't forget. It needs to be unique for every single page you make. So if you've got 100 pages in your website you need 100 separate titles. Which is not fun to go and try and create, but it has to be done.

Once you've done that, let's click 'Create'. And you'll have your first page. Now we're going to save this first page, so we're going to go to 'File', 'Save'. We're going to give this one a name. And this is one of the few pages where we got to give it a really specific name. We're going to call it 'index.html'. If anybody goes to your website, they go to danisawesome.com it will come up, "Website not found." It needs at least this one page. This is considered your Home Page, and has to start exactly like this, all lower case, 'index.html'. Other pages, we have a little bit more freedom with, but this one definitely, 'index.html', hit 'Save'. You'll see over here, in my 'Files' panel there it is, I got my first bit of html sitting there, and this gets generated for us, you can see the tag for title. So you can update this here now, in Code view. And don't break anything else by deleting it, leave it all there.

First thing we'll do before we go, we'll actually add something to our page. So, we're going to click up here in the 'Live' view at the top here. And we're going to go to 'Insert', and up the top here, pick 'html'. And we're going to click on this one called 'Image', and bring in our Logo. Now if you haven't yet, go to the link on the screen and download the Exercise Files, they're free to download. I've already downloaded mine, they're on my 'Desktop'. And I'm going to open up my 'Images' folder and in here I want the one called 'Logo'. I'm going to use the 'png'. So, 'logo-daniel-walter-scott'. Let's click 'Open'. And that my friends, is our Logo on our Page. It's slightly off-white but we're going to put that on a darker background later on. And that's nearly it, whenever you put in an Image, you can see down here, that's what it looks like in Code view.

What we need to do is add something called Alt Text, or Alternate Text for every single image. It's used by Google to help reference the site. And a website that has lots of good Alt Texts will help with its rankings. A website that has no Alt Text is likely to do pretty poorly in the search results. To update the Alt Text, click on the Logo here. Click on the little burger menu. And where it says Alt Text here, give it a good keyword name. So I'm going to put in my name. This can have spaces. It doesn't need any sort of real special syntax, just good keywords. I'm going to call it 'Web Design Portfolio Logo'. I could just call it Logo but the only trouble with that is that it's not a good keyword and I'd be competing with every other person who has a website with the keyword Logo. I want to compete with a really specific kind of niche. My name, web design, logo.

What we'll also do before we leave here as well, and this is specific just for the Home Page Logo, it's really common to click the Logo to go back to the Home Page. People, unless they have a button in their navigation that says Home will just assume you can click on the Logo and it will take you back to Home. Now this is already our Home, which is weird, but we're going to use this page as a template to make other pages. So what we're going to do, and where it says Link here, we're going to click 'Browse for File', we're going to say, this when clicked goes back to index.html, which means, something kind of weird at the moment because it just goes back to itself. But later on when we copy and paste this page, that becomes the About Us page. And it will become more useful. You can see up here, see this little asterisk, that means this page is not saved. 'File', 'Save', to make sure it's all nice and clean. So we've made a Page, we've stuck a Logo on it. We've added some Alt Text, we've added a Link to it, and we are getting started. All right, let's get into the next tutorial.