HTML

1. HTML – OVERVIEW

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.: == Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.; == As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

Tag	Description
<!DOCTYPE...>	This tag defines the document type and HTML version.
<html>	This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.
<head>	This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
<title>	The <title> tag is used inside the <head> tag to mention the document title.
<body>	This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
<h1>	This tag represents the heading.
<h1>	This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage. World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.

HTML Document Structure

A typical HTML document will have the following structure:

We will study all the header and body tags in subsequent chapters, but for now let's see what is document declaration tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration: There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.

2. HTML – BASIC TAGS

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading

Example

This will produce the following result:

This isHeading 1

This isHeading 2

This isHeading 3

This isHeading 4

This isHeading 5

This isHeading 6

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing &al;/p> tag as shown below in the example:

Example

This will produce the following result:

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.

Example

This will produce the following result:

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

This will produce the following result: This text is not in the center.

This text is in the center.

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. For example, you may want to give a line between two paragraphs as in the given example below:

Example

This will produce the following result: This is paragraph one and should be on top

This is paragraph two and should be at bottom.
Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting

Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

This will produce the following result:
function testFunction( strText ){
alert (strText)
}
Try using the same code without keeping it inside <pre>...</pre> tag

Nonbreaking Spaces

Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry" and "Men" across two lines:

An example of this technique appears in the movie "12 Angry Men."

In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity   instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code:

Example

3. HTML – ELEMENTS

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:

Start Tag	Content	End Tag
<p>	This is paragraph content.	<p/>
<h1>	This is heading content.	<h1/>
<div>	This is division content.	<div/>
<b/>	Swanson

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.
HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

n HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element:

Example

This will display the following result:

This is italic heading

This is underlined paragraph

4. HTML – ATTRIBUTES

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:

The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Example

This will display the following result:

This is left aligned

This is center aligned

This is right aligned

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are:

id
title
class
syle

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element:

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below.

Example

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute: The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

Example

This will produce the following result:

Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it. The value of the attribute may also be a space-separated list of class names. For example:

class="className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

This will produce the following result:

Some text...

At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.

Internationalization Attributes

There are three internationalization attributes, which are available for most (although not all) XHTML elements.

dir
lang
xml:lang

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows:

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example

This will produce the following result:
This is how IE 5 renders right-to-left directed text.
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.

The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes.

Example

The xml:lang Attribute

Here's a table of some other attributes that are readily usable with many of the HTML tags.

5. HTML - BACKGROUNDS

Backgrounds

The
<body>
tag has two attributes where you can specify
backgrounds. The background can be a color
or an image.

Bgcolor

The bgcolor attribute specifies a back
ground-color for an HTML page. Th
e value of this attribute can be
a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.

Background

The background attribute can also specify a backgr ound-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

The URL can be relative (as in the first line above) or absolute (as in the second line above). If you want to use a background image, you should keep in mind:

Will the background image increa se the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?

Try It Out!

Open your text editor and type the following text:

Save your page as mypage.html and view it in your browser. Result :

6.HTML – COLORS

Color Values

Colors are defined using a hexadecimal notation fo r the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (h ex #00). The highest value is 255 (hex #FF). This tabl e shows the result of comb ining red, green, and blue:

Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, pu rple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.

Web Safe Colors

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 ea ch). This 216 cross platform web safe color palette was originally created to ensure that all computers would display all colors correctly when running a 256 color palette.

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with ( 256 x 256 x 256). Most modern monito rs are capable of displaying at least 16,384 different colors.

7.HTML – LISTS

HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).

Unordered Lists

An unordered list is a list of items marked with bullets
(typically small black circles). An unordered list
starts with the
<ul>
tag. Each list item starts with the
<li>
tag.

This Code	Would Display
<ul> <li>Coffee</li> <li>Milk</li> </ul>	Coffee Milk

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts
with the <ol> tag. Each list item starts with the <li> tag.

This Code	Would Display
<ol> <li>Coffee</li> <li>Milk</li> </ol>	Coffee Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

This Code	Would Display
<dl> <dt>Cascading Style Sheets</dt> <dd>Style sheets are used to provide presentational suggestions for documents marked up in HTML. </dd> </dl>	Cascading Style Sheets Style sheets are used to provide presentational suggestions for documents marked up in HTML.

Inside a definition-list definition (the <dd> tag) you ca put paragraphs, line breaks, images, links, other lists, etc

Try It Out

Open your text editor and type the following:

Save your page as mypage1.html and view it in your browser.

Result:

8. HTML - LINKS

HTML uses the <a> anchor tag to create a link to another document or web page.

The Anchor Tag and the Href Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of crea ting an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This Code	Would Display
<a href=" fb.com/">Visit fb!</a>	Visit fb!

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window:

<a href= target="_blank"
>Visit google!</a>

Email Links

To create an email link, you will use mailto: plus your email address. Here is an example

<a href="mailto: "
>Email Help Desk</a>

Result:Email Help Desk

To add a subject for the email message, you would add ?subject= after the email address. For example:

<a href="mailto:
?subject=Email Assistance
">Email Help Desk</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anch or. When using named anchors we can create links that can jump directly to a specific section on a page , instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor th at uses href, a named anchor doesn't change the appearance of the text (unless you set styles for th at anchor) or indicate in any way that there is anything special about the text. Below is the syntax of a named anchor:

<a name="top">Text to be displayed</a>

To link directly to the top section, add a # sign an d the name of the anchor to the end of a URL, like this:

9.HTML - IMAGES

The Image Tag and the Src Attribute

The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the sr c attribute. Src stands fo r "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

This Code	Would Display
<img src="graphics/chef .gif">

Not only does the source attribute specify what im age to use, but where th e image is located. The above image, graphics/chef.gif , means that the browser will look for the image name chef.gif in a graphics folder in the same folder as the html document itself.

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the imag e, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an alternate te xt for an image. The value of the alt attribute is author-defined text:

The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the alt attribute for each image on a page, to impr ove the display and usefulness of your document for people who have text-only brow sers or use screen readers.

Image Dimensions

When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a sp ace for the image, then loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the brow ser has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

Open the file mypage1.html in your text editor and add code highlighted in bold:

Save your page as mypage5.html and view it in your browser.

10.HTML - TABLES

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will only be writing what goes between the <body> tags. Type in the following:

Save your page as mytable1.html and view it in your browser.

Headings in a Table

Headings in a table are defined with the <th> tag.

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together.

Cellspacing is the pixel width between the individual data ce lls in the table (The thickness of the lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible.

Cellpadding is the pixel space between the cell co ntents and the cell border. The default for this property is also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border property turned on. Ce llpadding can be handled in a style sheet.

Table Tags

Table Size

Table Width

The width attribute can be used to define the width of your table. It can be de fined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels. For example, this code, <table width="550">, will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor's viewing window. Hence this code, <table width="80%"> , will produce a table that occupies 80 percent of the screen.

There are arguments in favor of giving your tables a relative width because such table widths yield pages that work regardless of the visitor's screen resolution. For example, a table width of 100% will always span the entire width of the browser window whether the visitor has a 800x600 display or a 1024x768 display (etc). Your visitor never needs to scroll horizontally to read your page, something that is regarded by most peop le as being very annoying.

Layout

Try It Out!

Let's put everything you've learned together to crea te a simple page. Open your text editor and type the following text:

<html> 
<head> 
<title>My First Web Page </title> 
</head> 
<body>  
<table width="90%" cellpadding="5" cellspacing="0" > 
  <tr bgcolor="#EDDD9E"> 
    <td width="200" valign="top"><img src="graphics/contact.gif" width="100" 
height="100"></td> 
    <td valign="top"><h1 align="right">Janet Doeson</h1> 
    <h3 align="right">Technical Specialist</h3></td> 
  </tr> 
  <tr> 
    <td width="200"> 
      <h3>Menu</h3> 
      <ul> 
        <li><a href="home.html">Home</a></li> 
        <li> <a href="faq.html">FAQ</a></li> 
        <li> <a href="contact.html">Contact</a></li> 
        <li> <a href=" ">Links</a> </li> 
    </ul></td> 
    <td valign="top"><h2 align="center">Welcome!</h2> 
    <p>Welcome to my first webpage. I created this webpage without the assistance of a 
webpage editor. Just my little text editor and a keen understanding of html.</p> 
    <p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not 
be able to tell, but the layout is done with a table. I'm very clever. </p> 
    <blockquote> 
      <p>I always wanted to be somebody, but now I realize I should have been more 
specific.</p> 
      <cite>Lily Tomlin </cite> </blockquote>    </td> 
  </tr> 
</table> 
<hr width="90%" align="left"> 
<address> 
   Janet Doeson<br> 
   Technical Specialist<br> 
   512.555.5555 
</address> 
<p>Contact me at <a href="mailto: "> </a> </p> 
</body> 
</html>

Save your page as my ta ble2.html and view it in your browser.

I have indented some of the HTML code in the above example. Indenting the code can make your HTML document easier to read.

11.HTML - Forms

Forms are used to collect data inputted by a user. They can be used as an interface for a web application, for example, or to send data across the web.

Form

form defines the form and within this tag, if you are using a form for a user to submit information (which we are assuming at this level), an action attribute is needed to tell the form where its contents will be sent to. The method attribute tells the form how the data in it is going to be sent and it can have the value get, which is default, and latches the form information onto a web address, or post, which (essentially) invisibly sends the form’s information.

So a form element will look something like this

Input

The input tag is the daddy of the form world. It can take a multitude of guises, the most common of which are outlined below

<input type="text"> or simply <input> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
<input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden.
<input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute (<input type="checkbox" checked> - the attribute doesn’t require a value), and makes the initial state of the check box to be switched on, as it were.
<input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.
<input type="submit"> is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow">.

textarea

textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes, although you can manipulate the size to your heart’s content using CSS.

Any text you choose to place between the opening and closing tags (in this case “a big load of text”) will form the initial value of the text area.

Select

The select tag works with the option tag to make drop-down select boxes.

When the form is submitted, the value of the selected option will be sent. This value will be the text between the selected opening and closing option tag unless an explicit value is specified with the value attribute, in which case this will be sent instead. So, in the above example, if the first item is selected, “Option 1” will be sent, if the third item is selected, “third option” will be sent.

Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, to start off with one of the items already being selected, eg. <option selected>Rodent</option> would pre-select “Rodent” from the items.

Names

All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.

A contact form for Noah’s Ark, for example, might look something like the one below. (Note: this form will not work unless there is a “contactus.php” file, which is stated in the action attribute of the form tag, to handle the submitted data).

CREATE YOUR OWN PAGE

It’s time to create your own page. Use your text editor to create a page which contains the following:

the required HTML pag e codes
link to another web pa ge
an email lin k
a picture/gr aphic
a list of information

ave the file as xyht ml_bas ics.html where xy is your initials. Email the file to

50-game

CSS

Back

Home

1 - ITRODUCTION TO CSS

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it's style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on...) are accomplished within a CSS. At this point you have some choices of how to use the CSS, either internally or externally.

Internal Stylesheet

First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below

With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

External Stylesheet

Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.

Or you can also use the @import method as shown below

Either of these methods are achieved by placing one or the other in the head section as shown in example below.

By using an external style sheet, all of your (X)HTML files link to one CSS file in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website. Here are a few reasons this is better.

Easier Maintenance
Reduced File Size
Reduced Bandwidth
Improved Flexibility

Are you getting the idea? It's really cool.

Cascading Order

In the previous paragraphs, I have explained how to link to a css file either internally or externally. If you understood, than I am doing a good job. If not don't fret, there is a long way to go before we are finished. Assuming you have caught on already, you are probably asking, well can I do both? The answer is yes. You can have both internal, external, and now wait a minute a third way? Yes inline styles also.

Inline Styles

I have not mentioned them until now because in a way they defeat the purpose of using CSS in the first place. Inline styles are defined right in the (X)HTML file along side the element you want to style. See example below.

Some red text

Inline styles will NOT allow the user to change styles of elements or text formatted this way

So, which is better?

So with all these various ways of inserting CSS into your (X)HTML files, you may now be asking well which is better, and if I use more than one method, in what order do these different ways load into my browser? All the various methods will cascade into a new "pseudo" stylesheet in the following order:

Inline Style (inside (X)HTML element)
Internal Style Sheet (inside the tag)
External Style Sheet

As far as which way is better, it depends on what you want to do. If you have only one file to style then placing it within the <head></head> tags (internal) will work fine. Though if you are planning on styling multiple files then the external file method is the way to go.
Choosing between the <link related=> & the @import methods are completely up to you. I will mention that the @import method may take a second longer to read the CSS file in Internet Explorer than the <link related=> option

Users with Disabilities

The use of external style sheets also can benefit users that suffer from disabilities. For instance, a user can turn off your stylesheet or substitute one of there own to increase text size, change colors and so on

Power Users

Swapping stylesheets is beneficial not only for users with disabilities, but also power users who are particular about how they read Web documents.

Browser Issues

You will discover as you delve farther into the world of CSS that all browsers are not created equally, to say the least. CSS can and will render differently in various browsers causing numerous headaches.

2 - CSS SYNTAX

The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts.

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 seperated with a colon and contained within curly brackets. Multiple properties are seperated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; }

