HTML Web Development with Android - Introduction

 How can I create a website with my smartphone? One of the very popular question on the search engine in the last few years. So I'm here to open you up to just all there is, you need to know and then walk you through a series which will teach you web development with Android. If you're still wondering what web development is all about or need a tour or more of a guide map into web development, I recommend you go through this Complete Guide to Web Development article, before actually starting off these series. I'm glad to welcome you to our first web development course with Android. We'll be taking a look into HTML and as we progress down the series, we would also look into HTML5, which is the latest version of HTML. So before we get started, I just want to mention a few things;

• This course is a step to step guide into web development with android, in here we'll be more focused on HTML.


• Okay so, this course and some other courses were created to help you start or continue your web development career with your mobile device.


• We won't just stop here, we also intend to walk you through CSS, JavaScript, Bootstrap, Jquery, PHP and some other frontend frameworks as well as server-side technologies.


• In here what we'll be doing is create alternatives and then walk you through coding and running these languages with your mobile device.


• Now it is also interesting to note that, everything we'll be doing here and later would be achieved using our mobile device.


• In as much as we promise, we'll try to cover everything that concerns this course, it is also a nice idea to check out some other sources, get e-books, textbooks, P.D.Fs, if you really want to succeed as a web developer.


• We also intend to make our articles for this series short and interactive as possible, so, you can pick up most of the things we'll be doing here. Once you encounter problems understanding, leave questions in the comment section, and as soon as we find it, we'll get to reply you.


• If you want to be a part of Knowaloud community, (A place where self-taught web developers are engineered), Subscribe to our YouTube Channel and also our newsletter to get notified once we upload new articles or videos for this series.

Away from all that, we move straight up to Tools and application.

TOOLS AND APPLICATION

So what you'll need for this course, to start with would be a text editor.

And for that we'll be using the Anwriter app

1. anWriter Application: This is a direct alternative to some text editors like, sublime text, VScode, Atom, notepad++ and some other I D E's we normally would use in our computers.
   
   Follow the link to download the application here for free, or you can alternatively make a quick search for the app in an app store.


Another thing we'll be needing for this course is a good browser, and for that, we'll be using the;
2. Google Chrome Browser: The Google Chrome Browser is one of the best Browser which I can't emphasize enough, with quick load time, snappy JavaScript engine, solid webkit foundation with lots of extensions, Firefox is also a good browser, But I strongly would recommend Chrome and I'll tell you why as we go down the series.

In a jiffy, We'll be showing you how to use the browser and the text editor interchangeably for your project.

You'll also need an image editing app, which off course is not for this series. When we get to CSS, we'll introduce more apps you'll need for image editing. Don't worry about a thing, we'll walk you through when we get there.

You'll also need a web server, and Kickweb server is what we'll be using and again its not for this course, when we get to server side scripting, we'll tell you why you need it and show you how to use it, that'll be in a course series "PHP web development with android ".

Okay, let's get back to using the text editor and browser.

USING THE ANWRITER APPLICATION AND BROWSER

So once you have both installed. Let's get familiar with the Editor.

Step 1

Open up the text editor.

Once you open up the editor, it'll take some time before this loads and you'll end up with this nice G.U.I (graphical user interface).

Let's dwell a bit in here.

• Now to the top left of the page you'll find a menu hamburger, and what this allow you to do is to switch through tabs you've created. You can have a maximum of 10 to 15 tabs, and once this number is reached, you may not be allowed to create more tabs, but what you can always do is to remove document or tabs you're not currently using to permit you create new ones.

• You can decide to use one tab for your HTML document, maybe two or three tabs for your CSS, likewise your JavaScript and PHP documents, if you want to include them externally in your project.


• So let's move on to the next icon, (the add icon), you can use this to create new tabs for your document. So basically you use the add icon to create new tabs while you use the menu hamburger to switch between these tabs.


• The folder icon comes up next, you can use this to open up existing files from your device. So let's say you removed a document you had saved from the tabs and you want to access it again, or maybe you downloaded a file and want to access it using a text editor, you can use the folder icon to access such files.

• What you can do with the save icon is to save your document. It is important that you save your document with the right extension.

So if your working with an html file, you'll use the

.html

file extension to save it.

.css for css file.
 .js for JavaScript file.
 .php for php files and so on.

Interestingly, the app's auto completion is based on the file's file extension.

The undo icon, just as its name suggest gives you room to undo what you may have done, maybe a typo or something. Much helpful when debugging.

Now unto the menu hamburger to the top right, what you have here are quite explanatory, we'll explain a few of these.

The search option allows you search for words in a document. You can also use this to search and replace words in the document.

The next two options you have here are the copy and paste and of course you know what these are used for, you can quickly highlight what you want to have copied, copy and paste it wherever you wish.

The save As option allows you to change the name of an already saved document.

You can use the tool pen option to allow writing or not on your document. This is particularly helpful when you want to have your codes debugged, so you don't have your keyboard popping up every time you scroll.

