codemonk: March 2021

There are two types of Websites- Static Website & Dynamic Website.

Static Website: Codes are fixed for each page and information contained in the page doesn't change like a printed page.

Dynamic Website: Dynamic Webpages whose content changes dynamically.

A dynamic website uses client-side scripting or server-side scripting, or both to generate dynamic content.

here data controlled by users and client both.

Most of the Websites we searched are dynamic websites like- Youtube, Facebook etc.

** So As HTML is the base of any websites frontend and CSS updates the design of the website......After that, we use Javascript that acts as a brain of the Website.

Now Html+CSS+Javascript all are client-side language now for storage purpose we use Database.

Database stores in server and for that, we use one Server-side language like PHP, Java, Python etc.

so as we can summarize the entire thing:

HTML-base of Website

CSS-Design of Website

Javascript-Functionalities

Now many people can think we can use a website builder also for making a website why we need to learn these?

Here's the Answer:

& also Coded website has a very high SEO rank so we need to build websites by coding.

Now start with HTML:

HTML-Hyper Text Markup Language

** It's not any programming language. It's a markup language.

Now genuinely one thought comes to anyone's mind What is Markup Language??

A markup language is a means of describing a document’s content and structure, usually by decorating it with metadata. It based upon some elements and Tags.

Examples include HTML, XML, SGML (the parent of both of those), LaTex, etc.

Elements:

Now Elements contains some tags....

Tags: <h1> </h1>

Some elements also don't have any closing tags:

Ex-

<img src="location.jpg">

Nesting of Elements:

Now we can give some additional property to every element that is called Attribute.

Ex-

<img src="location.jpg"width="1564px"height="1120px">

Syntax of Attributes:

Opening tags:

<tagName attributeName="attribute Value">

EX-

<p align="left">Welcome to upni Khaksha</p>

** here align is an attribute.

Now most commonly used Attributes:

ID:

It is used to give any elements to a unique name

Example-

<p id="Blog">This is web-development blog </p>

**Now here Blog is an attribute value.

In CSS

#Blog{

Colour: Red;

}

Class:

It is used to give any elements to a non-Unique name.

Syntax-

<tag Name Class="attribute value">

**Here we can use same name for multiple class and use one css selector to design that.

Document Structure:

We have to define what type of document structure it is...there are many types of structure like- HTML, XML etc.

Here We are working on Html file so that we define

<!DOCTYPE html>

<html> //It's a root tag

<head>

<title> Write your title</title>

</head>

<body>

Page content here

</body>

</html>

In this blog, we use VS-Code for these full web-development Project

Link for Downloading VS-code:

Link 1

After Installing VS-code File --> New File --> save --> save the file (filename.html)

Then press '!' sign & we see HTML base codes like:

Actually '!' it's an emmet Abbreviation. You can do google for more details.

Emmet Abbreviation cheat sheet website:

https://docs.emmet.io/cheat-sheet/

** We use this extension for perfect indentation :

now right-click then Command-Palette

Then Type Format-Document and press enter

Heading Elements:

(<h1> - <h6> )

Now we do some codes:

when the user open our URL the first page open that is index.html

now we type html:5 and press enter we get

<html lang="en"> that means here we use english language.

here we can use alt+shift+down-arrow for copy_paste.

Output:

<p> -- Paragraph tag

<Br>-- Break tag

<hr>-- Used to add horizontal line in our Html Document

HTML ENTITIES :

we use entities tag from https://www.w3schools.com/html/html_entities.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aayee Bakchod</title>
</head>
<body>
    <h1>Welcome to Aayee Bakchod&lt;Pralay&gt;</h1>
    <h2>Welcome to Aayee Bakchod</h2>
    <h3>Welcome to Aayee Bakchod</h3>
    <h4>Welcome to Aayee Bakchod</h4>
    <h5>Welcome to Aayee Bakchod</h5>
    <h6>Welcome to Aayee Bakchod</h6>
    <hr>
</body>
</html>

Output:

Syntax of HTML comments:

<! -- Opening tag

-- > Closing tag

Syntax of Hyperlink:

<a href="http://www.google.com">

URL- Uniform Resource Locator

**There is two types of URL- 1. Absolute

2.Relative

Absolute: root/folder1/folder2/destination.html

Relative: currentfile/target_folder/destination.html

Example-

Linking index page and Page2 :

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aayee Bakchod</title>
</head>
<body>
    <h1>Welcome to Aayee Bakchod&lt;Pralay&gt;</h1>
    <h2>Welcome to Aayee Bakchod</h2>
    <h3>Welcome to Aayee Bakchod</h3>
    <h4>Welcome to Aayee Bakchod</h4>
    <h5>Welcome to Aayee Bakchod</h5>
    <h6>Welcome to Aayee Bakchod</h6>
    <hr>
    <a href="https://www.google.com" target="blank">Google</a>
    <a href="page2.html">Page2</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Page2</h1>
    <a href="index.html">Home</a>
</body>
</html>

For adding an image in website:

Syntax :

<img src="img/img.jpg" alt="" width="" height="">

example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aayee Bakchod</title>
</head>
<body>
    <h1>Welcome to Aayee Bakchod&lt;Pralay&gt;</h1>
    <h2>Welcome to Aayee Bakchod</h2>
    <h3>Welcome to Aayee Bakchod</h3>
    <h4>Welcome to Aayee Bakchod</h4>
    <h5>Welcome to Aayee Bakchod</h5>
    <h6>Welcome to Aayee Bakchod</h6>
    <hr>
    <a href="https://www.google.com" target="blank">Google</a>
    <a href="page2.html">Page2</a>
    <hr>
    <br>
    <img src="E:\Web Developement By Apni khaksha\Image\Poster.jpg" alt="Rap poster" 
width="350">
</body>
</html>

now import Video to your site:

<video src=""> </video>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aayee Bakchod</title>
</head>
<body>
    <h1>Welcome to Aayee Bakchod&lt;Pralay&gt;</h1>
    <h2>Welcome to Aayee Bakchod</h2>
    <h3>Welcome to Aayee Bakchod</h3>
    <h4>Welcome to Aayee Bakchod</h4>
    <h5>Welcome to Aayee Bakchod</h5>
    <h6>Welcome to Aayee Bakchod</h6>
    <hr>
    <a href="https://www.google.com" target="blank">Google</a>
    <a href="page2.html">Page2</a>
    <hr>

    <br>
    <img src="E:\Web Developement By Apni khaksha\Image\Poster.jpg" alt="Rap poster" 
width="350">
    <br>Next Rap
    <hr>

    <video src="E:\Web Developement By Apni khaksha\Video/Previous.mp4"width="400" 
controls></video>
</body>
</html>

Output:

Now we use some more syntax :

<video src="E:\Web Developement By Apni khaksha\Video/Previous.mp4"

width="400" controls loop muted poster="Image\video_poster.jpg"></video>

Then the video is muted and played by loop and it also has a predefined thumbnail.

Now we use <iframe> tag-- mainly this tag is used for embedding another website into our website.

 <iframe width="560" height="315" src="https://www.youtube.com/embed/Dd6R3VOZGtE" 

frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 

gyroscope; picture-in-picture" allowfullscreen></iframe>

we use this to embed a video from Youtube :

now <Table> tag

<table>
      <thead>
        <tr>
          <th>Subject</th>
          <th>Theory</th>
          <th>Practical</th>
          <th>Total Marks</th>
          <th>Grades</th>
        </tr>
      </thead>
      <tbody>
          <tr>
              <td>TOC</td>
              <td>60</td>
              <td>50</td>
              <td>110</td>
              <td>B</td>
          </tr>
          <tr>
            <td>Complier Design</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
            <td>B+</td>

        </tr>
      </tbody>
      <tfoot>
          <th colspan="5">Result:Pass</th>
      </tfoot>
    </table>

Output:

Web-Form :

Webform is an HTML form from that we collect different kinds of Data to Server.

Syntax:

<form>

<form method="get">

<form method="get" action ="index.php">

In the action section we use that file URL name where we want to send the data.

**method can be two types- get/push.

Elements in Form:

<input>

Attributes

type="text"
name="firstname"
value="male"

**For blog post or any post big post we use:

Now We try to make a Payment Form:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Form</title>
</head>

<body>
    <form action="">
        <h1>Payment Form</h1>
        <p>Required fields are followed by *</p>
        <h2>Contact Information</h2>
        <p>Name:* <input type="text" name="name" required></p>
        <fieldset>
            <legend>Gender *</legend>
            <p>
                Male <input type="radio" name="gender" id="Male" required>
                Female <input type="radio" name="gender" id="Female" required>
            </p>
        </fieldset>
        <p>Address: <textarea name="address" id="address" cols="100" rows="8">
</textarea> </p>
        <p>Email:*<input type="email" name="email" id="email" required> </p>
        <p>Pincode:* <input type="number" name="pincode" id="pincode" required> </p>
        <h2>Payment Information</h2>
        <p>Card Type:
            <select name="card_type" id="card_type">
                <option value="">--Select A card Type-- </option>
                <option value="Visa">Visa</option>
                <option value="Master_Card">Master_Card</option>
                <option value="Rupay">Rupay</option>
            </select>
        </p>
        <p>
            Card Number* <input type="number" name="card_number" id="card_number" 
required>
        </p>
        <p>
            Expiration Date:* <input type="date" name="exp_date" id="exp_date    " 
required>
        </p>
        <p>
            CVV:* <input type="password" name="cvv" id="cvv" required>

        </p>
        <input type="submit" value="Pay Now">
    </form>    
</body>

</html>

Now we merge projects and make the Website:

Structure of the Website:

These all are the Semantic tags. Semantic Tags are those which clearly defines the content

Ex: <Nav> <h1> <h2>

There are also non-semantic elemnents. Non-Semantic elements which tell nothing about content.

Ex: <div> <span>

here we can also see Inline elements & Block elements.

For making any website diagram or Frame we use WireFrames

link: https://whimsical.com/wireframes

Now we try to create this Website:

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aayee Bakchod | Home </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Aayee Bakchod</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">Short Flims</a>
        <a href="#">Entertainment Zone</a>
        <a href="#">Merchandise</a>
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
    </nav>
    <main>
        <section>
            <h2>Short Flims</h2>
            <video src="Video/trailer.mp4" width="75%" autoplay muted></video>
        </section>
        <section>
            <h2>
                Entertainment Zone
            </h2>
            <video src="Video/GOD.mp4" width="33%" poster="Image/vlcsnap-error377.png"
 controls></video >
            <video src="Video/diwali final.mp4" width="33%" controls></video >
            <video src="Video/vasan1.mp4" width="33%" 
poster="Image/vlcsnap-error672.png" controls></video >
                <br>
                <br>
                <br>
                <br>
            <video src="Video/Previous.mp4" width="33%" poster="Image/video_poster.jpg" 
controls></video >
            <video src="Video/song_final.mp4" width="33%" controls></video >
            <video src="Video/Prank.mp4"  width="33%" controls></video>
        </section>
        <section>
            <h2>Youtube Channel</h2>
            <iframe width="43%" height="75%"
 src="https://www.youtube.com/embed/WvznJo2PROo" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen></iframe> 
            <iframe width="43%" height="75%" 
src="https://www.youtube.com/embed/_51XHkeZWkY" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen></iframe>
        </section>
        <section2>
            <h2>Our Founder</h2>
            <img src="Image/founder.jpg" alt="no_image_show_due_slow_connection" 
width="20%" >
            <h3>Paul & Ghosh</h3>
             <a href="http://www.youtube.com/aayeebakchod" target="blank" 
rel="noopener noreferrer">Youtube</a>&nbsp;&nbsp;|&nbsp;&nbsp;
             <a href="http://www.instagram.com/aayeebakchod" target="blank" 
rel="noopener noreferrer">Intagram</a>&nbsp;&nbsp;| &nbsp; &nbsp;
             <a href="http://www.facebook.com/aayeebakchod" target="blank" 
rel="noopener noreferrer">facebook</a>
        </section2>
        <section3>
            <h4>About Us:</h4>
            <h5>ABC is India's largest entertainment company and the creator of 
