HTML Dasar : Pendahuluan HTML (1/13)

Welcome back to the web programming channel Unpassed. Still with me, Sandika Gali, as the instructor in this video. This is the first video of the first series, which is the series about HTML. In this series, we will discuss HTML, starting from what is HTML, its history,

Until we will create a simple website using HTML. In this video, I will discuss about the HTML preview. So, we won't go into the mood here. We will start from the next video. Okay, let's start. Let's see HTML. It's a abbreviation of Hypertext Markup Language. So, it's a markup language.

the language of religion. As you know, the language of religion has variables, functions, control structures, conditions, repetitions, etc. HTML is called Markup Language because it contains a series of markups. We will call markups

Tags that can be used to show the content of a browser. For example, we want to show a text. We need to know what we will use to show the content of a browser.

or the title of the page, title of the article, or we can call it a heading, or we can make the text hyperlink. Why is it called markup? Because it's function is to tell the browser how a content will be displayed. That's the difference between markup and programming language. This HTML,

It was created by Tim Berners-Lee. He is a person who is still in charge of why we can access the web every day. But besides creating and presenting HTML specifications, he also found many things, such as HTTP protocol, HTML, Word, Web,

and he also created the first web browser, web server, and the first web page. So, because of this gentleman, we can do Facebook every day. Besides that, he is now the director of an organization or consortium called W3C, or World Wide Web Consortium. So, this is an organization whose task is to create standards for everything on this web.

This is the web. We can see here, we can go to the About section. There's About W3C. If we scroll down, we can see what W3C does. If we read here, the main activity of W3C is to develop protocols and guidelines that will ensure the long-term development of this web. So the task is quite noble. Where is it?

This organization, this place, apparently, they said, if we look at how this W3C is located, it doesn't have a main headquarters. It said that there are some institutions that are part of it. So there are some in the US, in MIT, in France, in Japan, and in China. So smart people all over the world are joining to create standards in this web world. What are the standards?

We can see here in the standard section, scroll down, this is the standard. Almost all of them, there are web design and applications, web architecture, web service, and so on. What we will focus on is what is here, web design and applications. Inside there are HTML, CSS, and so on. We can see inside, this.

that W3C is managed by HTML and CSS. So if HTML has new tags or there are old tags that are missing, it's because of W3C. How will the rules be implemented? For example, they already have new rules. They will make the rules so that they can be implemented in the web browser. That's why one of the reasons we have to update

the web browser so that we can update the technology that was summarized by the E3C. That's it in general. But because the one who made this web browser is different, the company is different, the developer is also different, so each browser also implements the rules that were different.

The difference is not that big. That's why we need to install all browsers so we can see the difference. It can be from the display, performance, etc. So, if HTML has a new standard, the browser will be updated after that to accommodate the new standard. Here I have an example.

a website called evolutionoftheweb.com where we can see the development of internet technology followed by the development of web browsers. This website is really good. I can show you the address, evolutionoftheweb.com This is cool, it has a choice for Indonesian language. So I can change the language, then we can explore. If we click, we can see the website, really good.

This is the timeline. From left to right, it's the timeline. And if we look inside, there's the technology. There's day and night mode. I prefer to see it in night mode. The background is black like this. Now, let's see. There's the timeline above. We can see that this is the browser and the technology that supports it.

In 1991, we found the HTTP technology. If we scroll down, there's a shortcut. If I click on it, it will open Wikipedia of the technology I chose. Let's go back to the web. In 1991, we found the HTTP. In 1992, we found the HTML1.

After that, the first web browser was created. If we see here, Mosaic is the first web browser. It supports HTML1 technology. Then, in 1994, Netscape was created. Maybe some of you know about Netscape. And in 1995, Opera and so on. This is because, if I click HTML, we can see

So there is a sequence of technology development in a line. And if you pay attention, every time there is an HTML change, there will be an update from the web browser. Then you can see the development of the web browser. If we click the web browser, you can see the development.

The website is quite cool. If we click on Opera, for example. I click on Opera. At first, the Opera looks like this. It changes every time I click on it. It changes to the latest one. So you can try to open the website and learn the technology. What have you used? As the year approaches,

the technology is getting more and more sophisticated. This means that new technology has been found since 2008 until now. So please learn to open and learn this website. Let's go back to the slide. We have seen the development of HTML technology. And maybe you can see CSS and Javascript inside. So there are three technologies.

each has its own task HTML is created to create a page structure and provide content CSS is used to decorate the page so that the page looks prettier and better and JavaScript can do many things but specifically for our students JavaScript that we will use is for interactivity

the website is more interactive, it can have animations, slideshow, etc. Even though, outside of that, JavaScript can do other things that are more powerful. So please use it according to your own functions. Even though HTML can also decorate fonts, give color, set size, but CSS can do much better.

Never decorate a page using HTML. If I can illustrate, HTML is like a mannequin, a plain mannequin. A mannequin has a head, a body, legs, and hands. We can give this mannequin any clothes. Today it's red, tomorrow it's green. The clothes or accessories that we give to the mannequin

That's CSS technology. While JavaScript, where is it? JavaScript, besides making the appearance more interesting, it also makes it smarter. Because JavaScript is a programming language, it can make decisions, it can make more complex computing processes. So, the mannequin can walk, can talk, that's the analogy.

use it according to their own needs. So, I have an example, initially, Amazon's website was like this, this was only used by HTML, maybe in the 90s, then it changed, the evolution became like this, and finally, now Amazon's website is like this, there's slideshow, we can have better interactions.

And this is another example of a website that we use everyday, Facebook. At first, the display is like this. As you can see, it's very interesting. Maybe if you were to start Facebook like this, no one would want to use it. This is the early days of 2004, Facebook's display was like this, then it evolved, like this, then changed again, until now.

The technology is more complex, not only using HTML, CSS, JavaScript, there are other things. But if you see, this is the website we used last year. If you want to access it, you can go to www.pws1.if-unpass.org/2014. Because 2015 is still in development. This is the website.

is a website that is made purely using HTML, CSS, and JavaScript only. There's no server-side programming like PHP, ASP, etc. or using database, MySQL, etc. Only HTML, CSS, and JavaScript. So, the hope is that at the end of the semester, you can make something like this or even better than this.

only by using HTML, CSS, and JavaScript. What's next? Maybe in the next video we'll start coding. We'll make a website using HTML that's simple, still using Notepad, and not using code editor. So prepare the Notepad in the next video.

Okay, maybe that's all for today. I'm Sandika Gali, thank you for watching. See you in the next video.