HTML Links
Links are used for combining,moving one page to an another page.In Html for a link we use the <a> element.Let's look at examples below:
< a href="http://www.softwarecooltips.com/">Click Here</> :This code will create a link from the word "Click Here".So when you click on it,the page will go to my blog.This is an external or a hyperlink.
<a href="gallery.html">Photographs</a>:By clicking the word "Photographs" ;you will work the file on your servers.We call this type as "internal link".
<a href="#contact">Contact</a>
............
<h1 id="contact">Contact Information</h1>:This one creates an anchor link.Imagine that your web page has a menu on the top and the text,images of the site ,all are on the same page(bootstrap framework).You should use this style.
In the examples, as you see,href is an attribute which specifies the address of the link,source.This address can refer to an image,another page,document etc...There is an attribute which is often used by the <a> tag:target.
The target attribute defines a tab or an another window that will open which is clicked.In HTML we use for opening the link in another blank page.We also use this attribute for specifying the frames.
(Frames are not used in Html5 except iframe).
<a href="http://marvel.com/universe/Main_Page" target=_blank>Marvel Universe</a>
We also use CSS styles to create link designs.For example ; a link can have 4 situations active ,visited,hover,link.For each state different text color,text property can be very useful.
In Html ,we use 3 types of image files.GIF for animation,JPG for galleries,photographs,cartoons everything else transparent images,PNG for better quality images.High quality means high file size.
Below; a standard usage of the <img> tag in Html is given:Ok let's start:
....
Bazinga!:
the <img> tag has src attribute which specifies the source file address,alt attribute which is used for low internet connections or no image properties for blind people and style attribute which defines the properties as colors,dimensions,borders etc...
the src attribute can specify a file name with extension,sometimes a directory name is added (as the example above) or an external address which is a link one to a web page:
<img src="https://www.softwarecooltips.com/imgs/user.pgn" alt="example for images">
You can use a <img> tag as a link via the <a> tag:
<a href="contact,php">
<img src="penny.jpg" alt="Contact Form" style="width:200px;height:150px;border:1px;border-style:solid;border-color: #ff00ff;">
</a>
As you see ,border,border-style and border-color attributes are used for specifying the image.
HTML Images
In Html ,we use 3 types of image files.GIF for animation,JPG for galleries,photographs,cartoons everything else transparent images,PNG for better quality images.High quality means high file size.
Below; a standard usage of the <img> tag in Html is given:Ok let's start:
....
<img src="gallery_images/thebigbangtheory.jpg" alt="comedy tv series of smart people " style="width:200px;height=300px;">
.....Bazinga!:
the <img> tag has src attribute which specifies the source file address,alt attribute which is used for low internet connections or no image properties for blind people and style attribute which defines the properties as colors,dimensions,borders etc...
the src attribute can specify a file name with extension,sometimes a directory name is added (as the example above) or an external address which is a link one to a web page:
<img src="https://www.softwarecooltips.com/imgs/user.pgn" alt="example for images">
You can use a <img> tag as a link via the <a> tag:
<a href="contact,php">
<img src="penny.jpg" alt="Contact Form" style="width:200px;height:150px;border:1px;border-style:solid;border-color: #ff00ff;">
</a>
As you see ,border,border-style and border-color attributes are used for specifying the image.
<p><img src="howard.jpg" style="float-right;width:104px;height:150px;">This is Howard from "The Big Bang Theory.He is an engineer and he has gone to space as an astronaut via NASA.<p>:
This is Howard from "The Big Bang Theory.He is an engineer and he has gone to space as an astronaut via NASA.
Your image will be float to the left or right of the paragraph via the float attribute.
<p><img src="raj.jpg" style="float:left;width:130px;height:150px;">Raj from India.He is a scientist and funny guy in "The Bing Bang Theory".He has a very cool girl friend .His parents are rich and they send money to Raj sometimes.His dog is a cute one.<p>:
Raj from India.He is a scientist and funny guy in "The Bing Bang Theory".He has a very cool girl friend .His parents are rich and they send money to Raj sometimes.His dog is a cute one.
You can use usemap attribute and <map> tag for creating clickable areas on the image.
This is Howard from "The Big Bang Theory.He is an engineer and he has gone to space as an astronaut via NASA.
Your image will be float to the left or right of the paragraph via the float attribute.
<p><img src="raj.jpg" style="float:left;width:130px;height:150px;">Raj from India.He is a scientist and funny guy in "The Bing Bang Theory".He has a very cool girl friend .His parents are rich and they send money to Raj sometimes.His dog is a cute one.<p>:
You can use usemap attribute and <map> tag for creating clickable areas on the image.
Posts
