< Front-End Web Development>

Module 1
HTML code file is responsible for the content in the website. Html file contains the content of the
website, like the text Or the images or buttons or links.

CSS files are responsible for styling our website... The CSS file determines how the website
looks... What color will the page's background be... Or will the buttons have rounded corners... It
targets all the content in the website that we created using HTML For example, the text or the
Buttons, and applies Styling to those elements...

Java Script is a code that allows the website to do things or have functionality. It turns a static
website, which just has pretty images or text turn into something that a user can Interact with...

HTML

• HTML stands for Hypertext Markup Language.

• HyperText Refers to the pieces of text, which can link to other documents on the website. So,
These pieces of tags are hypertext or hyperlinks, And they are the foundation of how an
HTML website works.

• Markup Like in the English alphabet, we use quotation marks to mark up something written.
Similarly, in HTML we use some symbols to mark them up and show different things, such
as, for example, which part needs to be bold, etc...

So, How do we mark up with HTML?

It's Done through HTML Tags.

Now, in the earlier days of the Internet, there were only a few HTML tags. These days, there
are a lot more. But realistically, we are going to be using some of the most important ones
Such as Headlining H1 through to H6, or the Paragraph tag, the P tag
The Heading Element
It starts with an Opening tag, and it ends with what's called a Closing tag

<h1> Hello World </h1> --------------> This whole sentence is called Elements and
"Hello World" is Content

<h1> ------> This is Opening Tag

</h1> ------> This is Closing Tag

There are a total of 6 Levels of heading …There is no 7th level of heading

The Paragraph Element

<p>This is First Paragraph </p>

<p>This is Second Paragraph</p>

The text runs into each other onto The same line and we can't tell where one paragraph Begins
and where the other ends. On the other hand, if we had created two paragraph elements for two
different paragraphs Then we'd see that the Paragraph get separated And able to distinguish the
difference.
Void Element
We have seen what non void element are, such as the paragraph element, or the heading element... They're
not Void because they have content right there in between...

A void element is an element where you are forbidden from putting any content inside the tag. In fact, the
tag itself even looked very different.

1). <hr /> ---> This is a "Horizontal Rule" Tag and there is a Space between tag
name and Forward slash.

Make sure that you have got the forward slash "/" in the right direction Not a blackslash "\"

When we add a Horizontal tag, It will divide the content so that this part is not related to this part. And we
got some sort of separation in between... When we run this code or when we view it in a web browser We
would see the first paragraph, the second paragraph And then we would see the horizontal Line or Rule that
separates both paragraphs.

2). <br /> ---> This is a "Break Element" Tag and there is a Space between tag name
and Forward slash.

It’s really useful when you have things where you need to separate things onto separate lines In order to have a
correct meaning.

Example:

To
Unordered List
So how do we create these lists ourselves?
it's super simple to create simply, you have a starting tag with <ul> and then have a
closing tag with </ul>.

1). <ul> </ul>

Now, normally we've had one line elements such as this where we get to add some content in
between the opening and Closing tag.
Now in this case, however, it's a little bit different. They actually go on separate lines because in
between these two opening and closing tags, we need an extra type of tag in order to complete
this unordered list. And these are called list items. So here you can see we've got three list items
and each of them contain some piece of content.

Unordered
Listed Item List

But all three items are enclosed inside this unordered list.

Essentially unordered list items will create these bullet points, because such as in the case of a
shopping list here, the order of the items doesn't matter. So that's why an unordered list would be
perfect for this situation.

Ordered List
If we needed our list items to be arranged in a particular order, then we would create an ordered
list. And once you've added the list items inside there, what Ordered list will do is it will give us
numbers List instead of Bullet points.