Useful Website Features

Javascript

JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to 
  • interact with the user, 
  • control the browser, 
  • communicate asynchronously, and 
  • alter the document content that is displayed.

There are lots of websites that provide useful Javascript that you can incorporate in your website.

jQuery
One of the most useful is JQUERY.
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.  
jQuery is free, open source software, licensed under the MIT License.[1] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. 
jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

Lightbox
Some useful javascript to create a simple lightbox



Cascading Style Sheets

There are scores of advantages of CSS, or Cascading Style Sheets. In fact, CSS has become the preferred web design method for today's website design creators. You will be happy to know that CSS will not only benefit your website design, but it will also save you time and money.

 

What Is CSS?

CSS is a form of communication used to dilate the display of a website markup language like HTML or XHTML as it determines such features as its fonts, layouts, spacing and colors, to name just a few. Basically, CSS is used to take the content you already have and make it look more attractive; it is a language used to increase expressive style and creativity.

One of the favored features is its ability to allow the sorting of document content written in markup languages (like HTML) from document presentation written in CSS. Here are five more advantages of CSS in website design:

1. Search Engine Optimization

When you incorporate CSS into you website design, you will soon discover that search engines will have the aptitude to locate you much easier since CSS features a coding technique that is clear-cut and simple to read. Search engines will no longer have to struggle to comprehend your website content. The advantage of improved accessibility of content will allow a broader number of users to locate you on the Internet. Less code and more content equals search engine success.

2. Browser Compatibility

Browser compatibility is very important and CSS addresses this issue nicely. When you decide to use CSS, you will find that it will improve the characteristic of your website while securing your visitors with the capacity to view your website as precisely as you have designed it to be.

3. Appearance

CSS makes it easy to improve the appearance of a website by allowing you to create a much more stylish website since CSS offers a wide array of expressive style capableness. With CSS, you will actually obtain more control over your website's visual aspect. Now, designers can orchestrate the styles and design of several web pages in a flash.

4. Maintainability

One of the convenient features that CSS produces is the consistency it provides when you want to make changes to a website. When a change is made to your websites CSS Style Sheet, you will have the ability to automatically correct or change every page throughout your website--all at once. You do not have to go in to each individual web page to make a particular change as CSS will instantly do it for you. If your website is rather large, this one simple feature will save you ample time; and time is money.

5. Bandwidth Savings

Once CSS takes apart your websites content from its design language, you will trim down your file transfer magnitude significantly. These Bandwidth savings are considerable figures of insignificant tags that are distracted from a multitude of pages. This will leave less, but more significant captions, listings and paragraphs..


HTML Tags explained

See the following links for some useful info:


Tag

What it is

When to use it

<a>

Anchor (most commonly a link)

Vital. Use to create links in content. Use the title attribute whenever the contents of the <a>…</a> pair do not accurately describe what you’ll get from selecting the link. Title attribute often displays as a tooltip in visual browsers, which may be a helpful usability aid.

<BODY>

Document body

Essential (unless you’re using frames)

<BR>

Line break

This is arguably display information. Still in common use, but use with restraint.

<BUTTON>

Used for a standard clickable button within a form

Often better than <input type=”button” /> or <input type=”submit” />, as it allows you to assign different styles based on the HTML element alone, whereas differentiating style based on the type of input is less well supported.

<CAPTION>

Caption for a table: describes the table’s contents

The correct way to assign a title to a table

<CITE>

Defines a citation

Defines the source of a quotation (in conjunction with content in <q> or<blockquote> pairs).

<DIV>

Division

Specifies a logical division within a document. Use it to separate or identify chunks of content that are not otherwise distinguished naturally using other tags.

One of the most common HTML tags.

<FORM>

Input form

Essential for data input

<H1>

Level 1 header

Aim to have one H1 on each page, containing a description of what the page is about.

<H2>

Level 2 header

Defines a section of the page

<H3>

Level 3 header

Defines a sub-section of the page (should always follow an H2 in the logical hierarchy)

<H4>

Level 4 header

Etc. Less commonly used

<H5>

Level 5 header

Less commonly used. Only complex academic documents will break down to this level of detail.

<H6>

Level 6 header

Less commonly used

<HEAD>

Document head

Essential. Contains information about a page that does not constitute content to be communicated as part of the page.

<HR>

Horizontal rule

Display info with no semantic value – never use it. “Horizontal”, by definition, is a visual attribute.

<HTML>

 

Core element of every web page.

<IMG >

Show an image

Vital. Always use the alt or longdescattributes when the image has content value

<INPUT>

Input fields within forms

Vital. (I prefer to use <button> for buttons and submit buttons though)

<LI>

List item

Specifies an item in an unordered or ordered list (<ul> or <ol>)

<OL>

Ordered list

Type of list where the order of elements has some meaning. Generally rendered with item numbers (best managed with CSS).

<P>

Paragraph

Only use to denote a paragraph of text. Never use for spacing alone.

<SCRIPT>

Inline script (e.g. JavaScript)

It’s better to have all scripts as separate files than to write inline or in the <head>section, however still has its uses.

<SPAN>

An inline span within text

Use to apply meaning (and style) to a span of text that goes with the flow of content (whereas a <div> tag is block-level and breaks the flow)

<STYLE>

CSS style settings

Normally used in <head> section of a page. Try to use external stylesheets, to enable you to apply different styles for different output media.

<TABLE>

Table

Use for repeated data that has a naturally tabular form. Never use for layout purposes.

<TD>

Table data cell

A cell containing actual data. If a cell actually contains a descriptor or identifier for a row or column, use a <th>(table header) tag, not a <td>. This usually applies to column headers (within a <thead>), column footers (within a<tfoot>), as well as row headers (usually the first cell in a row in the <tbody>).

<TH>

Table column or row header cell

May appear in a <thead> (to denote a column header cell), <tbody> (to denote a row header), and in <tfoot> (to denote a column foot cell, e.g. a total)

<TITLE>

Document title

Essential

<TR>

Table row

Essential with tables

<UL>

Unordered list

Essential. Use for lists where the order or items has no particular importance.

 











ċ
jquery-2.1.1.min.js
(82k)
Joseph Lai,
1 Sept 2014, 19:22
v.2
ċ
lightbox-2.7.1.zip
(1589k)
Joseph Lai,
1 Sept 2014, 19:45
v.2
Comments