<!DOCTYPE html>
<html lang="en-US">
<title>My Badass Page</title>
<meta name="keywords" content="wicked, amazing, awesome, shit">
<meta name="description" content="It doesn't get much better than this.">
<meta charset="UTF-8">
<meta property="og:title" content="My Badass Page">
<meta property="og:type" content="website">
<meta property="og:url" content="http://mysite.com/page.html">
<meta property="og:image" content="http://mysite.com/images/pic.jpg>
<meta property="og:description" content="It doesn't get much better than this.">
Friday, February 5, 2016
Friday, October 2, 2015
How do I use MAILTO to Send an Email from a Website?
<a href="mailto:info@site.com?subject=Subject%20Test">Send mail</a>
%20 denotes space
Friday, September 25, 2015
How can I make a favicon?
A favicon is a small image that appears the tab bar of a browser next to the title of the page.
Pixel dimensions that should be included in favicon.ico
64×64 – Safari Reading List, Windows site icons
24×24 – Pinned site in Internet Explorer 9
32×32 – High DPI or “retina” displays will typically use this size
16×16 – Browsers like Chrome, IE, Safari
To make a favicon, create each of the image sizes with a tool like Photoshop Elements. Then combine the images into a file with an .ICO extension using a tool such as X-Icon Editor.
A good site to find lots of free favicons is Free Favicon.
The favicon should be stored in a favicon.ico file in the foot directory of your web site. To use the favicon, add the following tag between your <head> and </head> tags of your web site.
<link rel="shortcut icon" href="/favicon.ico">
See an example favicons in use at TravelPhrase.
64×64 – Safari Reading List, Windows site icons
24×24 – Pinned site in Internet Explorer 9
32×32 – High DPI or “retina” displays will typically use this size
16×16 – Browsers like Chrome, IE, Safari
To make a favicon, create each of the image sizes with a tool like Photoshop Elements. Then combine the images into a file with an .ICO extension using a tool such as X-Icon Editor.
A good site to find lots of free favicons is Free Favicon.
The favicon should be stored in a favicon.ico file in the foot directory of your web site. To use the favicon, add the following tag between your <head> and </head> tags of your web site.
<link rel="shortcut icon" href="/favicon.ico">
See an example favicons in use at TravelPhrase.
Sunday, September 20, 2015
How to Set the Margins of an Image on a WebSite
<img style="margin: 10px 5px 10px 5px;" src="images.jpg">
The order of margins are top, right, bottom and left (clock-wise).
Margins can be negative.
See examples at http://travelphrase.com/french-phrasebook.html
Margins can be negative.
See examples at http://travelphrase.com/french-phrasebook.html
Thursday, September 17, 2015
How do I redirect a web page?
<meta http-equiv="refresh" content="0; URL=http://newpage.com">
That's how.
Theoretically you are supposed to put this line of html between the <head></head> tags but our tests show you can put it as the first line of a page rendered with Chrome v45 and above.
Set content to something other than 0 (seconds) to delay opening the new page.
Theoretically you are supposed to put this line of html between the <head></head> tags but our tests show you can put it as the first line of a page rendered with Chrome v45 and above.
Set content to something other than 0 (seconds) to delay opening the new page.
Friday, August 7, 2015
How can I use Emoji in Blogger post?
1/ Switch from "Compose" to "Html" top right of the edit article screen.
2/ Got to http://unicode.org/emoji/charts/full-emoji-list.html and get the last 5 characters of the unicode associated with the emoji you want to display, the part after "U+1".
3/ Go back to blogger and find the position in the html where you want the emoji to appear, then enter the 5 characters, preceded by "&#x" and followed by ";" see examples below.
💣 🐩 🐩
You see a bomb and two poodles like below.
💣 🐩 🐩
If you know a simpler way, let me know in comments.
Best,
Marc
PS To see these in action, check out my article on bootstrapping companies using Convertible Sweat.
2/ Got to http://unicode.org/emoji/charts/full-emoji-list.html and get the last 5 characters of the unicode associated with the emoji you want to display, the part after "U+1".
3/ Go back to blogger and find the position in the html where you want the emoji to appear, then enter the 5 characters, preceded by "&#x" and followed by ";" see examples below.
💣 🐩 🐩
You see a bomb and two poodles like below.
💣 🐩 🐩
If you know a simpler way, let me know in comments.
Best,
Marc
PS To see these in action, check out my article on bootstrapping companies using Convertible Sweat.
Sunday, July 5, 2015
Using Google Fonts
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
p{font-family:Lato, serif; font-weight: 100; font-size:140%;}
</style>
<p>
We would like to eat now.<br>
Nous voudrions manger maintenant.
</p>
The first line loads Lato font with 100 point "weight". You can choose higher weights such as to make the font thicker or choose to load several weights, ie Lato:100,300
In between the style tags, you set the paragraph style to Lato, choosing serif as a fallback if Lato is not available due to an old browser.
To test the code, copy all lines at the top of the page into an html file and open it in a browser. The code above is running at http://travelphrase.com/font-test.html
A complete list of google fonts can be found at https://www.google.com/fonts
<style>
p{font-family:Lato, serif; font-weight: 100; font-size:140%;}
</style>
<p>
We would like to eat now.<br>
Nous voudrions manger maintenant.
</p>
The first line loads Lato font with 100 point "weight". You can choose higher weights such as to make the font thicker or choose to load several weights, ie Lato:100,300
In between the style tags, you set the paragraph style to Lato, choosing serif as a fallback if Lato is not available due to an old browser.
To test the code, copy all lines at the top of the page into an html file and open it in a browser. The code above is running at http://travelphrase.com/font-test.html
A complete list of google fonts can be found at https://www.google.com/fonts
Subscribe to:
Comments (Atom)