Showing posts with label coding. Show all posts
Showing posts with label coding. Show all posts

Saturday 2 November 2019

Linking Documents in HTML | How to link document using HTML - OnlineHelp

Linking Document in HTML:

Let's discuss the Linking documents in HTML.

A linking documents in HTML is a unidirectional pointer from a source document that contains a link to the same destination. Links help the user to navigate across pages as well as within a page.

The text or an image that provides such a link is called hypertext or hyperlink.
<a href="name of the file to link i.e bookmark" target="location"> title of the link</a>

hyperlink can be created by using an <a> anchor tag, which stands for anchor and has the following attributes:

href: It stands for hypertext reference which points the link to the bookmark/file from your PC. it contains the name of the bookmark or file to be opened which is specified within double-quotes.

You can use href to point to a URL and allow the reader to view the page from the beginning, or, you can use href to point to a specific area of that page, indicated by a name of the bookmark, so, that the user goes straight to that section of the document.

Target: it is used to define where the linked document will be opened which is also specified within double-quotes.

Title: It holds the text that will be displayed as a hyperlink.

Formatting the link:

Links can be formatted. To format the links,<body>tag contains attributes that specify the color for the hyperlink text depending upon the visiting status.

The following attributes of the <body> tag are used to provide color for the link.

LINK - Contains the link color which is specified in the <body> tag that has not yet been visited.

VLINK - Specifies the visited link color.

ALINK - Specifies the active link color.

Sample program for linking documents:

1. Pointing the link to the file from PC:

Program:hyper.html

<html>

<head>

<title>hyperlink example</title>

</head>

<body>

<a href="link.html">CLICK HERE</a>

</body>

</html>

When we open "hyper.html" it will show the link "click here", and when we click it automatically opens the "link.html" file.

Program:link.html

<html>

<head>

<title>hyperlink example</title>

</head>

<body>

This is Open Source Software

</body>

</html>

2. Pointing the link to the bookmark/website:

<html>

<head>

<title>hyperlink example</title>

</head>

<h1>Some of my favorite web sites</h1>

<body bgcolor="violet">

<ul>

<li><a href="www.google.com">google</a>

<li><a href="www.yahoo.com">yahoo</a>

<li><a href="www.bing.com">bing</a>

<li><a href="www.oracle.com">oracle</a>

<li><a href="www.w3schools.com">web design</a>

</ul>

</body>

</html>

The output is:


Linking Documents in HTML | How to link document using HTML - OnlineHelp


Tuesday 29 October 2019

CSS text properties | text attribute in CSS - Online Help

Let's discuss what CSS text properties?

We are going to see one of the style sheet properties called "Text Property".It's consists of Eight different Text properties. So, guys, let's see all text properties in detail with their example.

CSS text properties:

The text displayed on the web page is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties and the paragraph is also indented, aligned, and the space between characters is specified. So some of the text formatting properties are as follow:

- Text decoration

- Text transform

-Text-direction

- Line spacing

- Word spacing

-Text alignment

-Line-height

1.Text decoration:

Now, what is text-decoration? The text-decoration property is used to set or remove decorations from the text. so the possible value for this property is none, overline,line-through, underline and blink. Sample program for text-decoration:

<html>

<head>

<title>CSS text properties</title>

<style type="text/css">

h2.one{text-decoration:line-through;}

h2.two{text-decoration:overline;}

h2.three{text-decoration:underline;}

</style>

</head>

<body>

<h2 class="one">Online Help</h1><p>[This is line through]</p><br>

<h2 class="two">welcome to my blog</h1><p>[This is over line]</p><br>

<h2 class="three">online help</h1><p>[This is underline]</p><br>

</body>

</html>

READ: How to add background image in HTML

2.Text Transform:

The text-transform property is used to specify either uppercase or lowercase letters in a text. So that we are able to specify our text easily. This property can be used to turn everything into uppercase or lowercase letters or capitalize the first letter of each word.

Example:
p{text-transform:uppercase;}
h1{text-transform:lowercase;}
td{text-transform:capitalize;}

3.Text-Indent:

The text-indent property is used to specify the indentation of the first line of a text within an element. so the value for this property is in terms of px,pc, in, mm.

Example:
p{text-indent : 50px;}


READ: CSS font properties

4.Text Direction:

The direction property specifies the direction in which the text should flow. Then, the possible values are ltr(left to right), rtl(right to left)

Example:
p{direction : rtl;}

5.Letter-Spacing:

The letter-spacing property increases or decreases the space between characters in a text within the element. The value for this property is in terms of px,pc, in, mm.

Example:
p{letter-spacing : 2px;}
h2{letter-spacing: 1px;}


6.Word-Spacing:

here, we are discussing word spacing.

The word-spacing property is used to increases or decreases the white space between words. So that we can specify the value for this property in terms of px,pc, in, mm.

Example:
p{word-spacing: 30px;}

7.Text Alignment:

The text-align property is used to set the horizontal alignment of a text. because of this text alignment, Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, ad the left and right margins are straight.

Example:
h1{text-align:center;}
p{text-align:right;}
td{text-align:justify;}

8.Line-height:

The line-height property is used to specify the gap between lines in the text. So that the lines should be separated equally. This can be done by specifying the line height in terms of px,pc, in, mm, and percentages.

Example:
p.small{line-height:90%;}
p.big{line-height:200%;}

         I hope you guys understand what is CSS text properties. If you have any doubts or something incorrect or you wanna give more information about this topic then please comment below.

READ: CSS list properties

Friday 25 October 2019

Deadlock | what is deadlock |deadlock in java - Online Help

Let's discuss the important topic of java multithreading is a deadlock

Now, what is deadlock?  A deadlock is a special type of error that you need to avoid( that relates specifically to multitasking), which occurs when two threads have a circular dependency on a pair of synchronized objects.

For Example,

suppose one thread enters object X  and another thread enters the object Y. If the thread in X tries to call any synchronized method on Y, It will be blocked. however, if the thread in Y, in turn, tries to call any synchronized method on X, the thread waits forever, because to access X it would have to release its own lock on Y so that the first thread could complete.

Deadlock | what is deadlock |deadlock in java - Online Help
Read: What is thread and life cycle of a thread


It may involve more than two threads and two synchronized objects.

Deadlock situations can arise that involve more than two threads. Assume that thread1 wait for a lock held by thread2.Thread2 waits for a lock held by thread3. Thread3 waits for a lock held by thread1.

Sample program for deadLock is:

class x
{
y b;
synchronized void x1()
{
System.out.println("starting x1");
b.y2();
}
synchronized void x2()
{
System.out.println("starting x2");
}
}
class y
{
x a;
synchronized void y1()
{
system.out.println("starting y1");
a.x2();
}
synchronized void y2()
{
System.out.println("starting y2");
}
}
class threadX entends Thread
{
x a;
ThreadX(x a)
{
this.a=a;
}
public void run()
{
for(int i=0;i<100000;i++);
a.x1();
}
}
class threadY entends Thread
{
y b;
ThreadY(y b)
{
this.b=b;
}
public void run()
{
for(int i=0;i<10000;i++);
b.y1();
}
}
class deadlockdemo
{
public static void main(String args[])
{
x a=new x();
y b=new y();
a.b=b;
b.a=a;
ThreadX t1=new ThreadX(a);
ThreadY t2=new ThreadY(b);
t1.start();
t2.start();
try
{
t1.join();
t2.join();
}
catch(Exception e)
{
e.printStackTrace();
}
System.out.println("successfully");
}
}

Read: interthread communication in java

Explanation:

In the following program class x has two synchronized methods named x1() andx2(). The x1() method calls the y2() method of that object. similarly, class y has two synchronized methods named y1() and y2(). The y1() methods call the x2()method of that object.

