Skip to main content

Beautify it with Hyperlinks and Images!


Now the time comes for the webpages to have few graphical content (images) and hyperlinks*. Yes, this is about images and hyperlinks. The images on a webpage produces a pleasing and attractive effect on the observer's side. And if a webpage has within itself the doors which open to new pages, it calls for a great interactive interface.

The images on a webpage are managed by the image element in html; <img> tag in specific. The images are specified in the tag with the help of the path address it is situated on your local directory or on your server. This path is incorporated in the "src" or the source attribute of the <img> tag.

You also have the "height" and "width" attributes in the <img> tag in order to have a fixed area covered by the exact image you want no matter if its smaller or bigger than your requirement, you can always work it down to your need.

Test code : ( Use this code to display images in your page )


<!doctype html>
<html>
<head>
<title>
My page still has a title within head tag
</title>
</head>
<body>
<img src="c:/images/image.jpg" width="104" height="142" />
</body>
<html>

 


 

Note: The address in your src attribute is subject to change with your image's location. Please give the location as per the format. And always remember to specify the correct extension for the image at the end eg: .jpg, .gif, .png etc.

 
Next is the hyperlinks to direct to a new page or address with a single click on the specified link. As we know the internet works on the interconnection of html documents across the websites. These links which provide a gateway to the other pages are the hyperlinks. We can create links easily with the <a> tag or Anchor tag and its attribute "href" which stores the reference address to which the page is to be directed and the text for link is displayed between the opening and closing tags. The anchor tag makes it a task of few character to divert to a new address from a link.

Test code : ( Use this code to direct to google.com by clicking the link )


<!doctype html>
<html>
<head>
<title>
My page still has a title within head tag
</title>
</head>
<body>
<a href="http://www.google.com/">This is a link</a>
</body>
<html>


NOTE: The above link will redirect the page to "google.com" when you click the text "This is a link" in the browser. Make notice that nothing about the address google.com will be displayed in the browser only the text between the anchor tag "This is a link" will be displayed.
Do type the "http://" before the address google.com else it may not work.



Labels:

Comments

Post a Comment

Popular posts from this blog

How to program pyramids using loops - 2

In this video tutorial, two of the more patterns have been discussed that relates to the similar pattern problems. What's different about these are that they also include spaces before the stars as a part of the pattern to be printed. Having this extra sub pattern to track spaces  in the desired pattern requires an extra loop to track and control it . For a brief review, We discussed that these patterns if observed carefully are just representation of tables i.e. a combination of rows and columns . And few of the cells in that table are populated with some data according to a logically programmed algorithm with represents a pattern. In these cases, the red triangles shows us the spaces represented by "sp" and therefore unlike the previous pattern these need to be managed by the loop as they occur before the stars in the pattern. So, taking the same approach of rows and columns managing loops, we will have an outer loop that tracks the rows which will start at 0...
Post a Comment
Read more

How to open any installed application on MAC OS X using Terminal !

MAC OS X 10.9 is one of the finest operating systems used in the business as well as household purposes. Considering the unix side of the operating system, it becomes beneficial to be able to do trivial stuff like opening any app directly from the command line interface, i.e. Terminal in this case. There are a lot of other uses that a utility like terminal can offer you but for the instant purpose, let us find out how to open any of the installed applications on your MACINTOSH using the terminal. I will be working with few of the application I have installed on my system. You are free to choose your own. The general syntax for the command is : open -a application_name If you want to open the application as a super user, just prefix the command with sudo : sudo open -a application_name Test commands : (Use these commands one-by-one to open the specified applications) open -a textmate open -a bbedit open -a firefox open -a opera open -a finder open -a mail Watc...
Post a Comment
Read more

Hello World in C!

C is considered to be the most robust programming language. It is the mother of all modern programming languages. It still has it roots fixed deep even after 45 years of existence. C is one of the fastest programming languages and because of its relationship with the lower level of the computer architecture, it can process data nearly as fast as the hardware components itself. Learning C language is a major step in learning computer programming as a whole. Though C is a relatively small language, its rather important to understand the basic technicalities of the language. In order to dip your toes in the water, let's start with the trivial "HELLO WORLD" program. Test Code : ( Use this code to display Hello World! in the console ) #include<stdio.h> int main(int argc, char const *argv[]) {    printf("%s\n", "Hello, World!");    return 0; } NOTE:  Don't worry about anything else you see on the screen just ...
Post a Comment
Read more