Creating an Android App from Scratch – Simple HTML code
February 18th, 2013In our last lesson I created a page from HTML to show as the Welcome page. I have been asked by many people what code I used and how I got the page to look that way. Although there is an easy to use HTML editor, many people prefer to create their own page using code themselves. Today I will take you through a simple step by step guide to the code to create an HTML page like the welcome page I created on my app.
To follow this tutorial please copy and paste this code into the HTML page in your dashboard. If you wish to try the code first, you can use the code editor provided for free from W3schools.com. Don’t forget to delete anything that is written in grey and is in (brackets). What is in red is what you may change.
HTML – The header bar
Our page is split into three sections, header, body and footer. The following code is used to determine what will be at the top of the page which we call the header.
<div id=”container” style=”width: 250px; text-align: center;”> (use the same sizes copy this directly)
<div id=”header” style=”background-color: #ffa500;”> (you may change the color code again available from w3schools)
<h1 style=”margin-bottom: 0;”>Dog Show Photos</h1> (change the title to what you want yours to be)
</div>
The body
In my body I have included a sentence, then an image and then a sentence at the bottom with a link to my facebook page. Here is the code to add this.
<div id=”content” style=”background-color: #eeeeee; float: center;”>Save the photos as your screensaver<p> (write your own sentence)
<img src=”https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-snc7/582779_550113208345795_117921545_n.jpg” alt=”Dog show photos” width=”232″ height=”150″ /></p> (Create the link to your image and the alt should be your keywords)
<p>Join us on <a href=”https://www.facebook.com/DogShowPhotosAppsgeyser“>Facebook </a>for more doggie adventures</p> (I wrote a sentence and put in a link in the middle of the sentence around the word Facebook. Change the link to your own website and the sentence to suit your needs)
</div>
The footer
The footer is what comes at the bottom of the page. I think that on any app it is important that the user has access to the app maker’s contact details. This is useful because it allows them to contact you if they have a problem instead of putting up bad reviews on GooglePlay about the app.
<div id=”footer” style=”background-color: #ffa500; clear: both; text-align: center;”>Copyright & copy; Kim Cohen – AppsGeyser.com <a href=”mailto:kim@appsgeyser.com“>Send e-mail</a></div> (As you can see in this section you have the color to change, your copyright details and your email address that is added into your sentence. Change the bits in red to your own details)
<script type=”text/javascript” src=”/assets/83fc9665/js/uncompressed.jquery.dd.js”></script>
<script type=”text/javascript” src=”/assets/83fc9665/js/icons.js”></script>
</div>
Wow, you have created your own welcome page. Now you can make your opening page to suit your brand without having to pay huge bucks for big developers. I would suggest using the W3School for HTML practice, this website is free of charge and is very easy to use. Creating an Android app from scratch is getting easier by the minute.
Our welcome page
Don’t forget to look at the whole Creating an Android app from scratch series:
3: Step 2 – Choosing a template and name
4: Step 3 – Personalizing your app
Tomorrow we will be looking at uploading your app to GooglePlay
We’d love to hear your thoughts in the comments or on Facebook or Twitter,
If you’re interested in making your own Android apps, start creating apps here.
Related Articles
We'd love to hear your thoughts in the comments or on Facebook or Twitter, If you're interested in making your own Android apps, start creating apps here.
Tags: create an android app, create an app, create android app, create free Android app, Creating an Android App from Scratch, free android app, free android app tool, Free App Making Tools, make an app, making an android app, Your Free Android App
Follow Us