Flickr Group Code Help

Ever wonder how people add images and links to pages like flickr group pages?
OK, you are smart, so you can add a simple image or a simple link by using basic HTML codes.

But, have you ever tried to post a link code that people can copy and then paste in their comments? If you are a group administrator for flickr or a similar site, you will find that it is quite a bit more difficult to add this kind of link then it would be to pace a regular link. Why? Well, it is quite simple, actually. Flickr and similarly built websites automatically convert HTML to its viewable form. So, when you try to post a link in text format for people to copy, the website automatically makes it a link that is not copyable.

So, how did all the group admins figure out how to post a link (and image) that their members can copy and paste in there comments? Well, there are a few ways to solve this problem. The easiest way is to write the HTML for the HTML. In other words, the characters <> are HTML characters that can be written as &lt; and &gt;. This may not make sense to you right now, but hopefully we can explain it for you.

Visit our flickr tutorial page for the how-to: www.xtremeprogram.com/flickr/help.html

HTML cheat sheet (Simple HTML tags)

XP Mallorca wants you to understand the basics of HTML as well as write some HTML codes. These codes are very useful for designing your profile on a social networking site or adding creative comments in forum and blog posts. The basic tags of HTML are easy to learn, and use. The following HTML tags are widely used on the web environment and XP Mallorca has provided them in a easy-to-use "cheat sheet" format.

XP Mallorca HTML cheat sheet
Text tags: tags used to format your font

<b>bold</b>

<strong>strong/bold</strong>

<i>italics</i>

<em>emphasis/italics</em>

<font size=#>change font size by number 1-7</font>

<font color=RED>change font color to red</font>

   you can also change to other colors (HTML color names)

<h1>Large header</h1>

   you can create headers through H6 (1 is largest, 6 is smallest)



Formatting your paragraph



<br> line break (creates a new line for text)

<p> paragraph </p> (makes a paragraph for text with line breaks on each side)

<ol> numbered list </ol>

<ul> bulleted list </ul>

<blockquote> indents text from both sides </blockquote>



Links



<a href="FULL WEB ADDRESS"> link to a web address </a>

<a href="mailto:EMAIL ADDRESS"></a>

<a href="FULL WEB ADDRESS" target="_blank"> opens link in new window </a>



Images



<img src="NAME.TYPE"> adds an image </img>

   image must be in the same location (folder) as the web page

<img src="FULL WEB ADDRESS.TYPE"> adds an image from web</img>

   image can be hosted anywhere on the internet

   (make sure you have permission to use the image)

<img src="NAME.TYPE" border="2"> adds image with a border </img>


NEXT: How to add images and links in sites like flickr

Basic HTML

You use HTML every time you surf the web, nearly all web pages rely on HTML to display text, graphics and other web elements. HTML, which stands for Hypertext Markup Language, can be a very useful tool for any web surfer. Undoubtedly, you have already experienced a situation where you might like to bold, underline or italicize a portion of text. Maybe your email handler does not provide appropriate text editing tools, or maybe you would like to dress up your blog or forum comment. Some basic phrases of HTML can revolutionize the way you view the web.

You do not need to be able to understand HTML completely to be able to use it. HTML is simple enough that any web user can dabble with it, yet it is complicated enough that college courses are taught on how to write HTML. XP Mallorca has provided you with some simple guidelines and basic phrases to help you incorporate HTML use in your journey through the web.

Guidelines to using HTML

• Most forums, online communities, and email handlers allow some use of HTML; however, some web masters restrict the use of HTML code on their servers and websites. For instance, Flickr allows users to post comments containing HTML in their community, but not all HTML tags are accepted
• You can write HTML directly in comment boxes of forums, but some emails and blogs require you to switch to "HTML view" before typing HTML. For example, Blogger allows me to choose "Edit HTML" to type in HTML code. If I do not choose to view the HTML, then whatever HTML I type will show as text.
• If you wish to write more complicated HTML, then you should use Windows Notepad or another HTML editor
• Capitalization does not count in most HTML
  
• Spaces do not always count in HTML. Hitting the space bar twice while editing the HTML will only produce a single space
  
• The building block of HTML (it´s basic form) is the "tag". A tag is the word of HTML composed of <> and whatever comes in between
• Most tags require a closing tag.
• These guidelines are meant to help you use HTML in places around the web

NEXT: Basic HTML tags

Writing for the web

Website writing is different from typical writing styles you have previously encountered. There are some general rules that apply to writing appropriate website text. Your website consultant can edit your website text to make it web-friendly.

