How to specify link text when the link is an image? - text

I'm making an web shop (my first one), and on the front page my client wants banners with their current hot deals. Naturally I want Google and other robots to be able to understand what these links are all about. I think (but I'm not sure) that Google will treat my <a> tag better if it will have some relevant text inside it. But a banner is just an image. How do I put text there? Could a <span style="display:none"> work? Maybe the title="" attribute?
Added: OOps, forgot to say - I place the image as a background image to my <a> tag - this gives me vertical centering. So there are no <img> tags.

Google will index the Alt text property on your image.
http://www.search-marketing.info/organic-listings/img-alt.htm

I've always done <span style="display:none;">My SEO text</span>. I've learned this trick from the CSSZenGarden. Another way to "hide" text involve setting a text-indent: -100000em;, and I'm sure there are some more.
It works at the CSS Zen Garden, google does not penalize it. search for "the beauty of css design" and you'll see that it gets indexed at google.

Google cant crawl images but Google can index alt text so try to link the images with alt-abbr.

Related

How to change hyperlink color in github markdown

I'm creating a webpage using markdown hosted by github.io. I really don't like the blue color of the hyperlink automatically generated by markdown and I'm wondering if it's possible to change it. More specifically, I'd like the text to stay black and the solid underline to become dashed underline. Here is a sample code:
Support static-based commenting via [Staticman](https://staticman.net/) for sites hosted with GitHub Pages. [#424](https://github.com/mmistakes/minimal-mistakes/issues/424)
I heard github markdown is different from traditional markdown, but I've seen people changed the link color and underline type with the same website template so I think it's still possible to change. Any suggestions?
Since GitHub uses its own styling after it processes your markdown file, any custom stylings will be overwritten. However, in a broader case, you can always use HTML elements in your markdown files. Take this example:
[normal link](https://www.google.com/)
custom link
The first one will appear as a normal blue link which will be underlined when you hover your mouse over it. The second one is a link that matches your requirements for black color and dotted underline.
I tested it on my local machine and it renders just fine in VSCode, but all styling is lost when I put it on GitHub.
Though, since you're going for a webpage, I really recommend going for HTML and CSS. They're really easy if you know MD and are much much more customizable.

Can I put HTML in chrome extension's icon

Can I put a HTML code in my chrome extension's icon? According to the Google API (setBadgeText) this isn't possible.
Is there any way to put it there?
While .setBadgeText is, as implied by name, text-only, you can draw anything and set that as your icon.
You'll need to draw on a <canvas>, extract image data and use .setIcon({imageData: /*...*/}) to update the icon.
See this question for a brief example, and maybe this article.
It's not quite "using HTML", but with some work you can output anything to your icon.
Badge is plain text only as can be seen in source code. There's no way around.

xe:navigator, expandable: how to replace the "twisties" with some custom icon?

For navigation I'm using an xe:navigator and containing xe:basicContainerNodes, which in turn contain xe:pageTreeNodes. Rather classic design, I'd say.
If I mark the xe:navigator as "expandable" all the containerNodes are showing something that at first glance appear to be classic "twisties" so that users can collapse / expand them.
This is kind of OK but I'd love to replace the "twisties" with icons showing "+" or "-" as that is what I'm using everywhere else inside the application.
Looking at the rendered html code for my navigator I see that the "twisties" in fact are links with a background sprite applied through css:
<a class="lotusSprite lotusArrow lotusTwistyOpenMenu" style="padding: 0px" role="button" href="#" onclick="javascript:XSP.oneUIMenuSwap(event,'wipe','view:_id1:_id2:facetLeft:_id278:outline_node_0')" title="Click to expand or collapse this section">
<span class="lotusAltText">▼</span>
</a>
(btw: the <span> inside the link appears to be a fake element as it is set to display:none)
Examining the sprite I in fact find some "+" icons but no "-" ones.
Question: is there probably away to reach my goal, other than building my own sprite and replacing the original one?
Update: another helpful option would be to make the container's label clickable so thar user could expand / collapse the containers by clicking their headline labels. Any idea here?
Update #2: apparently not too many responses ;). Meanwhile I solved it by switching to an Accordion based navigator; a bit more programming effort, but nicer looking, too...
solved it by switching to accordions. Looks even nicer but is a bit more programming effort (keeping the right accordion panels open and marking the currently selected menu entries)

Text based site for mobile phones?

I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text

How to draw underline text with UIWebView

Hi I am new to IPhone paltfom.
And I wonder how can I underline a text with UIWebView?
I know this is quite simple, but I couldn't get any clue from the menual
can anybody show me some code snippet?
The text should be a passed-in parameter.
thank you very much.
In the HTML content loaded by UIWebView, use
<span style="text-decoration: underline;">text-to-underline</span>
or
<u>text-to-underline</u>
Doesn't seem to work properly for me. and and tags work, but not , or CSS "text-decoration: underline;" It may be that the underline is not being scaled up as high as the rest of the page - e.g., a bug. I'm not sure

Resources