Self-learning Portfolio 1 by Oliwia Fekner

Translating a HTML page using OmegaT

oliwiafekner — 2025-03-30 12:37:25 UTC

My first self-learning task will be an attempt to translating my own simple HTML page (from Polish into English), which I've created for the purpose of my Bachelor's Degree Project at Jagiellonian University. The project itself was about creating a fully functional (and interactive) web application in Python programming language, with the topic being chosen by the student – in my case, greek cuisine. Since I had studied Electronic Information Processing (and now Translation Studies), I think translating web pages using CAT Tools could provide some valuable insight into both fields of my studies. By doing this task, I'd like to find out:

Is the importing of an HTML file any different from importing a regular DOCX file?

How is the imported HTML file displayed in OmegaT (compared to a regular DOCX file), in particular:
- what does CSS formatting and functional elements (as HTML tags or images) look like?

Source

oliwiafekner — 2025-03-30 12:58:01 UTC

For the purpose of this task, I will use the subpage "Recipes", and one particular (Moussaka) recipe. I've chosen this part of the website, because it contains both raw text and functional elements (such as adding comments) that I can work on to answer my questions.

Getting the file

oliwiafekner — 2025-03-30 13:11:12 UTC

To get the HTML file on my computer, I right-clicked anywhere on the screen, chose the "Save page as..." option...

First thoughts

oliwiafekner — 2025-03-30 13:20:20 UTC

The first thing I've noticed when I opened the source file, was how OmegaT handled the tags. As we can see on the screenshot, the first segment has a comment automatically added by the program, saying: "Tag: HTML Attribute: lang."

Translation process

oliwiafekner — 2025-03-30 14:08:17 UTC

I've translated the subpage manually (while leaving the links and specifications blank) and I haven't had any difficulties during the process. What's more, I have translated the alternative texts for images to include accesibility. I was wondering, whether I should translate the comments though. On this particular subpage, there's one comment from "Reviewer" that's written in Polish. My final decision was to leave it as it is, because even for the English version of the website, there could appear comments in various languages, that aren't part of my actual work.

The source file

oliwiafekner — 2025-03-30 14:12:26 UTC

Here I present what the original website file looks like (without the CSS formatting).

The target file

oliwiafekner — 2025-03-30 14:17:55 UTC

Here is a screenshot of the translated website. As we can see, OmegaT did well. Notice how it used tags for text styling and functions (like the menu on top of the page or tick boxes in the ingredient list).

Conclusions

oliwiafekner — 2025-03-30 14:25:56 UTC

I feel that OmegaT could've been a very useful tool for me as a web designer years ago, while creating my website. I'm sure adding other languages to my project would've been super easy and fast, as it was now, while doing this task. I think that in my further studies, I should do some research regarding HTML page translation, maybe by talking to translators from this area or going through some reddit posts.

Answering my questions from the start:

The HTML file import isn't any different from a regular DOCX file (the program detects the file type).
The display of the file in OmegaT shows the segment type in comments, for example that something's a link in the source file.

This task was performed on 30th March 2025 and it took about an hour and a half to complete.

It was updated on 15th June 2025 and it took about two hours to improve it.

Getting the file

oliwiafekner — 2025-06-15 10:00:10 UTC

... and saved the .html file in a folder I've prepared earlier.

Saving the file

oliwiafekner — 2025-06-15 10:03:58 UTC

The first interesting thing to happen was that not only have I saved the HTML file, but also a whole folder...

Saving the file

oliwiafekner — 2025-06-15 10:10:49 UTC

... containg for example the CSS file or images used on this particular subpage of the website. Then I proceeded to add the file to OmegaT.

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:22:46 UTC

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:23:29 UTC

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:24:32 UTC

I changed the source language to Polish, and the target language to English.

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:26:23 UTC

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:27:32 UTC

The fact that the .html file could be seen while choosing the source file was promising, so I proceeded.

Adding the file to OmegaT

oliwiafekner — 2025-06-15 10:30:04 UTC

As I can see, the file is being filtered as the HTML and XHTML file.

First thoughts

oliwiafekner — 2025-06-15 10:40:44 UTC

Here is another example, a segment with a link to the CSS file, having a comment: "Tag: LINK Attribute: href." I really like this kind of solution, because the translator has it pointed out (which elements are tags in the source). When you are familiar with HTML, it should be very easy to navigate through the source text then.

The source file

oliwiafekner — 2025-06-15 11:50:12 UTC

The target file

oliwiafekner — 2025-06-15 11:57:49 UTC