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.
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:
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.
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:
<html>
<head>
<title>My Mobile Links</title>
</head>
<body>
<!--
*** Things you can change ***
<title></title> - this begins and ends the title of the page shown in the browser titlebar
<font size="4"></font> - controls the size of the displayed fonts, change the 4
<ol></ol> - this begins and ends an ordered list (numbered)
<ul></ul> - this begins and ends an unordered list (bulleted)
<li></li> - this begins and ends a list item, list items go inside an ordered or unordered list
<br> - this is a line break
<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>
*** Things you cannot change ***
<html></html>
<head></head>
<body></body>
-->
<font size="4">
<br>
<b>Networking</b>
<ul>
<li><a href='http://m.digg.com'>Digg</a></li>
<br>
<li><a href='http://touch.facebook.com'>Facebook</a></li>
<br>
<li><a href='http://m.flickr.com'>Flickr</a></li>
<br>
<li><a href='http://www.meetup.com/'>Meetup</a></li>
<br>
<li><a href='http://m.myspace.com'>MySpace</a></li>
<br>
<li><a href='http://m.twitter.com'>Twitter</a></li>
</ul>
<br>
<b>Search</b>
<ul>
<li><a href='http://m.ask.com/'>Ask</a></li>
<br>
<li><a href='http://mobile.reference.com/d/'>Dictionary</a></li>
<br>
<li><a href='http://www.google.com/m?source=mobileproducts%9d%9d1%9d%9ddc=gorganic'>Google</a></li>
<br>
<li><a href='http://wireless.mapquest.com/'>MapQuest</a></li>
<br>
<li><a href='http://wapedia.mobi/'>Wapedia</a></li>
<br>
<li><a href='http://en.m.wikipedia.org'>Wikipedia</a></li>
<br>
<li><a href='http://us.m.yahoo.com/p/search'>Yahoo!</a></li>
<br>
<li><a href='http://m.yp.com/'>Yellow Pages</a></li>
</ul>
</font>
<small>Update: 03/11/2011</small>
</body>
</html><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:
file:///sdcard/documents/mylinks.htmlConclusion
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.
