Href while running localhost not working - html

so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!

Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607

You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com

Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!

Related

Linking each image to the site it is from

This is my code:
<a target="_blank" href="http://weknowyourdreams.com">Family</a>
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" height="140" width="300">
</a>
<a target="_blank" href="http://chess.com">Chess</a>
<img height="140" width="300" alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" href="http://okcstorm.com/index.php/basketball/">Basketball court</a>
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" width="300" height="200">
What I want to achieve is to link them each to the site that I've got them from. But, the problem is the phone in the code avengers keep telling me this error:
Uncaught TypeError: Cannot read property 'ClearPromptText' of null
I don't know what that means, please help.
.image-f{
float:left;
display:block;
margin-right:10px;
width:300px;
}
.image-f img{
float:left;
width:100%;
height:140;
}
<a target="_blank" class="image-f" href="http://weknowyourdreams.com/" >Family
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" >
</a>
<a target="_blank" class="image-f" href="http://chess.com">Chess
<img alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" class="image-f" href="http://okcstorm.com/index.php/basketball/">Basketball court
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" ></a>

How to remove image view class in css

php
<a href='.$row5['url'].'"><img src="../asset/view-as-pdf.jpg"
width="94" height="94" /></a>
html
<center>
<a href="http://tools.com/com/fli7ppdf/K171/157/Kap157_E/files/kap157_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
after click image, it not open url, but view image. how to fix it
<center><a
href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf""><a
target="_blank" href="asset/view-as-pdf.jpg"><img
src="asset/view-as-pdf.jpg" height="94" width="94"></a></a></center>
Here you are closing a twice.
Your code should like this ,
<center><img src="asset/view-as-pdf.jpg" height="94" width="94"></center>
HTML
<center>
<a href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
Remove anchor tag which has link of the image.

why I am getting small dash in anchor tag?

<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>
</br>
I have create button by using img tag within anchor.
why I am getting small dash at right corner??
thanks in advance
There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.
Use text-decoration:none on <a>, that should solve it.
a {
text-decoration: none;
}
This appears to happen when:
the closing anchor tag is on a separate line from the rest of the element
AND the visible text of the anchor is an image
AND you have multiple images on the same line
and also the anchor/image is not the last item in the horizontal series
In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:
<p>
<a href="#">
<img src="image.jpg" alt="Test 1" />
</a>
<a href="#"><img src="image.jpg" alt="Test 2" />
</a>
<a href="#">
<img src="image.jpg" alt="Test 3" /></a>
<a href="#"><img src="image.jpg" alt="Test 4" />
</a>
<a href="#"><img src="image.jpg" alt="Test 5" />
</a>
</p>
I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.
I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.
<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.

Error in my html?

I made my first attempt here to create my own webpage.. But what can be the error in the code i wrote here?
<div align=center>
<img src="icons/twittergrey.png" alt="Twitter" name="Twitter" width="48" height="48" border="0" id="Twitter" />
<img src="icons/facebookgrey.png" alt="Facebook" name="Facebook" width="48" height="48" border="0" id="Facebook" />
<img src="icons/youtubegrey.png" alt="YouTube" name="YouTube" width="48" height="48" border="0" id="YouTube" />
<img src="icons/rssgrey.png" alt="RSS" name="RSS" width="48" height="48" border="0" id="RSS" />
<img src="icons/androidgrey.png" alt="Android Market" name="Android Market" width="48" height="48" border="0" id="Android Market" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','icons/twitter.png',1)">
<a href="#" target="_blank" onmouseover="MM_swapImage('YouTube','','icons/youtube.png',1)" onmouseout="MM_swapImgRestore()">
Sorry i got this loong lines here.. Dunno how i could make it look like a list..
Well there's only two problems I can see, the first is that the center should be in speech marks, so it should look like ="center". Secondly you need to add </div> at the end... Should work then :D
After breaking your lines, a couple of your anchors are missing the </a> on them, which I'm sure is going to be causing some problems for you.
Also, align="center" is deprecated. Use style="text-align: center" instead.
P.S. You really shouldn't write your code all on one line like that (at least hopefully you aren't). All that will cause is problems like this.
You have an embedded anchor tag in an anchor tag (may cause problems) you also are missing two ending anchor tags and an ending div tag as noted by others.
Your markup is really confusing though XD
cleaned up (a little) version of your markup
http://jsfiddle.net/MZge2/1
You need to Close
<div align=center> with </div>
<div align=center> Should be <div align="center">

Simple HTML problem with href

I am trying to create images hyperlinked to some URL's and hyperlinks donot seem to work.
I am using the code as given below at http://windchimes.co.in/index_w%20-%20Copy.html
Can you tell me why the hyperlinks to the icons are not workking?
<td width="29" style="padding-bottom: 42px;><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"><td>
Don't know if there is more, but you're missing the closing quotes at:
<td width="29" style="padding-bottom: 42px;>
^^^
It is much easier to diagnose, maintain and adjust your web pages if you do the following.
Keep your concerns separated - your HTML should describe a document, not its style. Put your style rules into a cascading style sheet (CSS), which will also mean you'll satisfy the next rule
Don't repeat yourself. You had a width and style rule on all of these elements that was exactly the same. That means if you want to change the width to 30px, you'd have to find / replace each of these items (and if you automate your find and replace, you have to hope you don't accidentally replace something you didn't mean to.
Layout your code - by properly tabbing your HTML code, you will spot errors like missing closing tags as it will instantly look wrong to the eye.
Use validator.w3.org to make sure the code is correct - this will spot errors for you and will help you avoid the two problems in your code - a missing quote and a missing closing tag.
Here is a clean version of your code...
CSS:
td.myClass {
width: 29px;
padding-bottom: 42px;
text-align: center;
}
And HTML:
<td style="myClass">
<a href="http://windchimes.co.in/blog" target="_blank">
<img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
<img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
<img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
</a>
</td>
<td style="myClass">
<a href="http://twitter.com/windchimesindia" target="_blank">
<img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
<img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
</a>
</td>
A good idea is to run your code through the W3 Validator:
http://validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html
It will tell you in what ways your HTML is malformed.
Your last <td> tag isn't properly closed, either.
<td width="29" style="padding-bottom: 42px;>
...
<td>
should be </td> instead of <td> at the end.