Intro >> Color >> Icon >>> Anime >>

Welcome to Css!

CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS : Cascading Style Sheet.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
< h1 >This is a heading< /h1 >
< p >This is a paragraph.< /p >
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!

<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> </head> <body> <h1>My First CSS Example</h1> <p>This is a paragraph.</p> </body> </html>

It adds some more style to a html page
We can define differnt styles by appling id (#) or type(.) or class(.) or direct declaring the tag.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS selector The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
h1(selector) :{color(proparty): blue(value)}

<!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html>

Example Explained

p is a selector in CSS (it points to the HTML element you want to style: <p >)

color is a property, and red is the property value

text-align is a property, and center is the property valuev

The CSS background properties are used to define the background effects for elements.

background-color
background-image
background-repeat
background-attachment
background-position

Colors &Backgroung to Css!

CSS background-color :

The background-color property specifies the background color of an element.

The background color of a page is set like this:

body { background-color: lightblue; }

a valid color name - like "cyan"
a HEX value - like "#ff0600"
an RGB value - like "rgb(245,0,0)"

Opacity 1

Opacity 0.6

Opacity 0.3

Opacity 0.1

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

Opacity 100%

Opacity 60%

Opacity 30%

Opacity 10%

Transparency using RGBA

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

div { background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ }

CSS background-image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

body { background-image: url("paper.gif"); } body { background-image: url("paper.gif"); }

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }

You can use the Shorthand Property background:

body { background: #ffffff url("img_tree.png") no-repeat right top; }

How To Add Icons and Navs Using Bootstarp:

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

<!DOCTYPE html> <html> <head> <title>Google Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons" style="font-size:48px;color:yellow;">cloud</i> <i class="material-icons" style="font-size:48px;color:yellow;">favorite</i> <i class="material-icons" style="font-size:48px;color:yellow;">attachment</i> <i class="material-icons" style="font-size:48px;color:yellow;">computer</i> <i class="material-icons" style="font-size:48px;color:yellow;">traffic</i> </body> </html>

Bootstrap

Glyphicons :

the way to use Glyphicons : within your code is :
The Bootstrap glyphicons :-> add the following line inside the < head > section of your HTML page:
<link rel="stylesheet" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html> <html> <head> <title>Bootstrap Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body class="container"> <p>Some Bootstrap icons:</p> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> <br><br> <p>Styled Bootstrap icons (size and color):</p> <i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i> </body> </html>

We can use some more attractive Icon packs by using Font Awasome Icons

Font Awesome Icons:
To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the section of your HTML page: < script src="https://kit.fontawesome.com/yourcode.js></script > Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial. Note: No downloading or installation is required!

Navigation Bars:
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bars A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the < ul > and < li > elements makes perfect sense:
Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars.

There are two types of nav designs

Horizental Nav
Vertivcal Nav

1.

2.

In Home

In Profile

In Contact

1. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav> 2.. Menu Nav....... <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

There are also some vertical nav bar also :

Such As:

Home Profile Messages Settings

Home

Profile

Message

Settings

The code of the vertical nav-bar be like :>

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home</div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Message</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings</div> </div></div>

Construction of Animation

We can also construct Animation using C.S.S

We can use @keyframe keyword for animation
The aniamtion is used to add animation to any page
We also use transmition to add running animation.

<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>

CSS Transitions:

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

In this chapter you will learn about the following properties:

transition

transition-delay

transition-duration

transition-property

transition-timing-function

How to Use CSS Transitions?

To create a transition effect, you must specify two things: the CSS property you want to add an effect to the duration of the effect Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. The following example shows a 100px * 100px red < div > element. The <div > element has also specified a transition effect for the width property, with a duration of 2 seconds:

Click Here

The transition effect will start when the specified CSS property (width) changes value. Now, let us specify a new value for the width property when a user mouses over the < div > element:

<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s, height 2s, transform 2s; } div:hover { width: 300px; height: 300px; transform: rotate(180deg); } </style> </head> <body> <h1>Transition + Transform</h1> <p>Hover over the div element below:</p> <div></div> </body>

Click Here

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s, height 4s; } div:hover { width: 300px; height: 300px; } </style> </head> <body> <div></div> </body> </html>

How To Create a Glowing Text:

Use the text-shadow property to create the neon light effect, and then use animation together with keyframes to add the repeatedly glowing effect:

Bunker

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; font-family: cursive; } .glow { font-size: 80px; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; } } </style> </head> <body> <h1 class="glow">Bunker</h1> </body> </html>

Intro Basic Colours Graphics

Welcome To Html!

HTML is the standard markup language for Web pages.

