MECHANICAL,CSS,HTML

Friday, 13 July 2012

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.

The final tips

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 like DMOZ, 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").

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 :-)

Web standards and validation

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.

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 them webhost.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"):

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

Wednesday, 11 July 2012

Making An Image a Link

This code will create the google logo which will link to the html tips homepage:

Insert the code above onto one line and you will get this:

Open a Page in a New Window

To have a link in which, when a viewer presses it, will open a page in a new window, you need to listen to this:
Insert something like this:

<A HREF="http://www.google.com/" TARGET="_blank">Open Google in a New Window</a>

And look at what happens:
Open Google in a New Window

Automatically Redirect Visitors

To redirect anyone who visits your site, automatically, you just need to insert html:

<meta HTTP-EQUIV="REFRESH" content="0"; url=http://www.google.com">

See the content = "0" thing?
Change the zero to change the amount of seconds before your viewer will be redirected.
I decided not to show an example on this site.

Images Clickable in Different Areas

Before, looking at these HTML tips and tricks, be sure to know the tips on links and images.

Look at the following:

It's one image (the Google logo). However, try clicking on different parts of the image. It leads you to different web pages. The code below made the HTML tip:

<img src="http://www.google.com/images/logo.gif"
usemap=#GoogleImageMap>
<map name=GoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</map>

The first line inserts an image, called logo.gif. usemap=#GoogleImageMapcalls the clickable areas GoogleImageMap. You can change the name GoogleImageMap to any other name you want, like GoogleLetters. Then, you have the 'Image Map':

<map name=GoogleImageMap>
<area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</map>

Make sure you change GoogleImageMap to the name of your image map. The italicized numbers stand for the right, top, left and bottom edges of each clickable rectangle area. The E letter, for example, has 227 as the right edge, 0 as the top edge, 275 as the left edge and 109 as the bottom edge. To find the coordinates of a clickable rectangle in any picture, you can copy and paste the picture into Paint. (See Note below to find out how to find out the numbers.) The href="http://..." tells which web page the viewer will go to when he/she clicks on the rectangle.

Try clicking everywhere around the E. You will see that in the rectangle defined by the coordinates 227,0,275,109 goes to http://en.wikipedia.org/wiki/E.

Remember, you can add and delete areas in order to add or remove clickable rectangles:

<img src="http://www.google.com/images/logo.gif"
usemap=#SecondGoogleImageMap>
<map name=SecondGoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,275,109 href="http://en.wikipedia.org/wiki/Le">
</map>

Above I have removed the rectangles for O,G,L,E but added a rectangle for Le. Here is the result:

These tips and tricks can add a few touches of proffesionalism to the pictures on your web page! Remember to check out a few other tips in this web site!

NOTE: To find out the numbers next to coords that define a rectangle, copy and paste the image into Paint. Move your mouse across the image and look at the bottom left corner of Paint. You will see two numbers (for example, 47,56). 47 shows how far left your mouse is, and 56 shows how for down your mouse is. To find out the first two numbers you need to put next to coords=, move your mouse to the upper left of the rectangle you want, then look at the two numbers at the corner. To find out the last two numbers, move your mouse to the lower right of the rectangle, then look at the two numbers at the corner.

Build a Web Page

This tip will tell you exactly how to code your own HTML website.

First, remember that most tags must be eventually closed. The syntax would be: <tag> CONTENT </tag>.

Open a text editor such as notepad, or the HTML editor for your hosting service.

The first tag in your website should be <html>, which starts the HTML site.
Immediately after this should come the <head> tag.

So far, you should have the following:

<html>
<head>

The next step is to enter the title of your website. This is what shows up in the title bar of the internet browser. Put the title between the <title> and </title>. Then, end the head with </head>. You will end up with:


<html>
<head>
<title>TITLE</title>
</head>

Other data to put into the head includes metadata and stylesheet data.

The next step is to add the body of your website. This is where all the important stuff goes. Start out the body with the <body> tag. In a basic website, all the real content goes in the body.

