Web Designing By Katta

There are lots of web sites that can help people to learn HTML, JavaScript and CSS. But here I am going to explain it with proof(screenshots). because when IU was an undergraduate I faced Lots of problems in web designing. I will mostly focus on them as it's a perspective of a student. I will be using notepad++ as my code editing tool and to execute codes I will use Google Chrome. As an example I'm going to make a website for a Hardware store named MJS Traders. Hope you'll learn something out of this blog. Good Luck.

• Watch the following code and output .

CODE

OUTPUT

As you can see what we are going to type in the title, will appear on the tab name position. What we type in the body section is displayed in the web page. 

1. Why there is <div class = "header"> ? 

                                                    div means division in html. It's more like an area in simple words. class= "header" helps to identify the div section when adding CSS. In other words if we need to use a decoration to the div section we can use internal CSS methods and this will help us to identify which div section needed to be decorated.

2. h1 means ? 

                    h1 means a header. We can use h1 to h6. It differs from size. As an example, h1 is the biggest and the boldest header. h6 is the smallest header.

• 
  

CODE

OUTPUT

Here I added an unordered list(ul).

1. But why an unordered list?

                                            My intention is to make a horizontal navigation bar in my webpage. So , the best way to do that is use an unordered list. 

2. What  is 'li' ? 

                    'li' is representing list item. In this tag we should add what we need to add to the navigation bar. 'a' is a placeholder for hyperlink. 'href' defines the website/URL to go when the user click on the hyperlink. Basically, without 'href', 'a' is just keeping a place for a hyperlink.

3. "#" what is that?

                            Here I used '#' just to show you the place the URL should be. Remember to paste your URL in double quotation marks. 

4. What is wrong with the last 'li'?

                                                Actually, I used an inline CSS here. It's because I needed the 'about' button in the right of the navigation bar.

5. Why there is a class = "active" in 'a' tag?

                                                                   It's as same as before, here I'm going to use a CSS decoration when the about button is touched by the cursor. You'll see it in the future examples.