1. Download our Official Android App: Forums for Android!

[TUTORIAL] Create a custom homepage

Discussion in 'Android Apps & Games' started by ardchoille, Mar 11, 2011.

  1. ardchoille

    ardchoille Android Expert
    Thread Starter
    Rank:
    None
    Points:
    333
    Posts:
    3,684
    Joined:
    Mar 8, 2011

    Mar 8, 2011
    3,684
    1,940
    333
    Male
    Ordained Minister
    Seattle
    This tutorial is designed to improve your mobile browsing experience.

    There are a great many mobile home pages that can be found, but I always found them having either too much of what I don't need or not enough of what I do need. So, I decided to put my years of writing html to use and create my own custom home page. Here's how I did it.

    Step 1
    Go to your computer and open your favorite text editor. An html page is simple text and utilizes tags. Copy the below code into your text editor and edit to your needs. I have provided several mobile-friendly links for you to build upon and some short instructions in the html code itself.

    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>My Mobile Links</title>
    5. </head>
    6. <body>
    7. <!--
    8. *** Things you can change ***
    9. <title></title> - this begins and ends the title of the page shown in the browser titlebar
    10. <font size="4"></font> - controls the size of the displayed fonts, change the 4
    11. <ol></ol> - this begins and ends an ordered list (numbered)
    12. <ul></ul> - this begins and ends an unordered list (bulleted)
    13. <li></li> - this begins and ends a list item, list items go inside an ordered or unordered list
    14. <br> - this is a line break
    15. <b></b> - this begins and ends bold text
    16. <small></small> - this begins and ends smaller text
    17. Links - please follow the following pattern:
    18. <li><a href="http://www.example.com">Link text</a></li>
    19.  
    20. *** Things you cannot change ***
    21. <html></html>
    22. <head></head>
    23. <body></body>
    24. -->
    25. <font size="4">
    26. <br>
    27. <b>Networking</b>
    28. <ul>
    29. <li><a href='http://m.digg.com'>Digg</a></li>
    30. <br>
    31. <li><a href='http://touch.facebook.com'>Facebook</a></li>
    32. <br>
    33. <li><a href='http://m.flickr.com'>Flickr</a></li>
    34. <br>
    35. <li><a href='http://www.meetup.com/'>Meetup</a></li>
    36. <br>
    37. <li><a href='http://m.myspace.com'>MySpace</a></li>
    38. <br>
    39. <li><a href='http://m.twitter.com'>Twitter</a></li>
    40. </ul>
    41. <br>
    42. <b>Search</b>
    43. <ul>
    44. <li><a href='http://m.ask.com/'>Ask</a></li>
    45. <br>
    46. <li><a href='http://mobile.reference.com/d/'>Dictionary</a></li>
    47. <br>
    48. <li><a href='http://www.google.com/m?source=mobileproducts%9d%9d1%9d%9ddc=gorganic'>Google</a></li>
    49. <br>
    50. <li><a href='http://wireless.mapquest.com/'>MapQuest</a></li>
    51. <br>
    52. <li><a href='http://wapedia.mobi/'>Wapedia</a></li>
    53. <br>
    54. <li><a href='http://en.m.wikipedia.org'>Wikipedia</a></li>
    55. <br>
    56. <li><a href='http://us.m.yahoo.com/p/search'>Yahoo!</a></li>
    57. <br>
    58. <li><a href='http://m.yp.com/'>Yellow Pages</a></li>
    59. </ul>
    60. </font>
    61. <small>Update: 03/11/2011</small>
    62. </body>
    63. </html>
    64.  
    Things you can change
    <title></title> - this begins and ends the title of the page that is shown in the browser titlebar. You can edit this to read something like <title>My new webpage</title>. The title must be inside the <head></head> tags.

    <font size="4"></font> - controls the size of the displayed fonts, change the 4. In the code <font size="4">some text</font>, "some text" will appear differently in the browser than other text that is not inside the font tags.

    <ol></ol> - this begins and ends an ordered list (numbered). An example of this type of list is:
    1. Item one
    2. Item two

    <ul></ul> - this begins and ends an unordered list (bulleted). An example of this type of list is:
    * Item one
    * Item two

    <li></li> - this begins and ends a list item, list items go inside an ordered or unordered list.

    <br> - this is a line break. Use this to separate lines of text. Without line breaks of some type, all text on a page will appear as one big paragraph.

    <b></b> - this begins and ends bold text.

    <small></small> - this begins and ends smaller text.

    Links - please follow the following pattern:
    <li><a href="http://www.example.com">Link text</a></li>
    This is an example of a link being used as a list item. The example URL and "Link text" can be changed to your liking.

    Things you cannot change
    <html></html>
    <head></head>
    <body></body>
    The above tags are required for web pages to be displayed properly

    Step 2
    Save the file with the name of your choice, but the file must have a file extension of "html". I named my file mylinks.html.

    Step 3
    Copy the file to your SD card and open the web browser on your phone. In your mobile browser, type the location of the file into the browser location bar. My file, mylinks.html, is located in the documents folder at the root of my SD card, so my location would be:

    Code (Text):
    1. file:///sdcard/documents/mylinks.html
    Substitute whatever you need to in order for your location to be correct. Your mobile browser should now display the above html code with whatever changes you made. You now have your own custom web page and you can even set it as your homepage in your browser's settings.

    Conclusion
    The big advantage of having a custom home page is that you can choose its content rather than relying on someone else to have what you need. Another advantage to having this file on your phone is that you can make changes to the file whenever you need to and view the changes instantaneously. This file can be edited in most text editors directly on your phone.

    This file is a simple web page designed to be small and fast. You can add any web-friendly code you want to your new homepage, including javascript, to make it your own. I have a friend who added a javascript clock and day/date display to her homepage.

    I hope this tutorial can be of help to someone.
     

    Advertisement

    Phases likes this.

Share This Page

Loading...