As you can see in the above code I have seperated the color from the font-family with a semi-colon, seperated the various fonts with commas and contained the "Trebuchet MS" within quotations marks. The final result sets the body color to light grey, and sets the font to ones that most users will have installed on there computer. I have changed the way I layout my code, but you can arrange it in one line if you choose. I find that it is more readable if I spread each property to a seperate line, with a 2 space indention.

Inheritance

When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently. For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

body {font-family: Verdana, serif;}

Now all text within the (X)HTML file will be set to Verdana. If you wanted to style certain text with another font, like an h1 or a paragraph then you could do the following

h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;

Now all <h1> tags within the file will be set to Georgia and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Verdana.
There are instances where nested elements do not inherit the containing elements properties.
For example, if the body margin is set to 20 pixels, the other elements within the file will not inherit the body margin by default

body {margin: 20px;}

Combining Selectors

You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }

As you can see in the above code, I have grouped all the header elements into one selector. Each one is seperated by a comma. The final result of the above code sets all headers to green and to the specified font. If the user does not have the first font I declared it will go to another sans-serif font the user has installed on there computer.

Comment tags

Comments can be used to explain why you added certain selectors within your css file. So as to help others who may see your file, or to help you remember what you we're thinking at a later date. You can add comments that will be ignored by browsers in the following manner.

/* This is a comment */ You will note that it begins with a / (forward slash) and than an * (asterisks) then the comment, then the closing tag which is just backward from the opening tag * (asterisks) then the / (forward slash).

3 - CSS CLASSES

The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file. To put it more simply, this sentence you are reading is defined in my CSS file with the following.