The most basic way to write the body is to simply write a heading, then type.

Within the body, start off by writing the first heading. This should be big, so the <h1> tag should do the trick. After that, simply write the text of the site. Remember the syntax for making links:

<a href="http://www.linktarget.com">LINK</a>

And for making images:

<img src="http://imagesite.com/image.jpg"> .

Remember, most HTML Tips can be simply inserted into the body and used immediately.

Finish off the body with </body>, and the body is done.

The code with the body included should look like:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>

Remember, you still have 1 more tag to close: the <html> tag. Close it with </html>, and your website is complete. The final code:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>
</html>

If you want to see what that code looks like in a real web browser, go to this page, which uses the exact HTML code above:

Test Site

Your basic website is complete! For more advice on tables, frames, text formatting, Javascript, etc., look at the rest of the tips on this site. Almost all of them can simply be inserted in the body. Now you know how to make your website from HTML!

Also, if you are using Blogger, you can go to the "template" section of the dashboard, and edit the template, which is raw HTML. Be careful not to change too much stuff. The beginning data is stylesheet data, so don't mess around unless you know what you're doing. However, you can find the sidebar, and mess around with that quite freely.

You can always use a program like Frontpage or Dreamweaver, but raw coding is always the best way to make your website exactly like you want it!

Links and Images Basics

These tips and tricks will teach you how to put a link or an image into an html page.

To put a link, use the following code:
<a href="http://google.com">Google</a>
The result is as follows:

Google

Make sure you change "http://google.com" to the address of the site that you want to link to and that you change "Google" to the text that you want users to see.

To put an image into your web page, use the following code:
<img src="http://www.google.com/intl/en/images/logo.gif">
The result of that code is as follows:

Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.

Sunday, 8 July 2012

Set a Default Scripting Language

You can specify a default scripting language for all your script tags to use.

This saves you from having to specify the language everytime you use a script tag within the page.

HTML Code:

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

Alternate Information for Older Browsers

You can also provide alternative info for users whose browsers don't support scripts (and for users who have disabled scripts). You do this using the <noscript> tag.

HTML Code:

<script type="text/javascript">
   <-- Hide from older browsers
    alert("I am a script. I ran first!")
    Unhide -->
</script>

<noscript>
You need JavaScript enabled to view this page.
</noscript>

Hide Scripts from Older Browsers

Athough most (if not all) browsers these days support scripts, some older browsers don't. If a

browser doesn't support JavaScript, instead of running your script, it would display the code to

the user. To prevent this from happening, you can simply place HTML comments around the

script. Older browsers will ignore the script, while newer browsers will run it.

HTML Code:

<script type="text/javascript">
   <-- Hide from older browsers 
    alert(" script. I ran first!")
    Unhide -->
</script>

Triggering a Script

In many cases, you won't want the script to run automatically. You might only want the script to run if the user does something (like hover over a link), or once the page has finished loading.

These actions are called intrinsic events (events for short).

There are 18 pre-defined intrinsic events that can trigger a script to run. You use event handlers to tell the browser which event should trigger which script. These are specified as an attribute within the HTML tag.

Lets say you want a message to display in the status bar whenever the user hovers over a link. The act of hovering over the link is an event which is handled by the onmouseover event handler. You add the onmouseover attribute to the HTML tag to tell the browser what to do next.

HTML Code:

Treat yourself to a <a href="http://www.great-workout.com/killer-ab-workout.cfm" onMouseover="window.status='Go on, you know you want to'; return true">Killer Ab Workout</a>

On Responsive Images

Apr62012

There is a real need for serving media that is appropriate for the device and circumstance, since we know so little about any particular web request. I recently posted a blog post with so many images on it the page weighed in at 2.29 MB. I should have posted a warning when I tweeted it:"Don't click this if on a 3G network, it probably take forever, just check it out when you get home."

Ideally, all those images I served up could have had a lower-res version of themselves that display on browsers with smaller browser window sizes and/or slower connection speeds. Even in cutting edge browsers, there is no native way to do this yet. So it's a good time to start talking about how we want that to work as web builders. Perhaps we can influence how the spec shapes up.