Youtube app. Launched in 2018, ABC offers highly personalised and effective  
brand collaboration and content wise ad-promotion , ABC has become one of the 
most preferred entertainment platforms across the globe.</h5>
            <h4>Payment</h4>
            <h5>            ABC offers you multiple payment methods for Brands. 
Payment gateway partners use secure encryption technology to keep your transaction details confidential at all times. You may use Internet Banking, 
Wallet and QR Support to make your purchase.</h5>

        </section3>
    </main>

    <footer>
        <a href="#">FAQ</a>
        <a href="#">Contact Us</a>
        <a href="#">Privacy Policy</a>
        <a href="#">Terms Of Use</a>
        <a href="#">Refund Policy</a>
        <a href="#">@AAYEE_BAKCHOD</a>
        
    </footer>
</body>
</html>

Now We start to learn about CSS:

CSS :

Cascading style sheet

We use this for designing our Website.

Syntax Of CSS :

Property: Values

** Values are two types Defined & PreDefined.

Color:green

font-family: "Times New Roman",serif

text-align: center

Link CSS in HTML :

There are 3ways to add CSS in HTML:

Inline
External
Internal

Inline:

We put it in the HTML file.

Internal:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aayee Bakchod</title>
    <style>
      h2{
        color:rosybrown;
      }
    </style>
  </head>

External:

We make a separate file and link it to our html file.

selector{property:Value;}

Combined Selector :

h1,p,span{

color:purple;

}

Type Selectors:

<h1> Namaste World!</h1>

h1{

property value;

}

Class Selectors:

ID Selectors:

Attribute Selectors:

Definition Tag:

<!DOCTYPE html>
<html lang="en">
<body>
<dt>Coffee</dt>
<dd>Black Hot</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</body>
</html>

O/P:

Coffee

Black Hot

Milk

White Cold Drink

 <table border="1" cellspacing="5" cellpadding="2">
        <thead>
          <tr>
            <th>Subject</th>
            <th>Theory</th>
            <th>Practical</th>
            <th>Total Marks</th>
            <th>Grades</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>TOC</td>
            <td>60</td>
            <td>50</td>
            <td>110</td>
            <td>B</td>
          </tr>
          <tr>
            <td>Complier Design</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
            <td>B+</td>
          </tr>
        </tbody>
        <tfoot>
          <th colspan="5">Result:Pass</th>
        </tfoot>
      </table>

O/P:

Empty Cells:

<tr>
              <td>Empty Field</td>
              <td>&nbsp;</td>
            </tr>

Text Area:

<textarea name="Text-Area">Sample TextArea</textarea>

Text Field:

<input type="text" name="Text_Field">Sample TextField

Selectors:

        <option value="friday" selected>Friday</option>
        <option value="Saturday" selected>Saturday</option>
        <option value="Sunday" selected>Sunday</option>
    </select>

Multiple Selectors:

        <option value="Friday" selected>Friday</option>
        <option value="Saturday">Saturday</option>
        <option value="Sunday">Sunday</option>
    </select>

Output:

Reset and Submit Button:

 <input type="submit" name="submit" value="Submit Form">
    <input type="reset" name="reset" value="Reset Form">    

Using Label :

<label for="upload files">Upload files</label><br>
    <input type="file" name="File">

FieldSet :

<fieldset>
    <label for="username">Username</label>
    <input type="text" name="Username"id="Username">
</fieldset>

Why is web or browser programming broken up into three parts?

You are correct!

to be resilient to changes in technology

Feedback

Web pages should be forward-compatible.

Here Some other Html notes:

<p>I am an <i>influencer</i> at <em>Trell</em></p>

<em> stands for emphasize text.

<i> only for italic.

Don't be Lazy they are not the same.

The same difference exists between Strong and Bold.

Quotes :

<p>

Take up one idea. Make that one idea your life – think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. <cite>–Swami Vivekanada</cite>

</p>

</blockquote>

codemonk

Saturday, 27 March 2021

Web Development with HTML & CSS

Dynamic Website: Dynamic Webpages whose content changes dynamically.

** So As HTML is the base of any websites frontend and CSS updates the design of the website......After that, we use Javascript that acts as a brain of the Website.

Now start with HTML:

Elements:

CSS :

Here Some other Html notes:

Web development with Html and PHP

Search This Blog