Monday, November 6, 2023

Let’s add color to the text

Let’s add color to the text

Applying color to Main Heading

Let us add color to the main heading using css property

.main-heading{
    color:blue;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="mainheading.css">
    </head>
    <body>
        <div>
            <h1 class="main-heading">Tourism</h1>
        </div>
    </body>
</html>

And you can see the colour of the main heading has been changed to blue

But we can also style in the html itself as shown below:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1 style="color:blueviolet">Tourism</h1>
    </body>
</html>

But I found that it is bad practice it is the bad practice of writing the code as it messes up.

Applying color to paragraph

Now let us add color to the paragraph as shown below

.paragraph{
    color:red;
}

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="para.css">
 </head>   
 <body>
    <div>
    <p class="paragraph">Plan your trip wherever you want to go</p>
    </div>
 </body>
</html>

Now you can observe that the color of the paragraph has changed as below:

Adding Background-color to the container

Now we will be adding background color to the container

.card{
    background-color:lightblue;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="back.css">
    </head>
    <body>
        <div class="card">
            <h1>Tourism</h1>
            <p>Plan your trip wherever you want to go</p>
            <button>Get Started</button>
        </div>
    </body>
</html>

Now you can observe that the color of the container has changed as below:

Saturday, November 4, 2023

Adding CSS properties to our website

Adding CSS properties to our website

CSS is Cascading Style Sheet and it is used for decorating our webpage or it is used for styling the website.

As we have been constructing a website as discussed in the past story, let us continue that:

Before css is not being used:

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
    
        <h1>Tourism</h1>
        <p>Plan the trip wherever you want to go</p>
        <button>Get Started</button>
        
        
    </body>
</html>

As we can see the text is aligned in the center of the page, so now we will be learning about how to keep the text in the center by using CSS.

Inorder to write css syntax, first we need to create the css file. css syntax is a set of rulesets.

Ruleset:

selector{

property1: value1;

property2: value2;

}

Selector-Name:

First we need to select the proper Selector-name.

For Example:

As we are planning to align the text in the center we can use the selector name as:

horizontal, horizontal-center, h-center, horizontal_center, HorizontalCenter etc.

So, the css rule set to center elements is:

.h-center{
  text-align:center
}

So, we need to use selector with the “.” because it is rule of the syntax.

.h-center is the selector from the above syntax, text-align is the css property and center is the css property value.

HTML Attribute:

Html attribute provide additional information about the html element.

So, now we will be adding html attribute to the html element:

<tag attribute=”value”>content</tag>

attribute is the syntax name of attribute and value is the attribute value

For example:

<h1 class=”h-center”>Tourism</h1>

In the above example there is no need to use . infront of attribute value i.e “h-center”

Class attribute is used for adding css property to the html and if we use

<h1 class=”h-center>Tourism</h1> it align only the Tourism to the center of the page and to add this property to all the elements we need to wrap the elements.

The wrapping means grouping all the requirements at one place and it can be done by “container”.

For Example:

If we want to delivery the 10 products to the same address then we delivery them at a time by gathering all the products and hence that could be easy and such a way this container helps to move all the text to the center at a time.

In html container element is “div”.

<div> other element</div>

Friday, November 3, 2023

Fundamental in Programming (Building a static website)

Fundamental in Programming

(Building a static website)

For example we have this website and the starting page is as shown above. Now inorder to build that website or the page, we need to breakdown into small parts and such we can develop the website easily.

As seen above there is a heading, some content and a button that can be observed.

Now, let us start building this website.

For that we need heading, paragraph and button tags and now we are all set to go:

1) Heading Tag

Heading Tag is used for writing the heading for the website

As, we already know about the heading tag from our previous stories and if you are unaware of the tag you can go through this https://medium.com/@bhavithach8/html-headings-4b776822de67

<h1>Tourism</h1>

2) Paragraph Tag

To write any paragraph we use paragraph tags and you can more from this given link https://medium.com/@bhavithach8/html-paragraphs-76f7f061c7c9

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <p> Plan your trip wherever you want to go</p>
  </body>
</html>

3) Button Tag

Button is used to take you to the new page in the website

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <button> Get Started </button>
  </body>
</html>

Thursday, November 2, 2023

Fundamentals for Frontend Development

Fundamentals for Frontend Development

1) Browser and URL

Browser

A browser is must to open any website. Browser plays a major role in opening the any website.

Browser will understand only the languages like

HTML

CSS

JAVASCRIPT etc.

Uniform Resource Locator(URL)

It is the address of the website

For Example:

2) Syntax

Rules of language. Misssing any of the details will change the appearance of the page.

Syntax is not the program, it is the part of the program.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
  background-attachment: fixed;
  background-size: cover;  
} 


</head>
<body>

<h1>Hii</h1>

</body>
</html>

In the above example there is a missing closing style(</style>) so the appearance of the page changes.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
  background-attachment: fixed;
  background-size: cover; 
}  

</style>
</head>
<body>

<h1>Hii</h1>

</body>
</html>