🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

Create an HTML page

Questions

0

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. And this course is for people new to Web design  and new to Dreamweaver. And the topics of this session is going to be how  to create your first HTML page. In the previous topic, we looked at defining your  site, which you need to do first. Now we're gonna look at creating our very first HTML page.

It's gonna be nice and basic, and we're gonna preview it  and then we'll work into some more advanced parts. So for the first session, what we need  to do is create our first remover page. So to do it, it's all about to file and go to new. Okay, within here we need to be on this one  that says blank page. Okay? And we're gonna be creating an HTML page.

An HTML page is your very common, normal standard web page. Okay? And you should be able to leave all the defaults. Okay? Um, if you're using an earlier version of Dreamweaver,  you won't have this doc type H TML five,  it's probably gonna be on this one H TML 4.1, transitional,  just an old style of HTML. The new version of Dreamweaver cc  and above, um, uses HTML five.

But this, if you've only got this option,  this will work just fine for most support  we're gonna do in this course. But HTML five, if you've got it, Hey, let's hit create. What this does is it creates this untitled document. So the first thing we need to do is save it. Okay? So we go to file and go to save.

Okay? It's gonna allow us to name it as this HTML file. Now, um, you've, when it comes to naming your files,  there's um, one specific file, which is your homepage, has  to have a really specific name. It has to have the word index html. This is the very first page that, um,  somebody like Google Chrome or Firefox  or Internet Explorer is gonna go looking  for in your website to load first. This is always going  to be the first page an audience sees when  they go to your website.

Okay? So it has to be named like this. If you have a website and it has a hundred other pages,  but no index, okay? Um, something like Google Chrome  or Firefox won't load any pages. So you need to have it least one page called index html. Okay?

So make sure you use a lowercase I. Okay? And let's hit save. So it's named at index. It's gonna be a homepage. And the first thing you should do  whenever you create a page is give it a title.

Now, this title in here is very  important for a couple of reasons. And the main reason is for Google search engine  for your site to list. Well, you need a very good, clear title. So if you leave it as the default untitled, okay,  it'll end up with really bad  results in terms of its ranking. So let's, let's explore that. So for the title of this page, we are gonna be doing, um,  a title for, um, you make this unique for your website.

We're gonna be calling this one Dreamweaver tutorial  website, okay? And we're making sure there's good,  clear keywords in there, okay? 'cause this website's going to be about  Dreamweaver tutorials. So, um, once you've typed in here, um, we, I want you to go  through and let's quickly down the bottom here. This is called your body area. This is where your website goes.

We're gonna type in a little bit of text. We're gonna say, um, creating  a website is easy and dream. Okay? So to find out what this title does is I'm going  to hit save, file, save,  and then I'm gonna go to file, preview and browser. Now, what this is going to do, it's gonna try  and preview it in one  of the browsers that install in your machine. You're usings a pc, you're gonna have  probably something called ilo, which is Internet Explorer.

If you're on a Mac, it's probably gonna have Safari. What I like to do as a web designer is install Firefox  and Chrome, which is alternatives for these guys  and preview in these as well. Okay? If you have installed them  and they're not appearing in this list, you might have to go  to edit browser list and go and find them. Okay? I'm gonna preview in this course under Google Chrome  at the moment, it's the world's most popular, um,  uh, browser by far.

Okay? It's overridden, um, Firefox and Internet Explorer. It's a Google Chrome. I'm gonna test this one  and you'll see in this one,  okay, it's done a couple of things. It's previewed the bit of text in here,  and you can see up in here in this little tab. Okay?

It's given me that page title, okay? The Dreamweaver tutorial site. Now, that's, um, that's one  of the reasons you put a title in. It appears up here. And when people bookmark your site,  if I add this, uh, bookmark this page, it's this bit of text  that gets included in your bookmarks. But what it's really good for is,  and it's Google search results.

So if I go to File New Window,  okay, and I go to google com au  and I do a search for Dreamweaver  tutorial, that's all right. Okay. The page title is this bit that appears  in the blue part here. Okay? So if you left it as untitled,  which is the default in Dreamweaver,  you can imagine the problems you're gonna have, okay? Because, um, Google will never rank a page  that has the words untitled document as its title.

So you need to have really clear keywords. Can you see the words Dream weaver tutorial? Dream move tutorial are all appearing in this title here. It's what Google uses when it ranks one  of the many things it uses. Okay? But a page title is really important to describe  to Google what your page is about.

So making sure when you put in the title in  Dreamweaver, okay, you put in a title  that every time you create a new page,  now make sure there's, it described your page well,  and it needs to be unique for every page. So if you have 10 pages  or 10,000 pages, you're gonna have  to have a page title you unique for every single page. It can get a little bit monotonous,  but make sure it's just really  reflects what's in the page there. Okay? So we don't have a lot of content yet,  but we'll start developing it in a bit. Okay?

So we've done a couple of things. We've, uh, created a new page  and make sure it's called Index, the HTML, you've saved it  and making sure there's a title. Okay? And we've added a little bit of text in here, okay? But now we're gonna go through and add a bit more  content in another tutorial. Alright?

Let's move on to the next tutorial.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025