General rules for website text:

• Keep text short
  Concise text is essential to effectively communicating on the web. Keep paragraphs short and to the point. Don´t feel the need to always use complete sentences, use phrases where appropriate.
  
• Active voice
  Write in the active voice unless you are speaking about past events. The active voice (present tense) helps to keep your reader interested in the web page content.
  
• Use credible sources
  Cite sources where appropriate. You can follow formal citation rules or simply hyperlink a website the information is located. Remember, that you will be judged by your references, so choose reliable and authoritative sources.
  
• Hyperlink your text
  Use hyperlinks (links within paragraph text) to allow your reader to find more information about a particular subject. Hyperlinks may link to a different location in your website or to a different completely different web page. When linking outside of your site, it is best to inform the reader that they will be directed to another website.
  
• Use headers and bold font appropriately
  Headers help to divide text so that readers can quickly find the information for which they are searching. Use bold font and different colors to draw the reader´s attention to a particular spot on the page.
  
• Format for the web
  Web page format is different from page format for written works. Most readers read web pages in a "F" pattern. This means the most important website text should be at the top of the page or in the left column. (Jakob Nielson´s theory of F-pattern content)
• Use bullets and lists
  Bulleted sections and lists can help you organize your content so that it is easily accessible for the reader. Lists also allow you to use phrases instead of complete (and sometimes awkward) sentences.
  
• Divide your text
  Every topic should have its own page on your website. Remember to divide your content so that your reader can find precisely the desired information.
  
• Spell check
  Some spelling errors are to be expected in forums and blogs, but if you wish to provide trustworthy content, then spelling counts. Spell check your text before publishing it to the web.
  

Next: Basic HTML

Applying graphic design to your website

Graphics, color schemes and web page structure varies greatly between sites. Some of these graphic design elements are dictated by the content of your text or the purpose of your company. Some design elements may apply favorably to your website because of your products' genre, while some graphics may not fit the theme of your site. There is no immutable equation for determining the graphic design of a website, but there are some steps you can take to reveal a favorable theme and design for your website.

Steps to finding your design theme

1. Take a closer look at your logo
Provided that you are planning to keep the same company logo that you currently use, you should take your first design inclinations from your logo design. Since your logo will be included on your website, you need to incorporate the same design motives in your website that have used in your logo. Look at colors, graphics, and fonts in your logo. Some elements can be tweaked to fit into a website (like colors) while others cannot (like graphics).

2. Look through your company literature and marketing campaigns
What design elements have proven effective for you in the past? Are there similarities in your most successful advertisements? Perhaps you use the same headline text or a stellar photo that draws the attention of your client. Again, look at colors, graphics, and fonts. How do these design elements fit with your logo?

3. Look at the competition
Take a look through the websites of competing companies or websites that are of similar topics to your website. How are these sites designed. Do you see any graphics that you really like? Do the colors convey a mood that you would like to use in your website as well? Look at how the page is constructed, how is the important information presented? What elements of the website do you like?

4. Assimilate these ideas into a congruent theme
Try to compile the colors, graphics, and text from your logo, your advertisements, and competitive websites. Find the similarities and throw out the elements that conflict in mood or style.

Your web designer can help you to compile the various design elements into an effective website theme. Speak with your design consultant for ideas of how to design your website with a smooth theme and a constant mood.

Next: Writing website text

Graphic design and your website

Let's begin this section by defining graphic design. Graphic design is understood to be "the process of communicating visually using text and/or images to present information, or promote a message" (Wikipedia). In other words, graphic design combines text and images in order to communicate information to the viewer.

In your website, all the images, graphics and text elements contribute to the graphic design of the site. Your site should incorporate images and graphics in order to add interest to your client and to present information that cannot be conveyed with words. Setting the mood of the site is one of the best ways to use images and graphics to convey a mood and stimulate reader interesting in your website.

The textual elements of your website are important for communicating detailed information or explanations that are best left to lingual communication. Examples of effective and necessary text include your business name, your site purpose or motto, and a description of yourself or your company.

Some website elements combine both text and images. Logotype construction is a prime example of how graphic design combines both text and graphics in order to portray a single message. Logos communicate your business name in a catchy and memorable way. This is how graphic design is most effectively utilized.

Next: Applying graphic design to your website.

Website structure...some examples

