Translating a webpage is a very easy task… if you know how to do it.
Definition of a webpage – what is it?
Let’s start with a definition what a webpage / website actually is.
A webpage is an HTML file stored somewhere on your server, but it can be also stored locally on your computer.
A website is a collection of webpages.
Sure, there might be some other files assotiated to your webpage, such as CSS, PHP, JS, image files, etc., but these are not interesting to us, as they mainly contain code, not an actual translatable text. Or, sure, they might contain translatable text too, but a good webcoder would place any translatable texts into separate files and reference them from their code so that such code can be used internationally.
A typical webpage (HTML) file inner structure will look like this:
Note all those tags, i.e. elements that control the appearance of a webpage. These tags actually tell the webbrowser which fonts or colors to use and how to structure the webpage. These are not interesting to us, because they are not translatables. They will be the same on any webpage in any language.
So what is actually translatable on a webpage? Simple answer: plain text. And how do you find it? Plain text is usually enclosed in these tags: <p>, <h1>, <h2>, <h3>, <div>, <b> and perhaps a few others.
So this was the very basic theory behind the webpages, and now let’s take a look at how you can actually translate it.
1. The naive approach
Of course, you could open such a HTML file in a text editor, such as Notepad. But let’s take a look at this picture:
You can immediately spot the fundamental problem with this: everything is black, so you don’t really know what to translate.
Ok, you could perhaps use some more sophisticated tool, such as Notepad++:
This is a bit easier, because individual tags are distinguished by color…. but still, translating in this tool would be very exhausting and very much prone to an error: you could easily remove a tag here or there… and your webpage would stop working properly.
2. The professional approach
To work effectively, it’s better to use a tool that has been specifically designed to deal with this. There are numerous such tools on the market (SDL Studio, DejaVu, CaféTrans, Across, Transit….), but I will only describe one of them here, because it’s to certain degree free to use, and it’s a very robust tool used widely used in the translation industry: memoQ
Why are these professional tools better?
Because, to a large degree, they will hide everything non-substantial, and only show the text to be translated. They will show some tags in the text, but these are extremely easy to identifify…. and memoQ or WordFast (collectively known as “CAT tools”) will alert you if you accidentally remove a tag.
Working with memoQ:
First of all, you will need to create a project and import your HTML file into this project. Watch the video below on how to do it.
Once you are done preparing the project, you can simply open it and start translating. Observe that memoQ will mostly only show the translatable text along with some occasional tags in grey that are very easily identifiable.
You can simply translate all text now.
Putting it all back
Once the translation is ready, you will need to somehow export it back to the HTML file so that you can take this translated HTML file and upload it to your server.
You can do this by clicking “Export”. MemoQ will then export your file back to its original HTML format.
Please watch this video on how to do this in detail: