About Me HTML Section

This page is a continuation of how to set up your Proz profile for an effective, online resume.

Because presentation is important, it will serve you well to make this section of your profile look nice.

As shown in the image below, this section works with basic html code, some tips of which are provided to the right of their site.


HTML code to edit your profile – not as difficult as first appears.

To help you set up your own profile, you can view my full code here and compare it to my online profile. Below are some basic explanations of html code to help you, drawn from what I used in my profile above.

<img src="https://001yourtranslationservice.com/me/CV/proz/header.jpg">

The code for top image in the About Me section of my proz profile, repeated here below.

I tried playing around with Flickr and Picasa to get a direct link to an uploaded picture, but could not find a way. If you cannot find a way yourself, for $20 I can host a number of your pictures, translation samples, diplomas and so forth on my own site so that you can use them in these codes. Write to me through the contact form below if you need help with this.


This means a line break, so having several in succession, such as <br><br><br> would create two blank spaces following the paragraph ending with this string of code.

<img alt="" src="https://001yourtranslationservice.com/me/CV/proz/me.jpg" style="float: right; margin: 4px 7px;" /><br>A <b>ProZ certified member</b> with over 20 years of experience translating from Czech, Slovak and French (samples below). I obtained an <a target="_blank" href="http://001yourtranslationservice.com/me/CV/pics/diploma.jpg">Honours Degree in Economics</a> at Queen’s University in Kingston Ontario, Canada, and I can translate in a broad range of subjects. I specialise in finance-related documents.

The style=”float: right; margin: 4px 7px;” within the <img /> string (where img stands for image), embeds the image in the paragraph so that it floats on the RIGHT hand side of it. Alternatively, you can use Left instead, if you want your image nestled in the top left hand corner of your paragraph. Whether floating in the top right or top left of a paragraph, you would always put this code/script at the START of the paragraph, as shown in the sample above.

Travel while you work - Greek coastline.

Travel while you work – Greek coastline.Greece

The margin: 4px 7px within the Style of your image refers to the space around your picture, the numbers starting like from the top of a clock and moving around clockwise. The px stands for pixels. Therefore, margin: 2px 7px 5px 4px would create a space of 2 pixels above your picture, 7 to the right of it, 5 at the bottom and four on the left. If you only put two values like I did, it will create a space of 4 pixels on the top and bottom of your picture, and 7 on the left and right. Play around with the numbers to get the exact look that you want. When you update/save your changes on your proz profile, use another browser with which you are not logged into your account to view what it will look like to your potential clients. After you save your changes, go to the other browser and refresh the window (F5 in Windows or Command R in Mac) to see the changes. Whenever designing like this, it is always best to view the results in as many browsers as possible, as each browser can render a page slightly differently.

I obtained an <a target="_blank" href="http://001yourtranslationservice.com/me/CV/pics/diploma.jpg">Honours Degree in Economics</a> at Queen’s University in Kingston Ontario, Canada

This code creates a link from any text, in this case Honours Degree in Economics, pointing to the image http://001yourtranslationservice.com/me/CV/pics/diploma.jpg. The link can point to an image, like a scanned copy of my diploma, or another webpage, or an online Word document, if you want to display your previous translation samples, for example.

Vrbovo, Bulgarian Mountains

Pictures of my travels while translating: Vrbovo, Bulgarian Mountains

Within the <a … >.. </a> link code, you will notice target=”_blank”. This code instructs the browser to open the link in another tab or window. This can be very useful, because you do not want your potential customers while perusing your profile to wander away from it and have to press the Back button (Delete on the keyboard) to go back to your profile once they have viewed your diploma etc. Many people might get confused and lose their spot and give up, so it is best to open up your links in a separate window, using this _blank command. They then only need to close that window once viewing it and will end up back at the tab or window showing your profile.

<h4>Translation Samples:</h4>

The H code is for Headings, and like any website, proz has its own default formats. H1 is generally always the largest font, working down to H2, H3 and H4, sometimes more. You can experiment with the different heading formats to get the look you like. Headings are good because they visually separate sections and make reading easier and more pleasant.

A little tip: in html, every special code must be opened, and then closed. So the link code <a …> must be closed with a </a>, the heading code <h2> with </h2> and so forth. One thing you cannot do is something like:

<a> text <h1> text </a> text </h1>
but it must be like
<a> text <h1> text </h1> text </a>

Meaning you can embed code within code, but it must never overlap like the first example.

<b>Czech to English:</b>

B simply represents Bold, while I is for Italic and U for Underlined. If you want bold and underlined, for example, you could use


Remember not to overlap the code!

<ul><li><a target="_blank" href="http://001yourtranslationservice.com/me/CV/proz/CZ2E_Annual-Report_Financial-Statement_2009.doc">Annual Report and Financial Statement</a></li>

The UL creates a section of bullet points, while the LI refers to individual points.

Travel while you work - Greek coastline (2)

Travel while you work – Greek coastline

This is the section I used to show my previous translation samples, each one using the _blank command to open in a separate window or tab, or in Word or OpenOffice on the person’s computer.

Remember to close each bullet point with </li>, and </ul> once you are done with the bulleted section. As explained above, you can download my full script< to use as an example and compare how the results look when viewing my profile.

<a href="mailto:[email protected]">[email protected]</a>

This is a typical <a> link, but the mailto turns it into a command to activate the default email program installed on the viewer’s computer (with the email address automatically inserted into the To box). But this will not work for those who do not use such software and are used to using an online service such as gmail or hotmail. But no worries, because the address is visible, they can just drag across it with their mouse and copy/paste it into their online email site.

The next page of this section explains how to set up your translation samples.

Write to me if you would like help setting up your proz profile by posting images, documents or other files to my site:

Avatar photo
Latest posts by madmin (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

translation CV campaign