dimanche 28 juillet 2013

JavaScript Tutorial - Table of contents

Posted by Unknown on 08:37 with No comments

  • Introduction
    A brief introduction to the tutorial and what you can expect to learn.
  • Lesson 1: What is JavaScript?
    Learn about JavaScript, who created it, what JavaScript can and cannot do.
  • Lesson2: Your First JavaScript
    Learn how to include JavaScript in your web page, how to use comments in your code, and write your first JavaScript script.
  • Lesson 3: Events
    In the previous lesson you encountered the onload event and used it to check whether JavaScript was working in your browser. Here you learn what events are, why they are important to control your web page behavior with JavaScript, and which core events to look out for in your scripts.
  • Lesson 4: Variables and Constants
    A JavaScript program is mostly about processing data. Variables and constants are the building blocks of programming. In this lesson you will learn how to create variables and constants to store and manipulate your data.
  • Lesson 5: Smarter Scripts with Operators
    Every program, even the simplest one, contains some logic. In this lesson you will learn how to use mathematical, logical, and comparison operators to give some intelligence to your web page.
  • Lesson 6: Even Smarter Scripts with if…else and switch
    We’ll be looking at how you can instruct your web page to make choices on the basis of some given condition.
  • Lesson 7: Leave Boring Repetitive Stuff to JavaScript with Loops
    Loops can repeat parts of a script. In this lesson, we look at loops such as while and for.
  • Lesson 8: Package your JavaScript Code with Functions
    In previous lessons you applied core programming concepts to make your web page behave as you wanted to. You also used JavaScript built-in functions such as alert() and document.write(). Now you will learn to create your own functions to better organize your code.
  • Lesson 9: A Gentle Introduction to Objects
    Modern programming languages such as JavaScript, PHP, etc., all support a programming model called Object Oriented Programming (OOP). You’ve already used variables and constants to store your data; objects are just another way of storing data and of giving you more power to manipulate that data. You will be introduced to core JavaScript built-in objects in the following lessons.
  • Lesson 10: JavaScript Objects - Strings
    You’ve been using the string (text) object since the beginning of these lessons. Here for the first time you will learn how to exploit all its power as a JavaScript object.
  • Lesson 11: JavaScript Objects - Date Object
    Learn to use the Date object to work with dates and times dynamically. You will be able to get today’s date, learn how to set a specific date, and how to display the time on your web page.
  • Lesson 12: JavaScript Objects - Math Object
    Performing complex mathematical calculations with JavaScript is a breeze. You will be able to use the Math object to build a square root calculator application.
  • Lesson 13: JavaScript Objects - Arrays 
    In this lesson, you will learn what an array is, how it is used, and what it can do.
  • Lesson 14: JavaScript Living Space - the Browser Environment
    Your JavaScript code comes alive in the context of a browser. Learn more about how the JavaScript language conceptualizes its own environment.
  • Lesson 15: Useful Tasks (I) – Setting and Retrieving Cookies
    At this point you're ready to explore how JavaScript performs some real world tasks. Here is how you can set and retrieve cookies, that is, small text files that store visitors’ preferences for personalization purposes.
  • Lesson 16: Useful Tasks (II) – Form Validation
    Our second real world task is so widely known that couldn’t have been overlooked. Learn how to ensure website visitors fill out your form correctly.
  • Lesson 17: JavaScript Timing Events
    In this lesson you will learn how to write JavaScript code that executes after a certain time interval. As a practical application of this technique, think about those nice photo galleries where a photo fades out as the next one fades in at specified time intervals.
  • Lesson 18: Making AJAX Calls
    AJAX (Asynchronous JavaScript and XML) is the buzzword of 21st century web applications, and JavaScript is a big player. In this lesson you learn how to make your web page behave smoothly and responsively just like a desktop application.
  • Lesson 19: Short Introduction to jQuery
    No JavaScript course could be complete without at least an introduction to the most widely used JavaScript library of our time,jQuery. Learn how to include jQuery in your projects and start using it to easily access elements and events in your web page.
  • Lesson 20: Cool Animation Effects with jQuery
    Learn how easy it is to add bells and whistles to your web page with jQuery.
  • Lesson 21: Easy AJAX Calls with jQuery
    In lesson 18 you learned to make AJAX calls the hard way. In this lesson you are going to perform the same task the jQuery way, that is, the fast and simple way.