The alignment tool also helps you to align your content properly inside your document. As we progress in the series you'll get to see how we use it.

For the open in browser you wouldn't be needing that, much later as we promised earlier, we'll show you a better way to open your document in a browser.

Next are the FTP, settings and help option, you won't be needing any settings and help is what am providing already.

So let's head back to the bottom of the page. The auto completion menu hamburger is the first from the bottom left.

The rest of the other symbol is there to help your coding speed, you can scroll to have more. So you don't have to change your keyboard to find the angle bracket or curly braces, you have them right in front of you.

We also have the preview button, this allow you preview your codes. We'll give you a bit of a tip about the preview button when we're talking about the next tool which of course is the browser.

So let's get talking, for the browser, we'll be using the google chrome browser application, let's get to show you how to open your document from the Anwriter app in google chrome.

To be able to preview your document in Chrome, you need to have it saved.

And you'll do that everytime you're previewing your document.

Now this is what you do once you have your document saved;

• Check for its storage path.
• Copy this including the file name and file extension out.
• Then head-on to your chrome browser. And on the address bar, write out what you copied, that is;



file's-storage-path/file-name/file-extension

• And just before loading the page include the prefix;
  

  file://

  just before the storage path and you should have something like this;



file:///storage/0000-0000/index.html

i.e file semicolon, three forward slash, storage path including the file name. You can then load the page to have your document previewed.

We'll provide a quick example to clear things up. Okay now that you're familiar with the editor, type in this simple HTML document. 

 

<!DOCTYPE html>

<html>

<head>

<title>Simple HTML document</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph</p>

</body>

</html>

Don't worry if you don't understand anything here, we will always come back to explain.

Up next, save the document as index.html.

Just before clicking on the save button, copy out the file directory, its something like this

/storage/0000-0000/index.html

You can then go ahead and save the document.

Once all that is done, minimize your window and open up your chrome browser.

And on the address bar, type in the file directory you copied out, and add these two things;

The prefix;

 file://

That'll be just before the file directory name.

Then add the suffix after the file directory name.

The suffix is the file name (index.html in our case). you'll have something like this...

 file:///storage/0000-0000/index.html

Run it, and it should come out well if you followed me correctly.

I just showed you how to use a text editor and browser in android as you normally would, when using your computer.

So for every code you'll be writing, this is how you'll be opening it in a browser, overtime it'll become easier.

The next thing we want to talk about is the simple HTML document we used to show you how to work with a browser and a text editor, but before that let's get comfortable with the abbreviation, HTML.

So what is HTML?

HTML is a shortened form for hypertext markup language.

It describes the structure of web pages using markups.

HTML elements are represented by tags.

It is one of the building block of web development.

So if we we're to give a simple definition to HTML, we would say HTML is a markup language that describes the structure of web pages using markups.

By markup, we mean the notation that is used to indicate how text should be displayed.

So basically, HTML elements are represented by tags and these tags are not displayed by browsers but instead are used to render the content of a web page.

Now, let's get back to the simple HTML document we created earlier, when you runned the page on a browser as we did, all you saw was the text in the body section excluding those in the angle bracket.

What happened there was that, the HTML tags (in this case H1 and P) were used to render or display the content of a page (in this case, This is a heading and This is a paragraph).

Now, Let's take a close look.

 
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

The doctype declaration is a declaration that tells the browser what type of document it is working with. In this case, it defines the document to be an HTML5 document. You'll also get to see things like, this.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple HTML document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

It does the same thing but this time it tells the browser that it is working with an Html4 document, which is the last version before the latest version. So basically it defines the type of document.

The next thing is the HTML tag, this is the root element of an HTML page.

Just after that is the Head tag and this is where meta informations about the document are placed. That's why you see the title tag, which carries the title of the page inside of it.

In cases, where we want to use internal CSS and JavaScript, they are always placed in the head section. As we go down the series in one of our chapters we'll be focused on just the head tag and we'll deeply look into what we've just mentioned.

Now for the body tag, this is the visible page content, so whatever you place here excluding tags would be displayed on the browser. (remember tags are used to tell them how to be displayed.

Now, how about, we take a closer look? 

 
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

If you notice from this simple document, you find out that element names are enclosed by angle brackets, this is what is referred to as HTML tags.

So basically HTML tags are element names enclosed by angle brackets. The tags with a forward slash just before the element name are the closing tag.

So HTML tags comes in pairs, the opening tag and the closing tag. This is its syntax;

<opening-tag>...content goes here</closing-tag>

So you have the opening tag, the content goes in between and then the closing tag.

As we progress, you'll meet some new HTML tags and we'll explain how they work.

We will be ending this chapter here but before that; If you have questions, suggestions and particular interest, leave your comments in the comment box below and we'll be glad to reply. If you also like our tutorials, please share. we'll meet in the next chapter.