Note from site staff: The "Edit your site" feature described below is no longer available. To include images in your profile page, you must first upload them to your web hosting provider and link to them there. If you are a platinum member, you can also host your site for free at ProZ.com. Click here for details.



TUTORIAL
How To create a ProZ profile using HTML

by

Gianfranco Manca
Click on my name to see
my profile with examples.


This document is a quick guide for creating ProZ profiles using HTML code to obtain some special effects. It is not a complete HTML manual and it contains only a subset of all possible HTML instructions.

To use this guide you only need some experience with tagged languages and a little patience. It should be really simple to follow, although the explanations don't cover in detail every aspect.

The HTML code is highlighted in red to make it easier to follow; all the text in black is a placeholder and each user should insert their own text, URL links, picture names, etc...

The code must be written in the fields available for editing on your ProZ profile (Specialization and Background). The HTML tags inserted as described below, will be interpreted and displayed as in a normal web page.

TEXT ATTRIBUTES

Let's start from the easiest text attributes and then progress to the more complex features.

  • Bold


    • Normally used for headers or emphasis in the body text


    text text <B>words in bold</B> text text etc...


    Note: don't forget the closing tag </B> or ALL the text after the opening tag will be in bold. In general, there is a closing tag for each tag. Don't forget them!


  • Italics


    • Normally used for emphasis in the body text


    text text <I>word in italics</I> text text etc...


  • Underlined


    • Can be used for emphasis, but it is out of fashion and somehow less agreeable to the eye than other attributes. It is better to use italics or colours but, if you want to use this attribute, here is the required HTML syntax:


    text text <U>underlined words</U> text text etc...


  • Larger font


    • To write words or headings using a larger font, use the following syntax:


    <font size +1>words in larger font</font size -1>


    Don't forget to restore the previous font size with the second tag or the whole text following the opening tag will be larger.

    Also, +2 +3 and -2 -3 can be used, with caution...


  • Smaller font


    • To write words using a smaller font, use the following syntax:


    <font size -1>words in smaller font</font size +1>


    Don't forget to restore the previous font size with the second tag or the whole text following the opening tag will be smaller.


  • Centered text


    • Use the following syntax:


    <center>text to center</center>



    Note: the <center> tag can be used to center graphics too.


  • Coloured text


    • This attribute is a bit more complex. A color can be specified by value or by name.
    The value can take the general format "color=#00FF00" is green because the green component is FF
    "color=#FFFFFF" is white because all components have FF value.
    To know the complete set of colour values, visit the following sites:

    http://html-color-codes.com/

    http://websitetips.com/designer/colors2.html

    http://websitetips.com/designer/hex.html


    The colours can also be called by name. There are only 216 named colours have a name, while using values the whole range of millions of colours can be displayed. For a complete set of colour names and corresponding values, visit the site: http://allchin.net/webcolours.html


    To insert text in colour, use the following syntax:


    <font color=LimeGreen>Coloured text</font>

    or

    <font color=#32CD32>Coloured text</font>


  • Running text


    • Insert your text to scroll between the marquee tags:


    <marquee>Scrolling text here</marquee>

    LINKS

  • Links to a web page


    • Use the following syntax:

    <a href="http://www.yourlink.com">Text for the link</a>


    The text highlighted in blue is the URL to link and will be not visible.

    The text highlighted in green is the active clickable text on the page.


    If you want the linked page to appear on another instance of the browser without substituting the current page, use the following syntax:


    <a href="http://www.yourlink.com" target=abc>Text for the link</a>

    where "abc" is the symbolic name of a new browser window. You can write here any name you like; "abc" is just an example.


  • Links to a document


    • It is similar to the previous syntax.

    You can have a document somewhere on-line and link it using its URL.


    <a href="http://www.mysite.com/mypath/mydoc.html" target=abc>Text for the link</a>

    This instruction will insert a link to a document called "mydoc.html" available on line in at the address www.mylink.com/mypath/mydoc.html and it will be opened in a new browser window called "abc".


  • Link to email


    • Once more, a similar syntax that will open your email application:


    <a href="mailto:[email protected]" target=abc>My Email</a>


    Where:

    [email protected]is your email address
    target=_blankis an empty email that will be opened when the user clicks on the link
    My emailis the active text visible for this link, write here what you want the user to see.

    PICTURES

    The following instructions assume that the pictures are available, and that you know their name and location. See the section "Advice and Tips" below for uploading pictures onto a web space made available within ProZ.


  • Displaying a picture


    • <img src="http://www.yourdomain.com/pics/pic01.gif" border=0> Where:

    pics/represents a directory inside public_html on your hosting account.
    (see below for advice on uploading files in this area)
    pic01.gifrepresents the graphic file pic01.gif
    (names to folders and files are assigned by you)
    border=0is necessary for not having a border around the picture:



  • Inserting a bar or divider

    • A bar is a normal graphic image, generally much wider than high.

    The code is similar to the previous example, with the difference that you may want to resize the width of the graphic according to the space available.

    <img src="http://www.proz.com/home/556688/pics/bar01.gif" width="400" border=0>

    The code highlighted in yellow forces the graphic element to adopt the width of 400 pixels. If you don't know the size for your picture/bar, you can find it by trial, increasing and decreasing the value until when the result is satisfactory.

  • Inserting a clickable picture

    • Although these instructions are a bit more complex, they are nothing more than a combination of previous examples.

    <a href="http://www.mysite.com/mypath" target=abc><img src= "width="400"http://www.proz.com/home/556688/pics/pic01.gif" border=0></a>

    Where:

    http://www.mysite.com/mypathis the URL for your link
    target=abcis the option for opening a new instance of the browser
    http://www.proz.com/home/556688/pics/pic01.gifis the URL for the clickable image

    ADVICE AND TIPS

  • Linking pictures

    • Before inserting the pictures and icons in your profile, make sure that you have all the documents available. Try to find (or create yourself) pictures/icons having similar style and size.

    Upload pictures and documents onto your home page area. You can access it from the link "Edit your site" (available on the left bottom corner of your ProZ profile page). Familiarize yourself with the functions available there (i.e., create folders, upload files, etc...)

    My advice is to place all your graphic files in your PC in a single folder and then to create a folder called "pics" on the web space. At this point you can upload all the pictures to that location.

    Similarly, if you want to create HTML documents and link them to your ProZ profile, follow a similar plan (create all your documents, create a folder "docs", upload the documents to the "docs" folder).

    After your graphics files or documents are in place, you can start linking all the items to your profile.


  • Text attributes

    • It is advisable not to exceed in the variety of attributes. For example, use parsimoniously underlined and bold attributes.

    The best results can be achieved by writing first all your text in Word, including all the attributes, so that you will have a fairly good idea of the final result, and then by transferring it to your profile, using a mix of cut & paste and HTML code (for the editing of the text, as required).


  • Editing and testing

    • While editing, which can be time consuming, you can save time and frustration using two instances of the browser, side by side. Use the first to edit, and the second to review the results.

    In case you are not satisfied with the result, edit on the first and then, after confirming, check the changes refreshing the second instance. Gradually, you will get the desired result without getting lost and without wasting too much time.

    As a precaution, during your editing, keep one or more intermediate copies of the previous content of your profile copied in a separate document.

    In any moment, if you are not happy with the results obtained, you can always paste back a previous stage of your profile content.


    Gianfranco Manca
    English-Italian
    Technical Translator and Localization specialist

    DipTrans, Diploma in Translation (IoL)
    MIL, Member of the Institute of Linguists, London

    Email 1: [email protected]
    ProZ profile: http://www.proz.com/translator/12340