How to Create a High-Converting HTML Landing Page For Dental Labs

By David H. Khalili, 

Founder of DentalLabSupport.com

There are few things easier than accessing all of the world’s information. All that's required is for you to click an ad, a link, or copy a web address in your browser and you're likely to find everything you were looking for and more.

It wasn’t always this easy, though.

The year was 1989. Tim Berners-Lee was working at CERN in Geneva, Switzerland, where he proposed a global hypertext project — a project that came to be known as the World Wide Web.

For two years Tim worked on the design, a design that included the specifications of HTML, URIs, and HTTP. By October of 1990, the World Wide Web program was available at CERN and in the summer of 1991, it became available to everyone in the world.

The world’s first website went live on August 6, 1991, and its purpose was to provide information on how users could setup a web server and create their own web pages.

That website is still live and looks like this:

By modern standards, the page isn’t flashy or engaging, has no navigation links, no multimedia, and no real structure. Plus, it required a lot of time and HTML coding to complete.

The world has inevitably changed because of it. What hasn’t changed is that it still takes a fair bit of time to create a web page, this includes landing pages, from scratch.

This presents a bit of a problem for marketers who don’t speak the languages of code.

Yes, that’s languages — plural.

To create landing pages, by yourself, from scratch, you need to know HTML and CSS.

Let’s dive deeper into what HTML and CSS are and what role they play in creating landing pages.

What is HTML?

HTML (Hyper Text Markup Language) is used to place copy, images and other elements on a web page — helping define the page layout.

HTML consists of markup tags, and these tags are keywords surrounded by angle brackets.

To demonstrate, the picture below is a very basic example how HTML tags determine how your page is going to look:

There are different HTML tags for deciding the layout of the headlines, brand logo, images, bullet points, numbered lists, etc. While creating an HTML landing page, you need to hand code:

1. Where your headline will be
2. The location of the copy
3. How to list the benefits of your service
4. What your CTA button copy should say and where the button should be placed

Here are some common html tags for page elements:

Every single landing page element needs to be written with its respective HTML tag.

When you’re finished, your HTML handiwork will look something similar to this:

Looks like just a bunch of lines, words, and characters, doesn’t it? When in fact, it’s all part of a big puzzle that generates this web page:

Your published landing page will look great only if you’ve gotten all the HTML tags correctly placed in their proper locations. HTML is currently used in its fifth version and is known as HTML5 — the last numbered version, there will not be a version 6.

HTML5 includes new elements such as:

• Semantic elements, like header, footer, and section
• Form control attributes, for example date and time
• Graphic elements, svg and canvas
• Multimedia elements, audio and video

To learn more, give Codeacademy and Treehouse courses a try if you’re interested in learning how to create a simple HTML landing page.

What is CSS?

CSS (Cascading Style Sheets) are the sheets describe how the HTML elements are displayed on the web page.

The “cascading” part of CSS allows changes made on a top-level stylesheet to cascadethroughout the web page. This saves you time and allows you to make major changes to the appearance of your page without going through every single stylesheet.

HTML was created to describe the content on a page. CSS, on the other hand, was created by the World Wide Web Consortium to define the style of the page, such as the font and color of the landing page copy.

This is how a CSS example of font and color can look like:

For the “coded do-it-yourself” landing page option, you need to combine HTML and CSS to create a page that’s worthy of generating leads.

Let’s see how that’s done.

How to create a simple HTML landing page by yourself

Start by opening a text editor – use Notepad for Windows and TextEdit for Mac. Don’t use word processors like MS Office or OpenOffice because these programs produce files that a web browser can’t read.

For HTML and CSS coding you need to start with plain text files.

Type HTML code like this into a text editor:

Now let’s add some colors to this text with the help of CSS. Go to the HTML file and add the code in red in the “head” part of the file:

This style sheet determines the color of the body copy (purple) and the background color (greenish yellow). Remember to input the correct color codes in the style sheet, or your final page won’t turn out as you intended.

This is what your page will look like:

Next, you need to add fonts. For this add the following lines in the HTML file:

This is what your page looks like after adding those sections of code:

Now, remember, the above examples are very basic and very short. An optimized landing page would be more detailed — with images, video, a CTA, form, and be longer as well. Imagine how long that would take to code all of those elements the traditional way...

For more information, please visit DentalLabSupport.com