C Programming for Beginner

C Programming is simple and effective language. We are try to teach C in easiest way so that every on can understand. C is a general purpose structural language.It is discovered by Dennis Ritchie in year of 1972 at AT 7 T's Bell Laboratories of USA.It is high level language.Instructions of this language is in simple English language such as if else , do while , break , continue , for , int etc. C language is developed by combining two old language such as BCPL(Basic Computer Programming Language),  Read more....

How to Decorate a Web Page Using CSS - Part I

CSS is a language. The full form of CSS is Cascading Style Sheet.Through this language you can change the style of the web page.That is, you can make the web page colourful and have the elements displayed in the structure form properly.The only work of CSS is to make this web page and website attractive.We have used the style tag in HTML and these are the properties of CSS.With CSS you can save a lot of your time.

This means that whenever you design a web page, you will not have to write CSS code again and again.Inline, internal and external CSS are used to design the web page. These three types of CSS can also be used simultaneously.

CSS BASIC

h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

CSS: For Body Tag

body {margin: 20px;}

CSS: For Combine Elements

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

CSS: FOR Comments

/* This is a comment */

CSS: FOR Create Class

.container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

HTML: FOR Call CSS Class

<div class="container">
Dot is used to create a css class
</div>

CSS: FOR Create ID

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

HTML: FOR Call CSS ID

<div ID="container">
Hash is used to create a css ID
</div>

CSS SELECTOR

There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document. CSS selectors are case sensitive, so they must match 

element names and attribute values exactly.

Universal Selector

Applies to all elements in the document
*{ } , Targets all elements on the page

Type Selector

Matches element names
h1, h2, h3 { } , Targets the <h1>, <h2> and <h3> elements

Class Selector

Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol

.mark { } Targets any element whose class attribute has a value of mark.
p.mark { } Targets only <p> elements whose class attribute has a value of mark.

ID Selector

Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol.

#remark { }Targets the element whose id attribute has a value of remark.

Child Selector

Matches an element that is a direct child of another

li > a { } , Targets any <a> elements that are children of an <li> element (but not other <a> elements in the page)

Descendant Selector

Matches an element that is a descendent of another specified element (not just a direct child of that element)

p a { } , Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them.

Adjacent Sibling Selector

Matches an element that is the next sibling of another.

h1+p { } , Targets the first <p> element after any <h1> element (but not other <p> elements)

General Sibling Selector

Matches an element that is a sibling of another, although it does not have to be the directly preceding element.

h1~p { } , If you had two <p> elements that are siblings of an <h1> element, this rule would apply to both

MIN-WIDTH AND MAX-WIDTH , MIN-HEIGHT AND MAX-HEIGHT  

By using max-width and min-width , size of website can be easily adjust according to browser width size.

CSS:

td.text {
min-width: 400px;
max-width: 600px;
margin:0px;
padding:2px;
text-align:right; }

Call in HTML Code:

<td class="text">Call text css in td of table to manage text in td according to screen size.</ td>

By using max-height and min-height, size of website can be easily adjust according to browser height.

CSS:

p {
min-height: 50px;
max-height: 50px; }

Call in HTML Code:

<p>Call this css implicitly when using p tag and adjust their height.</ p>

INHERITANCE

If you specify the font-family or color properties on the <body> element, they will apply to most child elements. This is because the value of the font-family property is inherited by child elements.

CSS:

body {
font-family: Arial, Verdana, sans-serif;
color: #552211;
padding: 12px;}
.page {
border: 1px solid #552211;
background-color: #dfdede;
padding: inherit;}

Call in HTML Code:

<div class="page">
<h1>MCA</h1>
<p>Master of Application.</p>
<p>MCA students are developers.</p>
</div>

CSS FOR FOREGROUND COLOR

The color property allows you to specify the color of text inside an element.
 /* color name */