Class ThreadX extends and executes a loop that invokes the x1() method of the x object class. Class ThreadY extends and executes a loop that invokes the y1() method of the y object class.

I hope you understand what is a deadlock? if you have any queries or you find something wrong or have more information then please do comment.

Sunday 11 November 2018

What is Identifier in Java | Java identifier - Online Help

Guys, in this post we are going to discuss what is an identifier in java and let's see what are all the rules included in java identifiers. Identifiers are names given to variables, class, methods, objects, and interface in a program. It's a  user-defined name. Identifiers should follow the following rules:

  • Identifiers can have digits, alphabets, underscore and dollar sign characters.
  • The first character must be an alphabet.
  • They can be of any number of characters.
  • They are case sensitive.i.e. upper case and lower case letters are different.

Example,
SUM is different from the sum.

Some examples fo valid indentifiers are:
A2,SUM,sum,c18,Balance_amount

Some examples of invalid identifiers are:
while - It's not an identifier because it's a java keyword.
94 - It's not an identifier because of its begins with alphabets.
roll no - Its not an identifier because it doesn't include space.

Also read: Java Keywords

Saturday 10 November 2018

keywords in java | what is java keyword - online help

Keywords in java:

Guyz in this post we are going to discuss keyword in java.so, what is java keywords? and let's see how many keywords are there in java? so let's get started,

Keywords also referred to as reserved words. It has a predefined specific meaning. The user has no right to change its meaning.

For example,

int height;

Here, int is a keyword.it indicates that the variable height is of the integer data type.

Keywords cannot be used as a variable or identifier as they are part of the programming language syntax.


READ: features of java programming

Keywords should be written in lower case. Around 60 words have been reserved as the keywords in java language. The following are reserved for java:

Abstract
Default
If
Package
This
Class
Float
Native
Int
Return
Interface
Short
Assert
Char
Final
Finally
Long
Static
Volatile
Throws
Throw
Instanceof
Null
Try
Void
Continue
Const
Catch
Do
Break
Import
Byte
Public
Case
For
While
Goto
Boolean
Implements
Private
Double
Protected
Else
Transient
Extends
New
Switch
Synchronized
Super
True
False
Enum
Strictfp
Transient

The keyword 'const and goto' is a reserved word but it is not used and has no functions.

Wednesday 7 November 2018

Features of Java Programming | Characteristic of Java Programming - Online Help

Features of Java Programming:

Let's discuss the features of java programming

The fundamental forces that necessitated the intention of java are portable and security, other factors also played an important role in molding the final form of the languages. The various features of Java programming are as follow:

1.simple

2.object-oriented

3.robust

4.secure

5.compiled and interpreted

6.portable

7.multithreaded

8.Architecture-neutral

9.High performance

10.Dynamic

11.Distributed

Simple:

Java was designed to be easy to learn and use effectively.Java is a simple object-oriented language. It is a small language, we can write software that can run on a small local computer. Programming in Java is easier than c++. Because Java does not support pointers, header files, and operator overloading, most of the java's syntax is adapted from c++. Programmers who are familiar with that language will have a much easier time for learning java program.

Object-oriented:

Java was not designed to be source-code compatible with any other language. This allowed java team the freedom to design with a blank slate. One outcome of this way is a clean, usable, pragmatic approach to objects.Java is a pure general purpose object-oriented language. At runtime, a program creates objects from classes, Programming(OOP) is a powerful way of organizing and developing software. The short description of OOP is that it organizes a program as a set of components called Objects. These objects exist independently of each other, and they have rules for communicating with other objects, and for telling those objects to do things.Java inherits its object-oriented concept from c++ and other languages as Smalltalk.

Robust:

The ability to create robust programs was given a high priority in the design of java. To gain reliability, java restricts you in a few key areas, to force you to find mistakes early in program development. At the same time, java frees you from having to worry about many of the most common causes of programming errors. because java interpreter checks all system access performed within a program, Java programs cannot crash the system. Instead, when a serious error is discovered, java programs creates an exception. This exception can be captured and managed by the program without any risk of bringing down the system.



Secure:

The single most important aspect of Java is Security. As you are likely aware, every time that you download a normal program, you are risking a viral infection. Prior to Java, most users did not download executable programs frequently and those who did scan them for viruses prior to execution. This type of program can gather private information, such as credit card numbers, bank account balances and passwords by searching the content of your computer's local file system.Java answers both of these concerns by providing a firewall between networked applications and your computer. It is highly secure. The java interpreter verifies the bytecode before executing it. If bytecode runs out to be invalid, it will not be executed at all.Java does not allow programmers to interact with the memory of the system. i.e. one cannot write a java code that accesses the memory of the system.

Compiled and interpreted:

Java is a compiled and interpreted language.Java enables the creation of cross-platform programs by compiling into an intermediate representation called Java bytecode. Before you can run a program written in the Java language, the program must be compiled by the java compiler and then interpreted. This is made possible by its Java virtual machine. The Java virtual machine converts the intermediate bytecode into machine code.

READSeparators in java

Portable:

Java is portable language.java compiler generates a code called bytecode and this code can be used by any machine. The size of the basic data type in Java is compatible with all the system making the java program highly portable.



Multithreaded:

Java was designed to meet the real-world requirement of creating interactive networked programs. To accomplish this, Java supports multithreaded programming, which allows us to write programs that do many things simultaneously. Multithreading means handling several tasks simultaneously. Without multithreading, only one line of execution takes place at a time. In a multi-threaded environment, we need not wait for an application to finish one task before starting another.

Architectural Neutral:

As we now that java is not dependent on the architecture of a particular machine.Java program can be run on a variety of CPUs and operating systems.

High performance:

Since java interpreter uses bytecodes, the java source code is first compiled and then interpreted.so the java program is executed very fast.

Dynamic:

Java is a dynamic language.it is capable of linking libraries, functions, methods as well as objects link in a new class library, methods, and objects.

Distributed:

Java is designed for the distributed environment of the internet because it handles TCP/IP protocols. In fact, accessing a resource using a URL is not much different from accessing a file. The original version of Java(Oak) included features for intra-address-space messaging. This allowed objects on two different computers to execute procedures remotely.Java has recently reviewed these interfaces in a package called Remote Method Invocation(RMI). This feature brings an unparalleled level of abstraction to client/server programming.


Tuesday 6 November 2018

What is Java programming | Java programming history | Types of Java program | Introduction of Java - Online Help

History of Java Programming:

Java programming is a platform-independent and pure object-oriented multi-threaded programming language.Java was developed by James Gosling and Patrick Naughton of sun microsystem, the USA in 1991. It took 18 months to develop the first working version. This language was initially called 'Oak' and it was renamed as 'Java' in 1995. Many more people contributed to the design and evolution of the language. Bill Joy, Arthur Van Hoff, Jonathan Payne, frank vellin and Tim Lindholm were key contributors to the maturing of the original prototype.

it was designed to be small, simple, and portable across both platforms as well as the operating system at the source and binary level. Because of its simplicity and platform-independent, it had been developed with the main objective of making the programming for the internet faster and easier. This language has a great future due to its four distinct features, namely object-oriented, platform-independent, internet support and security. The java programs developed exclusively for the internet, which is well known as 'applet' can now be effortlessly distributed to many users over the internet.


Introduction of Java programming:

-Java is a pure general-purpose object-oriented language.

-It is a platform-independent language(which was not dependent on any particular hardware or operating system.

-Java is compiled and interpreted language.

-Its compiler translates a source program into an intermediate code called bytecode. This code could not be used by the computer. These intermediate codes are called the Java virtual machine.

-Java interpreter produces the machine-dependent code called machine code and could be run by the computer.

Types of Java Program:

Java program has two types. They are:
  • An application program(stand-alone application)
  • Applets program

Application program/Stand-alone application:

Stand-alone applications are those programs that can be developed and executed on a stand-alone local computer (which can be executed from command prompt). The stand-alone application can be executed without browsers. A java program is not embedded within HTML or any other language and can be used on its own. It is referred to as an Application program.

Applet Program:

Applet programs are small java program developed for internet applications. Applets are embedded in the HTML document. Applet programs can be run using the applet viewer or web browser. For example, when you use Java to enhance the www page, the java code is embedded within HTML code. It is called an applet.

Sunday 4 November 2018

Display and Box property in CSS | CSS display and box property - Online Help

Box and display property in CSS:

Guys in this post we are going to discuss the box and display property in CSS .so, let’s get started, First we are going to discuss box property in CSS. All HTML element is considered as boxes.because it wrapped around HTML element. It consists of margins, borders, padding, and the actual content.

Box property in CSS:


The box model allows us to place a border around elements and arrange them elements inside the border.

The parts of the box model are:

1.Margin: The margin is the distance between the edges of the box and the box next to it.

2.Border: A border that goes around the padding and content. The border is affected by the background color of the box.

3.Padding: This padding is the space between the content of the box and its border.

4.Content: The content of the box, where text and images appear.

1.Margin property:

The CSS margin properties define the space around elements. The margin does not have a background color and is completely transparent. The top, right, bottom and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all the margin at once. The value of this property is either a length in terms of px, pm, in or percentage.

In CSS, it is possible to specify different margins for different sides like,
margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

It is possible to specify all the margin properties in one property.This is called a shorthand property. The shorthand property for all the margin properties is “margin”.

Example:

<html>

<head>

<title>margin property</title>

<style type=”text/css”>

P.mar

{

margin-left:1cm;

margin-right:5cm;

margin-top:2cm;

margin-bottom:20px;

padding:1.5cm;

border-width:10px;

border:medium double rgb(250,0,255)

}

</style>

</head>

body>

<p class=”mar”>This is an example for CSS box model

</body>

</html>


2.Border property:

The CSS border properties allow us to specify the style and the color of an element’s border. There are three properties of a border.

1. border-style

2. border-color

3. border-width

Border-style property:

The border-style property allows us to specify the style of the border. The value
of the borders are as follows

Dotted
Defines a dotted border.

Dashed
Defines a dashed border.

Solid
Defines a solid border.

Double
Defines two borders. The width of the two borders is the same as the border-width value.

Groove
Defines a 3d groove border. The effect depends on the border-color value.

Ridge
Defines a 3d ridge border. The effect depends on the border-color value.

Inset
Defines a 3d inset border. The effect depends on the border-color value.

Outset 
Defines a 3d outset border. The effect depends on the border-color value.

The border-style property set the border for each of the sides of the elements. The individual border
styles can be controlled with border-top-style, border-bottom-style, border-left-style, border-right-style.

In CSS it is possible to specify different borders for different sides.

Example:
P

{

border-top-style:dotted;

border-bottom-style:solid;

border-left-style:dotted;

border-right-style:solid;

}


Border-color property:
The border-color property is used to set the color of the border. The color can be set by two methods:

Name-specify a color name, like” red”

Hex-specify a hex value, like #FF0000”

As with border widths and styles, you can use a property for each border’s color by using border-top-color, border-bottom-color, border-right-color, border-left-color.

Example:

P{border-style:solid; border-color:red;}

In CSS it is possible to specify different colors for different borders.

Example:

P

{

border-top-color:red;

border-bottom-color:blue;

border-left-color:green;

border-right-color:violet;

}

Border width property:
The border-width property is used to set the width of the border. The width is set in pixels, are by using one of the three pre-defined values: thin, medium, or thick.Four properties set the width for the specific border:border-top-width, border-bottom-width, border-left-width, border-right-width.The width can be specified by using the keyword thin, medium, thick as values indicating the size of the border.

Example:

<html>

<head>

<title>border width example</title>

<style type=”text/css”>

table{

border-width:thick;

border-top-color:red;

border-left-color:orange;

border-right-color:violet;

border-bottom-color:green;

border-top-style:dashed;

border-bottom-style:double;

border-right-style:dotted;

}

</style>

<body>

<table border=”border”>

<caption>nature image</caption><tr><td>nature image</td><td>

<img src=”lotus.jpg” alt=”cant display”></td></tr>

</table>

</body>

</html>

3.Padding property:

The CSS padding properties define the space between the element border and the element content. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding’s at once.

In CSS it is possible to specify different padding for different sides:

padding-top:25px;

padding-bottom:25px;

padding-left:50px;

padding-right:50px;


Padding shorthand property allows us to specify all the padding properties in one declaration. The shorthand property for all padding properties is “padding”.

Example:

<html>

<head>

<title>margin and padding example</title>

<style type=”text/CSS”>

P.one

{

margin:0.1in;

padding:0.5in;

background-color:#FF33FF;

border-style:dotted;

}

P.two

{

margin:0.5in;

padding:0.1in

background-color:#00FF33;

border-style:dashed;

}

P.three

{

margin:0.3in;

background-color:#FFFF00;

}

P.four

{

padding:0.3in;

background-color:#FF9900;

}

</style>

</head>

<body>

<p class=”one”>welcome to my online help blog<br>[Margin:0.1in;

Padding:0.5in]</p>

<p class=”two”>welcome to my online help blog<br>[Margin:0.5in;

Padding:0.1in]</p>

<p class=”three”>welcome to my online help blog<br>[Margin:0.3in;no padding;no border]</p>

<p class=”four”>welcome to my online help blog<br>[Padding:0.3in;no margin,no border]</p>

</body>

</html>


Display Property:

The display property supports a variety of values. The display property allows an element’s display type to be changed to one of four values: block, inline, list-item, and none. The none value causes an element not to display or use canvas space. For example, a display property value of compact is used to position enclosed text in the margin of the following block element.

<h2 style=”display:run-in;”>heading</h2>

A value of run-in also is supported for the display property. This should allow a block-level element such as heading to be run in or combined with the next block-level element.

Display block and inline:

CSS code:

a{display:block;}

p{display:inline;}

Example:

<html>
<head>

<title>display property</title>

<style type=”text/css”>

a{display:inline;}

p{display:block;}

p{display:marker;}

</style>

</head>

<body>

<a>This blocks are displayed as inline</a>

<p>hyperlinks are displayed as block</p>

</body>

</html>


Wednesday 24 October 2018

Adding styles to the html document | Types of CSS - Online Help

Adding style to HTML document:

Let's discuss adding styles to the document and what are all types of style sheets available in CSS.

ln order to add styles to the HTML document, we have to add CSS style sheets with it. Different types of styles can be added to the HTML document, depending upon which kind of style sheets we are attaching.

There are three types of style sheets in CSS and they are:

  • External Style Sheet
  • Embedded Style Sheet
  • Inline Style Sheet

External style sheet:


In the External stylesheet, Style information is written in the separate file and it is a reference from the HTML document. This type of style sheet is very useful when the same style is applied to a different document. As I already said that it is a reference from the HTML document, the external style sheet is linked by using the HTML <link> tag. The general form is
             
                               <link rel="stylesheet" type="text/css" href="mystyle.css>

This tag specifies that the style information to be used to display this document is stored in a file named "mystyle.css".It is inserted in the <head> section of an HTML document.


Sample program:


Main.html:

<html>
<head>
<title>sample of external style sheet</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>

style1.css:

h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}


2.Embedded style sheet:

Embedded Style Sheet is also known as an internal style sheet or document level style sheet.it should be used when a single document has a unique style.In this method,style information is placed under the <style> tag in the <head> section of an HTML page.

Sample program:

<html>
<head>
<title>sample program for internal style sheet</title>
<style type="text/css">
h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}
</style>
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>

3.Inline style sheet:

In the inline style sheet, Style information is in line using the style attribute. The style attribute may be applied to any BODY element including BODY itself. The attributes take as it values any number of CSS declarations, where each declaration is separated by a semicolon.

Sample program:
<html>
<head>
<title>sample program for inline style sheet</title>
</head>
<body>
<h1 style="font-family:'lucida handwriting';font-size:50pt;color:red;">welcome to my online help blog</h2>
</body>
</html>

Tuesday 23 October 2018

Cascading style sheet basics | basics of style sheet - Online Help

cascading style sheet basics:

Let's discuss the cascading style sheet basics

We are going to discuss the basics of stylesheet .so, let's discuss the basics. To create a cascading style sheet, you have to use the syntax to define the parameters of a style by first specifying the HTML element that you want to assign a style to and then, inside of curly braces{}, you list the attributes NAME and VALUE pair or pairs.

 You have to separate each name and value with a colon like this: NAME: VALUE. Then you separate each NAME: VALUE; pair with a semicolon, even if there is only one pair, like this:

 {NAME: VALUE ;}
 {NAME: VALUE; NAME: VALUE; NAME: VALUE ;}

Here are three different examples of real NAME: VALUE; pair:
     
      1. {color: red ;}
      2. {text-align: left; float: right ;}
      3. {background-color: purple; margin: 10pt; border-style:ridge;}

           Putting all together, here is a simple style that causes all H2 element headings to be displayed with a font that is sized at 14 points and colored aqua:
                     
                           H2 {font-size: 14pt; color:aqua;}






Monday 22 October 2018

General format of CSS | Syntax of CSS | Syntax and Golden rules of styles in CSS - OnlineHelp

The general format of CSS:

Let's discuss the general format of CSS.

The general format CSS contains two parts in style rule i.e. selector and property: value. The selector determines what HTML tag we are styling, and the declaration is made up of one or more property: value pairs, ending in a semi-colon and enclosed in curly brackets.

In this case, a property is a display feature such as color and value is what we want that property to look like.

 selector{property:value}
 selector{property:value;property:value;property:value;...........}

Where,

selector  : Normal HTML element/tag you wish to define. It is the link between the HTML document and the style sheet.

property: 
The attribute of the tag intended to change.

Example:
1.body{color:green}
In this color attribute of the body, the element is set to green.

2.body{font-family: Arial; color:green}


Read: What is the cascading style sheet

The golden rules for CSS:

 Here are 6 rules of style definitions:


  •  Every CSS definition has to have a selector and a declaration. The declaration follows the selector and uses curly braces.
  • The declaration consists of one or more properties separated with a semicolon.
  •  Every property has a name, colon, and value.
  • A property can have multiple values separated with a comma.
  • Along with value, can also be a unit of measure.No space is allowed between the value and the unit.
  • When writing CSS code, you can use white space as needed-new lines, spaces, whatever makes your code more readable.


Sunday 21 October 2018

What is cascading style sheet | what is CSS - Online Help

Let's discuss what is cascading style sheet?

Cascading style sheets were introduced to provide a uniform and consistent way to specify presentation details in XHTML documents. The CSS1 specification was developed in 1996 by W3C. CSS2 was released in 1998 which added many properties and values to CSS1.

CSS3 has been under development since the late 1990s. CSS provides the means to control and change the presentation of HTML documents. CSS is not technically HTML,but can be embedded in HTML documents.

As we know, the Cascading style sheet was introduced to provide a uniform and consistent way to specify presentation details in X HTML documents.

Most of the style tags and attributes are those deprecated from HTML 4.0 in favor of style sheets. The idea of style sheets is not a new concept as it existed in desktop publishing systems and word processors. Style sheets allow you to impose a standard style on a whole collection of documents.


Also read: what is HTML

Introduction of Style Sheet:


