Leave a comment

HTML | Tables

html tables

HTML tables are very basic but can be very powerful when used correctly. At their base level, tables can organize data into rows and columns.

The table definition itself is defined and delimited by <table> tags Rows of data are defined and delimited by <tr> (table row) tags.Table cells (individual pieces of data) are defined and delimited by <td> (table data) tags.Alternatively, <th> tags can be used for cells in header rows. Table cells, when stacked in even rows, create table columns.

<DOCTYPE HTML—

<table border=”2px”>
<tr>
<th>Cars</th>
<th>Car Type </th>
</tr>
<tr>
<td>Flat Panda</td>
<td>Sports </td>
</tr>
<tr>
<td>Ford Fiesta </td>
<td> Luxury</td>
</tr>
</table>

</html>

The <table> element can carry the following deprecated attributes:

  • align
  • bgcolor
  • border
  • cellpadding
  • cellspacing
  • dir
  • frame
  • rules
  • summary
  • width

The cellspacing  attribute is used to create a space between the borders of each cell.

The cellpadding  attribute is used to create a gap between the edges of a cell and its contents.

The frame attribute is supposed to control the appearance of the outermost border of the whole table, referred to here as its frame , with greater control than the border attribute.

The rules attribute is used to indicate which inner borders of the table should be displayed.

    <table dir=”rtl” border=”3px” cellpadding=”2px” cellspacing=”5px”>
<tr>
<th> Car</th>
<th> Car Type</th>
</tr>
</table>

The  <caption> element appears directly after the opening <table> tag; it should come before the first row.By using a <caption> element, rather than just describing the purpose of the table in a previous or subsequent paragraph, you are directly associating the content of the table with this description – and this association can be used by screen readers and by applications that process web pages (such as search engines).

    <table width=”20%”>
<caption> Table Describes the car type</caption>
<tr>
<td>car</td>
<td>cartype</td>
</tr>
</table>

Official Website : http://www.genwhizztech.com

 

Leave a comment

HTML | Form

html forms

HTML forms simply place a handful of GUI controls on the user agent screen to allow the user to enter data. The controls can allow text input and
selection of pre-defined options from a list, radio buttons or check boxes, or other standard GUI controls.

Every <form> element should carry at least two attributes:

  •     action
  •     method

A  <form> element may also carry all of the universal attributes, the UI event attributes, and the following attributes:

  •     enctype
  •     accept
  •     accept-charset
  •     onsubmit
  •     onreset

The different types of form controls that live inside the <form> element to collect data from a visitor to your site.

  •     Text  input  controls
  •     Buttons
  •     Check boxes and radio buttons
  •     Select boxes
  •     File  select  boxes
  •     Hidden  controls

        <!DOCTYPE HTML—–

<form action=”index.html” method=”post”>
<tr>
<td><b>Name</b>:
<input type=”text” name=”text”/>
</td>
</tr>

<tr>
<td>
<b>Age</b>:
<input type=”radio” name=”age” /> 20
<input type=”radio” name=”age”/> 40
<input type=”radio” name=”age” />60
</td>
</tr>

<tr>
<td>
<b>Category</b>:
<select name=”category”>
<option name=”mbc”> MBC</option>
<option name=”obc”> OBC</option>
<option name=”bc”> BC</option>
</select>
</td>
</tr>

<tr>
<td>
<b>Gender</b>:
<input type=”checkbox” name=”male” />Male
<input type=”checkbox” name=”female” />Female
</td>
</tr>

<tr>
<td>
<textarea cols=”15fi rows=”5fi name=”textarea”> </textarea>
</td>
</tr>

<td><input type=”submit” value=”submit” name=”submit” />
<input type=”reset” name=”reset” /></td>

<tr>
<td><input type=”file” name=”upload” accept=”image/jpeg”/></td>
<td><input type=”hidden” name=”hidden” value=”This is hidden text”/></td>
</tr>
</form>

</html>

The <label> element carries an attribute called for , which indicates the form control associated with the label. The value of the for attribute should be the same as the value of the id  attribute on the corresponding form control.

<tr>
<td><label for=”name”>Name</label></td>
<td><input type=”text” name=”name2fi id=”name” /></td>
</tr>
<tr>
<td> <label>Name:<input type=”text” name=”name” /></label></td>
</tr>

The <fieldset> and <legend> elements do exactly this — help you group controls.The < fieldset > element creates a border around the group of form controls to show that they are related. The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.

   <fieldset>
<legend> This General Information</legend>
Name:<input type=”text” name=”name” tabindex=”3fi readonly=”readonly” disabled=”disabled”/>
</fieldset>
<fieldset>
<legend> This Personal Information</legend>
Mobile :<input type=”text” name=”mobile” tabindex=”4fi/>
</fieldset>
<fieldset>
<legend>This Secret Field</legend>
Password: <input type=”password” name=”pwd” />
</fieldset>

Official Website : http://www.genwhizztech.com

Leave a comment

HTML | Tags | Paragraph & Align

html paragraph

Paragraph:

The <p> element offers another way to structure your text. Each paragraph of text should go in between an opening <p> and closing </p> tag.

Elements can all carry the universal attributes:

  • align
  • class
  • id
  • style
  • title
  • dir
  • lang
  • xml:lang

<DOCTYPE HTML–
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This Is Third Paragraph </p>
</html>

Align:

The align  attribute indicates whether the heading appears to the left, center, or right of the page (the default is the left).

The align attribute has been replaced by two CSS properties: the text – align property to align text, and float to position larger items on a page.

<DOCTYPE HTML–
<h1 align=”left”> Text Align Left </h1>
<h1 align=”center”> Text Align Center </h1>
<h1 align=”right”> Text Align Right </h1>
</html>

Official Website : http://www.genwhizztech.com

 

Leave a comment

HTML | Tags | Lists

html list

There are many reasons you might want to add a list to your pages.You can create three types of lists in XHTML:

  • Unordered lists ,which are like lists of bullet points
  • Ordered lists ,which use a sequence of numbers or letters instead  of bullet points
  • Definition lists ,which allow you to specify a term and its definition

List within the <ul> element (which stands for unordered list).Each bullet point or line you want to write should then be contained between opening <li> tags and closing </li> tags (the li stands for list item ).

<DOCTYPE HTML—-
<ul>
<li> This is First Point</li>
<li> This Second Point</li>
</ul>
</html>

In an ordered list, rather than prefixing each point with a bullet point, you can use either numbers (1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix the list item. An ordered list is contained inside the <ol> element. Each item in the list should then be nested inside the <ol>element and contained between opening <li> and closing </li> tags.

<DOCTYPE HTML—-
<ol>
<li> This is First Section</li>
<li> This is Second Section</li>
</ol>
</html>

Values for ordered List:

1     Arabic  numerals
A     Capital  letters
a     Small  letters
I     Large  Roman  numerals
i     Small  Roman  numerals

If you want to specify the number that a numbered list should start at, you can use the start attribute on the <ol> element. The value of this attribute should be the numeric representation of that point in the list.

<DOCTYPE HTML—-
<ol type=”A” start=”2″>
<li> This is First Show</li>
<li> This is Second Show</li>
</ol>
</html>

The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl> element. The <dl> element then contains alternating <dt> and <dd> elements. The content of the <dt> element is the term you will be defining.

<!DOCTYPE HTML—-
<dl>
<dt> Steps</dt>
<dd> This is First Step</dd>
<dd> This is Second Step</dd>
<dt> Shows</dt>
<dd> This is First Show</dd>
<dd> This is Second Show</dd>
</dl>
</html>

Editing Text working on a document with others, it helps if you can see changes that another person has made. Even when working on your own documents, it can be helpful to keep track of changes you make. There are two elements specifically designed for revising and editing text:

  • The <ins> element for when you want to add text (usually shown underlined in a browser)
  • The <del> element for when you want to delete some text (usually shown crossed out in a browser

<DOCTYPE HTML—-
<p> This is <del>a</del> First<ins> Text</ins> </p>
</html>

http://www.genwhizztech.com

 

1 Comment

HTML | Comments

html comments

Comments:

HTML comments are fairly simple to include in your document, as they have a simple format. A comment in your document might resemble the following:

<!– This is a comment –>

Anything after    <  !–    until the closing    –>    will not be displayed. It can still be seen in the source code for  the document, but it is not shown onscreen.

CDATA sections:

Larger comments can make use of CDATA structures — structures created for other markup specifications but enabled in most user agents for XML, as well as HTML (XHTML), rendering.Hence, CDATA is used often for commenting large sections of code in HTML documents.The format of the CDATA tagisasfollows:

<![CDATA[ Commented text goes here ]]>

Leave a comment

HTML | Tags | Headings | Breaks

html heading

 

Headings:

XHTML offers six levels of headings, which use the elements <h1> ,<h2> ,<h3> ,<h4> ,<h5> and <h6>. Browsers display the <h1> element as the largest of the six and <h6> as the smallest.

Most browsers display the contents of the <h1> ,<h2> and <h3> elements  larger than the default size of text in the document. The content of the <h4> element would be the same size as the default text, and the content of the <h5> and <h6> elements would be smaller unless you instruct them otherwise using CSS.

Heading elements can all carry the universal attributes:

  •     align
  •     class
  •     id
  •     style
  •     title
  •     dir
  •     lang
  •     xml:lang

<!DOCTYPE html-–-
<h1> H1 Text Formatting</h1>
<h2> H2 Heading Display Mode </h2>
<h3> H3 Headeing Display Mode </h3>
<h4> H4 Heading Display Mode </h4>
<h5> H5 Heading Display Mode </h5>
<h6> H6 Heading Display Mode </h6>
</html>

Break:

Whenever you use the < br / > element, anything following it starts on the next line. The < br / > element is an example of an empty element.you don’t need opening and closing tags, because there is nothing to go in between them.

The < br /> element has a space between the characters br and the forward slash.

Element can carry the following attributes:

  • clear
  • class
  • id
  • style
  • title

  <DOCTYPE html—-
<h1> This is the First Line of Heading </h1>
<br />
<br />
<h2> This is the Second Line of Heading </h2>
<br />
<br />
<h3> This is Third Line of Heading </h3>
</html>

 

Leave a comment

HTML | Tags

html tags

There are lots of tags and they are all in pairs; there are   opening tags  and   closing tags .  The closing tag is always slightly different from the opening tag in that it has a forward slash after the first angled bracket:</ html >. A pair of tags and the content these include are known as an   element .

HTML:

The <html> tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.

<html>
<code goes here>
</html>

HEAD :

The <head> tag delimits the heading of the HTML document. The heading section of the document contains certain heading information for the document. The document’s title, meta information, and, in most cases, document scripts are all contained in the <head> section.

<head>
<link rel=“stylesheet” type=“text/css” href=“/.css”>
<title>HTML | Tags</title>
<meta name=“description” content=“tags”>
<meta name=“keywords” content=“html,seo,tags”>
<script language=“JavaScript”>
</script>
</head>

BODY:

The HTML document’s main visual content is contained within <body> tags. That’s not to say that everything appearing between the <body> tags will be visible, but, like a printed document, this is where the main body of the document is placed and appears.

<body>
<code description goes here>
</body>

Leave a comment

HTML | Attributes

htmlattributes

Tag Attributes:

Tags support one or more attributes. These attributes are included in

attribute_name=”attribute_value”

<p align=”2″>

Rules for Attributes:

  •  Any attributes in an HTML tag need to appear after the HTML tag name.
  •  The attribute name must be followed immediately by an equal sign (=).
  •  The attribute value needs to come immediately after the equal sign.
  •  The attribute value must always be enclosed in quotes, either single or double.

htmlid

The id attribute effectively assigns a unique identifier to a tag. For example, if you usea <table> to contain value, you might use the id attribute to name the table type:

<table id=”type”>
<code description goes here>
</table>

htmlclass

Classes are similar to IDs in that they help identify tags in the document for use by other methods. However, unlike IDs, which should be unique, classes can (and should) be applied across several tags in your document.

<table class=”type”>
<code description goes here>
</table>

As with the id attribute, the class attribute doesn’t directly affect the tag to which it is added. What the class attribute does do is link the tag to CSS styles that also reference that specific class. To completely understand the link between the two — HTML tags using classes, and styles referencing those classes — you must understand CSS and its methods for accessing class-coded styles. However, keep classes in mind as you code your basic HTML so you can adequately incorporate them.

Leave a comment

CSS (Cascading Style Sheet)

css

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

Syntax :

 || selector { property: value } ||

The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are separated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

 body {
 background-color : #000000;
 font-size : 100%;
 padding : 0;
 text-align : center;
 }

Version :

CSS1:

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.Among its capabilities are support for

  1. Font properties such as typeface and emphasis
  2. Color of text, backgrounds, and other elements
  3. Text attributes such as spacing between words, letters, and lines of text
  4. Alignment of text, images, tables and other elements
  5. Margin, border, padding, and positioning for most elements
  6. Unique identification and generic classification of groups of attributes

CSS2:

CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.

CSS2.1:

CSS level 2 revision 1, often referred to as “CSS 2.1”, fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification. In order to comply with the W3C Process for standardizing technical specifications, CSS 2.1 went back and forth between Working Draft status and Candidate Recommendation status for many years. CSS 2.1 first became a Candidate Recommendation on February 25, 2004, but it was reverted to a Working Draft on June 13, 2005 for further review. It returned to Candidate Recommendation on 19 July 2007 and then updated twice in 2009. However, since changes and clarifications were made, it again went back to Last Call Working Draft on 7 December 2010.

CSS3:

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.

CSS4:

There is no such thing as a whole called CSS4, since it is split into separate modules. However, there are “level 4” modules.

Since CSS3 split the CSS language’s definition into modules, the modules have been allowed to level independently. Most modules are level 3 – they build on things from CSS 2.1. A few level 4 modules exist (such as Image Values, Backgrounds & Borders, or Selectors), which build on the functionality of a preceding level 3 module. Others define entirely new functionality, such as Flexbox.

So, while there is no monolithic “CSS4” that will be worked on after “CSS3” is finished completely, the level 4 modules can collectively be referred to as “CSS4”.

Official Website : http://www.genwhizztech.com