Creating a New Webpage
There are four ways to create a new page in the HTML Editor: using the Quick Start Wizard, starting from scratch, using a layout, or using a theme.
New Blank Page
This option is best for people who want to jump right into coding their Website. If that sounds like you, here's what you gotta do:
Step 1
Open the HTML Editor and select New Blank Page from the Welcome window.
If you already have the Editor open, use one of the following options instead:
- Go to File > New Blank Page
- Click the New Items toolbar icon and select New Blank Page
- Use the keyboard shortcut Ctrl+N
Step 2
A new blank page will open in the Code Editor. By default, new pages include some basic HTML to help get you started. This includes the DOCTYPE, html, head, title, meta, and body tags, and an HTML comment stating that the page was created with CoffeeCup HTML Editor.
And that's all there is to it! Let the coding begin.
New From Quick Start
If you want to customize your page before you get started, this is probably the option for you. The Quick Start Wizard lets you specify some basic page properties, including the title, DOCTYPE, character set, meta information, background, and color scheme. When you're done specifying this information, the corresponding code is automatically added to your page. Here's how to get started with the Quick Start Wizard:
Step 1
Open the HTML Editor and close the Welcome window.
Step 2
Open the Quick Start window using one of these options:
- Go to File > New From Quick Start
- Click the New Items toolbar icon and select New From Quick Start
Step 3
Enter the following information in the provided fields in the Quick Start window.
Page Title
The text displayed in the bar across the top of a Web browser and that also appears in search results. A good page title succinctly describes the content on the page. For example, let's say your Website is named "My Himalayan Adventures," and you use it to blog your adventures climbing in the Himalayas. If this particular Webpage describes your trip up K2, your page title could be any one of these:
My Himalayan Adventures | Conquering K2
My Himalayan Adventures | My Trip up K2
My Himalayan Adventures | Climbing K2: What the Hell Was I Thinking?
You may have noticed that the name of the Website is included in all these titles, and the rest of the description is separated by the pipe character. This isn't required, but it looks nice and keeps the name of your Website fresh in your visitors' minds.
Background Image
To select a background image for your page, enter the file path in this field or click the Browse icon to browse your computer for the image you wish to use. To remove a background image, click the red X icon.
If you choose to use a background image, it should be clean and simple. Flashy background images can be distracting or look amateurish. The HTML Editor automatically repeats the background image to fit the size of the page, so your image should look natural when repeated. When you browse for a background image, the default folder contains predefined backgrounds that come with the HTML Editor. You can use any of these in your Website, or use them as a guide for what your custom background image should look like.
Colors
There are five color options available: page background, text, and three different states of links: visited, unvisited, and active. A visited link is a link that has already been clicked by the user, and an unvisited link has not been clicked by the user. A link is active while a user is clicking it.
To change the color of any of these elements, click the color swatch next to it. This opens a drop-down list of 40 basic colors. Click whichever color you would like to apply. To browse even more colors, click More Colors. This opens a rainbow gradient that allows you to adjust brightness and select from a wider range of colors.
Color Scheme Drop-Down ListIf you would like to use a predefined color scheme for these color options, you can select one from the Color Scheme drop-down list. To preview how a scheme looks, select it from the list. You can always customize it or return to the default by selecting (Default).
Save
If you do choose to use one of the color schemes, but decide to change one or more of the options, click this button to save these changes to the scheme. This overwrites the default scheme, so make sure you really want to replace it before you save over it!
Save As...
If you create a custom color scheme or customize one of the existing themes and don't want to overwrite it, click this button to save the changes under a new name. This opens a window that allows you to enter a name for your new scheme. Once you name it, click OK, and the scheme will be available under the Color Scheme drop-down list.
Delete
Click this button to delete the selected scheme. This change is permanent, so make sure you really want to delete it before you go ahead and click this button!
Don't Underline Links
Check this box if you would like to remove the automatic underline from your links. We recommend keeping the underline — it's one of the main ways your visitors will be able to distinguish your links from your normal text, so why make things more difficult for them?
DOCTYPE
Select the desired DOCTYPE from this drop-down list. A DOCTYPE tells the Web browser the type and version of the language the page is written in.
Charset
Select your preferred character set from this drop-down list. A character set is the set of characters available to be used in your code and on your Website. For example, if you want to create a Website using Cyrillic, that would use a different character set than a Website that used the Latin alphabet.
Meta Description
This is a short description of your Website that sometimes appears in search results. It should be no longer than 50 words.
Meta Keywords
These are words that describe your Webpage. They must each be separated by a comma and a space.
Step 4
When you're done entering this information, click OK. The code will be inserted into your page for you.
You're all done getting started — the rest is in your hands!
New From Layout
This option allows you to choose a basic layout to start with. A layout contains the HTML for a basic page structure. This is a good starting place for people who want to start with a bare bones structure and add a design from there. Here's how to get started with layouts:
Step 1
Open the HTML Editor and close the Welcome window.
Step 2
Open the Layout Chooser using one of these options:
- Go to File > New From Layout
- Click the New Items toolbar icon and select New From Layout
Step 3
Select the desired layout from the Layout Chooser.
You can preview how the different layouts look in the Preview area. (FYI, liquid layouts resize automatically to fit the size of the user's browser, whereas fixed layouts always stay the same size.)
Step 4
When you find a layout you like, click OK. The code will be inserted into your page for you.
Once the code is inserted, you can replace the generic text with your own, tweak elements of the code, add images, and whatever else you need to complete your Webpage!
New From Theme
If you're a total beginner and have no idea where to start, this is the place. This option is also great if you want to put together a professional-looking Website with a minimum of muss, fuss, and time. A theme includes three pages (index.html, about-us.html, and contact-us.html) that include the HTML and images for a basic design — which basically means all the hard work is done for you! Here's how you get started with themes:
Step 1
Open the HTML Editor and select Start With a Theme from the Welcome window.
If you already have the Editor open, open the Theme Chooser using one of these options:
- Go to File > New From Theme
- Click the New Items toolbar icon and select New From Theme
Step 2
Select the desired theme from the Theme Chooser.
You can preview how the different themes look in the Preview area.
Step 3
When you find a theme you like, click OK. The code will be inserted into your page for you.
Once the code is inserted, you can replace the generic text and images with your own, tweak elements of the code, and do whatever else you gotta do to complete your Webpage!
Rate This Article
You must be logged in to rate articles.