ASP Tutorial - Table of contents

Posted by Unknown on 08:36 with No comments

PHP Tutorial - Table of contents

Posted by Unknown on 08:34 with No comments


CSS Tutorial - Table of contents

Posted by Unknown on 08:32 with No comments


Lesson 15: The final tips

Posted by Unknown on 08:30 with No comments


Congratulations, you have now reached the final lesson.

So now I know everything?

You have learned a lot and you are now capable of making your own websites! However, what you have learned are the basics and there is still a lot more to be mastered. But you now have a good foundation from which to build on.
In this last lesson, you will get some final tips:
  • First, it is a good idea to maintain order and structure in your HTML documents. By posting well arranged documents you will not only show others your mastery of HTML but will also make it considerably easier for yourself to keep an overview.
  • Stick to the standards and validate your pages. This cannot be stressed enough: Always write clean XHTML, use a DTD and validate your pages on validator.w3c.org.
  • Give your page contents. Remember that HTML is a tool, which enables you to present information on the Internet, so make sure that there is information to present. Pretty pages may look nice but most people use the Internet to find information.
  • Avoid overloading your pages with heavy images and other fancy stuff you have found on the Internet. It slows down the loading of the page and could be confusing for visitors. Pages that take more than 20 seconds to load can lose up to 50% of their visitors.
  • Remember to add your website to search engines/directories so people other than your closest family can find and enjoy it. On the front page of all search engines, you will find a link to add new pages (The most important is Google, but there are also others likeDMOZ, Yahoo, AltaVista, AlltheWeb and Lycos).
  • In this tutorial, you have learned to use Notepad, which is a simple and very easy to use editor, but perhaps you will find it helpful to use a more advanced editor which gives a better overview and more possibilities. You can find a summary and reviews of different editors on Download.com.

How do I learn more?

First of all, it is important that you continue to work and experiment with the things you have learned in this tutorial. Study other people's websites and if you find something you like see how it was made with "View Source" (Click "View" in the menu in your browser and choose "Source").
View source
Search the Internet for examples and articles on HTML. There are lots of websites with great contents on HTML.
Read and ask questions in the Forums. This is where you meet the real experts from whom you can learn a lot.
Last, but not least, you should - whenever you feel ready - continue learning CSS in our CSS Tutorial.
The only thing left is to wish you hours of fun with your new friend, HTML.
See you on the Internet :-)

Lesson 14: Web standards and validation

Posted by Unknown on 08:29 with No comments


In this lesson, you will get a little more theoretical knowledge on HTML.

What more is there to know about HTML?

HTML can be coded in many different ways. And browsers can read HTML in just as many ways. You could say that HTML has many dialects. That is why some websites look different in different browsers.
There have been attempts to make a common standard of HTML through the World Wide Web Consortium (W3C) founded by Tim Berners-Lee (yep! the great guy who invented HTML). But it has been a long and tough road.
In the old days - when browsers where something you had to pay for - Netscape was the dominate browser. Back then, the most supported HTML standard where called 2.0 and later 3.2. But with a market share of over 90% Netscape did not have to - and did not - care much about common standards. On the contrary, Netscape invented their own strange elements, which did not function in other browsers.
For many years Microsoft almost completely ignored the Internet. After a while they took up the competition with Netscape and introduced a browser. The first versions of Microsoft's browser, Internet Explorer, were not any better than Netscape at supporting the HTML standards. But Microsoft chose to give away their browser for free (always a popular thing to do) and Internet Explorer soon became the most popular browser.
From version 4 and 5 Microsoft aimed to support more and more of the HTML standards from W3C. Netscape did not manage to develop a new version of their browser and continued to distribute the outdated version 4.
The rest is history. Today the HTML standards are called 4.01 and XHTML. Now it is Internet Explorer that has a market share of over 90%. Internet Explorer still has its own strange elements but it also supports the W3C HTML standards. And so do all of the other browsers, such as Mozilla, Opera and Netscape.
So, when you code HTML following the W3C standards, you make websites that can be seen in all browsers - both now and in the future. And luckily, what you have learned in this tutorial is a new and stricter and cleaner version of HTML called XHTML.

How do I tell which version is used?