A style sheet is a document that contains style information about one or more documents written in markup languages. It enables us to control the rendering of styles such as font, color, typeface, size, spacing, margins and other aspects of document style.

A style sheet is composed of a set of style rules written in a specified format. This set of style rules instructs browsers on how to present a document on the screen.

 Cascading style sheet:


A cascading style sheet is a style sheet language used to describe the presentation semantics i.e. the look and formatting of the document written in a markup language.

CSS is designed primarily to enable the separation of the document content written in HTML or a similar markup language from document presentation, including elements such as the color, fonts, and layout.

An advantage of CSS:


The following are the advantage of CSS:

1. CSS is to separate document presentation from document content written in a markup language.

2. CSS will allow the designer to create tighter, more dynamic content for the web.

3. Web pages using CSS will transfer faster to users and will be easy to maintain.

4. CSS will lead to improved accessibility, maintainability, and performance on the web. 



Saturday 20 October 2018

What is frames in HTML? | How to create frames in HTML? - Online Help

 So guys what is frame? Let's discuss frames in HTML, Frame is nothing but, divided rectangle area in a browser which is used to display more than one document at a time. Each frame is capable of displaying its own document. There are two tags related to frames i.e; frameset and frame. A collection of frames in the browser window is known as a frameset.

Frames in HTML:


<frameset> tag:


 The <frameset> tag defines how to divide the window into frames each frameset defines a set of rows or columns. The value of the rows/column will occupy. The general form is:

<frameset cols="values" rows="value">
--------------------------
--------------------------
</frameset>


<frameset> Attributes:


rows

Sets the number of rows (horizontal frames) in the frameset. Separate the values assigned to these attributes with commas; each value represents the height of the row. Set to pixel value or percentage or use an asterisk to specify the remaining space.

cols

Sets the number of cols (vertical frames) in the frameset. Separate the values assigned to this attribute with commas; each value represents the height of the column. Set to pixel value or percentage or use an asterisk to specify the remaining space.

border

It accepts a pixel value, which determines the thickness of any border used within the frameset.

Example:
<frameset rows="20%,50%,10%">
<frameset cols="100%,*,100%">

Also Readhow to insert an image in HTML

<frame> attributes:

src

The src attribute takes the URL of the document to be displayed in this particular frame. Frames without src attributes are displayed as a blank space the size of the frame would have been.

name

The name attribute is used to assign a name to a frame so it can be targeted by links in other documents. The name attribute is optional; by default all windows are unnamed.

 

marginwidth

Sets the size of the right and left margins used in the frame.

 

marginheight

Sets the size of the top and bottom margins used in the frame.

 

noresize

Stand-alone attributes indicating that the frame may not be resized. The default is that the frame may be resized by dragging the border.

 

scrolling

Determines scrollbar action.Possible values are auto,yes,no.

 



Sample program for creating the frame:


main.html:
<html>
<frameset rows=25%,75%>
<frame name=border src="top.html">
<frameset cols=25%,75%>
<frame name=course src="catagories.html">
<frame name=display src="displaycontent.html">
</frameset>
</frameset>

top.html:
<html>
<body bgcolor="bisque"><center><font name=bold size=5 color=#890765>
huda beauty store<br>vellore<br>
</center>
</body>
</html>

catagories.html:
<html>
<head>
<title>huda beauty store</title>
</head>
<body>
catagories:
<ul>
<li>moisturizer
<li>sun screen
<li>primer
<li>foundation
<li>concealer
<li>compact powder
<li>blush
<li>highlighter
<li>contour
<li>eyeshadow pallate
<li>kajal
<li>eye liner
<li>muscara
<li>eye lashes
<li>makeup fixer
<li>makup brush
</ul>
</body>
</html>

displaycontent.html:
<html>
<head>
<title>huda beauty store</title>
</head>
<body>
<center>
welcome to our cosmetic world
</center>
</body>
</html>



The output is:

What is frames in HTML? | How to create frames in HTML? - Online Help