Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Monday, July 20, 2009

Esay Guide On Creating Your Own Website


Step 1 First you need to create a text document containing the words that you want to appear on your Web page. Most word processing programs will work fine, as long as you give your document a name ending in .html (or .htm if you're working on a PC) and save the document as "Text Only." Type out your story, book review, fascinating facts about Jupiter, or whatever it is you want to publish. Here are some tips for organizing your text:

Begin with a title and an attention-grabbing greeting or introduction, so people will know immediately what your page is about and will want to read more.

Think about logical places to insert breaks in your text. No one wants to scroll down a long, uninterrupted block of text. Your page will be a lot more readable if you put in frequent paragraph breaks and horizontal rules (more about these later).

Think about where you might want to insert pictures, if you have them in electronic files. (More about downloading images in Step #4.) A lot of pages start off with an eye-catching image right at the top, next to the title.

If your word processing program has an option for "smart" or "curly" quotes, turn it off! Curly quotes will show up on a browser as strange little icons rather than quotation marks. The straight quotes may not look as nice, but they're the ones you have to use for Web authoring.
Step 2 Now you need to insert some formatting tags in your document that will tell an Internet browser (such as Safari, Firefox, or Internet Explorer) how to arrange your words and pictures on the screen. These tags make up a language called HyperText Markup Language, or HTML. The basic skeleton for an HTML document looks like this:

Text of page...

Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags often appear in pairs, with the second tag in the pair beginning with a "slash" (/).
Here's a list of some of the basic formatting tags in HTML:

...


header, level 1 (the largest size type for a header, usually used at the beginning of a page or the start of a new section). Smaller headers are tagged with

...

,

...

, etc.
...
boldface text
...
italic text

...

centered text


paragraph return (inserts an extra line space between paragraphs)
Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must use the tag

to create a paragraph break on the screen.


line break (no extra space)





horizontal rule (a line running left-to-right across the page, to separate one section from the next)

    ...

ordered, or numbered, list. Each list item begins with the tag
  • and falls somewhere between the
      ...
    tags.

      ...

    unordered, or bulleted, list. Again, each list item begins with the tag
  • .
    ...
    a hotlink to another file in the same folder
    ...
    a hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.

    This tag would insert an image with the filename "image.gif" on the far left side of your page.
    (Note: Don't worry if this information seems confusing or overwhelming right now. It will make more sense as you apply it in the next few steps.)

  • Step 3 You may feel somewhat baffled after reading that long list of formatting tags in Step #2. It's easier just to look at a real HTML document and then see how it gets translated into a Web page. You can view the "source document" behind any Web page by going to the "View" menu (in Safari -- other browsers may be slightly different) and selecting "View Source." When you do this, you'll see the document with HTML tags that creates the page currently in the window of your browser.

    We've created a Sample Web Page for you to study. Using the link below, go to the Sample Web Page and look at how the text and image appear on your screen. Then use "View Source" to call up the document we used to create the sample page. If possible, print this document. Compare it line-by-line with the page in your browser window. Do you see how all the formatting tags work?

    Step 4 If you don't already have image files for your page, you can download some from other Web pages. Use your common sense to decide which images you're allowed to use and which ones you shouldn't. Images provided by NASA, for example, are for the public's use. A corporate logo is private property. If you're looking for some astronomical images, you might try NASA’s list of Astronomy Pictures of the Day.

    Depending on what kind of computer and browser you're using, you'll have to use a slightly different procedure to download an image onto your hard drive. Here's how you would do it on a Macintosh computer, using a Safari browser:

    1. Use your mouse to position the pointer over the image.
    2. Hold down the button on the mouse and drag the image to your computer’s desktop.
    3. Let go of the button, and you'll see a small icon. The image has now been downloaded onto your hard drive. If you decide to change the name of the file, make sure your new name ends in .gif or .jpg (This will be important if you use the image in your own Web page).
    4. Click on the icon to view the image as it would appear on your Web page.
    While you're searching for images, don't download every one you see. You'll take up a lot of space on your hard drive if you grab dozens of images. Select just a few -- perhaps your own "Top Five" list -- that you think are the best for your page.


    Step 5 Now you're ready to insert the formatting tags in your own document. Remember to start your document with and end it with . The "title" that you type between the tags will appear at the very top of the browser window when your page is being viewed. This title might be, but doesn't have to be, the same as the header at the top of your page.

    Step 6 Now it's time to see how well your formatting has worked. Save your text document (Remember: "Text Only," and the file name should end in .html or .htm) and go back to the browser. Under the File menu, select "Open File..." or "Open Local...". From there you should be able to find your document's name and click on "Open". Your document will appear in your window, looking like a real live Web page!

    Don't be discouraged if there are some problems at first. HTML formatting requires a lot of attention to tiny details. If something doesn't look the way you expected, make a note of it and go back to your text document to adjust it. Then save the document again, go back to the browser, and click on "Reload". You'll probably have to go back and forth like this many times before your page looks perfect to you.

    Step 7 Your school may or may not have an account with an Internet provider that allows you to put your Web page on a server so that other people can read it. If not, you can just keep practicing with documents on your computer's hard drive. Or, you might look into getting some free Web space for yourself or your school. Some sites that provide this service are listed in the Idea Bank at the bottom of this page.

    If you are able to put your page up on a server, how will anyone find it? Unless they know about your page already -- and know the exact URL! -- they won't be able to visit it. Here are three ways you can give people a roadmap to your location on the information superhighway:
    Find some other Web sites that are related to your page in some way. They might be sites that deal with the same topic or are published by students your age. Write to the people who maintain these pages and ask them to check out your site. If they like it, they might add a link to your page on theirs.

    Register your site with a search engine such as Google or Yahoo. Once you've added your URL to one of these databases, people who are interested in the general topic of your page will get a listing of your site when they do a search. For example, in Yahoo, navigate through their categories until you get to the one that best suits your page, and then click on "Add URL." You'll be asked to provide the title of your page, its URL, and a comment or short sentence that describes what's on the page. In your comment, try to include words that you think an interested person might type in as key words when doing a Yahoo search. "Jupiter facts and images" or "Book reviews by middle school students" are examples of good comments.



    Sunday, September 14, 2008

    Web Extractor


    GRAPHICS

    Think small, like 10-12KB per image. Yes, depending on the source, the number of broadband users is going up. But slow pages are still really annoying, even if you're on a T1. And huge images are a primary cause of slow pages. It's easy to optimize your images.Always use graphics that fit the content. Just because you have an adorable photo of your dog doesn't mean you should have it on your Web site about Web Design (sorry, Shasta...). The main exception I would make to this is for "design" images.


    These are photos or graphics that help make up the design of the page, and are not intended to illustrate the content.Do not use images that blink or move or change or rotate or flash or do anything on your page. Or use them sparingly. There have been many studies that show that flashing graphics are distracting and annoying to people. In fact, in one focus group I watched the browsers actually physically cover up flashing graphics so that they could read the rest of the page.

    LAYOUT

    Stick with standard layouts. I've seen some pages that use 6 or 8 frames on one page. Another site used a layout where you had to scroll to the right to read everything on the page (but you never had to scroll down). These layouts are cute, and you might find them fun to build, but they will drive your readers nuts.

    The reason that the 3-column layout is so popular on Web sites and newspapers is because it works. You might think it's boring, but you'll keep more readers if you stick with something simple that they can understand.

    Whitespace is more than the CSS property, it is a function of your layout. You should be aware of the whitespace on your pages and how it affects how the content is viewed. Whitespace is just as important in a Web layout as it is in a paper layout.Use your graphics as elements in your layouts.

    Graphics can be more than just graphics when you use them as actual elements in your layouts. An extreme example is when you wrap text around an image, but any image you have on your site is a layout element and should be treated as such.

    FONTS

    Serif for headlines and Sans-Serif for text. If you've taken any type of print design, this might be exactly the opposite of what you were taught. But the Web is not print. Sans-serif fonts are much easier to read on computer monitors because the screen resolution is not as high as in print.

    If you use serif fonts for normal text, the serifs can blur together on the screen making them hard to read. Your printer friendly page should use the opposite fonts (serif for headlines and sans-serif for text).

    Limit the number of different fonts. One of the best ways to make your Web site look amateurish is to change the font over and over. Sure, it's possible to do, but limiting your page and site to 2 or possibly 3 standard font families is easier to read and looks more professional.Use standard font families.

    Yes, you can choose to use "Rockwood LT Standard" as your font on your page, but the chances that one of your readers will have that font as well is pretty low. Sticking with fonts like Verdana, Geneva, Arial, and Helvetica may seem boring, but your pages will look better and the designs look correct on more browsers.

    ADVERTISING

    Don't be greedy. If you have any control over the number of ads on your site, be aware that your readers are not coming to read the ads, they are coming for the content. If the ads overwhelm the page content, many readers won't stick around long enough to read your purple prose.

    Yes, it's important to make money from your Web site, but if your ads drive people away, you'll ultimately lose money.

    Treat ads as you would any other image. Keep them small, avoid blinking/flashing, and keep them relevant. Just because you can have an ad on your site, doesn't mean that you should. If the content is relevant to your readers, they're more likely to click on the ad.

    Remember your readers*


    Test your pages in multiple browsers. Writing Web pages that work only on the most modern browser is both stupid and annoying. Unless you are writing a Web site for a corporate intranet or a kiosk where the browser version is completely fixed, you'll have problems with people not being able to view your pages.

    The same is true for operating systems. You can't assume that just because your page works in IE5.0 for Windows it will work in IE5.0 for Macintosh.Write content that they want. Unless you're writing a site purely for yourself (and if you are, why is it posted to the Web?), make sure that your content covers topics that your readers want to read.For more article about web design, please mail to Publisher

    Sunday, August 10, 2008

    "Passion Is All You Need To Be A Web Designer"

    Imagination Web Design


    Web designing doesn't follow any particular rule book. It's like any designing format which should be expressive, appealing and informative. But it's not that easy to understand your visitor's choice. Something which is appealing to you might not appeal your visitor.

    Hence, there are certain guidelines which you should always try to follow while plotting a website. These guidelines basically talk about the content and graphics.Before designing your web page, you visit numerous web sites; some with good content, some bad and some with a balanced content and graphics. But you must have liked those sites which successfully hold your attention and curiosity. Following are the two web designing myths which are widely followed by the web designers.

    Content Supremacy

    A well known ad age says 'Content is the King', and it is true to some extent. But can content alone hold attention? What if visitor is in a hurry, or don't want to give time to read the content? Then all your content supremacy will be unwanted. Visitor might look for animations or other interfaces to explore the site.

    However, it's better to put enough information in the site, but it should not look dull to the visitor. Applets and interfaces can be used to make your site more attractive. Only content lacks the needed appeal in your site, which can deter your visitor. Your website should have a perfect balance of animation and content to become popular among your target audience.When are these applets required?

    Sometimes these interfaces are required to establish the relation between the brand and the target audience - for example, the Yahoo Mail's latest beta version that shows a dummy slender lad interacting with the audience. This becomes more interesting when the page shows loading, the constant boxing practice with the shadow of the lad holds interest. This is easily downloaded and it gives an extra zing to the normal mailing WebPages.

    Similarly, interfaces, applets can be used in comic, gaming and other interactive websites, where you want your audience to adhere to your site. Web design, like any other designing, has no hard and fast rule. It follows a simple philosophy that is the taste of the target audience. You may have a static or a dynamic website, but it should aptly cater to the target audience.

    Graphic Dominance

    There is another school of thought, who believes that a website looks attractive only when you put lots of graphics in it. They believe all the applets and interfaces make your site look spectacular and attractive. You might often come across these kind of sites, for example, if a newcomer or web designing student makes any website, who is almost unaware of the real market, will put all his book knowledge and technology to make a website, result, a heavy and adorned site.

    This makes the site heavy to load, and you might loose your visitor because of this. Hence there should be a balance between the graphics and the content. You certainly can't afford to have hundred kilobyte animated graphics in your website, which is certainly a useless adornment. Large graphics take longer to load because the download speed depends on your modem. If you have a hundred kilobyte graphic and your visitor has a low modem, then your graphic can take ages to load, which is certainly a strict no for your website's popularity.

    These graphics are purely decorative and you should restrict yourself while using them. Graphics should be place at the appropriate place; they can enhance the text but, without content graphics is like body without a soul. Undoubtedly, graphics make a page interesting and more desirable, but heavy decoration can destroy the gist of your site. Hence your site should have a blend of graphics and content. Decorative and small pages are always desirable but if your page has too much graphics and takes long to be loaded then it can be unbearable.

    - Imagination Web Design