Web Style Press, Best Practices from all the Web, Build Better Websites » HTML http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Lorem ipsum Ready to Use http://www.webstylepress.com/lorem-ipsum-ready/ http://www.webstylepress.com/lorem-ipsum-ready/#comments Sun, 10 Apr 2011 20:17:10 +0000 Hiroshi http://www.webstylepress.com/?p=784 Lorem ipsum Ready to Use is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Lorem ipsum is a place holder text. Publishers and graphic designers need it every day in almost every task. Lorem ipsum is commonly used to demonstrate the visual presentation of fonts, typography or layout. An example of lorem ipsum paragraph is below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What if you need lorem ipsum ready to use in different forms. e.g. lorem ipsum long paragraph, lorem ipsum medium paragraph, lorem ipsum one sentence, lorem ipsum ordered lists, lorem ipsum unordered lists, lorem ipsum form, lorem ipsum definition list, lorem ipsum navigation and more?

HTML Ipsum is a resource that offers ready to use Lorem Ipsum text in many forms. If you do not know HTML and want to use HTML elements, then this is a handy site for that as well. HTML Ipsum will make adding tables, ordered lists, and more headache-free. Find the HTML you’re after, copy and paste it into your HTML editor, and replace the text with your own. No sign-up, invite-requesting, tweeting or liking required. Just head to the site and use it.

lorem-ipsum

HTML Ipsum
What is Lorem Ipsum
Lorem Ipsum at Wikipedia

Lorem ipsum Ready to Use is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/lorem-ipsum-ready/feed/ 0 Use Any Font in Webpages As Text http://www.webstylepress.com/use-any-font-in-webpages-as-text/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> use-any-fonts

Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources

Facelift
Novemberborn
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 Modern Font Styles For Websites http://www.webstylepress.com/modern-font-styles-for-websites/ http://www.webstylepress.com/modern-font-styles-for-websites/#comments Sun, 26 Oct 2008 17:45:27 +0000 Hiroshi http://www.webstylepress.com/?p=304 Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> I have described about using nice and clean fonts in web page. Now lets see some more details about using fonts in web pages.

As we know Verdana, Arial and Tahoma are being used from the beginning. In Web 2.0 Style, and many open source softwares such as WordPress, now-a-days some other fonts are being used which are neat and clean and stylish too. Best part is, to use these, no installation of fonts is needed. In Windows XP these are present by default. I have selected some examples of look and feel of some chosen fonts over here.

Font Styles Comparison

Arial “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Verdana “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Tahoma “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Trebuchet MS “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Georgia “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Grande “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Sans Unicode “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

sans-serif “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Font Families

It happens so that we can define a family of fonts while creating web page. If one font is not available in user’s machine; then next font style will be displayed. i.e

<style type="text/css">
.myfont { font-family: Geneva, Arial, Helvetica, sans-serif; }
</style>

Suppose Geneva is not present in user’s machine, then system will pick next font Arial for style. So it is recommended to use font-families.

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:
* family-name: The name of a font-family, like “times”, “courier”, “arial”, etc.
* generic-family: The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Separate each value with a comma, and always offer a generic-family name as the last alternative.

If a family-name contains white-space, it should be quoted. Single quotes must be used when using the “style” attribute in HTML.

Here is the list of font families commonly available on all systems.

Arial, Helvetica, sans-serif
‘Times New Roman’, Times, serif
‘Courier New’, Courier, monospace
Georgia, ‘Times New Roman’, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/modern-font-styles-for-websites/feed/ 0 Wrapping Text – Breaking Text with No Spaces into New Line http://www.webstylepress.com/wrapping-text/ http://www.webstylepress.com/wrapping-text/#comments Mon, 08 Sep 2008 16:16:40 +0000 Hiroshi http://www.webstylepress.com/?p=53 Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Text like, a b c d e f and so on written in HTML will do fine in any browser, we all know that.

What about the following!
abcdefghijklmnopqrstuvwxyz….NoWordBreaksAndSentenceGoesOnAndOn…
The text with no spaces.

If there are no breaks in words then the sentence will proceed straight and cause horizontal scroll in web page. In blogs or in any other applications where users can comment or put some data, they can write such spam or anything that can cause your web page layout to break. We have a solution to that. Write text in pre tag and apply following CSS to it.

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

This will fix the problem and in IE it will cause line break and avoid horizontal scroll while in Mozilla Firefox it will add an inline frame and put all the data in it.

Download Example
More Detail and Examples

Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/wrapping-text/feed/ 0 What is Superscript and Subscript in HTML http://www.webstylepress.com/superscript-and-subscript/ http://www.webstylepress.com/superscript-and-subscript/#comments Mon, 08 Sep 2008 14:46:14 +0000 Hiroshi http://www.webstylepress.com/?p=43 What is Superscript and Subscript in HTML is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> In HTML we use tags for subscript and superscript like below:

Subscript

ABCDEF av

Superscript

ABCDEF 12

i.e.

ABCDEF <sub>av</sub>
ABCDEF <sup>12</sup>

What is Superscript and Subscript in HTML is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/superscript-and-subscript/feed/ 0 List Style Types Examples and Best Practices http://www.webstylepress.com/list-style-types/ http://www.webstylepress.com/list-style-types/#comments Sat, 06 Sep 2008 06:09:10 +0000 Hiroshi http://www.webstylepress.com/?p=28 List Style Types Examples and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Many options are available for list styles as following.

We can define a disc style like below.

ul { list-style: disc; }

And a custom image replacing disc or any style like below.

ul { list-style: disc url(arrow.gif); }

Here is the list of possible styling.

list styles

View In Browser and Download

List Style Types Examples and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/list-style-types/feed/ 0 W3C Validation Tips and Best Practices http://www.webstylepress.com/w3c-validation-tips/ http://www.webstylepress.com/w3c-validation-tips/#comments Fri, 05 Sep 2008 23:15:52 +0000 Hiroshi http://www.webstylepress.com/?p=23 W3C Validation Tips and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Markup language validation is very important. Without it your web page will not be indexed in Google. Google crawlers will just avoid the invalid markup and errors in HTML. Here is a complete list of tips you can use to avoid HTML markup errors and warnings so that you write valid HTML or XHTML.

Advices For Valid Markup
  • Use (define) backgrounds in CSS, not in html, TD, TR or Table
  • Do not define height of table or tr
  • Use alt=”" at every image even at spacer and separator
  • Place form tag b4 and after table tag and not td
  • Use correct doctype i.e.
  • Use all attributes for tags, i.e. script tags and css link tags. i.e.

  • In Anchor link where u have to use & use its code like &
Advices For Valid CSS
  • Define background color with color, and for transparent use inherit i.e.
    color : #000000;
    background-color: inherit;
    Use these both even one is not necessary to define, second with inherit property
  • Use shorthand for properties
  • Use generic font family i.e.
    font-family : verdana, arial, sans-serif;
    or
    font-family : “trebuchet ms”, geneva, sans-serif;
  • For background and backgriund position use different lines. i.e.
    background: url(../images/menulinebg.jpg) no-repeat;
    background-position:left center;
Validate HTML, XHTML and CSS

W3C HTML Validator

http://validator.w3.org

CSS Validator

http://jigsaw.w3.org/css-validator/

W3C Validation Tips and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/w3c-validation-tips/feed/ 0