Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

Tutorial How To Create A Basic Html Video Landing Page For Starters

Discussion in 'HTML Coding' started by cheezcarls, Dec 26, 2015.

  1. cheezcarls

    cheezcarls It's Game Time!
    Yellow Belt

    Joined:
    Dec 15, 2015
    Messages:
    976
    Ratings:
    +162 / -0
    Hello guys!

    I am back for another tutorial, and this is my first time sharing it under the HTML section. This is not just an ordinary tutorial, but I can consider this as one of the most challenging and time-consuming tutorials I've ever prepared. But hey, I am not counting my efforts, and I am enjoying in doing this for you guys.

    I am not really good in technical, but at least for the basic ones only. I am now going to share to you on how are we going to create a basic HTML video landing page for starters and beginners from scratch. Make sure that you have your Notepad application open in your desktop or laptop. Are you ready for this guys? Here we go!

    The first thing you need to do is put the <html> tags on the Notepad first. This is the number one rule when doing HTML coding and editing.

    <html>
    </html>


    The next step is that you're going to optimize your landing page with the <title> code for title tag, and put the <body> code below it:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    </body>

    </html>

    thread1.

    The next one is to attach your headline in the landing page between the <body> code. It's either you are going to write the headline by yourself, or you already have an image URL of your headline design. Put the headline at the center part by using the <center> tag and make sure to add few spaces above using the double <br> code, before inserting the headline text.

    In this example below, I have added <h1> (Headline 1) and <b> (Bold) tags between the text:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    <br><br>
    <br><br>
    <center><h1><b>
    Free Video On How To Make Money Online</b></h1>
    <br><br>
    <br><br>
    </center>

    </body>
    </html>

    thread2.

    However, if you want to change the color of your text, you can use the <span> code. Like this for example, I set the color to red with <span style="color:#EF0707"> and attach it between the headline text below:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    <br><br>
    <br><br>
    <center><span style="color:#EF0707"><h1><b>Free Video On How To Make Money Online</b></h1></span>
    <br><br>
    <br><br>
    </center>
    </body>
    </html>

    You can Google about the HTML color codes if you want some colors of your choice.

    Since this example is all about a free video, we should attach a video embed code from any video sharing sites. The best suggestion would be Youtube, and it's pretty simple. Make sure that you already uploaded your video in your Youtube channel.

    For instance, let's take this as a good example on how to attach the embed Youtube video code. I put the video code just below the headline code:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    <br><br>
    <br><br>
    <center><span style="color:#EF0707"><h1><b>Free Video On How To Make Money Online</b></h1></span>
    <iframe width="560" height="315" src="VideoURL" frameborder="0" allowfullscreen></iframe>
    <br><br>
    <br><br>
    </center>
    </body>
    </html>

    Just replace the Video URL with your video's raw link.

    The next one is to add a button like "Get Instant Access" or "Sign Up Now" or something like that. You can go to Google and look for some and add a hyperlink to your next page which might be the opt-in page, the sales or product page or so, whatever.

    For example, I am using this image and sample hyperlink with this code:

    <a href="Google"><img src="http://cdn.shopify.com/s/files/1/0243/6225/files/getinstantaccessbuttonnow.png?1564"></img></a>

    And put it below the video code:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    <br><br>
    <br><br>
    <center><span style="color:#EF0707"><h1><b>Free Video On How To Make Money Online</b></h1></span>
    <iframe width="560" height="315" src="VideoURL" frameborder="0" allowfullscreen></iframe>
    <br><br>
    <a href="Google"><img src="http://cdn.shopify.com/s/files/1/0243/6225/files/getinstantaccessbuttonnow.png?1564"></img></a>
    <br><br>
    <br><br>
    </center>
    </body>
    </html>

    In order to get the image URL, you should upload it on your hosting and get the raw link and attach to the image code between parenthesis. To attach the link, put it between the parenthesis after "href=".

    The next one is to simply create a border between your content. For starters, at least this will be decent and appealing to your visitors.

    We will be using the table codes as displayed below (take note of the ones highlighted in red):

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body>
    <br><br>
    <br><br>
    <center><table border="2"><tr><td><span style="color:#EF0707"><h1><b>Free Video On How To Make Money Online</b></h1></span>
    <center><iframe width="560" height="315" src="VideoURL" frameborder="0" allowfullscreen></iframe></center>
    <br><br>
    <center><a href="Google"><img src="http://cdn.shopify.com/s/files/1/0243/6225/files/getinstantaccessbuttonnow.png?1564"></img></a></center>
    <br><br>
    <br><br>
    </td></tr></table>
    </center>
    </body>
    </html>

    Since we are now using the table tag, there's a problem about centering the video and the "Get Instant Access" button, so be sure to add <center> tags between them this time.

    thread6.

    Finally, you are going to customize it with a colored background inside and outside of the border. Just put the code "bgcolor="COLORCODE" beside the table and body word of the code.

    Kindly take note of the highlighted text below, and I am using white background inside the border, and black background for outside the border. Here is an example:

    <html>
    <title>Free Video On How To Make Money Online</title>
    <body bgcolor="#000000">
    <br><br>
    <br><br>
    <center><table bgcolor="#FFFFFF" border="2"><tr><td><span style="color:#EF0707"><h1><b>Free Video On How To Make Money Online</b></h1></span>
    <center><iframe width="560" height="315" src="VideoURL" frameborder="0" allowfullscreen></iframe></center>
    <br><br>
    <center><a href="Google"><img src="http://cdn.shopify.com/s/files/1/0243/6225/files/getinstantaccessbuttonnow.png?1564"></img></a></center>
    <br><br>
    <br><br>
    </td></tr></table>
    </center>
    </body>
    </html>

    thread7.

    Make sure to save the Notepad as HTML file (e.g., sample.html) and not as TXT, and upload it to your hosting's File Manager under your preferred domain's folder. You simply login into your cPanel, go to File Manager, choose Web Root, and click Go. But if your domain is an add-on domain, just go to its folder and upload the file directly.

    BONUS! I am also going to share a video from Youtube user Hector Cuevas on how to setup an HTML opt-in landing page using a free template that he provides. You can watch it here:



    I hope this tutorial really helps you a lot in creating a basic HTML video landing page. Try it for yourself by just simply follow the steps that I have. But if you want to be creative, you can find some useful sources in the internet and learn from them.

    Have a great day ahead guys!
     
    #1 cheezcarls, Dec 26, 2015 at 10:47 PM
    Last edited: Dec 27, 2015
  2. Zak

    Zak
    Yellow Belt

    Joined:
    Mar 7, 2015
    Messages:
    58
    Ratings:
    +29 / -0
    Wow @cheezcarls@cheezcarls you've really put a lot of effort into your thread, really impressive. This will surely help people who are looking to create a simple html video landing page for their business or products.

    In my opinion, it is best to use Wordpress for landing pages and lead generation instead of creating an HTML page from scratch. Simply because CMS solutions like Wordpress are convenient, easy to use, free and offer built in SEO features and are newbie friendly. Users can buy a premium wordpress theme if they require advanced functionality and there are so many free and paid Wordpress plugins available which can do almost all the tasks needed for a landing page or lead capture page, they even integrate Wordpress into popular email marketing solutions like mailchimp and aweber etc without having to code anything.
     
  3. cheezcarls

    cheezcarls It's Game Time!
    Yellow Belt

    Joined:
    Dec 15, 2015
    Messages:
    976
    Ratings:
    +162 / -0
    I agree with your point @Zak@Zak. Wordpress is indeed much easier for us to create video landing pages, but this is intended for those who just wanted to have standalone landing pages than doing Wordpress. There are still other people out there who are doing standalone HTML landing pages for themselves and for their clients, and they even customize or innovative it. However, I still agree that Wordpress is the easiest route for us to create and customize beautiful video landing page. Thanks for the additional heads up!
     
  4. Furqan Rashid

    Yellow Belt

    Joined:
    Jan 2, 2016
    Messages:
    446
    Ratings:
    +38 / -0
    Wow really nice and interesting article for beginners. I would like to add something here. If you start learning basic HTML in Dreamweaver than it will be far easier than doing so In Notepad. Hope that's helpful. Thanks
     
  5. cheezcarls

    cheezcarls It's Game Time!
    Yellow Belt

    Joined:
    Dec 15, 2015
    Messages:
    976
    Ratings:
    +162 / -0
    I know this is kind of a late response actually, but I already know about Dreamweaver. It was being used by one of my friends who is a website programmer. I met him one time at a mall with his own laptop, and we decided to have a coffee with each other. I asked him on what he is doing, and he said is programming something for his website. So when I take a look at it, he is using Dreamweaver. I agree that this programming software is mostly used and common for website programmers around the corner. It's way easier than Notepad as I have experienced.
     

Share This Page