Me, Learning Web Application: Prologue
Published: 2021-12-17 09:49:48

While I have been a junior software developer, specifically developing web applications, for nearly seven months, I still feel lacking in plethora of the related concepts. To be honest, being a PHP application developer requires a good understanding of web rendering, web networking, database management, web APIs, web security, and so on. I must admit that I have mastered none of them in depth yet; I am literally a so-called _the jack of all trades, master of none_, sadly.

> "I'm bad, and that's good. I will never be good, and that's not bad. There's no one I'd rather be than me." — Ralph Wreck-it-Ralph

**I'm bad, and that's good.** Knowing that I am suck at something can definitely be either good or bad. Good as for one who wants to struggle change himself to be better one. Bad for people who has no hope and will to feel pain.

**I will never be good, and that's not bad.** If one thinks that, no matter whatsoever, he will always need to learn more, that is rather a good thought. Otherwise, he would be a person who has no self-confident and does not know how this world actually works.

That is how the opening ends this time. Sorry that I always start my writing with baloney, but that includes my hobby. Anyway, let us begin.

## A Hello-World App

Writing a web application, or _webapp_ for short, is as simple as:

1. Open a text editor;
2. Write something in it;
3. Save the file; and
4. Open it with a browser.

That was me back then when I just learned how to write code on the first day. But I have realised now that it is not a _webapp_, but rather a _website_ of some sort. [Someone has told me](https://themeisle.com/blog/web-apps-vs-websites/) that _web apps are interactive_ while _websites are informative_.

A couple days later, I saw that it must be a _webpage_ instead, since a _website_ means [a collection of webpages](https://writingexplained.org/webpage-vs-website-difference). Then I started to wonder if it is actually just a _document_, but anyway both can be displayed in a browser, right?

My professor once told us that is not everything is worth explaining up front. That is why our elementary-school teacher never told about _ten divided by two equals five_ until she can make sure that all of her students understand what it means _to share ten candies between two children_. Hence, I believe that I could stick with the term and not worry about anything else until then.

So, let us continue. Instead of saving as `hello-world.txt` or so, let us save it as `hello-world.html`. We will notice that both files are displayed differently.

Remember when we had to put our full name on the notebook's cover, so the teacher would not accidentally give us someone else's homework. Or even worse giving us a wrong mark, eight not ten! We are all special, are not we? Likewise, [an `html` file](https://docs.fileformat.com/web/html/) deserves to be treated uniquely. The browser needs to display its contents differently from other documents.

Next, instead of writing:

```
Hello, Naru is here! Nice to meet you!
```

as previously, copy-paste the code below, save, and reload it.

```html
<title>Naru's Blog</title>
Hello, Naru is here! Nice to meet you!
```

Is there any changes? Yes, the thing on the browser's tab. Now we have a meaningful name for the document. It is _Naru's Blog_. That way can help us distinguish ours from a friend's blog.

After seeing, we can tell that everything within the `title` tags will be the name of our document. It is the one and only way to define a document name. It is the rule. We do really need to come up with a convention, so that our webapp can display properly in various browsers. We are not willing to write it several times using different set of rules for different browser, right?

If we follow the complete rule, we will know that our current code must be written as below instead.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Naru's Blog</title>
    </head>
    <body>
        <p>Hello, Naru is here! Nice to meet you!</p>
    </body>
</html>
```

Although they look the same, it gives the browser a lot more information. In general, more information is better. The relationship between two people, human and computer, or even between two computers, will never be solid without proper communication, agree? Great!

## The Title Tag

A document `title` is not merely _a name_, but it is _a name that describes the page's content, or its purpose_. I am Naru, a junior programmer. _Naru_ is my name, which is what people call me by. _Junior programmer_ is my title, which is what people know about. Whenever they need a website, they want to have a chat with me.

This is a Keigo Higashino's book, "The Miracles of the Namiya General Store". This is Naru's blog, what is the title? I have decided to change it to "First Meet Up With Naru" as the title. That will do, describing what topic I am going to tell my reader.

If only people have tried to google "how have fedora of mine been", they might find an article from me listed in there. So, not only a `title` can benefit people, but can also help our articles appear in search results.

If we pay a little attention, it is written as "How Have Fedora of Mine Been - DEV Community". If we click on it, we will see the article entitled "How Have Fedora of Mine Been". Two things,

1. A `title` have a strong correlation with the article heading; and
2. A `title` often come with a branding.

I think, myriad websites put their branding next to the title and that is nice. I would recommend myself too, so now it read as "First Meet Up With Naru - Naru's Blog";

```html
<!DOCTYPE html>
<html>
    <head>
        <title>First Meet Up With Naru - Naru's Blog</title>
    </head>
    <body>
        <h1>First Meet Up With Naru</h1>
        <p>Hello, Naru is here! Nice to meet you!</p>
    </body>
</html>
```

## The Head Tag

Think of a letterhead, which usually consists of the recipient name along with its address and sometimes with a corporate logo. But we want our articles to be read by a wide audience, so not going to put any specific information from the reader. But for a logo, why not? It can help us develop a successful branding of our webapp. Since our webapp, for now, is meant to tell about ourselves, we are good to add a paper-like logo. There are lots of ways to insert a webapp logo, but let us do this:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>First Meet Up With Naru - Naru's Blog</title>
        <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA6OjoAPr6+gD8/PwA9fX1AIKCggD39/cA8PDwAJaWlgDy8vIA6+vrAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMzIiIiIgACIiIiIiIgAAZohoiIhmAAREREREREAABEVVRUVUQAAERERERERAAARFVFVVREAABEREREREQAAJlZVZWVmQAAmZmZmZmZAAB3V1dVdXcAAKqqqqqqqgAAqlVVWlWqAAAREREREREAAAAAAAAAAAD//wAA8AAAAOABAADgAQAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAAD//wAA" rel="icon" type="image/x-icon" />
    </head>
    <body>
        <h1>First Meet Up With Naru</h1>
        <p>Hello, Naru is here! Nice to meet you!</p>
    </body>
</html>
```

It would appear on the tab, close to the title.

We might be wondering something, huh? None of the two, the `title` and `link` tags, are displayed on the browser's body. Because a body is meant for the `body`. Everything that goes into a `head` holds information for the machine to process, not primarily for human reading.

A `head` is all about hows;

- How the pages can be recognised (by search engines)?
- How the contents are displayed (for the readers)?

While a `body` is all about whats;

- What makes the page unique?
- What contents are displayed?

For that purpose, let us add some tags inside the `head` tag:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>First Meet Up With Naru - Naru's Blog</title>
        <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA6OjoAPr6+gD8/PwA9fX1AIKCggD39/cA8PDwAJaWlgDy8vIA6+vrAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMzIiIiIgACIiIiIiIgAAZohoiIhmAAREREREREAABEVVRUVUQAAERERERERAAARFVFVVREAABEREREREQAAJlZVZWVmQAAmZmZmZmZAAB3V1dVdXcAAKqqqqqqqgAAqlVVWlWqAAAREREREREAAAAAAAAAAAD//wAA8AAAAOABAADgAQAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAAD//wAA" rel="icon" type="image/x-icon" />
        <meta name="description" content="A description of Naru">
        <meta name="keywords" content="naru, biodata, blog">
        <meta name="author" content="Naru">
    </head>
    <body>
        <h1>First Meet Up With Naru</h1>
        <p>Hello, Naru is here! Nice to meet you!</p>
    </body>
</html>
```

Practically, we could put any metadata there.

## The Body Tag

As previously mentioned, a `body` tag is where we put almost all of the effort into telling a story. We will dive into it in the next episode.

## The HTML Tag

An `html` tag, as we can expect, is the root for the HTML document consisting many tags. It is like a document's margin, I would say.

Phew, that is quite a long read, see you later.

## References

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head