With all the different types of HTML you need to tell the browser which "dialect" your HTML is in, in your case XHTML. To do that, you use a Document Type Declaration. The Document Type Declaration is always written in the top of the document:
Example 1:
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

 <head>
 <title>Title</title>
 </head>

 <body>
 <p>text text</p>
 </body>

 </html>
Besides the Document Type Declaration (the first line in the example above), which tells the browser that you want to write XHTML, you also need to insert some extra information in the html tag with the two attributes xmlns and lang.
xmlns is short for "XML-Name-Space" and should always have the value http://www.w3.org/1999/xhtml. That is all you need to know. But if you have a big hunger for complicated knowledge you can read more about namespaces on W3C's website.
In the lang attribute you state which language the document is written in. For this the ISO 639 standard is used, which lists codes for all the languages in the world. In the example above the language are set to English ("en").
With a DTD the browser knows exactly how it should read and show your HTML. Hence, use the example above as template for all your future HTML documents.
The DTD is also important when you want to validate your pages.

Validate? Why and how should I do that?

Insert a DTD in your pages and you can always check your HTML for errors by using W3C's free validator.
To test this out, make a page and upload it to the Internet. Now, go to validator.w3.org and type the address (the URL) of your page and validate it. If your HTML is correct you will get a congratulations message. Otherwise you will get an error report telling you exactly what and where you have done something wrong. Make some errors on purpose to see what happens.
The validator is not just helpful to locate an error. Some browsers try to compensate for lack of skills among web developers by trying to fix errors in the HTML and showing the page as they guess it should look. With such browsers, you might never see an error in your own browser. However, other browsers might guess differently or not show the page at all. The validator can help you find errors you did not even know existed.
Always validate your pages to be sure they will always be shown correctly.

Lesson 13: Uploading pages

Posted by Unknown on 08:28 with No comments

Lesson 13: Uploading pages

Until now, only you have had the satisfaction of viewing your pages. Now it is time for the rest of the world to see your masterpieces.

Is the world ready for that?

The world is ready - you soon will be too. To get your website on the internet, you just need some server space and a free FTP program.
If you have Internet access, you might already have some free server space for your website. Your server space will then probably be called something like http://home.provider.com/~usernumber. But you might need to activate it first. Read more about this in the papers from your Internet provider or on their support pages.
Another option is to get some free server space on the Internet. In the same way that you set up an e-mail account (at for example Hotmail), you can register for free server space on the Internet. Several companies offer such a service - among them000webhost.com (click "Order Now" under "Free Hosting") - it will only take a couple of minutes to register.
To have access to the server, you need to know the "Host Name" (For example, ftp.htmlnet.site50.net) and have your username and password ready.

Is that all I need?

To access the server and upload your pages, you also need an FTP program. FTP is short for File Transfer Protocol. A FTP program is used to connect two computers over the Internet so that you can transfer files from your computer to another computer (the server). You might not have such a program yet, but fortunately, this can be downloaded for free.
There are many different FTP programs. One of the better is FileZilla, which is entirely free. So now you can download FileZilla at filezilla.sourceforge.net.

And how do I upload the pages?

Described below is how you upload your pages to a free account at 000webhost.com with FileZilla. But the procedure is, more or less, the same for all providers and FTP programs.
Open the FTP program while connected to the Internet. Insert "Host Name" ("ftp.htmlnet.site50.net" under "Address"), username (under "User") and password (under "Password") and click "Connect". You should now have access to the server. In one side of the program you can see the contents of your computer ("Local Site"), and in the other side, you can see the content of the server ("Remote Site"):
FileZilla
Find your HTML documents and images on your computer (on the "Local site") and transfer them to the server (the "Remote site") by double clicking on them. Now the whole world can see them! (For example, at the address http://htmlnet.site50.net/page1.htm).
Name one of the pages "index.htm" (or "index.html") and it will automatically become the start page. i.e. if you type http://htmlnet.site50.net (without any filename) you will actually open http://htmlnet.site50.net/index.htm.
In the long run, it might be a good idea to purchase your own domain (for example www.your-name.com or www.your-name.net) and avoid the long and complicated addresses you are being assigned by your Internet provider or from providers of free server space. You can find and purchase domains at for example Speednames or NetworkSolutions.

Lesson 12: Layout (CSS)

Posted by Unknown on 08:26 with No comments
Wouldn't be great if you could give your pages the layout they deserve?

Sure, but how?

To give your website layout use Cascading Style Sheets (CSS). In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from scratch in our CSS tutorial. So please consider this lesson only as an appetizer.
CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
As shown in Lesson 7, CSS can be added with the style attribute. For example, you can set the font type and size on a paragraph:
Example 1:
 
 <p style="font-size:20px;">This is typed in size 20px</p>
 <p style="font-family:courier;">This is typed in Courier</p>
 <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>
Will look like this in the browser:
This is typed in size 20px
This is typed in Courier
This is typed in Courier size 20px
In the example above we use the style attribute to specify the type of font to be used (with the command font-family) and the font size (with the command font-size). Notice how in the last paragraph we set both the font type and size with a separating semicolon.

It seems like a lot of work?

One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:
Example 2:
 
 <html>

   <head>
   <title>My first CSS page</title> 

   <style type="text/css">
    h1 {font-size: 30px; font-family: arial;}
    h2 {font-size: 15px; font-family: courier;}
    p {font-size: 8px; font-family: "times new roman";}
   </style>

   </head>

   <body>
   <h1>My first CSS page</h1>
   <h2>Welcome to my first CSS page</h2>
   <p>Here you can see how CSS works </p>
   </body>

 </html>
In the example above CSS has been inserted in the head section and therefore applies to the entire page. To do this, just use the tag <style type="text/css"> which tells the browser that you are typing CSS.
In the example all headings on the page will be in Arial in size 30px. All subheads will in Courier size 15. And all text in normal paragraphs will be in Times New Roman size 8.
Another option is to type the CSS in a separate document. With a separate CSS document you can manage the layout of many pages all at once. Pretty smart if you want to change the font type or size on a large website with hundreds or thousands of pages. We won't go into that now but you can learn it later in our CSS tutorial.

What else can I do with CSS?

CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with:
 
 <p style="color:green;">Green text</p>

 <h1 style="background-color: blue;">Heading on blue background</h1>

 <body style="background-image: url('http://www.html.net/logo.png');">
Try inserting the examples in some of your pages - both as shown above and also as CSS inserted in the head section.

Is CSS nothing but colours and font types?

Besides adding layout such as colors, font types etc., CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
Example 3:
 
 <p style="padding:25px;border:1px solid red;">I love CSS</p>
Will look like this in the browser:
I love CSS
With the property float an element can either be floated to the right or to the left. The following example illustrates the principle:
Example 4:
 
 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
  quis nostrud exerci tation ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat...</p>
Will look like this in the browser:
Bill GatesLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
In the example, one element (the image) floats to the left and the other element (the text) fills the hole.
With the property position, you can place an element exactly where you want it in your page:
Example 5:
 <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
In the example the image is placed 50 pixels from the bottom and 10 pixels from the right in the browser. But you can place it exactly where you want it. Give it a try. Pretty easy and pretty cool, eh?

Cool, sure. But easy?

You do not learn CSS in 10 minutes. And as mentioned above, this lesson is only meant as a brief introduction. Later you will learn much more in our CSS Tutorial.
For now, concentrate on HTML, and move on to the next lesson where you will learn how to get your website out on the Internet so the whole world can see it!

Lesson 11: More about tables

Posted by Unknown on 08:25 with No comments


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 2Cell 3Cell 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 1Cell 2
Cell 3Cell 4Cell 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 1Cell 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 10: Tables

Posted by Unknown on 08:21 with No comments

Lesson 10: 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 1Cell 2
Cell 3Cell 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 1Cell 2
Cell 3Cell 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 1Cell 2Cell 3Cell 4
Cell 5Cell 6Cell 7Cell 8
Cell 9Cell 10Cell 11Cell 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 1Cell 2
Cell 3Cell 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 9: Images

Posted by Unknown on 08:19 with No comments

Lesson 9: Images

Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page?

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="david.jpg" alt="David" />
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):
HTML.net's logo
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):
HTML.net's logo

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:
HTML.net logo
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:
HTML.net logo
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:
HTML.net logo
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.
That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.
That's enough about David Hasselhoff and images for now.

Inscription à : Articles (Atom)