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. 

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 Read: how 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:

How to insert an image in HTML - Onlinehelp

How to add an image to HTML:

Let's discuss how to insert an image in HTML?

Like Text, Images can be displayed on the web page. Once the image is ready, it can be inserted into a webpage with the help of <img> tag. This tag contains the name of the image file. The general format to add an image to HTML is,

<img attribute1="value" attribute2="value"..............>

Also, HTML allows to control of the height, width, border, and so on, of every image placed on the web page. The <img> tag takes the following attributes:

ALIGN	Control alignment of the text following image. ALIGN=TOP indicates the text after the image to be written at the top, next to the image. ALIGN=MIDDILE indicates the text after the image to be written at the middle, next to the image. ALIGN=BOTTOM indicates the text after the image to be written at the bottom, next to the image. Controls alignment of the image concerning the VDU screen. ALIGN=LEFT indicates the image is aligned to the left concerning the screen. ALIGN=CENTER indicates the image is aligned to the center with the respect to the screen. ALIGN=RIGHT indicates the image is aligned to the right with respect to the screen.
BORDER	Specifies the size of the border to place around the image.
WIDTH	Specifies the width of the image in pixels.
HEIGHT	Specifies the height of the image in pixels.
HSPACE	Indicates the amount of space to the left and right of the image.
VSPACE	Indicates the amount of space to the top and bottom of the image.
ALT	Indicates the text to be displayed in case the browser is unable to display the image specified in the SRC attributes.
SRC	Specifies the location and the name of the image file.

Example:

<IMG align=Center Border=0 height=57 HSpace=0 src=”image.gif” width=447>

The attributes to insert an image in HTML:

The attributes taken by the <Img…………………> tags are explained in the following examples.

Also Read: Exception handling in java

1.THE BORDER ATTRIBUTE:

Border attributes used to add a border around the image.

<html>

     <head><title>working with the image</title></head>

     <body background=”images/texture.gif”/>

           <b>controlling image borders</b><center>

           <i>image without a border</i><br><br>

           <img src=”images/crop.gif”><br><br>

           <img border=3 src=”images/crop.gif”><br>

         </center>

   </body>

</html>

2.THE WIDTH AND HEIGHT ATTRIBUTE:

Using the width and height attributes of <img> we change the size of an image.

<html>

      <head><title>Working with the images</title></head>

      <body background=”images/textures.gif”>

             <b>controlling image size</b><center>

             <i>normal image size</i><br><br>

             <img src=”image/computer.gif><br>

             <i>image with size (height and width) set to 200</i><br><br>

             <Img height=200 src=”images/computer.gif” width=200><br>

          </center>

     </body>

Also Read: Thread in java | java thread tutorial

3.ALIGN ATTRIBUTE:

The location of the <img> is get altered using the align attribute.

<html>

          <head><title>working with the images</title></head>

          <body background=”images/texture.gif”>

                      <b><i>images aligned left</i></b>

                      <img align=left src=”images/sctonly.gif”><br><br>silicon chip technologies<br>

                      <i> we specialized in the corporate training ,software development and placements,our training programs and software development includes web based commercial application and commercial application development usiong datacases.</i><br><br>                          

                      <br><br>

                      <b><i>image aligned right</i></b>

                      <img align=right src=”image/sctonly2.gif”><br><br>silicon chip technologies<br>

                      <i> we specialized in the corporate training ,software development and placements,our training programs and software development includes web based commercial application and commercial application development usiong datacases.</i><br><br><br><br>

       </body>

       </html>

Also read: Multithreading in java

I hope you guys understand how to insert an image in HTML. please comment if you something wrong or incorrect.

Creating table in HTML | how to create Table in HTML - online help

How to create a table in HTML:

Let's discuss how to create a table in HTML

A table in HTML can be created by using <table> tag. The table tag defines a table for multidimensional data arranged in row and columns. 

Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results. To work with tables, we need to start thinking in a grid of rectangle.

Each rectangle is known as a cell. A row is made up of a set of cells on the same line from left to right, while a column is made up of a line of cells going from top to bottom.

 Inside the <table> element, the table is written out row by row. A row is contained inside an <tr> element -which stands for table row, each cell is then written inside the row element using an <td> element which stands for table data. And Creates table headings; just like table data but usually bold and centered vertically and horizontally using <th> element -which stands for a table heading.

ALSO READ: List in HTML

<Table> Attributes:

The <table> tag allows many optional attributes that specify the properties of the entire table. The most important attributes of the table are as follows:

Width	Used to set the width of the table and it must be a percentage value.
Cell spacing	Used to set the distance between cells. The value should be in pixels.
Border	Used to set the thickness of the border.
Cell padding.	Used to set the distance between the border and content of cells
Width	This attribute is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width.
Height	This attribute describes the height of the table, either as a particular pixel value or as a percentage of the display window.
Align	It allows a table to be aligned to the left or right of the page, allowing text to flow around the table.
bgcolor	It allows the background color of the table to be specified, using either the specified color name or an rrggbb hex triplet.
Border color	This attribute used to set the border color of the table.

ALSO READ: Structure of HTML document

Example

<html>

<head>

<title>table example</title>

</head>

<body>
<center>

<b>Name of the student:</b> neha<br>

<b>department:</b> computer application<br>

<b>college: </b> MKJC<br>

<table border =6 width=60% align="center" bgcolor="cyan" bordercolor="red">

<tr>

<th>Subject</th>

<th>Internal Mark</th>

<th>External Mark</th>

</tr>

<tr>

<td>programming in c</td>

<td align=center>20</td>

<td align=center>70</td>

</tr>

<tr>

<td>programming in c++</td>

<td align=center>22</td>

<td align=center>71</td>

</tr>

<tr>

<td>programming in java</td>

<td align=center>24</td>

<td align=center>74</td>

</tr>

</table>
</center>

</body>

</html>

The output of this coding is:

Lists in html | What is HTML Lists | HTML Lists - Online Help

Lists in HTML:

Let's discuss what is lists in HTML

The list is used to displaying information sequentially in an HTML. Lists are divided into three type. Namely,
1. Ordered list
2. Unordered list
3. Definition list

READ: Basic commands in HTML

Types of Lists in HTML:

Ordered List:<ol>..........</ol>

This list has a sequence of number in front of each list item. Every list item in <ol> tag must be encapsulated within the <li>tag is nothing but the list of item. The default sequential values are Arabic numerals, beginning with 1. In an order list the information is numbered by any one of the following:
1. Numbers 1, 2, 3,
2. Upper Case alphabets-A, B, C,
3. Lowercase alphabets- a, b, c,
4. Uppercase Roman numbers
5. Lowercase Roman numbers

The general format is

<ol type="value" start="value">

<li> item1

<li> item2

<li> itemn

</ol>

Example

<html>
<head>
<title> ordered list example</title>
</head>
<body>
<ol type="1">
<lh>Programming language
<li>c programming
<li>c++ programming
<li>java
<li>java script
</ol>
</body>
</html>

The output of this coding is

Programming language

1.c programming
2.c++ programming
3.java
4.java script

Unordered List:<ul>............</ul>

The <ul>, which is a block tag, creates an unordered list. Each item in a list is specified with a <li> tag. In an unordered list, the information is preceded by any one of the following bullets:
1. Circle
2. Disc
3. Square

The general format is

<ul type="value">

<li>item 1

<li>item 2

<li>item n

</ul>

ALSO READ: Advantages and disadvantages in HTML

Example

<html>
<head>
<title>unordered list</title>
</head>
<body>
<ul type="circle">
<lh>Programming language
<li>c programming
<li>c++ programming
<li>java
<li>java script
</ul>
</body>
</html>

The output of this coding

Programming language
c programming
c++ programming
java
javascript

Definition List:<dl>.................</dl>

Definition lists are used to specify lists of terms and their definition as in glossary. A definition list is given as the content of a <dl> tag, which is a block tag. Each term to be defined in the definition list is given as the content of a<dt> tags. The definition themselves have specified as the content of<dd> tags. The defined terms of a definition list are usually displayed in the left margin; the definitions are usually shown indented on the line.

The general format

<dl>

<dt>item 1 <dd> definition 1

<dt>item 2 <dd> definition 2

--------------------------

--------------------------

<dt>item n <dd> definition n

</dl>

Example

<html>
<head>
<title>Definition List</title>

</head>
<body>
<dl>
<dt>Tea<dd>type of hot drink
<dt>Cofee<dd>Another type of Hot drink
</dl>
</body>
</html>

The output of this coding is

Tea
type of hot drink
Coffee
Another type of hot drink

ALSO READ: Structure of HTML document

Basic Commands or Tags in HTML | HTML Basics - Online Help

Let's discuss the basic commands or tags in HTML

 HTML contains some basic tags which are used for formatting the documents and it contains some tags with their attributes which is used to add graphics effect for the documents.

Basic commands or tags in HTML:

1. Bold :<b>.................</b>

This tag is used to display the given text in bold letters.

Example

<b>Welcome to the online Help</b>

The output of this tag is:

Welcome to the online Help

2.Italic :<i>.................</i>

This tag is used to display the given text as italics.

Example

<i>Welcome to the online help</i>

The output of this tag is:

Welcome to the online help

3. Underline :<u>..................</u>

This tag is used to underline the given text.

Example

<u>Welcome to the online help</u>

The output of this tag is:

Welcome to the online help

Sample coding for basis tags is:

<html>

<head>
<title>welcome to the blog</title>
</head>
<body>

<b>Welcome to the online help</b>
<i>Welcome to the online help</i>
<u>Welcome to the online help</u>
</body>
</html>

4. BODY tag <body>

The Body tag contains all the text and graphics of the document with all the HTML tags that are used for controlling and formatting of the page. The general form is

<BODY>
Your document goes here
</BODY>

Body tags contain their attributes that can be used for graphics of the document.

Also Read: advantages and disadvantages in HTML

Attributes used with <BODY>:

I. BGCOLOR: It is used to set the background color for the document.

<BODY BGCOLOR=” yellow”>

Your document text goes here
</BODY>

II. TEXT: It is used to set the color of the text of the document.

<BODY TEXT=” red”>

Your document text goes here
</BODY>

III. MARGINS: It is used to set the Margin of the document. We can set Left
hand/ Right-hand margin for the document.

-Left Margin: used to set the left-hand margin of the document,

<BODY LEFTMARGIN=”60”>

This document is indented 60 pixels from the left-hand side of the page.
</BODY>

-Top Margin: used to set the left-hand margin of the document.

<BODY TOPMARGIN=”60”>
This document is indented 60 pixels from the top of the page.
</BODY>

IV. BACKGROUND: It is used to point to an image file that will be used as the background of the document. The image file will be tiled across the document.

<BODY BACKGROUND=”filename.gif”>

Your document text goes here
</BODY>

Center:<center>---</center>

This tag is used to center the given text.

Example:

<center> welcome to the blog</center>

Output:

Welcome to blog

5. Line Break:<br>

<br> tag is a break tag. This tag is used to break up the current line and cursor goes to the next line.

Example

<html>
<head>
<title>Break Example </title>
</head>
<body>
computer is an <br> electronic <br>device
</body>
</html>

The output of this coding is

Computer is an
electronic
device

6. Paragraph:<p>---</p>

It begins with <p> and ends with </p>.Multiple paragraphs may appear in a single document. This tag is used to begin a new paragraph.The general format is

<p align="value ">

If value=left,it aligns the left paragraph.

If value=right, it aligns the right paragraph.

If value =center,it aligns the center paragraph.

If value= justify, it aligns the justify paragraph.

Example

<p align:"left">

This tag aligns the paragraph to left.

7.Heading styles:

The line just above was a header,i.e.a title for a new section of a document. There are six headers:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.H1 is the"Main" header, usually used once at the top of the document.H6 is the"smallest" header and is rarely used, though it's often abused to make small bold text.

Example
<html>
<head>
<title>heading</title>
</head>
<body>
<h1>the appearence of the heading h1 tag </h1>
<h2>the appearence of the heading h2 tag </h2>
<h3>the appearence of the heading h3 tag </h3>
<h4>the appearence of the heading h4 tag </h4>
<h5>the appearence of the heading h5 tag </h5>
<h6>the appearence of the heading h6 tag </h6>
</ body>

</html>

The output of this coding is

the appearance of the heading h1 tag
the appearance of the heading h2 tag
the appearance of the heading h3 tag
the appearance of the heading h4 tag
the appearance of the heading h5 tag
the appearance of the heading h6 tag 

8.Horizontal:<hr>tag

The parts of the document can be separated from each other, making the document easier to the reader, by placing horizontal lines between them. such lines are called horizontal rules.

Example

<html>
<head>
<title>
Horizontal rule</title>
</head>
<body>
html<hr>
it's a markup tag <hr>
it is used to create web page<hr>
</body>
</html>

9. Font:<font>...........</font>

This tag is used to specify the size of the font and the color of the text to be displayed. the general format is
<font attribute="value>
--------------------
-------------------
</font>

Also Read: HTML Frames

font attribute:

face - This attribute is used to set the type of font.

Color - This attribute is used to set the specific color to the font.
Size - This attribute is used to set the size of the font.

Example:

<html>
<head>
<title>Font eaxmple</title>
</head>
<body>
<font face="Times New Roman" color="blue" size="64"> Html is not a programming language</font>
</body>
</html>

Structure of HTML document | General Form of HTML - Online Help

Hello readers, welcome to this page. Let's discuss the structure of the HTML document.

So guys, what is structure of the HTML document?

As we know every document having its own structure. Likewise, HTML is also having its own structure. The HTML document has two parts. The HEAD, and the BODY. These parts are contained within the HTML element -it simply denotes that, it is HTML documents.

An HTML file can be created by using a simple text editor viz notepad, WordPad, edit plus,etc., and the file must be saved with an extension .htm or .html.

READ: Advantages and disadvantage of HTML

Structure of HTML document:

So the explanation of these markup tags is:

<html>......</html>

All the HTML documents must begin with opening tag <html> and closing tag </html>.

Head section

The head section is used to display the title of the HTML document. This section is also having both the opening tag <head> and ending with </head>.

<title>................<title>

Now what is the use of <title> tags

The title of the HTML document is defined with the tags. This will display the title in the title bar of the window. 

Body section

So what is the body section?

The body section contains the information that we want to display on the webpage. This section begins with <body> and ends with </body>.

Sample coding:

<html>

<head>

<title>Welcome Readers</title>

</head>

<body>

hello readers, welcome to my blog

</body>

</html>

ALSO READ: BASICS OF HTML

Advantages and Disadvantages of HTML | What are the advantages of HTML? | What are the disadvantages of HTML?-Online Help

Let's discuss the advantages and disadvantages of HTML

HTML is a platform-independent language so that can be used in any platform like Windows, Linux, Macintosh, etc., With the help of these HTML tags, we can markup the different elements of the document such as headings, paragraphs, tables, and so on. 

To view this markup, you have to open the document in a browser. A browser can understand and interprets the HTML tags, identifies the structure of the document, and makes a decision about the presentation of the document.

So, guys, every coin has its own two sides likewise, HTML also having both advantages and disadvantages.

Advantages and disadvantages of HTML:

Advantages:

• HTML is widely used.
• Every browser supports HTML Language.
• Easy to learn and use.
• Do not need to purchase any extra software because it is by default in every window.

Disadvantages:

• HTML can create only static and plain pages so if we need dynamic pages then HTML is not useful.
• I need to write a lot of code for making a simple webpage.
• Security features are not good at HTML.
• If we need to write long code for making a webpage then it produces some complexity.