Ideally, the structure of every website would be the same. Each website would contain several main sections and each main section would contain several sub sections. However, in working websites, this is rarely the case. As you attempt to structure your website, you will find that some main sections have many sub sections, other main sections will have no sub sections. Also, you may find that one sub section applies equally well to many main sections (for instance, the sub section called "shipping info" may pertain to the main section of "Furniture" and the main section of "Appliances" in a website for a department store). Unevenly distributed or shared sub sections may create difficulties when constructing a clear website structure. When these difficulties arise, remember that very few internet users will critique your actual web structure. It is more important that clients can easily find the information that they need than it is for your site map to be perfectly constructed.

A working example of a website structure (XP website)

Home page

• Websites
  • Portfolio of web design
  • Website packages ( 1 | 2 | 3 | 4 | 5 )
  • Price list
• Promotions ( Search engine optimization )
• 3D images
  • Portfolio of 3D images
• Security
  • RSS of security blog
• Education
  • Web design RSS
  • Security RSS
  • Technology RSS
  • Flickr group help tutorial
  • Tempates ( 1 | 2 | 3 | 4 | 5 )
• About XP Mallorca
  • News
• Projects
• Videos
• Images
• Tutorials
  • Flickr group help tutorial
• Links
  • Alcudia links
  • Mallorca links
  • Spain links
  • Technology links
  • Graphics links
  • Design links
  • Tutorials links
  • Other links
• Portfolio
  • Web design RSS
  • Portfolio of 3d images
• Contact
• XP Mallorca Blog

As you may have noticed, this website structure does not conform to the classic tree structure mentioned in the previous blog. Some sub section pages apply to various main sections (for instance, "Flickr group help tutorial" is offered in the "Education" section and the "Tutorials" section). Some main sections have many sub section pages (example: "Links") while other main sections have no sub section pages (example: "Projects"). However, the website structure is still clear and easy to navigate. A client searching for "Portfolio of 3d images" will be easily able to find that portfolio by visiting the main section of "3d images" or the main section of "Portfolio".

Ease of navigation is the primary importance of your website structure. When designing your website structure think about how your clients would search your site and the simplest way to present the information to your potential customers.

Next: Graphic design and your website

Website structure

The structure of a website is very important, because it dictates how your clients navigate through your site and how they receive various pieces of information that are available through your website. When we speak about website structure we are talking about how the website is designed as a whole, not the individual pages nor the graphic design elements. Website structure incorporates how pages are laid out and and arranged, which pages link to other pages, and how information is organized across pages.

Most web sites are structured in a similar manner, with three main categories of web pages: Home page, Main section pages, and Sub section pages. These pages are usually laid out in a classic tree structure.

Example:
Home Page
1. Main section page 1
a. Sub section page 1a
b. Sub section page 1b
2. Main section page 2
a. Sub section page 2a
b. Sub section page 2b

The home page will provide links to the main section pages, which will in turn provide links to the sub section pages that relate to the same topic. All pages will link back to the home page for website navigation purposes.

Home page
All websites have a home page. The home page is the entry point for most customers and is usually reached by simply typing in the domain name in the internet address bar. For example, if you type www.xtremeprogram.com into the address bar of your web browser, you will find yourself on the home page of Xtreme Program.

The home page has the primary purpose of guiding customers into your website. Some home pages will automatically redirect you to a different web page, while others will force you to choose a part of the website to navigate separate from the other parts of the website (for example, some home pages require the web surfer to pick a language of preference before continuing).

The best home pages are more than just an entry page to the website; they contain introductory information, site navigation, and other characteristics which interest the client in the website. A stellar home page should clearly define the purpose of the website and convince the reader to venture further into the website. It should also provide a clear indication of how the client should navigate the website, what type of information is available in the various sections, and how to properly access the information.

Main section pages
Main section pages can vary tremendously between websites. Usually, the main section pages are mini home pages for the subsection pages to which they link. The main section pages should provide more detailed information about a topic than the site home page does, but it should also provide a navigational system for the appropriate subsection pages. At times, this navigational system might be a text link in a paragraph or it could be included on a navigation bar.

Sub section pages
Sub section pages are the "nuts and bolts" of the website. This is where the nitty-gritty information is stored and provides detailed explanations or information for the clients who really want it. Most casual web surfers will never make it to all of your sub section pages. These pages are very specific and will not provide information that will appeal to all potential clients. However, sub section pages are extremely important because they provide your true clients (those who intentionally and purposefully enter your website) the information that they truly want.

Next: Example website structure

Communicate effectively through your website

Websites are perhaps one of the most important advertising and marketing tools available to promote yourself or your business. A website is like an extended advertisement or promotional brochure that is available to people all over the world.

Like a promotional brochure or advertisement, your website should clearly communicate a message to your client. After visiting your website, a client should have a detailed understanding about what you offer, your product, or your cause. Whatever the focus of your website, it is important that you communicate this message to your clients efficiently and effectively.

Steps to communicating your message effectively

1. Decide the purpose of your website
What is your website about?
What do you have to offer?
Who are your clients?
What markets would you like to target?
The reason for publishing a website, the main topic of your web page, and the primary demographic of your clients will shape the way your website communicates in style, language, and accessibility (how your website is read and navigated).

2. Write a little about your company and your purpose statement
Concise language is best for websites
Write in a manner that the majority of your clients will understand
Put the most important things first
Write about your company as if you were writing a promotional brochure. Highlight the important aspects of your company and what you offer. Remember to focus on the most important aspects first. The first sentence on your website should resemble a purpose statement. While writing, rethink the questions in step 1.

3. Divide your text
Look at the natural flow of your writing, can you divide the text into sections?
Group like topics together and separate distinct subjects
Small sections of text are easily managed by most web surfers. Many internet users become quickly bored with large sections of text and extremely long pages. Try to keep sections short and to one point or topic.

4. Go through your text with your web designer
Now that you have written some text about your company, your web designer will have a better idea of what you have to offer and the message that you should try to communicate with your website. Your web designer can suggest subjects that you should elaborate on or eliminate.

Website text is very useful to web developers because they may not clearly understand what your company purpose is or your specialties. By writing a clear, concise description of yourself or your business, you are ensuring that your website will be well constructed to display your purpose and qualifications.

Next: Structure of your website

Deciding on a website style

Websites come in many different styles, but there are some that are consistently easy to read and navigate. XP Mallorca suggests choosing from one of the classic web site constructions, in order to make sure that all of your clients can easily find information on your website.

Classic website styles involve one of two types of navigation: top navigation and left-side navigation. One type of site navigation does not necessarily negate the other type of navigation. Some websites use a combination of top navigation and left navigation, but one navigation bar always contains the predominant or main links.

An example of top navigation
An example of a combination of top navigation and left-side navigation
An example of a left-side navigation (external link)

In addition to navigation menus (or navigation bars) site info is also organized in a few classic styles for easy accessibility. Basic text is organized in column formats. The most frequently used column formats are single column, two column, and three column.

There is tremendous room for variation within the column formats. Some columns can contain pictures and text, while others may just feature small text blocks. The format of information on the page may change as the web page switches from primary information to secondary information. For instance, a web page may begin with a single column format (where a main photo or introductory text is in a single column), then the secondary information is distributed in a two or three column format below the main information. Regardless of whether or not you choose to use a single format or a combination format, it is important that your site information is distributed in a clean and easily-read manner.

An example of single column format
An example of two column format (external link)
An example of three column format
An example of combination format (external link)

Your web designer can suggest a website format for you, and explain the pros and cons to various formats and combination formats. Some information will fit better into one format than the others. Speak with your web designer about website styles that are appropriate for your website.

Tomorrow: What do you want your website to communicate?

Begin thinking about your website

So, you have decided that you want a new website...
Whether you want a completely new website or you want a new flashy style applied to the website you already have, the following information will give you guidance to deciding the perfect web site design.

Determining the style of your website should be an exciting process, but it can be stressful for both you and your web designer if your idea of the perfect website keeps changing. Your web designer can give you suggestions and present you with stylish web templates, but you need to communicate the design ideas you have imagined so that the designer understands the message and attitude you want to exhibit with your site. Web designers are not mind readers; help them and yourself by honestly explaining what you want.

The first step in finding the design for your website is to think about the attitude and the purpose of your site. Do you want your website to compel customers to purchase from you? Do you want to provide an educational or informative service? Do you want a shocking design or a tranquil soothing style?

These are questions that a web designer can pose when you first begin to discuss the design of the website. Think about your company and its previous advertisement campaigns or imagine what type of advertisement would appeal to your clients. Sometimes it is helpful to imagine a television advertisement. What type of atmosphere would your present in the television ad? Would the content be mostly images or mostly text? Is spokesperson lively and compelling or is the spokesperson calm and collected? These types of questions can also be applied to your website design. After all, a website is an in-depth advertisement campaign on the internet.

Tomorrow: website styles