h1 {color: Blue;}
/* hex code */
h2 {color: #CF3F80;}
/* rgb value */
p {color: rgb(150,120,60);}

CSS FOR BACKGROUND COLOR

CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box.

body {
background-color: rgb(200,200,200);}
h1 {background-color: DarkCyan;}
h2 {background-color: #ee3e80;}
p {background-color: white;}

CSS FOR OPECITY

CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).

 p.OPY1 {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.OPY2 {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}

CSS FOR MARGIN

CSS: BASIC FORMAT

There are Three choices of values for the margin property.

⇒length
⇒percentage
⇒auto

margin-top: length percentage or auto;
margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;

We can write margin for 4 side in single line

margin: top right bottom left;
margin: 10px 10px 10px 10px;

We can sets the margin on all sides

margin: 10px; → All 4 side have margin 10px

You can set the margin property to negative values.If you do not declare the margin value of an element, the margin is 0.

margin: -10px;

Example:

body{
margin: 10px;
background: #fcfcfc;
font-size: large;
text-align: right;
font-family: Georgia, sans-serif;
}

CSS FOR PADDING

Padding is the Space between the border of an HTML element and the content within it. It is just like Margin but there is no "auto" value, and negative values cannot be declared for padding.

CSS: BASIC FORMAT

There are Two choices of values for the Padding property.

⇒length
⇒percentage

padding-top: length percentage;
padding-left: length percentage;
padding-right: length percentage;
padding-bottom: length percentage;

We can write Padding for 4 side in single line

margin: top right bottom left;
margin: 10px 10px 10px 10px;

We can sets the Padding on all sides

padding: 10px; → All 4 side have padding 10px

Example:
#container{
width: 80%;
border: 2px solid #896;
background: #fcfcfc;
margin: auto;
padding: 20px;
}

CSS FOR TEXT PROPERTIES

Text is important part of website so we must manage text using css. Text contain following properties:

∗ Color
∗ Letter Spacing
∗ Text Align
∗ Text Decoration
∗ Text Indent
∗ Text Transform
∗ White Space
∗ Word Spacing

CSS: Color

color: value;

Values are of:

∗ color name - example:(blue,black,red...)
∗ hexadecimal number - example:(#ff0000, #000000)
∗ RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))

Example:
color:red;
color:"#ff0000";
color:"#fff";

CSS: Letter Spacing

letter-spacing: value;

Values are of:

∗ normal
∗ length

Example:
letter-spacing:normal;
letter-spacing:5px;

CSS: Text Align

text-align: value;

Values are of:

∗ left
∗ right
∗ center
∗ justify

Example:
text-align:left;
text-align:right;
text-align:center;
text-align:justify;

CSS: Text Decoration

text-decoration: value;

Values are of:

∗ none
∗ underline
∗ overline
∗ line through
∗ blink

Example:
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:through;
text-decoration:blink;

CSS: Text Indent

text-indent: value;

Values are of:

∗ length
∗ percentage

Example:
text-indent:2px;
text-indent:10%;

CSS: Text Transform

text-transform: value;

Values are of:

∗ none
∗ capitalize
∗ lowercase

Example:
text-transform:none;
text-transform:capitalize;
text-transform:lowercase;

CSS: White Space

white-space: value;

Values are of:

∗ normal
∗ pre
∗ nowrap

Example:
white-space:normal;
white-space:pre;
white-space:nowrap;

CSS: Word Spacing

word-spacing: value;

Values are of:

∗ normal
∗ length

Example:
word-spacing:normal;
word-spacing:10px;

CSS FOR FONT PROPERTIES

Font is important part of website so we must manage Font of text using css. Font contain following properties:

∗ Font
∗ Font-Family
∗ Font Size
∗ Font Style
∗ Font Variant
∗ Font Weight

CSS: Font

General formate of font:

font:style weight variantrelative Sizeline height Fonttypeface
Example:
font: italic bold normal small/1.2em Arial, sans-serif;

CSS: Font-Family

Font-Family: value;

Values are of two choices:

∗ family-name
∗ generic family

Example:
font-family: Verdana, sans-serif;

CSS: Font Size

Font Size: value;

Values are of:

∗ xx-large
∗ x-large
∗ larger
∗ large
∗ medium
∗ small
∗ smaller
∗ x-small
∗ xx-small
∗ length
∗ % (percent)

Example:
Font Size:x-large;
Font Size:10px;
Font Size:5%;

CSS: Font Style

font style: value;

Values are of:

∗ normal
∗ itailc
∗ oblique

Example:
Font Style:normal;
Font Style:itailc;
Font Style:oblique;

CSS: Font Variant

font variant: value;

Values are of:

∗ normal
∗ small-caps

Example:
font variant:normal;
font variant:small-caps;

CSS: Font Weight

font weight: value;

Values are of:

∗ lighter
∗ normal
∗ 100
∗ 200
∗ 300
∗ 400
∗ 500
∗ 600
∗ 700
∗ 800
∗ 900
∗ bold
∗ bolder

Example:
font weight:normal;
font weight:bold;
font weight:100;

How to create simple HTML page for beginners - Part 1

Hell friends,It is very easy to design HTML page.HTML is Hyper Text Markup Language.It is very helpful for beginners. I will demonstrate how we start designing simple HTML Page. There are so many HTML editor are available for designing HTML pages. No matter which editor is used. The most common editor is Notepad , Notepad++ , Sublime text Let we start with HTML code and understand how to create simple html page for beginners.

