Monday, December 20, 2010

HTML
Hyper Text Mark-Up Language

Image to HTML Converter.Most web pages are made up of HTML files linked to separate image files. Here's a way to embed an image directly into an HTML file. Enter the URL of any JPEG, PNG or GIF on the web:


How does it work?
A table is created which is filled with large numbers of 1x1 cells. Each cell has a background colour of the corresponding pixel in the image. That's all it is; just a massive grid of coloured table cells. View the source to see the details or browse the Perl script which generates the table.


Why does it take so long to load?
Tables are an inefficient way of encoding detailed graphics. A normal image file takes about two bytes to encode each pixel. By contrast the HTML version takes nearly fifty bytes to do the same. This means the size of the file is very large.To combat this, the HTML table uses basic RLE compression. Runs of multiple cells on the same row with the same colour are merged into one cell using the COLSPAN attribute. One could achieve higher compression ratios by also merging cells that had very similar colours; thus making the format 'lossy'.


Why does it take so long to display?
Web browsers are designed to display image files; they aren't optimised for 10,000 cell tables. To help the browser out, the table is chopped up into smaller tables, each containing about 15 horizontal lines. This allows browsers like MSIE to render the chunks independently without having to wait for the entire image to load. Other browsers such as Mozilla don't care, since they are capable of rendering tables as they load.So it's big, bloated and slow. What use is this?In its pure form, none. At least none that I can think of.
However, it is the seed for a powerful tool. Combining table-based images with JavaScript opens the door to the creation and manipulation of dynamic content. Take a look at this simple example of a column of navigation buttons. Each of the arrows is a clever mix of graphics (for the tip), text (for the label) and simple table-based imagery (for the borders, and background). JavaScript is used to bring the whole thing together and to animate it on mouse roll-overs. Using pure graphics would have involved loading ten different images (instead of two) and would have made it more difficult to create or edit the text on the buttons.The lesson here is to think outside the box. Images and HTML are more interchangeable than they look. With a little imagination one can make small, dynamic and visually appealing content without resorting to Flash or Shockwave.



HTML are initials that stand for Hyper Text Markup Language

* Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
* Text is what you will use. English letters, just like you use everyday..
* Markup is what you will do. You will write in plain English and then mark up what you wrote.
* Language. Some may argue that technically html is a code, but you write html in plain, everyday English language.

HTML is the code behind your webpage and is what your browser looks for to display a webpage, the way the webdesigner intended it to look, and is a series of tags that tells the browser where to display what. It is really a series of simple commands that you give to the browser, just like telling your dog to sit, and because it is in plain English it is easy to learn. For example, if you want your text to show in a bold type, you command it to be bold text , it really is that easy.

Keep this in mind: HTML documents must be text only.
When you save a HTML document, you must save only the text, nothing else. HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.
Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

If you are going to start learning to write HTML, it is a good idea to learn to look at other authors' HTML pages. The actual html potion of the page behind the pretty page you see in front of you now.Looking at another's html code helps you learn how things are done and you can copy the style of pages that you like. Please do not just steal and copy the pages, but no one will be upset if you make the style in much the same way. For example, if you were going to build a house, you would look around to see what styles you like before deciding on your own design. Same thing here, look around the web and see what styles you like and apply them to your own ideas.Here's how you look at an HTML document (known as the "source code")

* When you find a page you like, click on VIEW at the top of the screen.
* Choose SOURCE from the menu.
* The HTML document will appear on the screen.Table Example
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

How the HTML code above looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2



Create Images
<img car="url"="some_text"/>
<img car=""car.gif"alt="Big Car"/>

Create A Link
<a lik="url">Link text</a>
<a lik="http://www.w3schools.com/">Visit W3Schools</a> 
<a lik="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>


Create Table


row 1, cell 1
row 1, cell 2


row 2, cell 1
row 2, cell 2