HTML : Hyper Text Markup Language.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

HTML stands for Hyper Text Markup Language
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

But how to code in Html We need some editor to code ... So here we provide some link ..

NotePad is the basic choice but now a days people use other editors
Sublime text 3 this is the most used editor Click here
DreamWeaver this is another editor Click here
Visual Studio Code this is another editor Click here

Complete download now what to do........... get stuck Don't worry just follow the below process for any type of editor... I am using Sublime Text 3

At first open any editor
Then click on New to create new file
Set title and then click to save as
After creating the html file save it with ".html" extention name..
You are ready to go....Start coding.... Follow the process shown below .
Enter CTRL+S to save the file and open it to browser

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <header>New Page</header> <h1>My First Heading</h1> <h2>Secound heading</h2> <h3>Third Heading</h3> <h4>Fourth Heading</h4> <h5>Fifth Heading</h5> <h6>Sixth Heading</h6> <br> <p>My first   paragraph.</p> </body> </html>

The< ! doctype html > declaration defines this document to be HTML5
The < html > element is the root element of an HTML page
The < head > element contains meta information about the document
The < title > element specifies a title for the document
The < body > element contains the visible page content
The < header > element defines a header
The < footer > element defines a footer
The < h1 > element defines most large heading
The < h2 > < h3> < h4> < h5> < h6> element defines bold heading
The & nbsp ; element defines a space between two word
The < p > element defines a paragraph
The < b > element defines a bold word or sentence
The < u > element defines a Underline
The < br > element defines a line-break

Attributes in Html!

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

<!DOCTYPE html> <html> <body> <h2>The href Attribute</h2> <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p> <a href="https://sagnic007.github.io/thebunker/jquary/new.html">This is a link</a> </body> </html>

width

height

The tag be like:

where img src tag used to select any random image from the folder
height & width are used to set the height and width of any image.

The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.

this <style> attribute is used to apply any particular proparty to any tag

the < p> tag is used to create a paragraph .

The <lang> Attribute

The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:

The <title> Attribute

<!DOCTYPE html> <html> <body> <h2 title="I'm a header">The title Attribute</h2> <p title="I'm a tooltip"> Mouse over this paragraph, to display the title attribute as a tooltip. </p> </body> </html>

The < a > Attribute

this attribute is used to link to web pages

Wrong process

<!DOCTYPE html> <html> <body> <a href=https://sagnic007.github.io/thebunker/jquary/new.html>This is a link</a> </body> </html>

Right process

<!DOCTYPE html> <html> <body> <a href="https://www.w3schools.com">This is a link</a> </body> </html>

Attribute

Description

alt : : Specifies an alternative text for an image, when the image cannot be displayed
disabled : : Specifies that an input element should be disabled
href : : Specifies the URL (web address) for a link
id : : Specifies a unique id for an element
src : : Specifies the URL (web address) for an image
style : : Specifies an inline CSS style for an element
title : : Specifies extra information about an element (displayed as a tool tip)

Color & id in Html!

Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Cyan

Crimson

Background Color

You can set the background color for HTML elements by using < style > and background-color:

<!DOCTYPE html> <html> <body> <h5 style="background-color:tomato;">Tomato</h5> <h5 style="background-color:orange;">Orange</h5> <h5 style="background-color:dodgerblue;">DodgerBlue</h5> <h5 style="background-color:mediumseagreen;">MediumSeaGreen</h5> <h5 style="background-color:gray;">Gray</h5> <h5 style="background-color:slateblue;">SlateBlue</h5> <h5 style="background-color:violet;">Violet</h5> <h5 style="background-color:lightgray;">LightGray</h5> <h1 style="background-color:cyan;">Hello World</h1> <p style="background-color:crimson;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>

Border Color

This proparty is used to color up the border of any box
Hi! folks

Let's Have

Some fun

the < font > tag is used to set differnt proparty to any text
color : to set color to any text
face :to set any font style to text
size : to set font size to a text

<!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p> </body> </html>

There are different type of color codes present in HTML

rgb(255,99,71) where rgb stands for red , green, blue.
#ffffff where # code is used to declare color
hsla, rgba, hsl this are also process

We can use different type of gradient as background

To check Differnt Type Of gradient Click here

Graphics in Html!

What is HTML Canvas?

The HTML < canvas > element is used to draw graphics, on the fly, via JavaScript.
The < canvas > element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #ffffff;"> Your browser does not support the HTML canvas tag. </canvas> </body> </html>

Output :

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html>

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle :

<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

SVG Rounded Rectangle:

<!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

SVG Star:

<!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

SVG Logo:

<!DOCTYPE html> <html> <body> <svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,245,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas

Canvas draws 2D graphics, on the fly (with a JavaScript).
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser
If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

About Blog Projects Contact

Welcome to C Programming Learning !

To install the Turbo C software, you need to follow following steps.

Download Turbo C++.
Create turboc directory inside c drive and extract the tc3.zip inside c:\turboc.
Double click on install.exe file.
Click on the tc application file located inside c:\TC\BIN to write the c program.

Some facts about C Programming.

In 1988, the American National Standards Institute (ANSI) had formalized the C language.
C was invented to write UNIX operating system.
C is a successor of 'Basic Combined Programming Language' (BCPL) called B language.
Linux OS, PHP, and MySQL are written in C.
C has been written in assembly language.

Uses of C Programming language.

In the beginning, C was used for developing system applications, e.g. :

Database Systems
Language Interpreters
Compilers and Assemblers
Operating Systems
Network Drivers
Word Processors

Features of C Programming language.

C is a robust language with a rich set of built-in functions and operators.

Programs written in C are efficient and fast.

C is highly portable; programs once written in C can be run on other machines with minor or no modification.

C is a collection of C library functions; we can also create our function and add it to the C library.

C is easily extensible.

C has become very popular for various reason....

One of the early programming languages.

Still, the best programming language to learn quickly.

C language is reliable, simple, and easy to use.

C language is a structured language.

Modern programming concepts are based on C.

It can be compiled on a variety of computer platforms.

Universities preferred to add C programming in their courseware.

Advantages of C Programming Language

C is the building block for many other programming languages.

Programs written in C are highly portable.

Several standard functions are there (like in-built) that can be used to develop programs.

C programs are collections of C library functions, and it's also easy to add functions to the C library.

The modular structure makes code debugging, maintenance, and testing easier.

Disadvantages of C Programming Language

C does not provide Object Oriented Programming (OOP) concepts.

There are no concepts of Namespace in C.

C does not provide binding or wrapping up of data in a single unit.

C does not provide Constructor and Destructor.

What is C compiler?

A compiler is a computer program that transforms human-readable (programming language) source code into another computer language (binary) code. In simple terms, Compiler takes the code that you wrote and turned in to the binary code that the computer can understand. The C compiler is a software application that transforms the human-readable C program code to machine-readable code. The process of transforming the code from High-Level Language to Machine Level Language is called "Compilation". The human-readable code is the C program that consists of digits letters, special symbols, etc. which is understood by human beings. On the other hand, machine language is dependent on the processor and processor understands zeroes and ones (binary) only. All C program execution is based on a processor which is available in the CPU; that is why entire C source code needs to be converted to the binary system by the compiler. This tutorial is written for Windows, Unix / Linux, and MAC users. All code has been tested, and it works correctly on all three operating systems.

C Language Fundamental:-

C Identifiers

Identifiers are names given to different entities such as constants, variables, structures, functions, etc.

Example:

int amount;
double totalbalance;
In the above example, amount and totalbalance are identifiers and int, and double are keywords.

Rules of making Identifiers.

An identifier can only have alphanumeric characters (a-z , A-Z , 0-9) (i.e. letters & digits) and underscore( _ ) symbol.
Identifier names must be unique.
The first character must be an alphabet or underscore.
You cannot use a keyword as identifiers.
Only the first thirty-one (31) characters are significant.
It must not contain white spaces.
Identifiers are case-sensitive.

C Keyword List:-

auto	double	int	struct
break	else	long	switch
case	enum	register	typedef
char	extern	return	union
const	float	short	unsigned
continue	for	signed	void
default	goto	sizeof	volatile
do	if	static	while

Example where and how keywords are used in the program.

Example:

Keyword

  #include< stdio.h >
   int main(){
int x=5;
string y="john";
      printf( "%d",x);
      printf("%d",y);
}
Output :
5
john

Code:

x = 5
y = "John"
print(x)
print(y)

Output:

5
John

About Blog Projects Contact

Welcome to Python Learning !

How to Get Started With Python?

In this tutorial, you will learn to install and run Python on your computer. Once we do that, we will also write our first Python program.Python is a cross-platform programming language, which means that it can run on multiple platforms like Windows, macOS, Linux, and has even been ported to the Java and .NET virtual machines. It is free and open-source. Even though most of today's Linux and Mac have Python pre-installed in it, the version might be out-of-date. So, it is always a good idea to install the most current version.

What is Polymorphism?

The literal meaning of polymorphism is the condition of occurrence in different forms. Polymorphism is a very important concept in programming. It refers to the use of a single type entity (method, operator or object) to represent different types in different scenarios. Let's take an example:

Example 1: Polymorphism in addition operator

We know that the + operator is used extensively in Python programs. But, it does not have a single usage. For integer data types, + operator is used to perform arithmetic addition operation.

Addition of two no:
C Python

  #include< stdio.h >
   int main(){
      sint num1,num2,sum;
      printf("enter the 1 st number:");
      scanf("%d",& num1);
       printf("enter the 2 nd number:");
      scanf("%d",& num2);
      sum=num1+num2;
      printf("%d+%d=%d",num1,num2,sum);
}

Code:

    num1 = 1
    num2 = 2
   print(num1+num2)

Output:

    3

...

What is Python?

Python is a popular programming language. It was created by Guido van Rossum, and released in 1991. It is used for: web development (server-side), software development, mathematics, system scripting.

What can Python do?

Python can be used on a server to create web applications.
Python can be used alongside software to create workflows.
Python can connect to database systems. It can also read and modify files.
Python can be used to handle big data and perform complex mathematics.
Python can be used for rapid prototyping, or for production-ready software development.

Why Python?

Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).

Python has a simple syntax similar to the English language.

Python has syntax that allows developers to write programs with fewer lines than some other programming languages.

Python runs on an interpreter system, meaning that code can be executed as soon as it is written. This means that prototyping can be very quick.

Python can be treated in a procedural way, an object-orientated way or a functional way.

Good to know

The most recent major version of Python is Python 3, which we shall be using in this tutorial. However, Python 2, although not being updated with anything other than security updates, is still quite popular.

In this tutorial Python will be written in a text editor. It is possible to write Python in an Integrated Development Environment, such as Thonny, Pycharm, Netbeans or Eclipse which are particularly useful when managing larger collections of Python files.

Python Syntax compared to other programming languages Python was designed for readability, and has some similarities to the English language with influence from mathematics.

Python uses new lines to complete a command, as opposed to other programming languages which often use semicolons or parentheses.

Python relies on indentation, using whitespace, to define scope; such as the scope of loops, functions and classes. Other programming languages often use curly-brackets for this purpose.

Python Install

Many PCs and Macs will have python already installed. To check if you have python installed on a Windows PC, search in the start bar for Python or run the following on the Command Line (cmd.exe):

C:\Users\Your Name>python --version

If you find that you do not have python installed on your computer, then you can download it for free from the following website: https://www.python.org/

Python Quickstart

Python is an interpreted programming language, this means that as a developer you write Python (.py) files in a text editor and then put those files into the python interpreter to be executed. The way to run a python file is like this on the command line:

C:\Users\Your Name>python helloworld.py

Python First Program

Welcome

  #include< stdio.h >
   int main(){

      printf("Hello World!");
}
Output : Hello World !

Code:

print("Hello World!")

Output:

"Hello World!"

Python Indentation :

Indentation refers to the spaces at the beginning of a code line. Where in other programming languages the indentation in code is for readability only, the indentation in Python is very important. Python uses indentation to indicate a block of code.

Condition Checkings

  #include< stdio.h >
   int main(){
if(5>2){
      printf("5 is greater than 2 ");
}
}
Output : 5 is greater than 2

Code:

if(5>2):
print("5 is greater than 2 ");

Output:

"5 is greater than 2 "
If we Don't Use indentation then that will cause an error
if 5 > 2: print("Five is greater than two!")
OutPut :
File "demo_indentation_test.py", line 2 print("Five is greater than two!") ^ IndentationError: expected an indented block

Comments