दोस्तों, HTML पेज डिजाइन करना बहुत आसान है। HTML हाइपर टेक्स्ट मार्कअप लैंग्वेज है। यह शुरुआती लोगों के लिए बहुत मददगार है। मैं प्रदर्शित करूँगा कि हम सरल HTML पेज कैसे डिज़ाइन करना शुरू करते हैं। HTML पेज डिजाइन करने के लिए बहुत सारे HTML tag उपलब्ध हैं। कोई फर्क नहीं पड़ता कि किस editor का उपयोग किया जाता है। सबसे आम editor Notepad , Notepad++ , Sublime text है हम HTML कोड से शुरू करते हैं और समझते हैं कि शुरुआती के लिए सरल HTML पेज कैसे बनाया जाए।

Basic HTML tags

Some basic tags are: Paragraph Tag Images Tag Link Tag Headings Tags Div Tag Anchor Tag Bold Tag Line Break Tag Center Tag Horizontal rule Tag Marquee Tag Menu Tag Ordered List Tag Unordered List Tag Table Tag Table Row Tag Table Data Tag Table Header Tag.

All HTML code and information is written between opening tag such as <> and end closing tab such as Notepad++ is advance of Simple notepad it is very convenient for HTML code. Download latest version Notepad++ and Install.

सभी HTML कोड और जानकारी ओपनिंग टैग जैसे <> और एंड क्लोजिंग टैब के बीच लिखी जाती है जैसे कि नोटपैड ++ साधारण नोटपैड से पहले है यह HTML कोड के लिए हेवी कंफर्टेबल है। नवीनतम संस्करण नोटपैड ++ डाउनलोड करें और इंस्टॉल करें।

                                                                                               

Now write head and title tag between html tag.Inside head tag meta tag,title,style tag, script tag etc. we will learn about these tags in next section. Title tag show the description about page which is display in top of browser.

अब html tag के बीच हेड और टाइटल टैग लिखें। इनसाइड हेड टैग मेटा टैग, टाइटल, स्टाइल टैग, स्क्रिप्ट टैग आदि। हम इन टैग्स के बारे में अगले भाग में जानेंगे। शीर्षक टैग पृष्ठ के बारे में शिलालेख दिखाता है जो ब्राउज़र के शीर्ष में प्रदर्शित होता है।

Insert body tag

The content of page is written inside the body tag.What we written inside body tag will display in browser.We can decorate page inside body tag using different attributes such as background colour,fore colour,insert tables,insert images,insert videos,insert divs,insert flash files,insert etc.Let i explain step by step.

पेज की सामग्री बॉडी टैग के अंदर लिखी गई है। हम बॉडी टैग के अंदर लिखे गए ब्राउज़र में प्रदर्शित करेंगे। हम पेज को अलग-अलग विशेषताओं जैसे बैकग्राउंड कलर, फ्रंट कलर, इंसर्ट टेबल, इंसर्ट इमेज, इंसर्ट डालने, वीडियो इन्सर्ट करके पेज को सजा सकते हैं। divs, फ़्लैश फाइलें डालें, डालें आदि। चरण दर चरण मैं समझाता हूं।

Comment tag

Before proceed with body tag i want to explain about comment tag.It is very good practice in every programming to give description about each code so that everyone can easily understand the code.In HTML we also describe things in comments tag.It look like we can insert comment tag anywhere between HTML tag

बॉडी टैग के साथ आगे बढ़ने से पहले मैं टिप्पणी टैग के बारे में बताना चाहता हूं। प्रत्येक प्रोग्रामिंग में प्रत्येक कोड के बारे में विवरण देने के लिए यह बहुत अच्छा अभ्यास है ताकि हर कोई कोड को आसानी से समझ सके। HTML में हम टिप्पणी टैग में चीजों का भी वर्णन करते हैं। HTML टैग के बीच कहीं भी टिप्पणी टैग सम्मिलित कर सकते हैं

Image tag

Image tag define image in html page using source attribute (src).src contain location of image file in disk.Image tag is used inside body tag.We can also adjust the width and height of image using height and width attribute.

स्रोत विशेषता (src) का उपयोग करके HTML पृष्ठ में छवि टैग छवि को परिभाषित करता है। डिस्क में छवि फ़ाइल का स्थान होता है। शरीर टैग का उपयोग शरीर टैग के अंदर किया जाता है। हम ऊंचाई और चौड़ाई विशेषता का उपयोग करके छवि की चौड़ाई और ऊंचाई को भी समायोजित कर सकते हैं।

Paragraph Tag

Paragraph tag is used to define text in formated way using their attributes.It does not contain any block elements like table. Paragraph tag attributes are align, class, Id,style, title.

पैराग्राफ टैग का उपयोग उनकी विशेषताओं का उपयोग करके तैयार किए गए तरीके से पाठ को परिभाषित करने के लिए किया जाता है। इसमें तालिका जैसे कोई ब्लॉक तत्व नहीं होते हैं। अनुच्छेद टैग विशेषताएँ संरेखित, वर्ग, आईडी, शैली, शीर्षक हैं।

Heading Tag

Heading tag are only used for heading. We can not bold text or change font size of text. Its range is H1 to H6. H1 for most and H6 for least size of text.

हेडिंग टैग का उपयोग केवल हेडिंग के लिए किया जाता है। हम टेक्स्ट को बोल्ड नहीं कर सकते हैं या टेक्स्ट का फ़ॉन्ट आकार नहीं बदल सकते हैं। इसकी रेंज H1 से H6 है। अधिकांश के लिए H1 और पाठ के कम से कम आकार के लिए H6।

Div Tag

The div tag is just like a container unit.It encapsulates other page elements and divides the HTML document into sections. Web developers use div elements to group with HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a div element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the div tag instead of coding the same style for each paragraph element.The basic attributes of Div tag element are Id,title,name,style.

Div टैग एक कंटेनर यूनिट की तरह है। यह अन्य पेज एलिमेंट्स को एन्क्रिप्ट करता है और HTML डॉक्यूमेंट को सेक्शन में विभाजित करता है। वेब डेवलपर HTML तत्वों के साथ समूह में div तत्वों का उपयोग करते हैं और एक ही बार में कई तत्वों के लिए CSS शैलियाँ लागू करते हैं। उदाहरण के लिए, एक पैराग्राफ में पैराग्राफ तत्वों के एक सेट को लपेटकर, डेवलपर सीएसएस शैलियों का लाभ उठा सकता है और प्रत्येक पैराग्राफ के लिए एक ही शैली को कोड करने के बजाय डिव टैग के लिए एक फॉन्ट स्टाइल लागू करके सभी पैराग्राफ पर एक फ़ॉन्ट लागू कर सकता है। तत्व। डिव टैग तत्व के मूल गुण आईडी, शीर्षक, नाम, शैली हैं।

Anchor Tag

<a> tag is known as link or hyperlink.<a> tag is simple and important it is used to link from one page to another. Attributes of Tag <a> are href,name,rel,title,method.

<a> टैग को लिंक या हाइपरलिंक के रूप में जाना जाता है। <a> टैग सरल और महत्वपूर्ण है इसका उपयोग एक पृष्ठ से दूसरे पृष्ठ को लिंक करने के लिए किया जाता है। टैग <a> के गुण href, नाम, rel, शीर्षक, विधि हैं।

Bold Tag

<b> tag is used to bold the text.Highlight the normal text by using <b> tag.

<b> टैग का उपयोग टेक्स्ट को बोल्ड करने के लिए किया जाता है। <b> टैग का उपयोग करके सामान्य टेक्स्ट को हाइलाइट करें।

Line Break Tag

<br> tag has no no tag because it is empty tag. <br> tag used for line break in text. It is useful more than one sentences are written in new lines such as addresses,songs,poem,paragraphs etc.

<br> टैग में कोई टैग नहीं है क्योंकि यह खाली टैग है। टेक्स्ट में लाइन ब्रेक के लिए उपयोग किया जाने वाला टैग। यह उपयोगी है एक से अधिक वाक्य नई पंक्तियों जैसे पते, गीत, कविता, पैराग्राफ आदि में लिखे गए हैं।

Center Tag

<Center> tag is used to align center , text written inside <Center> tag.It is used to align text.Center tab can be used in paragraph tag,span tag and other elements.

<Center> टैग का उपयोग केंद्र को संरेखित करने के लिए किया जाता है, <Center> टैग के अंदर लिखा गया पाठ। इसका उपयोग पाठ को संरेखित करने के लिए किया जाता है। केंद्र टैब का उपयोग पैराग्राफ टैग, स्पैन टैग और अन्य तत्वों में किया जा सकता है।

Horizontal rule Tag

<hr> tag is known as horizontal rule. It is used to draw horizontal line. It has following attributes such as align,size,width,no shade.It support all the browsers.

<hr> टैग को क्षैतिज नियम के रूप में जाना जाता है। इसका उपयोग क्षैतिज रेखा खींचने के लिए किया जाता है। इसमें निम्न विशेषताएं हैं जैसे कि संरेखित करें, आकार, चौड़ाई, कोई छाया नहीं। यह सभी ब्राउज़रों का समर्थन करता है।

By using these basic tags we can easily create simple HTML page.We will discuss more tags in upcoming post.