Skip to main content

Posts

Showing posts with the label Web Designing

HTML 5: Different input types - input type url

Similarly as the input type email earlier, an another input type is url. It also validate if the user has inputed url or not. If not it shows message as before.

HTML 5: Different input types - input type email

HTML 5 have added many input types. This is one of the feature which really has made HTML 5 awesome and interesting to use. Those some input types are as below: - email - url - number - tel - date

HTML 5 Form Validations

HTML 5 has introduced Javascript plug-ins to achieve something similar effect. But these code will only work in Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the iPhone/iPad. Also each browser has a slightly different default behaviour. The "required " attribute The simplest change you can make to your forms is to mark a text input field as 'required':

Different versions of HTML

HTML is an evolving language, and each new version is given a number. The first definitive version was HTML 2.0 -- this had most of the elements we know and love, but was missing some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes. HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of HTML. However, it was never completed or implemented, although many features were integrated in the next "official" version of HTML, known as HTML 3.2.

CSS: Different versions with variations

CSS 1: The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for     Font properties such as typeface and emphasis     Color of text, backgrounds, and other elements     Text attributes such as spacing between words, letters, and lines of text     Alignment of text, images, tables and other elements     Margin, border, padding, and positioning for most elements     Unique identification and generic classification of groups of attributes The W3C no longer maintains the CSS 1 Recommendation.

Doctype Defination

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD). Syntax The general syntax for a document type declaration is: <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ <!-- internal subset declarations --> ]>

Accessible Forms

Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form. Labels Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:

Advanced Tables

Okay till now, you must be confident with creating tables and its tags. You have already done or used tags like table, tr, td, th and even rowspan and colspan. So now I am moving on to the advance tutorial of the table tags. Those are as below: colgroup and col summary and caption headers, footers and scrolling table

Quotations

Quotations blockquote, q and cite are used for quotations. blockquote is block-line and used for large citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q. Again, the title attribute can be used to show where the citation has come from.

Abbreviations and acronyms

abbr and acronym are used for abbreviations and acronyms respectively. An abbreviation is a shortened form of a phrase. Very general. An acronym however is an abbreviation made up of the initial letters (or parts of words) of the phrase it is representing. So CSS is a valid acronym, whereas HTML and XHTML are not (if 'Hypertext markup language' was an acronym, it would be 'HML'. Similarly, XHTML would be EHML).

Definition Lists

Definition Lists The dl element gets the ball rolling, similar to the ul and ol elements, establishing the list. Rather than there being an li element though, definition lists have a dt element, which is the definition term, followed by a dd element which is a definition description associated to the dt element. There doesn't have to be one dt followed by one dd, there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of dt's followed by one dd. If you have one word that means various different things, there might be one dt followed by several dd's.

Javascript popup window

Javascript popup window is the small window which is created by javascript. The syntax for javascript popup window is given below: window.open(url, name, [windowFeatures]) where url: The url of the page to open in the new window. name: A name is the name of the window. windowFeatures: They are the parameters which determines the various features of window to be included in the popup window like status bar, address bar,width,height, etc. The table shows the features and the string tokens you use: status     The status bar at the bottom of the window. toolbar     The standard browser toolbar, with buttons such as Back and Forward. location     The Location entry field where you enter the URL. menubar     The menu bar of the window directories     The standard browser directory buttons, such as What’s New and What’s Cool resizable     Allow/Disallow the user to resize the window....

HTML Layouts – Using Tables

Website Layouts Website Layout is very important to make your website look good. So you need to design your website properly. There is two ways of designing layout.  Using Table Using CSS(Without using table) Here, we will discuss using tables.

Nesting of Table

To use table inside of another table is called nesting of tables. As according to the need, we might need to show different information in an appropriate ways, so we need table inside another table.

HTML Frames

With frames, several Web pages can be displayed in the same browser window. Note: Do not expect frames to be supported in future versions of HTML. Frames allow for multiple .html documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP, frames have become outdated. The disadvantages of using frames are:     Frames are not expected to be supported in future versions of HTML     Frames are difficult to use. (Printing the entire page is difficult).     The web developer must keep track of more HTML documents The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy e...

HTML Forms

HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form:

CSS Vertical Menu

Css Vertical Menu can be build using following code : Vertical Menu #1 Code <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Css Simple Menu</title> <style type=”text/css”> #vmenu{ margin:0px; padding:0px; }

CSS Multilevel menu (Horizontal Multilevel Menu)

To create a multilevel menu in CSS, one should use the nesting of unordered list. The below given is the simple multi- level menu.

Css Simple Menu

Simple one level menu can be created using unordered list with the help of CSS properties. Below given is a very simple examples: