TechBiz HTL Class-20241222_184040-Meeting

Recording
December 22, 2024, 1:40PM
1h 0m 42s

Speaker 1 started transcription

Speaker 1 0:41
Oh guys, I.
Right. Last time we have learned about the anchor tag and let's let's begin
the.
Sorry for the semants.
So faster. Tell me, am I audible?
And my screen is visible to you.

Speaker 2 2:06
Yes Sir. The screen is actually visible.
I can see it clearly.

Speaker 1 2:11
Thank you.
Thank you so.
The remaining takes are so first we have to learn about the what are the
and underline and strike takes.
So these checks are the part over HTML.
So the first tag which is the bold tag, so to as you know that we have
seen.
We have sent some kind of content with the bold letters, so for that to
make to make it bold, we use the B tag which is used to.
Make a call text bold and the bold form. Then we have I tag which is used
to convert the text in the telephone.
After that we have U tag which is AU to underline and specific tag so.
First, let's learn about its query.
Then we will go further and impractical implement implementation.
So as you can see here, these are so the straight.
You can use straighta and with S or S strike by writing completely straight.
So let's see how they work in the with the actual implementation in the VS
code.
Let me first clear the previous.
Ex.
Then we have.
Oh, let's foster. See what is the ball? Take the to make a specific text. We
use the ball tag to make it bold.
So this is the bold tag.
Let's write.
Tech biz.
So then we have let me first start it in the browser. Then you can see the
actual changes.
This is the then we have I tech which is used to make mega text in the
telephone.
Let's write the same tech.
You can see this is converted in the tag form.
Then we have.
Underline tag which is used to underline something.
As we want to highlight something then we use underline tag. That is the
thing in that form. Then after that we have esteg or this title.
You can use any one of them the work and functionality of both of them is
actual same.
So we have striking.
This is the strike day.
Or you can write strike like that.
So as you can see, the implementation here of the underline, then we
have a strike.
So let's move on with the further.
Then we have pretay as you have seen some kind of website coding
website related to coding works.
So you may have seen code written on a web page.
So to show that code on the web page in the actual formatting with the
with the.
Hey with the format, with the formation. So we use the pretech as you can
see this.
This code written on a web page.
So it you can see also it's a formatting which is which is well defined.
It is due to using of pre dig we if you want to show the some kind of code.
On the web browser you use the pre take. So as I am using the prete you
can also.
A.
Any text in that prete or otherwise, you can use the the code.
But special functions or special programs?
So let me show you on the browser.
Is a pre take so as you can see it's automatically left some kind of a
spacing before starting the line.
So it is due to using three day. We can also add in or embed any code
here with that.
So let me show you some code.
So let me copy that old here.
So.
And here with the pre take so as you can see this is the code and this
code is represented in the actual form which we are seeing in the VS
code. That also will be shown on the browser. So as you can see.
It's taking some time.
Let me.
As you can see, this is the our code which is shown on the browser in the
actual same implementation, same formatting without any changes.
This is the work of Prete.
After that, let let's come let's discuss some theory of the pretech.
First of all, the main first find is that it preserves the text formatting and
we have discussed this is the. This is used to preserve or. This is used to.
Manage the formatting of the text. Then we have a second point which
which is that it maintains wide discussion and line breaks in text in a
content in a code, and then we have. It is useful for displaying code and
we have displayed on our web browser then.
We have. This is the prete with the preopening then preclosing tag.
Is there an audio audio book?
Students are saying that my voice is not clear to them.
Hello.

Speaker 2 9:43
Yes, Sir, I can hear you.

Speaker 1 9:43
Hello how are?

Speaker 2 9:45
I can hear you right now.
I don't know if the others are getting better, can get you.