P { font-size: small; color: #333333 }

Pretty simple, but lets say that I wanted to change the word "sentence" to green bold text, while leaving the rest of the sentence untouched. I would do the following to my (X)HTML file.

Then in my CSS file I would add this style selector:

.greenboldtext{ font-size: small; color: #008080; font-weight: bold; }

The final result would look like the following: To put it more simply, this sentence you are reading is styled in my CSS file by the following. Please note that a class selector begins with a (.) period. The reason I named it "greenboldtext" is for example purposes, you can name it whatever you want. Though I do encourage you to use selector names that are descriptive. You can reuse the "greenboldtext" class as many times as you want

4 - CSS IDs

IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file. I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times. The main container for this page is defined by the following.

I have chosen the id selector for the "container" division over a class, because I only need to use it one time within this file. Then in my CSS file I have the following:

#container{ width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; }

You will notice that the id selector begins with a (#) number sign instead of a (.) period, as the class selector does.

5 - CSS DIVISIONS

Ok so you have finished the first 4 chapters in my series. You have learned the very basics of CSS, how the syntax works and a bit about classes and IDs. Now we are gonna take a quick break from CSS and focus on the (X)HTML side of using it.

Divsions

Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.
You define a division within an (X)HTML file by placing the following between the <body></body> tags:

Though most likely you will want to add some style to it. You can do that in the following fashion:

The CSS file contains this:

#container{ width: 70%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; }

Now everything within that division will be styled by the "container" style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.

6 - CSS SPANS

Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared. You can use the span tag to style certain areas of text, as shown in the following:

Then in my CSS file:

.italic{ font-style: italic; }

The final result is: This text is italic. The purpose of the last 2 chapters was to provide you with a basis for using CSS in an (X)HTML file. For a more detailed explaination of XHTML please visit W3Schools

7 - CSS MARGINS

Inherited: No

As you may have guessed, the margin property declares the margin between an (X)HTML element and the elements around it. The margin property can be set for the top, left, right and bottom of an element. (see example below)

margin-top: length percentage or auto;   margin-left: length percentage or auto;  margin-right: length percentage or auto;  margin-bottom: length percentage or auto;

As you can also see in the above example you have 3 choices of values for the margin property

length
percentage
auto

You can also declare all the margins of an element in a single property as follows:

margin: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

top
right
left
bottom

If only one value is declared, it sets the margin on all sides. (see below

margin: 10px;

If you only declare two or three values, the undeclared values are taken from the opposing side. (see below)

margin: 10px 10px; /* 2 values */ margin: 10px 10px 10px; /* 3 values */

You can set the margin property to negative values. If you do not declare the margin value of an element, the margin is 0 (zero).

margin: -10px;

Elements like paragraphs have default margins in some browsers, to combat this set the margin to 0 (zero).

p {margin: 0;}

Note: You do not have to add px (pixels) or whatever units you use, if the value is 0 (zero). You can see in the example below, the elements for this site are set to be 20px (pixels) from the body

body{   margin: 20px;  background: #eeeeee;  font-size: small;  font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sansserif;  text-align: left; }

8 - CSS PADDING

Inherited: No

Padding is the distance between the border of an (X)HTML element and the content within it. Most of the rules for margins also apply to padding, except there is no "auto" value, and negative values cannot be declared for padding.

 padding-top: length percentage;   padding-left: length percentage;  padding-right: length percentage;  padding-bottom: length percentage;

As you can also see in the above example you have 2 choices of values for the padding property

length
percentage

You can also declare all the padding of an element in a single property as follows:

padding: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

top
right
left
bottom

If only one value is declared, it sets the padding on all sides. (see below)

padding: 10px;

If you only declare two or three values, the undeclared values are taken from the opposing side. (see below)

padding: 10px 10px; /* 2 values */  padding: 10px 10px 10px; /* 3 values */

If you do not declare the padding value of an element, the padding is 0 (zero). Note: You do not have to add px (pixels) or whatever units you use, if the value is 0 (zero). You can see in the example below, the main container for this site has 30px (pixels) of padding between the border and the text.

#container{   width: 70%;  margin: auto;  padding: 30px;  border: 1px solid #666;  background: #ffffff; }

9 - CSS TEXT PROPERTIES

Inherited: yes

Color

You can set the color of text with the following:

color:value;

Possible values are

color name - example:(red, black...)
hexadecimal number - example:(#ff0000, #000000)
RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))

Letter Spacing

You can adjust the space between letters in the following manner. Setting the value to 0, prevents the text from justifying. You can use negative values

letter-spacing: value;

Possible values are

normal
length

Example:

T h e s e l e t t e r s a r e s p a c e d a t 5 p x .

Text Align

You can align text with the following:

text-align: value;

Possible values are

left
right
center
justify

Examples:

Text Decoration

You can decorate text with the following:

text-decoration: value;

Possible values are:

none
underline
overline
line-though
blink

Examples:

This text is underlined.

This text is overlined.

This text has a line through it.

Text Indent

You can indent the first line of text in an (X)HTML element with the following:

text-indent: value;

Possible values are

length
percentage

Examples: This text is indented 10px pixels.

Text Transform

You can control the size of letters in an (X)HTML element with the following:

text-transform: value;

Possible values are

none
capitalize
lowercase

Example:

This First Letter In Each Word Is Capitalized, Though It Is Not In My File

THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE

this text is all lowercase. though it is all uppercase in my file.

Word Spacing

You can control the whitespace in an (X)HTML element with the following:

white-space: value;

Possible values are

normal
pre
nowrap

Word Spacing

You can adjust the space between words in the following manner. You can use negative values.

word-spacing: value;

Possible values are

normal
length

Example:

These words are spaced at 5px.

10 - CSS FONT PROPERTIES

Inherited: yes

Font

The font property can set the style, weight, variant, size, line height and Font

font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic style a bold weight a normal variant a relative size a line height of 1.4em and the font to Verdana or another sans-serif typeface.

Font-Family

You can set what font will be displayed in an element with the fontfamily property. There are 2 choices for values:

family-name
generic family

If you set a family name it is best to also add the generic family at the end. As this is a priortized list. So if the user does not have the specified font name it will use the same generic family. (see below)

font-family: Verdana, sans-serif;

Font Style

You can set the style of text in a element with the font-style property

font-style: value;

Possible values are

normal
itailc
oblique

Font Variant

You can set the variant of text within an element with the font-variant property

font-variant: value;

Possible values are

normal
small-caps

Font Variant

You can control the weight of text in an element with the font-weight property:

font-weight: value;

Possible values are

lighter
normal
100
200
300
400
500
600
700
800
900
bold
bolder

11 - CSS Anchors, Links, Pseudo Classes

Below are the various ways you can use CSS to style links.

a:link {color: #009900;} a:visited {color: #999999;} a:hover {color: #333333;} a:focus {color: #333333;} a:active {color: #009900;}

Now lets take a look at what each one of the above link styles actually does.

a:link {color: #009900;}

The first on the list sets the color of a link when no event is occuring

a:visited {color: #999999;}

The second sets the color a link changes to, when the user has already visited that url

a:hover {color: #333333;}

The third sets the color a link changes to as the user places their mouse pointer over the link

a:focus {color: #333333;}

The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links

a:active {color: #009900;}

The fifth on the list sets the color a link changes to as it is pressed. Lets look at an example: Google If your last visit to Google is not stored in your cache than the above link to google is blue, if you have already been to google then the link should be grey. if you mouseover or tab through the links, the link will change to dark grey, and last but not least if you click and hold the link without releasing it you will see it return back to the original blue color. You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must declare a:hover before you can declare a:active. Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpageIf your last visit to Google is not stored in your cache than the above link to google is blue, if you have already been to google then the link should be grey. if you mouseover or tab through the links, the link will change to dark grey, and last but not least if you click and hold the link without releasing it you will see it return back to the original blue color. You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must declare a:hover before you can declare a:active. Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpage.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#content a:link {color: #009900;} #content a:visited {color: #999999;} #content a:hover {color: #333333;} #content a:focus {color: #333333;} #content a:active {color: #009900;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name. Then for the links in a column you could use the following:

#column a:link {color: #009900;} #column a:visited {color: #999999;} #column a:hover {color: #333333;} #column a:focus {color: #333333;} #column a:active {color: #009900;}

Once again, this assumes the name of the column division, just change the name to match yours. This same method can be accomplished by declaring a class instead of an id.

a.column:link {color: #009900;} a.column:visited {color: #999999;} a.column:hover {color: #333333;} a.column:focus {color: #333333;} a.column:active {color: #009900;}

Though in this case you will need to add a class to each link

some link text

But, there is still yet an easier way

.column a:link {color: #009900;} .column a:visited {color: #999999;} .column a:hover {color: #333333;} .column a:focus {color: #333333;} .column a:active {color: #009900;}

Then in the (X)HTML file


							some link text

There are other properties that can be added to links other than color, I was just trying to keep it simple. Almost any property that can be used to style text and fonts can be used to style links also

12 - CSS BACKGROUNDS

Inherited: yes

Backgrounds

You can style the background of an element in one declaration with the background property.

background: #ffffff url(path_to_image) top left no-repeat fixed;

Values:

attachment
color
image
position
repeat

Background Attachment

If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when the user scrolls down the page with the background-attachment property

background-attachment: value;

Values:

fixed
scroll

Background Color

You can specifically declare a color for the background of an element using the background-color property.

background-color: value;

Values:

color name
hexadecimal number
RBG color code
transparent

Background Image

You can set an image for the background of an element using the background-image property

background-image: url(path_to_image);

Values:

url
none

Background Position

You can position an image used for the background of an element using the background-position property.

background-position: value;

Values:

top left
top center
top right
center left
center center
center left
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos

Background Repeat

You can set if an image set as a background of an element is to repeat (across=x and/or down=y) the screen using the background-repeat property.

background-repeat: value;

Values:

no-repeat
repeat
repeat-x
repeat-y

13 - CSS BOREDERS

Inherited: no

Border

You can set the color, style and width of the borders around an element in one declaration by using the border property.

border: 1px solid #333333;

Values:

color
style
width

Or you can set each property individually

Border Color

You can set the color of a border independently with the border-color property.

border-color: value;

Values:

color name
hexadecimal number
RGB color cod
transparent

Or you can set each property individually

Border Style

You can set the style of a border independently with the border-style property.

border-style: value;

Values:

dashed
dotted
groove
double
hidden
inset
none
outse
ridge
solid

Border Bottom

You can set the color, style and width of the bottom border around an element in one declaration with the border-bottom property.

border-bottom: 1px solid #333333;

Values:

color
style
width

Or you can set each value individually

Border Bottom Color

You can set the color of the bottom border around an element with the border-bottom-color property

border-bottom-color: value;

Border Bottom Style

You can set the style of the bottom border around an element with the border-bottom-style property.

border-bottom-style: value;

Border Bottom Width

You can set the width of the top border around an element with the border-top-width property.

border-top-width: value;

14 - CSS OR and UNOR LISTS

Inherited: yes

List Style

You can control the appearance of ordered and unordered lists in one declaration with the list-style property

list-style: value value;

Values:

image
position
type

Or you can control them individually

List Style Image

You can use an image for the bullet of unordered lists with the list-style property

list-style-image: url(path_to_image.gif, jpg or png);

If you use an image, it is a good idea to declare the list-style-type also in case the user has images turned off.

List Style Position

You can control the position of ordered and unordered lists with the liststyle-position property

list-style-position: value;

Values

inside
outside

List Style Type

You can control the type of bullet ordered and unordered lists use with the list-style-type property

list-style-type: value;

Values

disc
circle
square
decimal
lower-roman
uppear-roman
lower-alpha
uppear-alpha
none

15 - CSS WIDTH HEIGHT PROPERTIES

Ingeritted: no

Height

You can control the height of an element with the height property

height: value;

Values

auto
length
percentage

Line Height

You can control the height between lines with the line-height property

line-height: value;

Values

normal
number
length
percentage

Min Height

You can control the minimum height of an element with the min-height property

min-height: value;

Values

length
percentage

Width

You can control the width of an element with the width property

width: value;

Values

auto
length
percentage

Max Width

You can control the maximum width of an element with the max-width property

max-width: value;

Values

none
length
percentage

Min Width

You can control the minimum width of an element with the min-width property

min-width: value;

Values

length
percentage

16 - CSS CLASSIFICATION

Ingeritted: no

Clear

You can control if an element allows floated elements to its sides with the clear property

clear: value;

Values

none
both
left
right

Now, what does all that mean?

none

This is the default setting, floated elements can appear on either side of the element set to clear: none;

both

Setting the value to both, causes no floated elements to appear on either side of the element set to clear: both;

left

Setting the value to left, causes no floated elements to appear to the left side of the element set to clear: left;

right

Setting the value to right, causes no floated elements to appear to the right side of the element set to clear: right;

Clip

You can control how much of an element is visible with the clip property

clip: value;

Values

auto
shape

Cursor

You can control the style of cursor to be used in an element with the cursor property

cursor: value;

Values

auto
crosshair
default
help
move
pointer
text
url
wait
e-rsize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize

If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value

cursor: url("image.cur"), default;

Desplay

You can control how an element is displayed with the display property

desplay: value;

Values

block
inline
list-item
none

Now, what does all that mean?

block

Creates a line break before and after the element

inline

No line break is create

list-item

Creates a line break before and after the element and adds a list item marker

none

Makes an element not display on the page

Float

The float property changes how text and or images within an element are displayed

float: value;

Values

left
right
list-item
none

Now, what does all that mean?

left

The image/text is displayed to the left of the parent element

right

The image/text is displayed to the right of the parent element

none

There is no change in the way the image/text is displayed

Overflow

You can control what an elements contents will do if it overflows it boundaries with the overflow property

overflow: value;

Values

auto
hidden
visible
scroll

Overflow Example

As you can see, with this property you can mimic an iframe. This box is set to an overflow value of "auto". Meaning that if the contents of the element break the boundaries it should add a scrollbar.

Z-Index

You can control the layer order of positioned elements with the z-index property

z-Index : value;

Values

auto
number

The higher the number the higher the level. Negative numbers are allowed

17 - CSS POSITIONING

Ingeritted: no

Position

The position property (as you may have guessed) changes how elements are positioned on your webpage.

position: value;

Values

static
relative
absolute
fixed

Now, what does all that mean?

static

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all

position:static; <4>relative

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

position:relative;

absolute

Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of it's nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

position:absolute;

fixed

Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements. Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in it's position regardless of the scroll position of the page. At this time IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element. Thus it will not position fixed elements correctly and will still scroll with the page. To see this effect in action you will need to use a standards compliant browser, such as Firefox 1.0

position:fixed;

18 - CSS PSEUDO ELEMENTS

The Syntax

The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close. If you have already read chapter 11 then you are slightly ahead of the game.

selector:pseudo-element {property: value}

As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon. Or you can assign a class to a pseudo element as follows

selector.p:pseudo-element {property: value}

Using the above code would style all paragraphs within the declared selector with the pseudo element.

The elements:

first-line
first letter

First Line

The first-line pseudo element styles the first line of text in a block level element.

p{font-size: small;} p:first-line {font-size: medium; color: #ff0000;}

As you can see in the above example paragraphs are set to be a small font size, but the p:first-line is set to be a medium size and a red color. The result is that the first line of all paragraphs will be red in color and a bit larger than the rest of the paragraph. Though lets say you only want to style a certain paragraph of text with the first-line element. Thats where declaring a class to the pseudo element comes into play.

first-line with class

p.special:first-line {font-size: medium; color: #ff0000;}

I have declared a class of special within my css file.

First-Line Example

This is a special sentence I wrote to demonstrate the use and look of the first-line pseudo element. As you can see the first line of this paragraph is styled differently than the rest of the text within it. All of this was done by simply adding class="special" to the opening

tag for this paragraph

the content

Where the first-line ends depends on the width of the browser window or containing element, you can resize this page and see that it adjusts as you change the size of the browser window. The following properties can be assigned to the first-line pseudo element:

background
clear
color
font
letter-spacing
link-height
text-decoration
text-transform
vertical-align
word-spacing

First Letter

The first-letter pseudo element styles the first letter of text in a block level element.

p{font-size: small;} p:first-letter {font-size: medium; color: #ff0000;}

As you can see in the above example paragraphs are set to be a small font size, but the p:first-letter is set to be a medium size and a red color. The result is that the first letter of all paragraphs will be red in color and a bit larger than the rest of the paragraph. Though lets say you only want to style a certain paragraph of text with the first-letter element. Thats where declaring a class to the pseudo element comes into play.

first-letter with class

p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}

I have declared a class of special_letter within my css file.

This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.

the content

The following properties can be assigned to the first-letter pseudo element:

background
boreder
clear
color
float
font
letter-spacing
margin
padding
text-decoration
text-transform
word-spacing

50-game

JavaScript

Back

Home

1 - JS MAKING STUFF HAPPEN

There’s a few ways to try out JavaScript, and when learning it’s best to try them out to see what works for you. But first, how does JavaScript relate to HTML and CSS?

HTML, CSS and JavaScript

Mostly, JavaScript runs in your web browser alongside HTML and CSS, and can be added to any web page using a script tag. The script element can either contain JavaScript directly (internal) or link to an external resource via a src attribute (external). A browser then runs JavaScript line-by-line, starting at the top of the file or script element and finishing at the bottom (unless you tell it to go elsewhere).

Internal

You can just put the JavaScript inside a script element:

External

An external JavaScript resource is a text file with a .js extension, just like an external CSS resource with a .css extension. To add a JavaScript file to your page, you just need to use a script tag with a src attribute pointing to the file. So, if your file was called script.js and sat in the same directory as your HTML file, your script element would look like this:

Console

The last way is great for getting instant feedback, and it’s recommend if you just want to try a line out quickly. In a modern browser you’ll find some developer tools - often you can right click on a page, then click “inspect element” to bring them up. Find the console and you’ll be able to type JavaScript, hit enter and have it run immediately. Search the net if you can’t find your dev tools or console - they’re changing in browsers all the time.

Let’s go!

o get started, the best way is the internal method. You can modify the contents of the script element and refresh the page just like you’re used to - quick and easy. Now it’s time to learn some JavaScript. Good luck!

2 - JS VARIABLES AND DATA

Storing data so we can use it later is one of the most important things when writing code. Fortunately, JavaScript can do this! If it couldn’t, it’d be pretty darn useless

So let’s ask the user (that’s you) for their surname (check your driving license, or ask a friend).

A little box will pop-up, asking (very courteously if I may say) for your surname. Type your surname in and hit ‘OK’. The surname you entered is now saved, and it can be referred to as surname. You can get what you entered back out again by typing surname into the console. You should see your surname appearing back to you underneath! Exciting! You’ve created a Variable.

Variables

Think, if you will, of a variable as a shelf with a name so it’s easy to get back to. You’ve named a shelf surname. You can name a variable anything you like, but it’s best to name it in a way that tells what you’ve stored there. For example, surname is better than mything or s. When you type a variable name into the console you are asking the browser, which looks after the shelves, to go find the shelf and give what’s on it to you. This is also known as the variable’s value. The value can be almost anything - in surname, you’ve stored some letters, known as a string. You can also store numbers and a myriad other kinds of data. So, a variable has a name and a value. They are the way we store data, and you’ll be using them a lot. There are two parts to creating a variable; declaration and initialization. Once it’s created, you can assign (or set) its value.

Declaration

Declaration is declaring a variable to exist. To return to the shelf metaphor, it’s like picking an empty shelf in a massive warehouse and putting a name on it. As above, to declare a variable, use the var keyword followed by the variable name, like this:

var surname;
var age;

Notice: those semicolons (“;”)? Almost every line in JavaScript ends in a semicolon - you’ll be using them a lot.

Initialization

Initialization is giving a variable its value for the first time. The value can change later, but it is only initialized once. You initialize a variable using the equals sign (=). You can read it as “the value of the variable on the left should be the data on the right”:

var name = "Tom";

“Tom” is a string - a collection of letters. A string is surrounded by single or double quote marks.

var age = 20;

20 is just a number - and numbers don’t go in quotes.

Assignment

As mentioned, you can set a variable’s value as many times as you like. It’s called assignment and it looks very similar to initialization. You again use the equals sign, but there’s no need for the var keyword because we’ve already declared the variable. It’s like this, yo:

name = "Andy";
age = 43;

Only do this if you’ve declared the variable using the var keyword

3 - JS DOING MATH

Variables can be used to store strings and numbers (amongst other things), but here the focus is on numbers.

How much fruit?

In your console, let’s create two variables. One will be the number of apples we have, the second will be the number of pears.

var apples = 5, pears = 10;

That creates two variables… but there’s only one var keyword? Yup, it’s a shorthand for declaring and initializing multiple variables at the same time. By using the var keyword once and separating the new variables with commas you can save yourself some work. Now, use these two variables to figure out how many pieces of fruit there are in total.

var piecesOfFruit = apples + pears;

So that’s new. You’re asking the browser to work out the sum on the right before assigning the result to piecesOfFruit - and you’re not adding the variable names, you’re adding the values of the variables. The browser knows that, when it sees a variable like this, you want to do something with the value. So it goes and gets each variable’s value before doing the sum. . The sum is called piecesOfFruit, not pieces of fruit. This is because variable names cannot contain spaces! There’s a set of rules somewhere about what you can and can’t use, but for now just use letters with no spaces.

Noice:You may have also noticed that the uppercase “O” on “Of” and “F” on “Fruit”. This is a convention, called camel casing (cos of the humps), that makes the variable name easier to read. You can call a variable anything you want, but pIeCEsOFfRuiT is pretty hard to read, no? Here’s a tip for you: code is read many, many more times that it is written. So it’s really, really important to make sure your code is easy to read. Really important.

Splitting the fruit

Let’s say you want to split your fruit between 3 people. How much fruit does each person get?

var piecesForEachPerson = piecesOfFruit / 3;

Thank goodness we have this JavaScript thing, otherwise you’d need a calculator for that one… You’re using a forward slash (“ / ”) to indicate division: divide the thing on the left by the thing on the right.

Precedence and operators

For doing sums you can use various symbols: add (“ + ”), subtract (“ - ”), divide (“ / ”) and multiply (“ * ”). Mathematical symbols are called operators; that is, they operate on some data. We’ll meet even more operators later on, but you should know that, like on a calculator, the symbols are worked out in a particular order, called operator precedence. Things in parentheses - that’s these: “ ( ” and “ ) ” - are done first, then multiplication and division, then addition and subtraction. Here’s an example, stepping through how the browser runs it:

(10 + 2) / 2 + 4 * 2

The part in brackets is worked out first. So this becomes…

12 / 2 + 4 * 2

…which works out to…

6 + 4 * 2

Then things are done in operator precedence order. If multiple sums are of the same precedence then they are evaluated left to right. The multiplication is higher precedence so is done first, which works out to

6 + 8

This is used to work out the final value:

14

4 - JS LOGIC

A really important part of programming is being able to compare values in order to make decisions in code. When a comparison is made the outcome is either true or false; a special kind a of data called a boolean. This is logic.

Like when doing math, there’s a set of operators that work on booleans. They are used to compare two values, on the left and right of the operator, to produce a boolean value.

The following comparisons are made in the console. The result we get from each line (shown underneath) will be true or false; these are booleans.

Equality

To find out when two values are equal, use the triple equals operator (“===”).

15.234 === 15.234

true

We can also determine if two values are not equal using the triple not equal operator (“!==”).

'10' === 10

false

Greater than and less than

Comparing two numbers is useful, for example, to determine which of two is larger or smaller. This first example is a comparison of 10 and 5 to see if 10 is larger, using the greater than operator (“>”).

10 > 5

true

Next we use the less than operator (“<”) to determine if the left value is smaller.

20.4 < 20.2

false

That example gives back (or returns) false, because 20.4 is not a smaller number than 20.2.

Combined comparisons

Combining a comparison of equality and size can be done with the greater than or equal to and less than or equal to operators (“>=” and “<=” respectively).

10 >= 10

true

10 <= 5

false

5 - JS CONDITIONAL

Logic is used to make decisions in code; choosing to run one piece of code or another depending on the comparisons made. This requires use of something called a conditional. There are a few different conditionals that you might want to use, but we’ll just focus the one used most commonly: if.

If

It’s very simple: if some logic (the condition) is true, run a block of code. You can also supply more code to be run if the condition is not true, and supply additional conditions and blocks of code to optionally be run. These forms are called if-else, as you’ll see below. The most simple if statement looks something like this:

if (10 > 5) {
    // Run the code in here
}

The code between the braces - “{” and “}” - is called a block, and this one is linked to the if statement. It’s only run if the conditional (between the parentheses) is true. 10 is indeed greater than 5, so the code in the block would run.

Notice:Oh, and the line starting “//”? The double slashes indicate comment, which means that everything after the slashes until the end of the line is ignored by the browser.

If-else

The if-else form of an if statement is used to run an alternative piece of code if the conditional is not true. The code in the if block below will be ignored, for example - only the code in the else block will be run.

if (43 < 2) {
    // Run the code in here
} else {
    // Run a different bit of code
}

6 - JS LOOPING

Loops are a way of repeating the same block of code over and over. They’re incredibly useful, and are used, for example, to carry out an action on every item in an array (we will come to arrays later) or in searching.

Two of the most common loops are while loops and for loops. They combine a conditional and a block, running the block over and over until the logic of the conditional is no longer true, or until you force them to stop.

While

A while loop repeats a block of code while a condition is true. Like an if statement, the condition is found in parentheses.

var i = 1;
while (i < 10) {
    alert(i);
    i = i + 1;
}
// i is now 10

After looping has finished the code carries on running from just after the closing brace (“}”) of the loop’s block.

For

A for loop is similar to an if statement, but it combines three semicolon-separated pieces information between the parentheses: initialization, condition and a final expression. The initialization part is for creating a variable to let you track how far through the loop you are - like i in the while example; the condition is where the looping logic goes - the same as the condition in the while example; and the final expression is run at the end of every loop.

for (var i = 1; i < 10; i++) {
    alert(i);
}

Notice:This gives us alert boxes containing the numbers 1 to 10 in order.

By the way, i++ is equivalent to i = i + 1.

7 - JS FUNCTIONS

Functions are reusable blocks of code that carry out a specific task. To execute the code in a function you call it. A function can be passed arguments to use, and a function may return a value to whatever called it.

doSomething();
findAnInterestingThing();

To create a function, use the function keyword. You then list the arguments in parentheses, and then supply a block that contains the function’s code. Here’s a function that adds two numbers:

var add = function (a, b) {
    return a + b;
};

a and b are the function’s parameters, and the value it returns is signified by the return keyword. The return keyword also stops execution of the code in the function; nothing after it will be run.

var result = add(1, 2); // result is now 3

This calls add with the arguments 1 and 2, which, inside add, will be saved in the variables a and b.

8 - JS OBJECTS

JavaScript objects are like a real life objects; they have properties and abilities. A JavaScript object is, in that sense, a collection of named properties and methods - a function. An object can be stored in a variable, and the properties and methods accessed using the dot syntax. A human, for example, has a name and an age, and could talk, move or learn JavaScript. Name and age are properties of the human, and are essentially pieces of data. Talking, moving and learning are more like functions - there’s some complex behavior involved. When a JavaScript object has such an ability, it is called a method.

Variables can hold objects, and creating an object is done using a special syntax signified by braces:

var jedi = {
    name: "Yoda",
    age: 899,
    talk: function () { alert("another... Sky... walk..."); }
};

The Jedi’s name and age are properties - they are essentially variables within the object and can store anything a variable can. talk is a property that holds a function - a method. You can get data back out of an object using the dot syntax:

jedi.name;

Yoda

jedi.name;

Yoda

jedi.age;

899

jedi.talk();

//produces an alert box

You can also reassign properties of an object:

jedi.name = "Mace Windu";

And add new ones on the fly:

jedi.lightsaber = "purple";

Properties can be any kind of data including objects and arrays. Adding an object as a property of another object creates a nested object:

var person = {
    age: 122
};

person.name = {
    first: "Jeanne",
    last: "Calment"
};

Creating an empty object and adding properties and methods to it is possible too:

var dog = {};

						   dog.bark = function () { alert("Woof!"); };

9 - JS ARRAYS

Arrays are lists of any kind of data, including other arrays. Each item in the array has an index — a number — which can be used to retrieve an element from the array.

The indices start at 0; that is, the first element in the array has the index 0, and subsequent elements have incrementally increasing indices, so the last element in the array has an index one less than the length of the array.

In JavaScript, you create an array using the array-literal syntax:

var emptyArray = [];

var shoppingList = ['Milk', 'Bread', 'Beans'];

You retrieve a specific element from an array using square bracket syntax:

shoppingList[0];();

Milk

It’s also possible to set the value at a particular index, again using the square bracket syntax:

shoppingList[1] = 'Cookies';

// shoppingList is now ['Milk', 'Cookies', 'Beans']

You can find the number of elements in the array using its length property:

shoppingList.length;

You can use push and pop methods to add and remove elements from the end of the array:

shoppingList.push('A new car');

// shoppingList is now ['Milk', 'Bread', 'Beans', 'A new car']

shoppingList.pop();

// shoppingList is back to ['Milk', 'Bread', 'Beans']

Here’s an example that creates, pushes, pops and iterates over an array, passing each name to a function called helloFrom. helloFrom returns a string with a greeting: “Hello from ” and then the person’s name. After the pushing and popping, the final list of people is: “Tom”, “Yoda”, “Ron” and “Bob”.

50-game

jQuery

Back

Home

1 - JQUERY WHAT IS JQUERY

jQuery is a JavaScript based library that makes using the JavaScript much easier for your web based applications. The JQuery is fast, much easy to use, small in size – around 32Kb, and contains a lot of features.

You have to write lots of JavaScript code to accomplish tasks that jQuery enables you to write with much less code. Its aim is to write less do more.

The jQuery is cross platform compatible, i.e. supported by many popular browsers like Chrome, Firefox, IE, Safari and others.

jQuery makes things quite simple like HTML document transversal and manipulation, handling events (like clicking on links, mouse up, mouse down etc.), animations for your applications (like slider, loader) and Asynchronous JavaScript and XML (AJAX) operations with an easy to use API.

You can do many things like cool jQuery sliders, slideshows, menus, fade-in/fade-out effects, beautiful dropdowns… just a few examples that can be done with jQuery.

There are many other JavaScript frameworks out there like Ext JS, Dojo etc. however, the jQuery is the most widely used and popular JavaScript framework.

The tutorial will take you through installing jQuery, Syntax of jQuery, environment setup and working examples of jQuery in following chapters.

2 - INSTALL/SETUP JQUERY

Installing or setting up jQuery to enable you working in your web applications is quite simple. This does not require any compilation.

You just have to place or refer library file of the jQuery in your HTML files to work with it. The following section describes how you can do it.

Download jQuery library

You can download the jQuery library from It is recommended to download uncompressed file for the development machine and compressed file for production (where your site is hosted). Click the link to learn more about the difference between jQuery.js and jQuery.min.js.

After downloading and placing uncompressed file to your development machine, place it to the same directory where your code files are. After that, you can use following code to include jQuery library in your HTML file:

Refer from CDN network

CDNs (Content Delivery Networks) offer to include jQuery in your web documents. You simply have to give URL of one of the available jQuery library.

Example:

jQuery CDN

Google CDN http://ajax.50-game.com/ajax/libs/jquery /1.10.2/jquery.min.js

Microsoft CDN

One of the benefits of using the CDN is, if another website is using that CDN and loaded by the browser, Your website will use a pre-loaded library in the cache.

This is how you will include jQuery library in HTML file by referring CDN:

In this tutorial for beginners, we have used both types of jQuery libraries in examples – from host machine where the website is hosted as well as referring from CDN (Google and jQuery’s CDN).

3 - JQUERY SELECTOR

The selector in jQuery

The most important purpose of jQuery is: select elements and do some action on those selected elements. The jQuery selectors allow you to search or select HTML elements and then perform intended action on those.

For example, we see Show/Hide feature in many sites for some part of the page. This can be done by using selectors. We can code all HTML of the show or hide part in a particular class e.g. “.showmenu” class. When Show (button or link) is clicked the menu will be shown and vice versa.

Syntax of using jQuery selector

Selectors in jQuery start with: $()

This chapter explains important selectors one by one with examples. Note that, for the examples below we have placed jQuery library at the jQuery folder where HTML file is also placed.

Selectors on the basis of element ID

Following is the general syntax of using selector by ID: $(“#ID_of_Element”);

The ID will be represented by “#” followed by ID of the element that should be unique in the document. In HTML, your paragraphs, form buttons, Div etc. can be ID based. The selector jQuery will search for the given id in the document and perform given action.

Selector by #ID example

In the following example, a Div with id=text will be shown while Show button is made hidden when the document is ready. As you click on “Hide text” button, the div will be hidden and “Show text” button will be shown.

jQuery Class Selector

Following is the general syntax of using selector by class name: $(“.classname”);

Selecting elements by class names requires calling by ‘.’ (period) followed by the class name of the element. The jQuery selector will search for the given class in the document and performs the specified action.

Selector with Class name example

Following is an example of the selector in jQuery by the class name. Apparently, this is just like the above example, except we are using the class selector.

In the example below, a Div with class=text will be shown and Show button is made hidden when the document is loaded. As you click on the “Hide text” button, the div will be hidden and “Show text” button will be visible.

In real time development, your class name specifications may be specified in an external CSS file.

Selector by name

Following is general syntax of using jQuery selector by tag name: $(‘html_tag_name’);

Where HTML tag name can be p, div, img etc. e.g.

$(‘p’) – select all elements with name p in the page.

$(‘div’) = select all elements with name div in the page.

Example of Selector by tag name

Same example as given above except that we used tag name div to hide and show text in jQuery selector rather the class name. If you have multiple div tags in the page it will show/hide all Divs.

4 - JQUERY CLASS

jQuery Class with HTML elements

In your web projects, the presentation layer or HTML may contain classes. For example in DIV, paragraphs, links and others may use classes to format HTML elements. e.g.

In order to perform actions on these elements on the basis of class attribute, jQuery provides the Class selector.

Syntax of class name selector

Following is the syntax of class selector:

$(“.class”);

Selecting the elements by class names require it calling by a ‘.’ (period) followed by the class name used in the element. The jQuery class selector will search for the given class in the document and perform the desired action.

For example:

$(“.myDivclass”).show; $(“.myPclass”).hide;

Class Selector example

The following is a basic example that explains class formatting and then using it in the class element selector. The internal CSS is used to create the classes that are placed in the <head> section. Normally, you may want to use the external CSS.

In the example, as Green Text is clicked it will show only the green text and hides the red and orange <p> (paragraphs) by using the jQuery class selector. When the red text is clicked, only red will display while orange and green will be hidden by using jQuery hide() method.

Save the following code in the jquerytest.html file or some other name of your choice and run it in your browser. Note that, the jQuery library is included from the Google CDN, so you don’t need to download and refer its physical path.

<html>
<head>
<style type="text/css">
/*Menu number 1*/
 
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exPgreenclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: green; 
}
.exPredclass {
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: red; 
}
.exPorangeclass{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: orange; 
}
</style>
 
<script src="http://ajax.50-game.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".exPredclass").hide();
$(".exPorangeclass").hide();
 
$("#link1").click(function () {
$(".exPredclass").hide();
$(".exPorangeclass").hide();
$(".exPgreenclass").show(); 
 
});
 
$("#link2").click(function () {
$(".exPredclass").show();
$(".exPorangeclass").hide();
$(".exPgreenclass").hide(); 
 
});
 
$("#link3").click(function () {
$(".exPredclass").hide();
$(".exPorangeclass").show();
$(".exPgreenclass").hide(); 
 
});
 
});
</script>
 
</head>
<body>
<div class="demomenu">
<a class="linkclass" id="link1" title="Green Text" href="#">Green Text</a>
<a class="linkclass" id="link2" title="Red Text" href="#">Red Text</a>
<a class="linkclass" id="link3" title="Orange Text" href="#">Orange Text</a>
 
</div>
<p class="exPgreenclass">Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class="exPredclass">Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class="exPorangeclass">Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
</body>
</html>

5 - JQUERY EFFECTS

The fadeIn() method of jQuery

For a well-designed website, showing images or text upon certain action by the visitor or transition in images for marketing pictures leaves a good impression. This is the fading effect that jQuery makes quite easier to do.

The jQuery fadeIn() method allows to fade-in elements of a website. For example, a

or some other element that may contain text, images or other content. The fadeIn jQuery method slowly changes the opacity of the given element from hidden to visible.

Syntax of jQuery fadeIn()

Following is the syntax of using the fadeIn method: $(selector).fadeIn(speed,callback);

Where:

Selector = can be an element like div, p, etc.

Speed = Optional parameter that specifies the fadeIn speed with the possible values of

“slow”
“fast”
r the value in milliseconds

Callback = after the fadeIn () method is completed, an optional callback function to perform some action.

An example of fadeIn() method

jQuery fadeOut | An example of fading out content

The fadeOut() method

The fadeOut() method fades out the visible elements of a website, for example

etc. that may contain the text, images or other content.

The fadeOut method slowly changes the opacity of the given element from visible to hidden.

Syntax of jQuery fadeOut()

Following is the syntax of fadeOut method: $(selector).fadeOut(speed,callback);

Where:

Selector = is an element, for example, a paragraph, a div etc.

Speed = This is where you can define the speed of fading out. The values can be:

“slow”
“fast”
Or value in milliseconds

Callback = after fadeOut() method is completed, an optional callback function.

An example of fadeOut() method

Following example shows how to use the fadeOut method. In this example, as you click “FadeOut jQuery” button it will hide (fade out) three visible blocks with fast, slow and 3000 milliseconds speed.

Click the link below to see the output and code:

jQuery show | 2 examples to show hidden elements

The show() method of jQuery

The jQuery show() method is used to show the hidden elements of HTML in the web document. Note that, the show method would not show elements which property are set to Hidden by visibility property, i.e. visibility: hidden in CSS.

The elements that are hidden by using the hide() method or with CSS property display: none; can be shown by using the show() method.

Syntax of jQuery show

Following is the syntax of show method $(selector).show(speed,callback)

Where

Selector = This can be an HTML element like div, p, list etc.

Speed = This is an optional parameter with three possible values:

“slow”
“fast”
Value in milliseconds

Callback = after the jQuery show() method is executed, an optional callback function can be used.

Example of using show method

Following example shows how to use the show method. We have used a div element that contains a yellow line with text, which is hidden initially. As you click on the button the div element will be shown by using the show method.

jQuery hide | 2 examples to hide div and other elements

The hide() method of jQuery

The jQuery hide() method hides the specified HTML elements like DIV, paragraphs or other elements. The hide jQuery method can be used to make user’s experience better in order to provide them facility what to show and what to not in a website besides other uses.

Syntax of jQuery hide()

Following is the syntax of hide method:

$(selector).hide(speed,callback)

Where

The Selector can be an element like div, p, etc. in hide method.
Speed = This is an optional parameter with the following possible values:

“slow”
“fast”
Or value in milliseconds

Callback = after hide() method is completed, an optional callback function to perform certain action.

An example of hide() method

In this example, we will use the hide method to hide a DIV with the name “text” after clicking “Hide yellow line” button.

Just copy paste the given code to a new HTML file and name it e.g. test_hide.html or click the link below to see online demo.

Example of hide method with callback function

As mentioned in the above section, you can use a callback function with hide method. In the example below as you click the button, the yellow line in div element will be hidden by using the jQuery hide method and as it completes the callback function will trigger an alert.

The hide method is pretty useful for providing sections that you want to let your users hide like menus, social bars in div,

etc elements. However, once an element is hidden you have to use show method to allow users see the hidden element/content again. In order to let users show and hide we recommend using the jQuery toggle method.

jQuery animate: 5 demos to learn animate method

The animate method

A powerful feature of the jQuery is the animation method to use in web pages in an easy to use way. We know how CSS powers HTML in styling or presenting web documents for good user experience. How about animating CSS styles/properties using the jQuery animate method?

The animate method is used to create custom animations on the basis of CSS properties.

In this tutorial, we will go through how to use the animate in jQuery along with CSS properties that can be used for animations.

Syntax of jQuery animate method

Following is the general syntax of animate method:

$(selector).animate({css_properties},duration, easing, complete);

Where

The Selector can be an element like div, p, etc.

css_properties = CSS properties to be given here to use in animation – see examples below.

Duration = Optional parameter that specifies the animation speed with the following possible values:

“slow”
“fast”
Value in milliseconds

Easing = [optional] Specifying transition function value here with possible values of ‘swing’ and ‘linear’. The Linear moves animation at a constant speed from the start to end.

Complete = after the animate method is completed, an optional callback function can be used.

Below are a few examples of jQuery animations using the animate method with different CSS properties.

jQuery animate for height example

Following example shows how to use animate method for the height animation. A div element is used for animate height example.

Example of animation for width of DIV block

Following example uses animate method for width animation of Div element. See demo online by clicking the link below:

Animate jQuery for height and width
(using multiple CSS properties)

The example below uses multiple CSS properties (height and width) to animate a DIV element of the document by the $.animate method.

Animate queue functionality – First width then height example

In this example, multiple animate method calls will be used for animation. The jQuery, by default, creates an internal queue for animate calls. This is very useful if the first animation is required to be completed and then starting the second animation and so on.

In above example, we have seen height and width animation of DIV executed simultaneously. In the following example, first width animation will be completed followed by the height by using jQuery animate.

Animating Text with animate method

In the following example, we will first animate width and height and then increase the font size of text with jQuery animation method.

jQuery Alert | How to use Alert box in jQuery with code and running example

jQuery Alerts

Alerts or dialogue boxes are widely used these days, in order to interact with visitors of websites. For example, filling an online form or Alerting before the exit to another page. jQuery provides ways to make fancy alert boxes to be used for the websites.

Example 1: Basic jQuery Alert Box

Following is a basic alert box example that has only one option: Show the message to the user with an OK option to close the alert box. See the example by clicking the link below:

Examples of using jQuery Alerts

Example 2: Confirmation Alert Box

This confirmation alert is used where you want to confirm a user before proceeding to perform something. For example, closing a window and asking a user “Are you sure you want to exit?”.

Example 3: Prompt jQuery Alert Box

This can be used for scenarios where you need user input values, for example, Your Name or age or location before proceeding to the next step.

6 - JQUERY EVENTS

jQuery click | 3 examples of click event in button, div

The click event

The click event occurs when an element of HTML document is clicked. For example, clicking a button, a paragraph, a Div, a link or an image etc.

Syntax of jQuery click

Following is the syntax of jQuery click:

Where click function is optional. The function runs as the click event occurs.

Examples of how this event can be applied to different elements. $(“p”).click(function) $(“div”).click(function) $(“button”).click(function)

You can use click method by element ID or class name as well.

Following are a few examples of click jQuery method with different HTML elements.

Example of click with paragraph

In the following example, as the first paragraph is clicked, the jQuery triggers click event handler that will show an alert. The jQuery click method is attached with the clickme paragraph id.

Copy and paste the code into HTML file and run in your browser. OR

Example of click with div

The following example is just like the above example except we used a <div> element rather a paragraph for the click event demo.

As you click on the first div with id = ‘Clickme’, the jQuery triggers the click handler that will show an alert by using the click jQuery method.

jQuery button click example

Following example shows how to use HTML button with the click event. As you click on the button, an alert will be shown by using the jQuery click method.

jQuery keypress | How to use keypress event in jQuery with example

The keypress event

The jQuery keypress event is triggered after a key is pressed in the keyboard. The keypress method will be used to perform any action or run a function as the keypress event occurs in your web document.

The keypress event occurs when a key is pressed down, so it is quite similar to the keydown event. However, there are differences between the two – for example pressing a few keys will trigger only the keydown event like ALT, CTRL, ESC etc.

Syntax of jQuery keypress method

Following is the syntax of keypress jQuery method: $(selector).keypress(function)

Where the function is optional to execute as the keypress event occurs.

An example of keypress event

The example below shows as a key (in your keyboard) is pressed, and keypress event occurs. The keypress method will capture the event and throw an alert with ASCII value of the pressed key.

jQuery keyup | How to use keyup event in jQuery with example

The keyup event is triggered after a key is released in the keyboard. The jQuery keyup method will be used to perform any action or run a function as the keyup event occurs in your web document.

Syntax of jQuery keyup method

Following is the syntax of the keyup method: $(selector).keyup(function)

The function is optional in the keyup method.

An example of keyup event

The example below shows as a key is released and the keyup event occurs the jQuery $.keyup() method will capture the event and throw an alert with ASCII value of the pressed key.

jQuery change | How to use change event of jQuery in form elements

jQuery change event

In HTML form elements, when the value of an element like textbox, dropdown, text area etc. is changed the change event occurs. The jQuery change() method is used to perform some action or attach an event handler to the change event.

Following is the syntax and example of using the change event.

Syntax of change in jQuery

Following is the syntax of change jQuery method: $(selector).change(function) e.g. $(“txtbox”).change(function)

Where the function is optional in the change method that executes as the change event happens.

Note that, the change event only works with the form’s elements. For the text boxes and text area, it occurs when focus is changed to some other elements after any changes.

An example of textbox change event with change method

In the following example, as you enter some text into the textbox namely, Enter text, and then press the Tab key from keyboard to move to the next text field, the change event will happen and jQuery change method will be used to display an alert.

jQuery load event explained with two examples

The load event and method

The load method, which is deprecated in 1.8 version of the jQuery library, was used to perform actions as the load event occurred.

The load event happens when a specified element like images, iframes, frames scripts or window document loads completely.

The jQuery load method becomes challenging, especially in the case of images loading as it comes to compatibility of the browsers. When execution of functions is also attached to load jQuery method. For example, if images are already in the cache it may cease to execute.

This chapter explains about jQuery document load method with examples, let us first look at the syntax:

Syntax of jQuery load method

Following is the general syntax of load method: $(selector).load(function)

e.g.

$(“image”).load(function) $(“window”).load(function)

An example of load event with an image

In the following example, the load event of the image will trigger an alert, showing the image is loaded by using the load method.

Example of using jQuery window load

This example will display an alert when the whole document is loaded, including all images and other content of the web page by using jQuery window load method.

jQuery hover | Way to use hover method with an example

The hover method

In modern websites, we usually see as the mouse pointer is moved (hover) to the links or sometimes in content paragraphs or images, the color of the link changes or some other effects in images or paragraphs. This can be done in different ways, generally the jQuery hover method is used for this purpose.

The hover method attaches or binds one or two event handlers or functions to the specified elements (like links, divs, paragraphs, images etc). These handlers or functions execute as the mouse pointer enters or leaves the specified/matched elements.

Syntax of jQuery hover

Following is the syntax of hover jQuery method:

$(element).hover(handlerInFunction, handlerOutFunction) Where:

handlerInFunction: Required. This function will execute in jQuery on hover, as the mouse pointer enters the specified element.

handlerOutFunction: Optional. This handler or function will execute as the mouse leaves the element.

If only one handler is given in hover method, it will execute for both mouseenter and mouseleave events.

e.g. $(“p”).hover(handlerInFunction, handlerOutFunction) $(“div”).hover(handlerInFunction, handlerOutFunction)

Example of hover method of jQuery

The example below shows how to use the hover jQuery method. In the example, as the mouse pointer enters the link area, the color of the link changes along with the text in the paragraph.

As the mouse pointer leaves the link area, the color will again change with the change of text as well, on hover method.

7 - JQUERY HTML / CSS

jQuery CSS – 4 examples to change CSS by $.css method

jQuery CSS method

As working with jQuery in your web pages for different elements, it becomes quite useful if CSS can be applied or changed dynamically for different elements. For example, showing an element by using jQuery .show method and changing its CSS.

Similarly, new elements added dynamically by using jQuery and you want to apply CSS by using jQuery as well. An element made hidden by using display: none property of CSS in the stylesheet and you want to make it visible and so on.

jQuery comes up with $.css method that can be used to change/apply CSS to specified element(s) as well as return style properties for the given elements.

This tutorial explains the “CSS” method of jQuery, let us first look at the syntax of using it.

Syntax of using jQuery’s CSS method

The general syntax of using CSS method is: selector.css(“css_property”,”property_value”); You can also apply multiple CSS properties by using the following syntax: selector.css({“css_property”:”property_value”, “css_property”:”property_value”,……}) Where,

the selector can be an element like a paragraph, div etc.
.css is jQuery method name to apply/change CSS of the specified element.
For the single property, you can simply enclose CSS property in double quotes followed by the property value.

e.g. CSS property name = “color” and value = “red”

For setting multiple CSS properties, enclose properties into the curly brackets. Each property is separated by a comma.

e.g. p.css({“color”:”red”, “font-size”:”12px”});

Example of applying single CSS propert

The example below applies CSS to a paragraph. This will only set the color of the paragraph text.

Example of applying multiple CSS properties

The example below applies CSS properties to a paragraph. As you click on the paragraph text, the color, font size, border color, border style of the paragraph are applied CSS properties.

CSS background image example

The example below sets the background image of the paragraph element by using jQuery css method, as you click on the paragraph text.

CSS display example

The example below uses css jQuery method to display a paragraph element that was hidden by using the display: none; in CSS, as the web page loads.

As you click on the other paragraph text, it will execute jQuery css method and apply display: initial; value and paragraph will be displayed.

Conclusion – CSS in jQuery

As shown in the above examples, you can use the .css method of jQuery to apply CSS to the specified elements. The example of using border, background, color, font-size are shown. Similarly, you can use other properties like CSS text, CSS margin, CSS padding, CSS hover, CSS visibility etc. by using the $.css method of jQuery.

jQuery HTML | 3 demos to use $.html method

The HTML and jQuery

In order to place or set HTML content by using jQuery to the specified elements in a web page, the jQuery comes up with $.html method.

This method is used to retrieve or get the content of the first matched element or replace or set the content of all the matched elements. The content may be HTML formatted.

In this chapter, we will cover both aspects, getting and setting the content of elements by using $.html method with examples.

Get content by jQuery HTML method

You can use $.html method of jQuery to get the content of specified elements. The method will return only first matched element’s content if there are multiple occurrences.

For example, if you have two or three paragraphs with text information, calling html method will return only first paragraph’s content.

Syntax to get content: $(“element”).html()

Note that, this will return HTML code, not the formatted text. The example below makes it clearer.

Getting jQuery inner html example

The example below shows how to use the HTML method to get specified element content. In this example, two paragraphs with same IDs are used with different content. As you click on the button “jQuery HTML”, it will display an alert showing first paragraph content.

As mentioned earlier, only the first paragraph’s content will be shown if there are multiple matches.

Set or add content with HTML method of jQuery

You can use $.html method to set or add HTML content to the specified elements. Unlike using the HTML method to get content, setting HTML will affect all matched elements.

Note that, the content will be replaced for all matched elements.

Syntax to set content $(“element”).html(“HTML_Content”); For example, if you have two paragraphs and you set the content by $.html method, it will replace the given content with existing content. The example shows how.

jQuery add HTML example

The example below shows how to set content to the given elements. Two paragraphs has different content. As the button “jQuery HTML” is clicked, the HTML jQuery method will replace existing content with the given content.

As you can see, both paragraphs text is replaced. You can change only single paragraph’s content if you call it by ID, as such you should have differents IDs for different elements.

Note: the $.html method replaces the existing content, you can also use jQuery append method to add text at the end of existing content or jQuery prepend method to add content at the beginning of the existing content.

jQuery HTML example with hyperlink and heading

The example below shows how to add HTML heading (h1) and hyperlinks by using html method.

jQuery append: 3 demos to add HTML content by $.append in jQuery

The append method

In many scenarios, you may need to add content, some plain text, HTML text or other elements to your web page without reloading.

jQuery makes it quite easier by way of few methods that allow to add content in the web pages. The placement of content can also be controlled easily, depending on jQuery method you are using to add content.

Methods to add content

Following are methods supported in jQuery to add content: 1- $.append

The append method adds content to the end of a given element. For example:

p.append(“content”) will add content to the end of paragraphs in the document.

2- $.prepend

The prepend method, as opposed to append method, adds content at the beginning of the specified element. For example:

p.append(“content”) will add content at the beginning of paragraphs in the document.

This chapter only explains how to use append jQuery method with examples. First of all syntax of using append() method in jQuery. To learn prepend method: Go here

Syntax of append() method

The syntax of jQuery append() method is: selector.append(“content to be added”);

Where selector can be an element where you want to add content. To learn more about jQuery selectors go here.

Example of using .append method in paragraph to insert plain text

In the example below, we will show you how to add simple text at the end of a paragraph. As you click on the button “Add content”, it will add given plain text attached to the click event of the button to end of the paragraph.

jQuery append HTML Example

Similarly, you can add content that contains HTML tags by using append method. For example, it can contain <b> tag, hyperlinks <a>, etc.

The example below adds bold text and a link as you click on the “Add content” button.

In this example, new div elements are created by using jQuery append method. As you click on the “Add content” button, new div element at the body level will be created. In order to stand out each div element, style is applied by using the CSS border.

jQuery after – 2 examples to insert HTML content by $.after

The after method of jQuery

The jQuery after method allows adding the content after the specified element.

For example, you have a div or paragraph in your web page and want to add some text content after the div or paragraph, you can use the after method of jQuery to do that.

You can also use the append method of jQuery to accomplish that, however, there is a difference explained at the bottom part of this tutorial with an example.

Syntax of using jQuery after

The jQuery after method allows adding the content after the specified element.

For example, you have a div or paragraph in your web page and want to add some text content after the div or paragraph, you can use the after method of jQuery to do that.

You can also use the append method of jQuery to accomplish that, however, there is a difference explained at the bottom part of this tutorial with an example.

Syntax of using jQuery after

The simple syntax of using the after method is:

$(“element”).after(“Content to be added  can be in bold with linebreaks 
 etc.”);

Example of using ‘after’ in jQuery with div element

The example below shows how to use the after method with div element to add some text. The added text will have some formatting like bold and line break as well. You can add links or other HTML tags as well.

Difference between ‘after’ and append methods of jQuery

The jQuery after method adds content “after” the boundary of specified element. Whereas append method adds the content within the boundary of the given element. The example below makes it clearer.

We have two buttons and two div elements.

As you click on the left button “Run after method”, it will add text by using “after jQuery method”.

As you click on the right button “Run append method”, it will add content by using append method of jQuery.

To make it clearer, both div elements are given borders.

As you can see, the content added by using the after method added content after the border of div element whereas jQuery append method added within the border of the div element.

jQuery remove – 4 examples to use remove method

The remove method of jQuery

jQuery comes up with a few methods that can be used to remove elements from your web documents. You can remove the complete element including parent and child at one call or just child elements as well.

For example, you want to remove a paragraph, a div element or text box etc. from a web document.

One of the methods that can be used to delete elements is jQuery remove method. The remove method will delete all elements including parent and child. If matched elements are more than one, all elements will be removed while using the remove method.

For example, you have two div elements in your page. If you remove div by using $(“div”).remove(), it will remove both divs even if both have different ids. To remove a specific one, use id or class to remove a specific element.

In this tutorial, we will show you how to use the remove method for different elements, but let us first look at the syntax of jQuery remove method.

Syntax of remove method

The basic syntax of remove method is: $(“element”).remove();

Remove a div example

You can see, there are two div elements in the above example. The div element with id = divtst will be removed.

What would happen if we simply used the “div” rather calling it by id? See the following example.

Remove multiple div example

In the following example, we will remove multiple div elements by a single call. As you click on the button “Run Remove Method” it will remove div elements by using “div” rather div by id.

8 - JQUERY TRAVERSING

jQuery parent – How to use $.parent with examples

The parent method of jQuery

The parent method traverses just one level up and searches the parent of the specified element.

Consider this structure in DOM:

In that case, the div is a parent, p is the child of div while the span is a child of p and grandchild of the div element. If you specify <span> element in jQuery parent method, it will get <p> as the parent of span element! That is, the parent method will travel just one level up and get the parent of specified element.

Similarly, if you specify <p> in the parent method, it will get the div element as the parent of <p> in above structure.

This tutorial explains only about parent method of jQuery. You can see examples below but let us first look at the basic syntax of the $.parent method.

Syntax of $.parent method of jQuery

The basic syntax of $.parent method of jQuery is: $(“child_element”).parent();

Where a child element can be a selector, an element like span, paragraph, div etc.

Example of jQuery parent method to add text

In this example, we have three levels; the first level is parent div while the second level is a paragraph within the div. The third level is a span element which is the child of the paragraph while grandchild of div.

The parent method will specify span element that will get parent (paragraph in that case) and add text ahead of this parent paragraph by using the after method. See below:

You can see, as you click the button it finds span parent which is a paragraph and adds some text content “some test text”.

jQuery get parent and add CSS example

In this example, we will specify paragraph in jQuery parent method that will get parent (div) and adds some CSS by using addClass method. See demo below:

jQuery parents method

The parents method

Unlike jQuery .parent method, the .parents method traverse all levels up to find “parents” of specified element whereas .parent method travels just one level up.

To understand that, consider this structure:

In that case, the div is a parent, p is a child of div while the span is the child of p and grandchild of the div element.

If you specify <span> element in jQuery parents method, it will travel through upper levels, to <p>, <div> to <HTML>.

Syntax of $.parents method of jQuery

The syntax to use $.parents: $(“child_element”).parents();

See the following section of $.parents method exampls.

A parents method example

In this example, we used jQuery parents method and specified the span element, which is the grandchild of div1.

As you click the button “Run parents method” it will not only add CSS to <p> and <div> but also travels through HTML that adds CSS to other elements as well.

Using filter with jQuery parent method example

You can apply a filter to specify which parent level to go as using the $.parents method. In above example, as we did not specify any parent so the CSS was added across.

Learn to use jQuery children method with examples

The children method

The children method is used to return the first level child of the specified element. This method searches only to the first level downward. In order to find all descendant elements, you can use the jQuery find method.

To make it clearer, consider the following simple structure:

In that case, the <p> is child of div element while <span> is grandchild or second level child of div element.

In the above structure, if you specify the div element while using the children method, it will search the paragraph only. Similarly, if you specify the paragraph it will find span element, which is the child of the paragraph.

Syntax of children method

The general syntax of children jQuery method is: $(“parent”).children(“child”);

Where parent element can be a selector like a div, paragraph etc.

In the section below, we will show you examples of using the children method. We will use jQuery children method to change the first-level child element presentation.

Children example to add text to child element

In the following example, a div is a parent element of a paragraph. As you click on the button, it will add text at the end of the paragraph.

First we searched the first level child of div element by using the children method and then jQuery after method is used to add text.

The example below adds CSS by using children method of jQuery.

If you use <span> element rather <p> in the above example, it will not work. In order to impact all descendant elements use jQuery find method.

To go upwards, from child to parent level use jQuery parents method.

Example of children method to add class to a button

In this example, as we have a button which is the child of paragraph and grandchild of the div element. As you click on button “Run children method” it will add class to the button element.

jQuery remove children example

jQuery find – 5 examples to search parent, child elements by find method

jQuery find

The find method is used to “search” the specified element/selector to return downward descendant elements. Where a descendant can be the first level child, second level, third level and so on.

Alternatively, you can say jQuery find method returns the child, grandchild, the great-grandchild and so on elements of the specified parent element.

For example you have a <div> element structure as follows:

In that case, the <p> is a child of div element while <span> is the grandchild or second level child of the div element.

You can use the find jQuery method to search/traverse through, by specifying div and perform some desired action(s) like changing the presentation of child element; adding some CSS, changing color, making button disabled/enabled, show/hide text boxes without reloading the web page etc.

In this guide, we will show you how to use the find method of jQuery along with online examples, but first let us look at the general syntax of find method.

Syntax of find method

The general syntax of find method is: $(“parent”).find(“child”);

Where the parent element can be a selector, an element etc.

In the following section, we will show you examples of using find method. We will use the find method to change first or other level child element presentation. Find by id or class and changing attributes etc.

A find example to add text to child elements

The example below uses the find method to add text at the end of the paragraph. A div element, which is a parent, has one paragraph (child) and the paragraph has a span child.

As you click on the button, it will add text at the end of the paragraph where we used the after method of jQuery with find method.

jQuery find example to add CSS to child elements

The example below adds CSS by using find method of jQuery. As you click on “Run find method” button, the span (grandchild of div) element’s CSS will be added. A solid border line will be added by using the find method.

Note that, the find method can go to any level of the parent, whereas if you need to work at first level only you should use jQuery .children method.

find by class name example

You can also specify class name in jQuery find method. The example below uses div parent element and find class name “testfind”, which is used in the span element. Then we used jQuery CSS method to add CSS.

As you click on the “Run find method” button, the border will be placed around the span element by using find method.

find by id example

You can also specify the id in find jQuery method. The example below uses div parent element and find by id “testid”, which is used in the span element.

As you click on the “Run find method” button, the border will be placed around the span element by using find along with CSS method of jQuery.

find by name example

You can also specify the name attribute in find method. In the example below, as you click on the button “Run find method”, the color of the text of another button which is the grandchild of div will be changed by using the name attribute.

9 - jQuery AJAX

Introduction

You load a website and you see something. You click on a button — maybe "next page" to change the result set — and it loads new data, but the page didn't refresh. This happened thanks to AJAX.

Let's look at a real-life example. Go to google.com and search for "dogs" — see how the search results appear instantly, and they even change when you alter the search? That data got pulled in "on-demand," and that's what AJAX is. AJAX relies on both JavaScript and HTTP, and it's good to understand both in order to completely grasp AJAX.

What is HTTP?

What you see when you browse a page is not just one big object. It's actually made up of multiple pieces that are pulled together behind the scenes, in several different HTTP requests. This video gives a good overview of HTTP.

HTTP is like an annoying kid that always has something to say back to you. We make requests like "I want the search results for the 'dog' keyword." Every request has a response; if everything went OK, we would get back an HTTP Status code of 200, or HTTP/1.1 200 OK. If something went wrong, it usually returns one of several errors in the 400s and 500s, depending on the problem. Every request includes the data that we send along with additional information, contained in header fields, describing what we want and how we want it. The same goes for the response.

HTTP uses verbs to describe actions like getting, creating, updating, and deleting. The POST verb is usually used to create resources, and that's the one we'll use in our example.

How do I see my requests?

There are several tools that will allow you to see all of the individual requests, and most can be added to your web browser or already come built right in.

Firefox includes the built-in Firefox Inspector, which you can access with the shortcut Alt+Command+Q or Control+Alt+Q. HTTP requests appear under the Network tab. There's also Firebug for Firefox — which you can download here — and open using the fn+F12 or F12 shortcut; HTTP requests can be found in the Net tab.

Safari, Chrome, and Internet Explorer also have built-in developer toolbars. Both Chrome and IE have a Network tab, while requests are shown under Safari's Timelines tab. We'll be using the Firefox Inspector, which by default shows every request including JavaScript, CSS, Images, and XHR. The inspector only shows requests made while it's open, so you'll need to refresh the page to capture them the first time.

XHR, is that a virus or something?

No. You won't be suffering from a venereal disease, I promise. Browsers use a special JavaScript object called the XMLHttpRequest to make HTTP requests in the background. You can think of it as your personal assistant that gets things for you and puts them where they're supposed to be once you give them instructions. With jQuery you don't have to worry about learning how to use this object, because the framework has taken care of all of the nitty-gritty details for you.

Why should I care?

If you know how to put together the pieces, you'll be able to handle any AJAX situation. You could hop into another framework like Dojo, or even understand the AJAX parts of AngularJS.

Just as the HTML page from our mental model above was a single GET request, we could do the same with other types of requests. We could modify data on our server using POST, PUT, PATCH or DELETE, for example.

AJAX POST Example, the jQuery way

So let's get our hands dirty. Here's our HTML5 and jQuery:

!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX POST Form</title>
    <meta charset="utf-8">
</head>
<body>

<button type="submit">Submit</button>
</form>

e.preventDefault();
        }

$('#my-form').submit( processForm );
    })(jQuery);
</script>
</body>
</html>

Let's break down the not-so-clear parts of the $.ajax() method. The dataType setting controls how data we receive from the server is treated. So if we want JSON from the server to be treated as text in our Javascript on the client side, for example, then we set this value as text. If we don't set the dataType value at all, jQuery will try to figure out what the server sent and convert it intelligently. If it thinks it's JSON, it'll turn it into a JavaScript object; if it thinks it XML it'll turn it into a native XMLDocument JavaScript object, and so on.

Next up is type, which is the HTTP verb that we want to use. I'll let you in on a little secret: since jQuery 1.9.0, you can use method instead of type. It could make things a little bit clearer for newcomers.

Following type is contentType. This is where understanding how HTTP requests and responses work helps a lot. What we set here gets sent as part of the HTTP header field Content-Type. That's important to note because we're letting the server know ahead of time what type of content we're sending, which allows the server to interpret the response correctly. For example, if you see a Content-Type of application/json you would know to process the content as JSON in your server-side code — it's as simple as that.

Now, the data setting is the data we're going to send to the server. We can send data to the server in a variety of different formats, but the default is application/x-www-form-urlencoded. That means we'll be sending text to our server with our form data formatted in key-value pairs, like first-name=John&last-name=Doe. Most, if not all, web server languages will pick up the key-value pairs and separate them for you either natively or through the use of libraries or frameworks.

Different Use Cases to try out

Let's look at some working samples of forms using AJAX POST methods in a variety of ways, and others presenting some common problems. Note that each form below is contained within an iFrame, so you can use your developer toolbar to look under the hood and see how each change affects what you see in the console and what is returned by the server.

Nothing is working!!

When everything looks fine and your form still doesn't work, trying to solve the problem can get very aggravating, very quickly. Here are some common issues along with their fixes.

Getting HTTP 400 or 500 errors

Your JavaScript is fine, but there's a problem with the server handling your AJAX request. Check the specific request in the Network tab of your developer toolbar to see what's going on. Pay close attention to your request Content-Type and the data you sent. For Firebug, it's labeled "Source" under the Post tab for the request. Also pay attention to the HTTP status code and any error messages; some developer toolbars will color requests with HTTP status codes of 400 or 500 in red to denote that something went wrong on the server side.

JavaScript errors

Sometimes nothing is working because you have a JavaScript error. These are easy to figure out — just look at your Console tab. The error will be there along with the filename and line number.

Everything looks fine and it still doesn't work!

This could be one of several issues, but the most common problems are logic errors and typos. Check to make sure that you've used the right selectors in your jQuery, that your HTML is valid, and that you haven't mistakenly introduced a typo in your HTML or JavaScript. If you're loading JavaScript from an external file, make sure it's getting loaded into the browser. Double check the URL path.

eeling rejected? Your AJAX request probably is.

If you're trying to POST, url looks fine, and you know the server-side code works, double check to see if url is pointing to a domain that's different from the domain that the JavaScript is loaded from. This also applies if you're trying to make an AJAX POST from the, but your page is non-secure (http://) and you're trying to load it from the secure site (https://) and vice-versa.

Challenge

I challenge you to break the examples I've given and try to fix them. At the same time use your browser's developer toolbar to gain more insight. It's the best way to learn the topic thoroughly.

Any thoughts or questions? If you’re still having trouble wrapping your head around AJAX POST or if you're stumped by a problem in your code, I’d be glad to jump on an AirPair session and help you work through it.

50-game

Bootstrap

Back

Home

1 - BOOTSTRAP OVERVIEW

The twitter Bootstrap is one of the most popular front-end web development framework that was created at a company, Twitter Inc, by @mdo and @fat in the mid-2010. The Bootstrap framework is for web designers and developers, that makes the website development process quite easier, reduces development time and it is powerful.

The Bootstrap framework is for all skill levels – beginners with a basic knowledge of HTML and CSS, designers (who are more expert in designing the websites and less in development) and web developers, who are expert in the server side scripting.

The Bootstrap framework is mobile first, responsive i.e. it adapts the “shape” of the device where your website visitor is visiting the website. As such you should expect visitors from any operating system and different devices – from different resolutions of desktop screens to tablets to different sizes smartphones or mobile phones. The Bootstrap makes your website adjust according to the user’s screen so that your visitors won’t see early days ugly scroll bars in the mobile/smart phones and run away immediately. Or otherwise, you had to write different codes for different devices in order to make it more readable, with different navigation etc. Bootstrap enables you to write you just one code that is scaled to any device or screen size.

The Bootstrap framework is the mobile first is really an important point. Historically, just a few years back, the first thing in the minds of developers and designers were desktop or big screen version of the websites. Though, the mobile end was also in mind but it was a secondary phase, generally. However due to the fact of fast grown and still growing mobile industry with over 1.2 Billion mobile web users worldwide and growing, where around 25% of web users are mobile only in the US and over 10 billion times mobile applications are downloaded; mobile first makes Bootstrap framework even more attractive. This feature is included in the Version 3 of Bootstrap as part of the default CSS. The earlier version had to use another CSS part to achieve responsiveness.

Bootstrap is an open source project. This is now hosted in GitHub that can be located here:

2 - TWITTER BOOTSTRAP HISTORY

The Bootstrap was basically served as the Twitter Blueprint. It was created by a Twitter’s designer and a developer in the mid-2010 before it became an open source framework. Within the company (Twitter), Bootstrap served as the styles guide for internal tools development and still doing so.

Twitter Bootstrap has two major rewrites, V2, and V3 while it had over twenty releases, since the original release, back in Aug 2011.

As this project was developed by the company, Twitter, generally Bootstrap started referred to as Twitter Bootstrap. While the company states this should simply be referred to as Bootstrap with “B” as capital.

3 - WHAT BOOTSTRAP PROVIDES

Bootstrap framework uses HTML 5 and CSS along with the JavaScript/jQuery. Bootstrap comes up with the 12-grid system to work with the responsive layouts. It provides commonly used components in the websites like Buttons, Forms, Tables, Dropdowns, Alerts, Carousel, Navigation, Responsive images, Typography, Glyph-icons, etc. It also provides JavaScript components/plugins like Modals, Dropdowns, ScrollSpy, Tooltips, Popovers, Alert Messages, Buttons, Collapse etc.

You will find using these CSS features or JavaScript components with examples in this tutorial.

4 - BASIC BOOTSTRAP LANDING PAGE

Before you go to the next chapters, here is a basic Bootstrap based theme where you can see how easy it is to create a website using Bootstrap framework. It will show commonly used components found in different websites. You can also experience proceedings online by clicking at “Experience it online” or can copy paste to your local system to see it at your local machine.

Target of achieve

The target is to create a website landing page with a navigation (menu) on the top followed by a carousel. After that, we will create four “columns”. Two columns with information, one with a sign-up form and the right most with another navigation to other web pages. Finally, we will place a footer with the copyright info.

Let us start creating a quick demo

First of all, download the Bootstrap framework from the official website:

At this stage, I will recommend downloading Simple Bootstrap for this demo which is a compiled and minified CSS, JavaScript, and Font. This is the minimum requirement for your website in the Live mode as well. Download and unzip it. The file structure including our index.html demo file (explained in the next section) should look like this:

Open your text editor and create an index.html file.

The first line of code will be <doctype> declaration. As Bootstrap is based at HTML 5, we will declare it by using HTML 5 declaration as follows:

Include Bootstrap library

In order to use Bootstrap framework’s CSS, its components or JavaScript you have to include some files in your web pages as follows:

Including CSS in the <head> section:

Including jQuery and bootstrap.js in the <body> section just before </body> closing tag as follows:

The code until now will look like this, including the title:

Container and Navigation bar

The next step is to create a container, which is a main div that will contain the whole web page. We will use container CSS class in the main div element. Next is an <h3> heading that will appear on the top followed by the menu bar or navigation bar. First, have a look at the code and output then I will explain what we have done!

Just paste this code after opening <body> tag, if you are doing this in your local system:

<div>

<h1>A Basic Bootstrap website</h1>

<a href="#" data-toggle="dropdown">Products <b></b></a>

<li><a href="#">Product 1</a></li>

<li><a href="#">Product 2</a></li>

<li><a href="#">Product 3</a></li>

<li><a href="#">Product 4</a></li>

<li><a href="#">Product 5</a></li>

</ul>

</li>

<li><a href="#">Services</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</form>

</div>

</div>

</nav>

</div>

5 - BOOTSTRAP LIBRARY

As you can see, the <h3> will show main title of the page that appears above the menu bar. Below that navigation bar is started by:

The <nav> is an HTML 5 tag that is assigned to navbar and navbar-default CSS classes from the framework.

After that, we have a <div> container that contains navigation bar. Our demo navigation contains a few links and a dropdown with “products”. A small form with site search facility is also there by using the Bootstrap’s form.

Create Carousel Section

Next section is creating the carousel with three images sliding. You can see sliding images with proceedings online by clicking “Experience this online” below or copy and paste if you are doing it at your local machine. You have to place the images in the “images” folder at the same location where the “index” file is created.

</ol>

<h1>CSS Tutorial</h1>

<p><button>Go to CSS Tutorial</p>

</div>

<h1>Write less Do More</h1>

<p><button>Go to jQuery tutorial</p>

</div>

<h1>Java Tutorial</h1>

<p><button>Go to Java Tutorial</p>

</div>

</a>

</a>

</div>

Four columns including sign-in form

<hr />

<h2>Example Heading!</h2>

<p>Example Text Here for features, product or service etc! Example Text Here for features, product or service etc Example Text Here for features, product or service etc Example Text Here for features, product or service etc Example Text Here for features, product or service etc</p>

</div>

<h2>Example Heading</h2>

</div>

<h2>Existing Users</h2>

<div>

<label for="inputEmail3">Email</label>

<div>

</div>

<div>

<label for="inputPassword3">Password</label>

<div>

</div>

<div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

<div>

</div>

</form>

</div>

<li class="active"><a href="#">Overview</a></li>

<li><a href="">Nav item again</a></li>

<li><a href="">Another nav item</a></li>

<li><a href="">More navigation</a></li>

</ul>

</div>

To properly differentiate the section, we have added <hr/> tag to add horizontal lines.

Footer section

And finally another <hr/> followed by the footer section, by using the “footer” class in the div element.

6 - BOOTSTRAP AND CSS

Bootstrap framework includes the base CSS and HTML that can be used in the website design for different components. These includes Typography like headings, page headers, paragraphs, text formatting etc, tables, forms, button navigation, grids etc.

By including the Bootstrap CSS library, you can refer CSS classes provided by the Bootstrap in your web documents. This tutorial will take you through CSS library of Bootstrap for different components along with online examples and code to show you how it works.

Include framework CSS to web pages

First of all, you have to place Bootstrap’s CSS file in the <head> section of your document before using the CSS classes. The basic code to be included in any web page is for CSS framework:

Where is for HTML 5 declaration. Note that, the Bootstrap requires using the HTML 5 declaration.

The following line

includes Bootstrap CSS into the web page, provided web page is located outside of CSS folder.

Bootstrap Typography

You can use HTML headings, from <h1> to <h6> as usual while working with Bootstrap framework. See example below for <h1> to <h6> headings.

The font size from .h1 to .h6 are kept 36px, 30px, 24px, 18px, 14px and 12px respectively. While the font-weight is semibold.

You can change the color by using style attribute of HTML in the headings or may add your own CSS.

CSS body text

The default font size of the body text is kept 14px. The line-height is 1.428. Let us show this by using the <p> tag with some text.

Creating lists in the web pages

Following example shows how to create an ordered (numbered and alphabetic) and unordered lists under the Bootstrap framework.

Bootstrap CSS Table

Bootstrap framework also provides classes for tables in your web pages. You may use cool styles and effects in the table by using those classes. A few CSS classes provided are: .table-striped (for stripped rows) .table-bordered (for bordered table) .table-hover (with hover rows) To learn more about tables go to its chapter here: Bootstrap CSS Tables CSS For

7 - BOOTSTRAP HTML

A basic Bootstrap table example

The following example uses the .table class of Bootstrap CSS to create a table. The created table is without the borders.

As you can see online, a table is created without the borders around a table and its rows. The headings are bold while table data is left aligned.

Bootstrap stripped rows example

Following example uses the table-striped class to create the stripped rows in a table.

You can see, the first row’s background is light grey and the next is white. The next row is light grey and so on. The rows are styled by the :nth-child CSS selector, which is not compatible with IE 8. So if you have no issue with older browsers then you can simply use this class. And look how simple it is to create a beautiful stripped table with Bootstrap framework.

Creating a bordered table example

Following example creates a bordered table using the same data as in the above examples by using the .table-bordered class.

Hover rows table example with Bootstrap

As mouse comes over a row in a table, the background color will change. This style looks nice and especially for long tables it enables users to differentiate the ‘seen’ rows to the others in a table. You can create hover rows by using the .table-hover class. Look at an example below that shows how easy it is to create a hover style table.

You can also add table-bordered in the <table> tag to add the border in hovered style. See example below:

You can see, a table with hover rows and a border is created by using table classes of Bootstrap framework.

Adding Bootstrap classes to rows

In the above example, we have seen how to apply Bootstrap CSS classes to the table tag. You can also apply classes to individual rows or even table data elements in your web pages. For example showing a row as “active”. Following are a few examples of using the CSS classes in the rows.

Example of using classes in the rows

The following example uses success, active, info classes in a table with a border. The rows can be differentiated by different colors.

Note that, names in the table are just for illustration purpose.

Example of using the classes in the table data

You can also use these classes in to distinguish data in the table. See example below:

Responsive Tables with Bootstrap

As such, Bootstrap framework is mobile first; how come Bootstrap tables cannot be responsive! As the screen gets smaller, the behavior of a table also changes to give the best user experience. If you simply use the above examples in smaller devices like under 300* resolution, the horizontal bar comes in at the browser level. To make the user experience much better, you can wrap table into .table-responsive.

You can simply create a div above the table and wrap that table into the table-responsive class. If the screen resolution is less than 768px then the table will scroll horizontally. Following example shows how to use it:

<!DOCTYPE html>

<html>

<head>

<title>Tables</title>

</head>

<body>

<div>

<h1>Bootstrap Table example</h1>

<tr>

<th>Employee Name</th>

<th>Emplyee Salary</th>

<th>Emplyee Age</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Shena</td>

</tr>

<tr>

<td>Shaun</td>

</tr>

</table>

</div>

</body>

</html>

50-game

1. HTML – OVERVIEW

Basic HTML Document

HTML Tags

HTML Document Structure

The <!DOCTYPE> Declaration

2. HTML – BASIC TAGS

Heading Tags

Example

This isHeading 1

This isHeading 2

This isHeading 3

This isHeading 4

This isHeading 5

This isHeading 6

Paragraph Tag

Example

Line Break Tag

Example

Centering Content

Example

Horizontal Lines

Example

Preserve Formatting

Example

Nonbreaking Spaces

Example

3. HTML – ELEMENTS

HTML Tag vs. Element

Nested HTML Elements

Example

This is italic heading

4. HTML – ATTRIBUTES

Example

Core Attributes

The Id Attribute

Example

The title Attribute

Example

Titled Heading Tag Example

The class Attribute

The style Attribute

Internationalization Attributes

The dir Attribute

Example

The lang Attribute

Example

The xml:lang Attribute

5. HTML - BACKGROUNDS

Backgrounds

Bgcolor

Background

Try It Out!

6.HTML – COLORS

Color Values

Web Safe Colors

16 Million Different Colors

7.HTML – LISTS

HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).

Unordered Lists

Ordered Lists

Definition Lists

Try It Out

8. HTML - LINKS

The Anchor Tag and the Href Attribute

The Target Attribute

Email Links

The Anchor Tag and the Name Attribute

9.HTML - IMAGES

The Image Tag and the Src Attribute

The Alt Attribute

Image Dimensions

10.HTML - TABLES

Tables and the Border Attribute

Headings in a Table

Cell Padding and Spacing

Table Tags

Table Size

Table Width

Layout