W3schools Offline Mode Latest Version Free Download

Hey friends Here I am giving you the offline latest version of w3schools for free download. Are you interested in web designing? I’m sure that most of you are interested. So you have to learn some basics in HTML, CSS, Java script to make your own website with great content and quality. If you have searched about web designing previously in Google you may have noticed that w3schools website ranks for most of the search terms. Yes they are since they are the most quality tutorial producers. But it must be sometime inconvenient to browse that website always online. What if this w3schools can be downloaded? Yes you can download the whole website now. Sounds crazy ? no its not.

Offline version of w3schools:

W3schools.com is the one of the best website that can used for learning nearly all most commonly used web designing languages. It serves us with tutorials on languages such as HTML, CSS, Java Script, PHP, SQL, Jquery. Now this website is available to download in the offline form.
On downloading this website in offline form you may be able to use most of this websites feature without any Internet connection you may gift this package to your friend who has a burning desire to developer knowledge in web designing field but no Internet connection.

How to use this?

Step 1:

First of all download the offline package of w3schools from the link given here. Don’t worry the size of the package is just ~2 Mb. Just download the package from the link given below.
Download : W3Schools Offline Latest Version

Step 2:

Now extract the package. The size of the package after extraction may be of up to 100+ Mb so keep some free space for it. The main file to open is situated in the folder www.w3schools.com . This folder has two files known as default. One is a notepad file and another is a html file. Double click on the html file. That’s it.

This offline package is just for quick reference and beginning. Because it does not have any pictures and live demonstration can’t be done.
So for full usage and live demonstration you must use W3schools website.
Offline version of this website will just look like below. Happy Learning.

 
Download : W3Schools Offline Latest Version

LESSON (11) HTML Forms

HTML forms are used to pass data to a server.

Browser Support

    

The <form> tag is supported in all major browsers.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

---

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.

---

Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

How the HTML code above looks in a browser:

First name:  
Last name: 

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

---

Password Field

<input type="password" /> defines a password field:

<form>
Password: <input type="password" name="pwd" />
</form>

How the HTML code above looks in a browser:

Password: 

Note: The characters in a password field are masked (shown as asterisks or circles). 

---

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How the HTML code above looks in a browser:

 Male
 Female

---

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car 
</form>

How the HTML code above looks in a browser:

 I have a bike
 I have a car

---

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

How the HTML code above looks in a browser:

Username:  

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

LESSON 10) More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.

Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:

Example 1:

 
 <table border="1">
   <tr>
  <td colspan="3">Cell 1</td>
   </tr>
   <tr>
  <td>Cell 2</td>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1
Cell 2	Cell 3	Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.

Example 2:

 
 <table border="1">
   <tr>
  <td colspan="2">Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
  <td>Cell 5</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:

Example 3:

 
 <table border="1">
   <tr>
  <td rowspan="3">Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
   </tr>
   <tr>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
	Cell 3
	Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.

Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.

Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.

LESSON 9)Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.

Example 1:

 
 <table>
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

What's the difference between <tr> and <td>?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:

3 different elements are used to insert tables:

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.

Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.

In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.

Example 2:

 
 <table>
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
   <tr>
  <td>Cell 5</td>
  <td>Cell 6</td>
  <td>Cell 7</td>
  <td>Cell 8</td>
   </tr>
   <tr>
  <td>Cell 9</td>
  <td>Cell 10</td>
  <td>Cell 11</td>
  <td>Cell 12</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:

Example 3:

 
 <table border="1">
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

The thickness of the border is specified in pixels (See lesson 9)

As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:

Example 4:

 
 <table border="1" width="30%">
 
 

This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.

More attributes?

There are lots of attributes for tables. Here are two more:

• align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
• valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.

Example 5:

 
 <td align="right" valign="top">Cell 1</td>
 
 

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.

In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.

Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.

LESSON 8 )Images

That sounds like a bit of a challenge...

Maybe, but in fact it is pretty easy to do. All you need is an element:

Example 1:

 
 <img src="kirti.jpg" alt="Kirti" />
 
 

would look like this in the browser:

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?

Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.

"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.

Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

Where do I get my images from?

To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.

Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or Macromedia Fireworks, which are three of the best image editing programs currently on the market.

However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program IrfanView which is so-called freeware and therefore costs nothing.

Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:

1. Right-click on an image on any image on the Internet.
2. Choose "Save picture as..." in the menu that appears.
3. Choose a location for the image on your computer and press "Save".

Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):

Now you can insert the image into one of your own pages. Try it yourself.

Is that all I need to know about images?

There are a few more things you should know about images.

First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:

Example 2:

 
 <img src="images/logo.png" />
 
 

Example 3:

 
 <img src="http://www.html.net/logo.png" />
 
 

Second, images can be links:

Example 4:

 
 <a href="http://www.html.net">
 <img src="logo.png" /></a>
 
 

will look like this in the browser (try clicking on the image):

Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.

The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:

Example 5:

 
 <img src="logo.gif" alt="HTML.net logo" />
 
 

Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.

The title attribute can be used to add information to the image:

Example 6:

 
 <img src="logo.gif" title="Learn HTML from HTML.net" />
 
 

Will look like this in the browser:

If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from HTML.net" appear as a pop-up box.

Two other important attributes are width and height:

Example 7:

 
 <img src="logo.png" width="141px" height="32px" />
 
 

will look like this in the browser:

The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.

If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:

Example 8:

 
 <img src="logo.gif" width="32px" height="32px" />
 
 

will look like this in the browser:

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.