Speaker 1 9:48
OK.
OK.
Thank you. Thank you.
So let's see another text.
So these are the text, big and small text.
Or to increase the length of the OR the size of the text we use big tail
which is in a used to increase the text size and you can see and then we
have small text which is used to decrease the text size after the Third
Point which.
Saying that these are less common due to the functionality provided by
the CSS, we use the CSS to increase or the decay or we can decrease the
size of the text using CSS.
So these are the functional.
This is the functionality provided by HTML. We don't use them commonly,
but these are the part of the HTML, so we will learn.
So this is the big 10.
Send a *** ****.
You can see this the the color of that tag is automatically converted to.
Rate this is the functionality provided by the VS code. It is itself
suggesting us that do do not to use this.
These are these are old time old, commonly used.
Then we have small tech.
First forwards are in are bigger than.
The the three let 3 words.
This is the functionality of the big end Symantec.
Then we have superscript and as we have learned, many formulas in our
mathematics. Then you have seen the superscript or the kind of which we
call them exponential power.
So any number or to give any number to a number and show it on the web
browser we use superscript. Then we have sub script.
To show also the kind of.
Number and other sub script.
Wanna see?
We have a number.
And then give we have #4, then we are gonna provide him some kind of.
A script.
Four power 3/2.
I see in the browser as you can see four power tools.
It is happened because of using super tech.
Then we have the sub tech.
So let's provide number and then we will use the subscript tag.
So let's see. As you can see, this is the difference between subscript and
superscript.
Super, Super take makes the text superscript. Then we have subcript
which makes the text subcript.
These are used for mathematical equations and footnotes. Then the fourth
point is that does not change font size, just position.
It means that when we use them, they doesn't change any kind of any
size or the colors or any other functionality of the content.
They just change the position.
And we have character entity difference.
So these are you to display the result of the special characters.
This is the functionality provided by the XTML. We use it to.
To represent the special characters on the web browser.
It's semantics. Often it start with the end and ends with the semi colon as
the example provided by the.
In the Excel provided here, as you can see these in this pick the special
characters.
These are represented using the character entity reference.
So let's show some.
I see you some special characters.
What kind of speech?
Let's copy some special characters from the browser.
So as you can see guys here it is the.
Representation of the special character here the browser.
So after that we have.
Then we have the revision of the level two we have learned yesterday.
The external attributes and some tags of the HTML.
Then we have learned other tags today.
After that we have the correct entity reference.
Let's see then we have projector of the of this level 2.
So first of all you have to create a page with the heading paragraph.
Line breaks and separators.
Then we have other point which is setting that you have to use images
with the height 300 pixel which is a link to another page.
Use bold, italic, underline and strikethrough in one line.
Right. Third equation of motion using the script and superscript and sub
script.
This is the project for you.
You have to complete this project then. Then you have to share the
screenshot in the group.
After that we have Level 3 or Level 3 is about the browser tools, the
functionality or the.
Or the tools provided by the browser.
To your to see how the functionality or to check the OR the verify or
website code. We use browser tools.
Four legs move one.
So first we have view page source rule it it is used to see or it is used to
display the Raj TML in CSS code of any web page and it is useful for
debugging and learning those external files like JavaScript links. It is used
to show the.
External files like JavaScript and links. So let's use that.
View Page source on our web browser.
So this is the code of our web page.
So let's write something in that.
Then we are gonna see it on the web page.
So for refresh it then then you have to right click on the web page then
you have to Scroll down then you have to click on the view page source.
It will show us the implementation or the Raj TML code of the web page.
As you can see here, this is the HTML code here on our web page.
So this is the functionality provided by Web browser.
Then we have.
Inspect element allows us to real time to edit real time.
See if the in the HTML. Then it is useful.
Also useful for debugging and testing.
It shows the element hierarchy and a layout.
It also includes console for JavaScript.
Highlights the selected elements on the page, so let's use the inspect on
Web browser.
Again, you have to right click on the web page, then you have to click,
Scroll down, then click inspect. As you can see, the inspect tools will open
here so.
It is the console.
Here it is the element. As you can see this is the code. If you change
anything here.
It will not be checked our actual code which is on our device will just show
you how. If you made any kind of change, how they will, how it will look
like after changes.
Let's change something here on the web page.
Oh and.
This is our body.
And this is our paragraph.
Let's remove this paragraph.
Well, you can see the change here. So let me.
So it.
As you can see guys when I remove the paragraph tag, it is also
disappeared from here and then we are gonna use another thing here.
There should, as you can see the change here. When I have added this
text here it it was shown here. Then when I refreshed it, it was.
It was.
It was when we change that thing.
It was temporarily changed here.
Then when I refresh it it then it was gone on its own.
Actual or the the first implementation which was the the paragraph actual
paragraph. So as you can see the inspect.
Tool here.
Tool functionality of the inspect tool and you can also edit many more
things in our.
Web browser using these inspect tools and view source tools.
After that we have as you can see, this is the Doctor Gold's website.
This is the search engine.
This is the this is.
It's a web page with the CSS, then we have.
When we remove the CSS it will look like that it is the implementation of
duckduckgo's website in the HTML. When we have provided the CSS to
that then it will look like that.
So then we have the responsive design.
What is the responsive design we will learn in the responsive this section?
So first of all, we have different skin sizes. Like if you use mobile it will
have and it will have different screen then we. If you use laptop it will
have a different screen.
So for that, we will.
The we have to you, we have to make of the web page look responsive
and you can see this page.
If I am gonna.
Decrease its width then it will automatically.
Work according.
So as you can see, this is the the this implementation or this functionality.
This is the IT this web page is some kind of responsive it means it is
responsive to the changes.
So when I am gonna make any kind of change, it is automatically shifting
the text.
Blue. So this is galvi responsive design so.
Adapts a layout for different skin sizes.
It means different screens have different layout for different screens.
So then we have flexible layouts. That means those layouts which which
are which which are which gave fast response to the changes.
Then we have Third Point.
It means it optimizes images and assets.
It also optimize.
It means it.
It will kind of will be.
Fastly will give fast response to also the images and the content as well.
So it is also flexible for images and assets and then we have 4th part it
means enhances the user experience on the mobile and desktop web, the
desktop or desktop screens just.
It means it also improve the user user experience on the mobile devices
mobile screens. Then we have also it also enhances the experience on the
desktop devices.
And we have live edit code so.
And you can see this is the screenshot I have added but we are gonna see
it on the web browser. We can live HTML of any website for temporarily.
So let me edit something here so.
Let me change something.
W3 schools let me edit it, so I'm gonna first click on the inspect, then it
will open the inspect tools here.
Then this is the.
This is the tool provided by a browser by which we can select any specific
tag.
So let me click on that first, then I will select this heading here, then it will
all it will open this this tag and that code and this code so it is
automatically.
Rendered that this thing to me.
So let me change any anything here.
So let me remove this.
So as you can see the change which I made here in the heading of that of
that web page, it also happened here on this same web page.
So let me edit something else or add something else more.
As you can see here, this is the chain which is we have made in the life on
the on the live website.
After that we have this. We can also change the live CSS and edit it on the
web browser as well. So let's.
Change some.
Let me provide something.
Let me change the color of this heading.

Speaker 3 27:57
Hello.
The transitional network.
Contacts each other.

Speaker 1 31:00
Why did you can see this finally worked here.
Oh, I have to put that style tag in the double quotations.
I was not using that. As you can see when I put that in the double.
Heading is automatically changed or temporarily so as you can see we
also can change this.
Oh, as you can see, this is the live edit of the HTML.
And it will CSS.
So the live editor of JavaScript.
Or right?
So let me show you.
The live edit of the JavaScript.
Oh.
And we can't edit.
It's a script files because it is not publically available here on its website.
We will learn this thing in the next coming chapter of the JavaScript.
So let's learn something.
Something else. So after that we have the changes happening at the
client side. So as you can see the changes which I was making on my side,
these changes were temporary.
The changes made are temporary.
They affect only the current current session and they will not be saved on
the actual in the actual implementation of the server or the actual
program which we have right on our devices.
When we reset or reload the page, it will automatically remove the thing
those changes which we have made.
So it is useful for testing, not permanent fixes it is.
It is just used for the testing purpose, not for the permanent fixes.
So like if you change it is also the note given here. If you change any the
question in your question paper that actual exam.
So if we change any kind of question in dual exam, so if you change that
question, it will not affect the question of the other students or the paper
made by the teacher.
Then we have validating web pages.
So it is by using the validator, the W 3.0 RG we can validate our websites.
It ensures the HTML Ed helps through standards. That means the HTML.
We have the HTML code we have right is based on these standards and
minimizes the cross browser issues. It also used for the.
To removing or minimizing the cross browser issues. It is also helps us in
achieving better SEO result and it is also easy, easier to debug and
maintain that we have.
It optimizes performance by reducing.
As you can see, this is the HTML checker.
This is the nustml checker which is used or where it is the tool which
which is used to validate on HTML or verify the HTML code.
So even though we have a not installed that tool, so let's leave that then
this is the revision of the Level 3.
So we have learned about.
Our responsive design.
Live edit and we'll learn about the validation, how we will when we work
on the project. We'll learn about the validation of the HTML code. So this.
Then a project for you.
For your practice, you have to save source of Instagram in a file and check
the check the render then inspect the links element on the page and read
code to understand.
Then you have to change number of likes on your Instagram post.
Then you have to also validate the page we created in the.
You can leave the number four point. We will see it during the projects.
So after that we have what is the structure of our project?
Level 4 is all about HTML and project structure.
So let's see.
Our next so these these are the.
1st we have the level 4. We have semantic tags here so.
Non semantic tags where it is a difference here or semantic tags are you
are meaningful to describe content.
And on the other side, the non semantic tags are used or for the specific
purpose purpose. So semantic tags.
Also help in CU, they are useful for search engines and then we on the
other side the C mating tags are used for spelling used for layout.
And the accessibility of the semantic table.
It is useful for the screen readers and.
For non 70 text the non the the non semantic tags are no no no.
Cu tags means that do not improve the SEO of the web page.
Not SEO friendly.
Then we have the examples of the semantic tags, which is a header,
footer, article section and nail bar.
So the example of the non semantic tags are the they withstand I and.
Bolte tag the header, footer, article, section and NAV tags. We will learn in
the coming.
Coming PPT in so as we have learned the tag tag tag. These are these are
called nonsmatic tags. These are for these are just they have not got any
kind of a specific meaning.
So these tags have both these specific meaning as the header we use the
header for the making the header the web page.
So the semantic dates are those which have some kind of meaning or
these tag semantic tags are used for this specific purpose.
So we use the header tag to make a header of the web page.
That we are.
We use the tag to make a of the web page.
Then we have section.
It means we have we use these tags to divide our web page in different
sections.
Then we have also navigation bar NAV bar tag.
So let's see.
These tags, so this is the level 4.
What are the tags?
All the days which are used in the body.
Oh, let's.
Theoretically.
Oh yeah.
For the first tag of the body tag is that header tag.
We use header tag.
To tag.
Introductory content or the navigation links? It means we use the header
tag for each kind of things related to the introduction of the. You know
that organizations or the company or about and we have added the as we
have used the user use the about us thing this.
Also use it for adding in the header so then we have also navigation links.
We use the navigation links in the header then and it is the segmenting
tag.
It it it is semantic tag providing meaning to the close tag and close
content. It means the tag we the content which we put between the
header tag.
It it it, it takes some kind of importance or some kind of value or meaning.
The location commonly found in the top of the web page, the location of
the header tag, that means it is commonly on the top of the web page but
can also appear within.
The article or the section text we can also use it.
We are in the between the article or the section thing, but it is the only
use on the top of the web page then.
It is.
It is used for multiple instances.
Can be used more than one page within the different section.
It means you can.
We can also use it more than the one, more than more than once in a
pages within different sections.
So let's see.
On the browser, what is? As you can see this.
This is the our header, so the W3 schools logo, tutorials, exercises,
services. This is called the web page.
We can also add navigation things.
These are the navigation.
Navigations of this web page we can.
We can navigate to different ports in through the navigation.
So let's use this navigation tool or navigation tag in the.
And never BES code.
Or to you better take we use Elder here.
It seems output on the web page.
As you can see, this is the output of the web page. It is.
It is also on the top of the web page, so this is the header which can be
found on the top of the web page.
It is stating that or let's use another tag which is the.
Which is the word main take. So maintain is the user specifically when we
want to add some kind of main content main text on the web page.
So we use this main tag to to state that this is the.
This is the main thing of our web page.
So if you want to show any main thing on the web page, so you have to
put that main thing or main content between the main thing.
So to use the main thing we use main is A tag.
So the content.
Important.
And you can see this is the output of the main tag.
So when you provide some kind of.
Styles. You can shift it from here between the center or the left or the
right side. It depends upon us.
So then we have got. Then we have got another.
And we have got the.
Story the purpose of the main thing is that it encloses the primary content
of the web page. Then it is also semantic tag it it means.
It's meaning indicating the.
It it it can it's meaning indicating that this the the content between that
thing is important.
And it is also unique.
Should appear only once per page.
It means you can use the main tag only once for the main content on a
web page on a single web page you can.
You you cannot use it multiple times on the same web page.
The accessibility, it's accessibility is that it helps screen readers identify.
Did you go help the reader who will use the web page to identify that this
is the content?
The content is main or the important content, or the valuable content not
for the slide bars it is.
It is not used for the slide bars, so excludes content repeated across the
multiple pages like site navigation or footers.
It means that the content.
Which which is repeated repeatedly, repeatedly shown on the web page.
We cannot include this in our main page.
After that we have section tag vitamin you want to if you are. If you are
creating kind of TV on the.
You are you are CV on the web page you can add different sections using
the section tag events.
First of all, on the on the top of the page, you want to add section about
your introduction. So you you add a different section then after that if you
want to add a section of your.
Education. Then you can add the section tag.
Then you have to write the content between that section. After that if you
want to add some kind of skills.
Skills section. Then you can use the skills section.
Section to add the Skills section on the web page.
So let's use the section.
Well, you can see the output is here of the. So by using inspect tools we
can see the size of the size of the space which is taken by this section.
So we can use this out. So this is the.
This is space taken by the first section.
So then we have.
Then we have the second section.
So then we have got the third section. As you can see.
This is the expressing expressing all the pairs taken by these three
different sections.
So the purpose of the section today is groups related content in the
distinction section. As I said, if you want to create ACV, so you will add the
add your expertise in the skills section. If you want to add your
introduction then you will use the a separ.
Section to show your introduction in in in a difference in a in a different
section, so.
It allows you semantic date it it restricts you and meaning to the content.
Then we are third party means the headers often use within the heading
H1.
Section topic means we the head the headers which we call the heading.
We use the H1 to H6 tag to indicate section topics to add some kind of
topic or the name of that section we use the headings heading, heading
tags.
So it is also a message can be nested within the other section.
Or the article thing. You can also add a section in a section tag or you can
also add section in an article tag.
For article, we will learn.
Article we will now learn the article tag also. So this is the article tag
which is you. You can use article as an article tag.
Its purpose is it encloses the content that stands alone, like A blog post or
news story.
Then we have.
Then we have the second part means it is a segmenting segment
semantic.
It means it provides contextual meaning.
Then we have.
Which is that it's independence content should be make sense even if
taken out of the page context.
But it means the content which we use between the art tag will make
some kind of sense if it is taken from this article tag, it means that the
thing which you are adding in the article tag, it can be information or the
data related to something means.
It can be some kind of.
The thing which makes some kind of sense, not a logical thing.
So we have to some we have to add the content which can be GL which
makes some sense which is important.
02/08 something like that.
We use the article tag so you can use the article tag.
By writing article.
Party certificate, let's say.
Oh 'cause I have right that the population of the Pakistan is about
22,00,00,000 then I have.
Called dhami.
Text provided by the VS code.
Let's see its output on the web page. So as you can see, this is the output
of the article tag.
Let's embed this article tag in a section which we have learned previously.
Section tag.
Let's cut it. Then we have to write section tag.
This is section tag, then between the section tag we are going to paste
the article so.
As you can see here this is.
Article between this section is is indifferent or kind of a unique part of that
Web page.
So these are the different and unique sections of this web page.
We have added 1234 sections on our web page.
After that we have.
Article 10.
We have a citing a citing.
It is A tag which is used or we have to add the kind of slide bar or the the
content which is the kind of extra the supplementary content between the
the purpose of the a site tag is it contains the sidewalk the sidewal.
K or the supplementary content or the web page. It is also semantic.
Tentatively related to the main content, it means it also said that the
content between this site text is also important or related to the OR
related to the main main thing.
Then we add Third Point.
It means not.
Crucial content is not essential to understanding the main content.
It it indicates that the the content between the assigned edit is less.
It says that the content which we add between the aside text is not
important to the content. Our main code. Then we have examples it could
hold.
Widgets for tag or AIDS.
It means that the the we see some kind of aids on Web page. So these ads
are added between the site tags means these are less important to the
main thing main point.
So you can also use this as a site tag here.
They're adding a side.
So let's some kind of use.
Heading here.
Yes, can you hear?
List items.
Let's see what happens in the web browser.
As you can see on the side of the web page, this is the thing which is
added using the ASCII tag as shown here.
So this is the functionality of the ASCII tag.
After that we have the footer tag or footer tag. The thing is let's give let's
give you an example of the actual web page where you can see. Let's
open another website.
40 point.
Oh, first, let's see.
Actually did XLS you can see.
The thing which in which the tutorials you can see the navigation and
tutorial interview compiler.
These are the part of the we call that thing our footer and you can see.
This web page you can see this.
The other navigation on this web page, it's in emails.
Also, the details about tutorials and two questions and online compiler.
This is in the.
Footer of the web page so as you can.
This this can be called the vehicles for week.
The call this the thing which you you can see a copyright 2024 Java 3.0.
This is also called the thing which is created we are.
So.
What's the temperature currently hold on?
Oh guys.
Question is that what is the difference between section and so the actual
difference between a section and a is that?
You can add a division in this section or it means the in the division. You
can add add the the content which you like you want to add anything you
can add in the division but in this section you have to add some specific
related related grouped content.
If suppose, if you are creating any website then you have added.
The two different sections.
First section for the dogs you have to add some kind of.
In this section you want to add the types of the dogs.
Then you have another section which is the section for the types of of the
case.
Then you you. Then you will use the section tag here.
And the section of the dogs you will add the the related kind of all dogs in
the section of the dogs, not you will not add any, any any dog on this
section of the case.
Fiction. So this is the actual difference between the section and the web
page.
And and the so you can.
You can.
Use anything which is on your which you want to add.
You can also add in the.
You can also put the section in the OR you can also.
Or do you do?
I want to say you put in this section so that I hope you have got something
today. So that was all for today's lecture.
Do you have any kind of questions you can ask me?
I will answer you here or the group.
Eyes that were all for today's lecture.
You can leave now, so I have to start another class.

Speaker 1 stopped transcription