Hey, welcome back.
As part of today's programming concept, you learn how to program in HTML.
HTML is a language, that's for sure.
Email is the language which builds every web page on the web, and HTML is interpreted by your browser.
So basically, every page that you see, if you right click over that page and go to view page source,
that is actually HTML and your browser is interpreting this language and displaying the output, which
is this page.
Now, why am I teaching you HTML?
Well, because.
I showed you earlier this.
Page, Right.
So that's the homepage of our API, which gives some information here.
And so this is also built in HTML.
Now, I want to clarify something, though.
When you use a library such as stream lit, you don't need to know HTML.
So as you've seen before for stream lit, we simply wrote some python codes such as SD dot.
Right?
And then we enter some text here and that would translate to something on the browser.
The secret here is that stream light produces HTML for us, so we don't need to write HTML.
So if you click over the pages we have produced with extreme leads.
If you right click and go to views page source, again you'll see HTML code.
So that HTML code is also produced by streaming it.
But there are other libraries such as Flask and Django.
These libraries are also used to build websites just like stream like this.
Used to build websites of both Flask and Django.
Don't produce that HTML.
Now you'd ask, Well, why not using streamlined for everything then?
Well, that would not be a good idea for more complex apps because you can't just make any app with
streamlined.
So streamlined is limited to more simple websites and more simple apps.
If you want to build an API, for example, you can do that with stream leads.
You need something like Flask or Django, and Flask is what we're going to use today.
So before we jump into Flask, I want to introduce you to HTML.
Therefore, let me delete that.
Therefore, we want to create an HTML file here.
So right click, go to new and create an HTML file.
Give it a name.
Let's say tutorial.
You don't need to give the HTML extension because permission will give the extension automatically.
So if you create a that HTML like I did, you should see some code already.
So I added some code.
Another way to create the HTML file would be to right click and go to new and go to a simple file.
Then you'd say tutorial to dot HTML, for example, but then you'd need to write that code manually
in here.
So every edge HTML page, every HTML document needs to have that code.
So I'll delete the tutorial to that HTML and keep tutorial that HTML.
No.
So this is an HTML document and you can open it by right, click in and go to open in browser and open
with one of your browsers.
Or you can just click this one of these.
So I can see if they show on your chart.
So like you can click on Chrome.
And for now, this is an empty web page, but we can add content.
To add content to a web page.
You need to do that inside these body tags.
So all these are called tags.
This is a head tag.
This is an HTML tag.
This is a body tag.
The actual contents, the visible content is added inside the body tags.
I'll explain what these tags are also.
But let's add some content first.
For example.
Hello here.
You don't need to save the page.
Just go to that button again and hello is rendered in here.
So there we have a simple web page with some content.
Let me zoom that in.
So there we go.
Let's add some more content.
Now it's a good idea to actually use proper tags for each element, for each content that you that you
add.
So I added this tag.
It's a P tag.
It means a paragraph.
A paragraph tag is used to add normal text like, Hello, this is our first web page.
So now if you go to the Web page.
You can refresh or in my case, this refreshes automatically.
Otherwise, you need to press control or command or to refresh the page.
If the automatic refresh is not working.
So that's the paragraph we just added.
Now, it's a good idea to actually indent this with a tab like that, because what we're looking here
is now like a hierarchy of tags.
So the first tag is this dock type HTML.
This is like the declaration of what this type of document is.
And then we have the HTML tag.
Now, if I select this tag, you'll see that this will be highlighted, this closing HTML tag.
So every tag has an opening tag.
So it opens in here and it closes in here and everything inside is part of that tag.
And then we have the head tag.
It opens here and it closes in here.
And everything inside those two tags is part of the head tags, right?
These are part of the two head tags.
Now, these are some declarations of the title of the web page and the character sets of the Web page.
So if we change this to, let's say my Web page and you go to the Web page, you'll see here on the
tab on the browser, my web page is shown.
So that's the title of the Web page.
And then we have the body text.
So now everything that we enter here is part of the actual web page.
So let's show you some more tags.
We have the H one tag welcome and that will render as big font in here.
You also have smaller headings.
So these are headings.
Like, this is our web page and that will render like this.
And then we have the P tags.
So normal text.
Now.
Next, let's add an image.
To add an image.
You need the IMG tag.
But then before you close the tag, you want to add an S or C property, which is equal to this quote.
And inside the codes you need to enter the path to the image you want to display.
Cat dot PNG.
Now this image has to be in the same directory with tutorial dot html, so I'll paste the image here
which I copied before.
You can find this image attached in the lecture resources.
Or we can use your own images.
So get that PNG cat dot png g.
Then you want to close this tag and that's it.
Now, image is one of those tags that doesn't need.
This closing tag.
So you need to remove that.
It doesn't need that tag because.
So that's the content.
So it doesn't need a closing tag because we're not showing any text.
So usually between the tags will show some information.
But since the image path is given through this property, then we don't have any other information to
show besides the image.
Now, this gap is quite big, as you can see.
So for that we can add styling to the image using a style property and that would be equal to quotes
and side quotes.
You give the properties such as width, lets say 500 pixels p x, and then you do this semicolon and
then hide.
So we're still inside these quotes, the height, let's say 400 p x, so don't forget the p x and let's
check the cat.
So I can see that the ratio, the aspect ratio of the image has changed.
So if you want to preserve the aspect ratio, then you need to only give one of these properties.
So only the width and the aspect ratio will adjust.
So the height will be relative to the width.
So that's what we have so far.
Let me show you now how to add a link.
A link can be added using the A tag with an h ref property and very give like https google dot com.
So that's the link.
And then you close the link.
And this has a closing a tag and inside here you give the description of the link, the text of the
link such as Google page and it will be rendered like this.
So if you click that, it will take us to Google.
And the problem here is that this was rendered in the same page with the image.
But you can fix that by using a break tag like that.
So this creates a brake line, as you see now, there's a brake line after the image.
So between the image and the link, you can add more brake lines if you want more space between the
two elements just like that.
Okay, So we need to add one more element to this code and then we're done.
So what I want to add is something here on top.
What I want to add is a NEF element, and this will contain multiple other elements, nested elements
which will be like this.
Tags.
I'll just copy this actually one time.
Two times, three times.
I'll change the links to about.
This to.
Contact us.
And the last one.
Store or something like that.
So let me change the descriptions as well.
I'll explain what I'm doing in just a bit.
Contact us.
And store.
So if I go to the web page now, we will see that what I've just added is the actual navigation menu
of the website.
So that's how you can add the navigation menu.
The problem here is that if we click over one of these, the page is not found.
So you see that the browser is trying to access the page.
Contact us.
The page is not found because this is just one HTML page.
And now we're stepping into the world of interactions.
And to do such interactions.
To enable such interactions, you need a web framework such as Django or Flask.
So these are web frameworks written in Python.
And these enable you to create complete websites with multiple pages so that the pages can interact
with each other.
And so for that, you need web frameworks.
You need a language such as Python or PHP.
So PHP also has its own frameworks and Python has its own frameworks such as FLASK and Django.
And we will use of course Python and exactly how we use Python.
That's a question which you'll understand in the next videos.
So get ready for that and see you later.
Thanks.