Make <img> act like a text in search engines - html

I have image with phone number on it:
I want to let other people find the page where this image is, by searching "1-700-700-690" on Google. Just as if the HTML tag would be:
<div> 1-700-700-690 </div>
I tried:
<img alt="1-700-700-690" src="http://hashef.co.il/wp-content/uploads/2013/12/Moked-Telephoni2.png" width="295" height="62" />
But it doesn't work (tried find the page on Google).
Is there anyway to do this?

One of these two workarounds might work for you:
1) Place <p>1-700-700-690</p> directly before or after your image and set font-size to 1px and change the font color to the background color.
2) Use <meta> tags in your head that include the phone number. This should help with the indexing of your page. Documentation can be found directly on Google, e.g. see this link here.

Related

Why is my logo not showing up?

I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />

How To Remove The Automatic Text That Appears When A Cursor Hovers Over The Jumplink

I would like to remove the automatic text that appears when the cursor hovers over the jumplink. The text is usually the name of the post title that its directing to. However I would like to remove it. I've tried removing certain parts of the following code for the jumplink but to no avail. The coding is as follows:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Any help will be appreciated. The URL to the blog is as follows: http://www.blankesque.com
The browser will show what is inside your title attribute automatically.
There is a good reason for that.
Sometimes you have an image on you web site and for any reason will not display or your site is loading to slowly.
In place of your image you than can see the value of the title attribute (or the alt attribute in very old browsers), so the user will not see a complete empty space
So if you can miss the title attribute just deleted or set his value to ="".
There are also other solutions for this, but seen you don't know much about attributes, seems to me not appropriate.
Remove the expr:title='data:post.title' part from the <a> tag in the code.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
I know you haven't got javascript tagged but I tried css and couldn't get a solution and the only way I found was JS, I'll keep trying though
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++){links[i].title="";}
this won't show the title<br><br>
This won't show the title

My basic hyperlink tag isn't working

I have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.

Google Sites - simple content and background picture

I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.

Anchor link landing in wrong position

Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.