MECHANICAL,CSS,HTML

Wednesday, 11 July 2012

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.

Base64 Encode of 1x1px Transparent GIF

Just in case you need one. You can stretch it out to fill space as needed.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Or   a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

Post Data to an iframe

Doesn't take any JavaScript or anything. You just have the form's target attribute match the iframe's name attribute.

   
  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">
   
  <input type="submit" value="post">
   </form>
  <iframe name="my-iframe" src="iframe.php"></iframe>

The outer page doesn't even reload. But it might appear to at first glance since many browsers run the page-loading spinner in the tab when an iframe reloads.

If anyone else is having problems making this work try this for the iframe.php page:

&ltp>I’m probably being loaded inside an iframe.&lt/p>

&ltp>Text value: &lt?php echo $_POST["text"]; ?>&lt/p>

Thursday, 5 July 2012

SPECIAL

SOMETIMES WE HAVE TO SHOW LIKE <HTML> IN BROWSER IF WE TYPE THIS IN HTML CODE MEANS THE BROWSER WILL CONSIDER IT AS CODE(ORIGINAL) SHOW THE BROWSER WONT SHOW THIS TO THE USER.USING THE FOLLOWING CODES WE CAN DO THIS:

The Most Common Character Entities:

Result Description Entity Name Entity Number
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '

CLICK FOR CSS , AJAX, DTD, HTML.

HORIZONTAL RULE or LINE

Horizontal Rule

The <hr> element is used for horizontal rules that act as dividers between sections, like this:

________________________________________________________________________

H1,H2,H3...

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines
the smallest.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>

PARAM

param

Parameter of an object.

Attributes

name is used so that the element can be referenced and processed by the object.

Optional Attributes

value can be used to specify the value of the parameter.
id can be used to uniquely identify the element.
type can be used to specify the content type.
valuetype can be used to specify the content type of the value attribute. Values can be data, ref or object.

Example

<param name="movie" value="flash/penguin.swf" />

<param name="quality" value="high" />

</object>

OPTION

option

Defines an option of a selectform field.

Optional Attributes

selected can be used to specify that the option is initially selected. It must be used in the format selected="selected".
value can be used to specify a value for the option. If value is not used, the value of the option element is set to its contents by default.

Example

<option>Domestic Dog</option>

<option>Arctic Fox</option>

<option>Maned Wolf</option>

<option>Grey Wolf</option>

<option>Red Fox</option>

<option>Fennec</option>

</select>

TABLE

table

Defines a table used for tabular data.

Optional Attributes

summary can be used to provide a summary of the data represented in the table.
Note: There are other valid attributes (border, cellpadding, cellspacing, frame, rules, width) but they are purely presentational and so CSS should be used instead.

Example

<table>

<tr>

<th>Question</th>

<th>Answer</th>

<th>Correct?</th>

</tr>

<tr>

<td>What is the capital of Burundi?</td>

<td>Bujumburra</td>

</tr>

<tr>

<td>What is the capital of France?</td>

</tr>

</table>

STYLE

style

Used to define CSS at a page-level (as opposed to an external CSS file). A style element must appear inside the head element.

Required Attributes

type is used to specify the content type which is generally text/css.

Optional Attributes

media can be used to specify which media the styles are associated to. A value such as screen, print, projection, braille, speech or all can be used or a combination in a comma-separated list.
title can be used to assign a title to the styles within the element. This can be then be referenced by browsers or scripting languages to either disable the styles or switch between alternate style sheets.

Example

<style type="text/css">

body {

color: red;

background-color: yellow;

font-size: 80%;

}

p {

line-height: 1.5em;

}

</style>

MECHANICAL,CSS,HTML

Wednesday, 11 July 2012

Images Clickable in Different Areas

Images Clickable in Different Areas

Build a Web Page

Links and Images Basics

Sunday, 8 July 2012

Set a Default Scripting Language

Set a Default Scripting Language

Alternate Information for Older Browsers

Alternate Information for Older Browsers

Hide Scripts from Older Browsers

Hide Scripts from Older Browsers

Triggering a Script

Triggering a Script

On Responsive Images

On Responsive Images

Create New Element

pros

cons

New Image Format

pros

cons

Other Technologies

pros

cons

Base64 Encode of 1x1px Transparent GIF

Base64 Encode of 1x1px Transparent GIF

Post Data to an iframe

Post Data to an iframe

Thursday, 5 July 2012

SPECIAL

HORIZONTAL RULE or LINE

H1,H2,H3...

PARAM

OPTION

TABLE

STYLE

Physics basic inventions and inventors

Search This Blog