Python has commenting capability for the purpose of in-code documentation. Comments start with a #, and Python will render the rest of the line as a comment:
Example Comments in Python: we can use (#) for comment any line we can use /* */ for comment any particular paragraph

Python Variable

Creating Variables

Variables are containers for storing data values. Unlike other programming languages, Python has no command for declaring a variable. A variable is created the moment you first assign a value to it.

Variable

  #include< stdio.h >
   int main(){
int x=5;
string y="john";
      printf( "%d",x);
      printf("%d",y);
}
Output :
5
john

Code:

x = 5
y = "John"
print(x)
print(y)

Output:

5
John

Built-in Data Types

In programming, data type is an important concept. Variables can store data of different types, and different types can do different things. Python has the following data types built-in by default, in these categories:
Text Type : str
Numeric Types : int, float, complex
Sequence Types : list, tuple, range
Mapping Type : dict
Set Types : set, frozenset
Boolean Type : bool
Binary Types : bytes, bytearray, memoryviewv

Getting the Data Type

You can get the data type of any object by using the type()function:
Example
Print the data type of the variable x:

Variable

  #include< stdio.h >
   int main(){
int x;
string y;
      printf("enter any no:");
      scanf("%d",n);
      printf("%d",n);
}
Output :
enter any no : 5
5

Code:

x = 5
print(x)
print(type(x))

Output:

5
<class 'int'>

Setting the Data Type

In Python, the data type is set when you assign a value to a variable:

x = "Hello World" : str
x = 20 : int
x = 20.5 : float
x = 1j : complex
x = ["apple", "banana", "cherry"] : list
x = ("apple", "banana", "cherry") : tuple
x = range(6): range
x = {"name" : "John", "age" : 36} : dict
x = {"apple", "banana", "cherry"} : set
x = frozenset({"apple", "banana", "cherry"}) : frozenset
x = True : bool
x = b"Hello" : bytes
x = bytearray(5) : bytearray
x = memoryview(bytes(5)) : memoryview

Python Numbers

There are three numeric types in Python:
int
float
complex
Variables of numeric types are created when you assign a value to them:
Example:

Variable Types

  #include< stdio.h >
   int main(){
int x=5;
string y="john";
float z;
complex c;
      printf( "%d",x);
      printf("%d",y);
}
Output :
5
john

Code:

x = 1    # int
y = 2.8    # float
z = 1j    # complex

Output:
    1
   2.8
   1j

Specify a Variable Type

There may be times when you want to specify a type on to a variable. This can be done with casting. Python is an object-orientated language, and as such it uses classes to define data types, including its primitive types.
Casting in python is therefore done using constructor functions:

int() - constructs an integer number from an integer literal, a float literal (by rounding down to the previous whole number), or a string literal (providing the string represents a whole number)

float() - constructs a float number from an integer literal, a float literal or a string literal (providing the string represents a float or an integer)

str() - constructs a string from a wide variety of data types, including strings, integer literals and float literals

Casting

  #include< stdio.h >
   int main(){
int x=1;
float y=2.8;
float z;
      printf( "%d",int(x);
      printf("%d",int(y));
}
Output :
1
2

Code:

x = int(1)
y = int(2.8)
z = int("3")
print(x)
print(y)
print(z)

Output:
    1
   2
    3

Welcome to Css!

CSS Solved a Big Problem

CSS Syntax

h1(selector) :{color(proparty): blue(value)}

Example Explained

p is a selector in CSS (it points to the HTML element you want to style: <p >) color is a property, and red is the property value text-align is a property, and center is the property valuev

The CSS background properties are used to define the background effects for elements.

Colors &Backgroung to Css!

CSS background-color :

Transparency using RGBA

Transparency using RGBA

CSS background-image

CSS background - Shorthand property

How To Add Icons and Navs Using Bootstarp:

Font Awesome Icons:

Navigation Bars:

There are two types of nav designs

Construction of Animation

We can also construct Animation using C.S.S

CSS Transitions:

How to Use CSS Transitions?

Change Several Property Values

How To Create a Glowing Text:

Bunker

Welcome To Html!

HTML is easy to learn - You will enjoy it!

Attributes in Html!

The style Attribute The style attribute is used to specify the styling of an element, like color, font, size etc. <p style="color:red">This is a red paragraph.</p> this <style> attribute is used to apply any particular proparty to any tag the < p> tag is used to create a paragraph .

The <lang> Attribute

The <title> Attribute

The < a > Attribute

Wrong process

Right process

Color & id in Html!

Color Names

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Cyan

Crimson

Background Color

Border Color

Hi! folks

Let's Have

Some fun

the < font > tag is used to set differnt proparty to any text

There are different type of color codes present in HTML

Graphics in Html!

What is SVG?

SVG Circle :

SVG Rounded Rectangle:

SVG Star:

SVG Logo:

Differences Between SVG and Canvas

Welcome to C Programming Learning !

To install the Turbo C software, you need to follow following steps.

Some facts about C Programming.

Uses of C Programming language.

In the beginning, C was used for developing system applications, e.g. :

Features of C Programming language.

C has become very popular for various reason....

Advantages of C Programming Language

Disadvantages of C Programming Language

What is C compiler?

C Language Fundamental:-

C Identifiers

Example:

Rules of making Identifiers.

C Keyword List:-

Example where and how keywords are used in the program.

Example:

Welcome to Python Learning !

How to Get Started With Python?

What is Polymorphism?

Example 1: Polymorphism in addition operator

p is a selector in CSS (it points to the HTML element you want to style: <p >)

color is a property, and red is the property value

text-align is a property, and center is the property valuev

The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.

this <style> attribute is used to apply any particular proparty to any tag

the < p> tag is used to create a paragraph .