🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Create an HTML page
Questions
Student Gallery
Be the first to share something.
Course info
Overview
- 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?
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief 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
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.
How do I create my first HTML page in Dreamweaver?
Create a new blank HTML document, save the homepage as index.html, give the page a clear and unique title, add some body text, then preview it in a browser. These few steps create the basic foundation every website needs before you start adding more content and design.
How to Create a New HTML Page in Dreamweaver?
Key takeaways
Create a standard HTML page from Dreamweaver’s File > New menu.
Use HTML5 where it is available, while recognising older HTML options can still work for basic pages.
Name the website’s first page index.html, using a lowercase i.
Write a descriptive, keyword-focused page title instead of leaving the default untitled name.
Use the body area for the page content people will actually read.
Preview pages in more than one browser, including Chrome or Firefox where possible.
Start with a defined Dreamweaver site
Before creating pages, make sure the Dreamweaver site has already been defined. That gives your files a proper home and keeps the website organised from the beginning.
Once that is done, creating the first page is nice and basic. The goal is not to build a finished website in one go. It is to create a valid HTML page, save it correctly, add meaningful content and confirm it works in a browser.
Create a new blank HTML document
Go to File > New. In the New Document window, choose Blank Page and create an HTML page. HTML is the normal, standard format used for web pages.
Choose a blank HTML page to begin with a clean, standard web document.
In newer Dreamweaver versions, the document type will normally be HTML5. Leave the default options in place and click Create.
If you are working in an earlier version and HTML5 is not available, you may see an option such as HTML 4.01 Transitional. That is an older HTML document type, but it will still work for the basic exercises here. If HTML5 is an option, use it.
Save your homepage as index.html
Dreamweaver creates the file as an untitled document, so save it straight away with File > Save.
Your homepage needs one very specific filename: index.html. This is the filename browsers look for first when opening a website. It is the page that normally loads first when somebody visits the site’s main address.
Save the first page with the correct filename so it works as the website homepage.
Use a lowercase i and save the file as:
index.html
You can have one hundred pages or ten thousand pages in a website, but you still need at least one page called index.html. Without it, a browser does not have the standard starting page it expects to open first.
Give every page a clear title
As soon as the page is saved, give it a title. This is one of those small jobs that is easy to skip and then causes trouble later.
The page title matters for a few reasons:
It appears in the browser tab.
It is used when the page is bookmarked.
It helps search engines understand what the page is about.
Do not leave the title as Untitled Document. That default title tells search engines virtually nothing about the page, and it gives you very little chance of appearing well in relevant search results.
Instead, make the title clear, specific and relevant to the content. For example, if the page is about Dreamweaver tutorials, a title such as Dreamweaver Tutorial Website gives a much better description of the page.
Use keywords naturally in the page title
The title should contain words that genuinely describe the page. In the example above, “Dreamweaver” and “tutorial” are clear keywords because the page is about Dreamweaver tutorials.
This is not about cramming in random search terms. The title simply needs to accurately explain the page. Search engines use page titles as one of many signals when working out what a page is about and where it may be relevant.
Search result headings show why a descriptive page title is far more useful than an untitled document.
Every page needs its own unique title. If your site has ten pages, write ten titles. If it has thousands, each title still needs to reflect the specific content on that page. It can feel monotonous, but it is worth doing properly.
Add text in the body area
The large editing area in Dreamweaver is the body area. This is where the content of the website goes.
For a first page, enter a simple line of text such as:
Creating a website is easy in Dreamweaver.
It is only a small amount of content, but it confirms that the page has been created correctly and gives you something concrete to test. More content and more advanced layout work can come afterwards.
Preview the page in a browser
Save the file again, then choose File > Preview in Browser. Dreamweaver will open the page in a browser installed on your computer.
On a PC, that might be Internet Explorer in older setups. On a Mac, it may be Safari. It is also useful to have browsers such as Google Chrome and Firefox installed, then preview your work in those too.
Browser preview is the quick check that confirms the saved HTML page is opening correctly.
If Chrome or Firefox is installed but missing from the Preview in Browser list, use Edit Browser List to locate and add it.
When the page opens, two things should be visible:
The body text entered in Dreamweaver appears in the page itself.
The page title appears in the browser tab.
This is a useful distinction to remember. The body content is the visible material on the page. The page title is browser and search information that appears in places such as tabs, bookmarks and search listings.
A simple checklist for every new page
Before moving on to more advanced Dreamweaver work, get into the habit of running through this list:
Create a blank HTML document.
Save it in the defined site folder.
Use index.html for the homepage.
Give the page a clear, unique title.
Add relevant body content.
Save the file.
Preview it in a browser.
That is the basic workflow. It is simple, but it gives your website the right starting point: a properly named homepage, meaningful page information and a working browser preview.
Key Terms
HTML
HTML is the standard format used to create web pages. In Dreamweaver, an HTML document provides the structure that browsers use to display your content.
HTML5
HTML5 is a newer HTML document standard available in newer versions of Dreamweaver. It is the preferred choice here when the option is available.
index.html
Index.html is the standard filename for a website homepage. Browsers look for this file first when opening the main location of a website.
Page title
A page title is the text shown in a browser tab, bookmarks and search result headings. It should accurately describe the page and be unique across the site.
Body area
The body area is the part of the Dreamweaver document where visible website content is entered. Text added here is what appears in the web page itself.
FAQs
Why should my homepage be called index.html?
Index.html is the standard homepage filename that browsers look for first. Saving the first page with this name gives the website a clear starting page to load.
Can I use HTML 4.01 Transitional instead of HTML5 in Dreamweaver?
Yes. Older Dreamweaver versions may offer HTML 4.01 Transitional rather than HTML5, and it will work for basic web pages. Use HTML5 if it is available.
Why does every HTML page need a unique title?
A unique title helps describe the page in browser tabs, bookmarks and search results. It should reflect the content of that particular page rather than using the same generic wording everywhere.
Where do I add visible text in Dreamweaver?
Add visible page text in the body area. This is the main document area where the content that appears on the web page is entered.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