Let's limit this conversation to inline raster images. As in, the things today served as <img>. As I see it there are three paths we can go.

Create new element that exists just to serve this problem.
Create a new image format designed to solve this problem.
Do nothing, fix our problems with other technologies.

Each of them has advantages and disadvantages. Let's look at each.

Create New Element

The syntax would be:

</picture>

pros

Mimics other media syntax like <video> and <audio>, which makes sense.
The fallback makes it backwards-compatible with browsers that don't support it, which is extremely important. We can't have images that just don't work in older browsers.
Gives us web authors the control to show exactly what we want under situations we specify.

cons

It's a whole lot more complicated than <img>. Harder to teach, harder to learn, more code to write. Easy to screw up.
Muddies the water of CSS and HTML a bit, by bringing the media query syntax into HTML.
Similar issues to why inline styles are bad. Makes future updates more difficult. Not a reusable abstraction.

New Image Format

This new image format would essentially have multiple versions of itself inside of it.

Which image is delivered by a program like a web browser is a determination that can be made by a virtual handshake between the browser and the web server.

So perhaps the file is 800k all together, but within it is four different versions of itself: 500k, 200k, 50k, 10k. Through some kind of standardized set of rules, one of those four images would come across and be displayed by the browser.

Seem like a fantasy? There is already an image format like this called FlashPix, which handles even more drastic versioning. Think new image formats are impossible to implement? WebP is gaining support at a decent pace.

Ultimately the syntax would remain just as it is now:

I just made up that file extension, but "responsive PNG" would be fine with me.

Christopher likes this approach because

it allows the continued use of the IMG element which is ingrained into the bones, the very marrow, of the Web.

I like that thinking. No need to turn our backs on an element which has worked so well for so long. But of course we wouldn't. There is no need to replace <img>, only build upon it and offer alternatives.

pros

Keeps the syntax simple. Works the same way it always has.
Keeps authoring simple as well. One file, not multiple. Adoption would probably be quicker and more people would actually do it (less people would make 4 versions of every image and hand craft queries to serve them).

cons

Possible loss of control. In order to keep things simple, the image format would do the logic of what exactly gets served. Will it always make the right call? What does it factor in? Parent container width? Network connection speed? Pixel density? A combo?
Not backwards-compatible. What happens in browsers that don't support the new format?

Other Technologies

We could certainly lean on JavaScript to help us here. It could help us with the new image format, for one. We would use regular old png's and jpg's in our <img> and hot-swap the src with the new format for a while until the new format has ubiquitous support. A little heavy-handed perhaps, but workable.

And if it can do that, maybe we should just let it solve the entire problem. JavaScript is able to do all the "tests" we likely need it to do (e.g. window size testing, network speed testing), and it could be in charge of swapping our the src of our images with more appropriate ones. The foresight.js by Adam Bradley library is doing that already. Perhaps that is what JavaScript is for and we don't need to interfere.

Think the client-side nature of JavaScript isn't ideal? There are a couple of solutions that bring things server-side.

Adaptive Images by Matt Wilcox is a ridiculously clever solution that using a tiny sprinkle of JS just to measure the current screen size and set a cookie, and then all requests for images are routed through some PHP which determines which version of an image to server, appropriate to screen size.

Sencha.io Src is another solution that is completely JavaScript-free. It does UA sniffing to determine the device and makes the call on what size image to serve up based on that. You simply prefix the src of the image with Sencha's service URL:

That's the simplest possible usage, it can get a lot fancier than that. It's a third-party Beta service though, so be aware of the inherit concerns of that (e.g. they go down, your images don't load). I imagine it will ultimately be a paid service.

pros

We don't rock the boat of standards.
No waiting for browsers to catch up on supporting anything new.

cons

Is this just ignoring the problem? Aren't standards supposed to help with real problems?
The code needed to do this right is heavy-handed.