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:
- Open a text editor;
- Write something in it;
- Save the file; and
- 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 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. 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 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.
<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.
<!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,
- A
titlehave a strong correlation with the article heading; and - A
titleoften 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";
<!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:
<!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:
<!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.
Top comments (0)