- Premier Colloque étudiant du Département d'études langagières: Langagiers, langagières, unissons nos voies!
- Le Robert correcteur est arrivé !
- Évaluer le langage des travailleurs, le défi quotidien de la TÉLUQ
- De la complexité d’une langue à sa richesse culturelle
- Traduction de la saga Harry Potter 2
- Entretien avec le traducteur français des livres de Harry Potter
- Démence : l’apparition des symptômes retardée chez les personnes bilingues
- Rester debout
- The Bilingual Brain - Understanding the bilingual brain with the help of neuroimaging techniques
- Les joyaux de la langue – partie III
While doing research on the core differences of HTML, I felt as if I was submerged in an ocean of information. I will do my best to keep things simple, but I will also give the reference links for those who would like to do further reading on the subject.
The HTML I have mostly been using in my examples thus far is known as HTML 4.01. It is the revised version that offered corrections of errors from the previous version. In a nutshell, it offered:
- Enhanced forms with improved accessibility for people with disabilities;
- Extended HTML for style sheets, scripting, frames and embedding objects;
- Improved support for right to left and mixed direction text;
- Tables with richer elements, including captions and column groups.
For more information, consult the W3C (World Wide Web Consortium) document Introduction to HTML 4.
While HTML is still being perfected, there is still room for improvement. Hence the reason for creating XHTML.
XHTML stands for “eXtensible HyperText Markup Language”. It is essentially HTML written as XML (eXtensible Markup Language). While almost identical to HTML 4.01, XHTML is a stricter and cleaner version.
XML serves as a tool to identify error-free and well-written HTML tags. XHTML was created by combining HTML with XML and it is used to allow browsers, either computer-based or phone-web, to interpret a bad markup language, since smaller devices often lack the resources or power to perform this task.
Some of the main differences are:
- While HTML 4.01 may allow a faulty base structure to work, XHTML requires the <html>,<head>, <title> and <body> tags to work;
- XHTML elements must be properly nested;
- XHTML tags must always be closed and in lower case.
For more information about XHTML and its differences compared to HTML 4.01, visit the w3schools’ XHTML Introduction webpage.
As I’ve stated earlier, HTML 4.01 is a revision of previous versions of HTML and was released in 1999. Since then, the web has gone through many changes, and an updated HTML was needed to accommodate this. However, HTML 5.0 is still a work in progress, and the major web browsers are now just starting to support it. As a new version comes along, more and more features are added to HTML 5.0.
This new HTML supports a <canvas> tag for drawing, <audio> and <video> tags for media playbacks, and content-specific tags like <article>, <footer>, <header>, <nav> and <section>. It also supports form controls like calendars, date, time, email, URL and search bars.
One of the goals of HTML 5.0 is to keep the development process visible to the public. This means that with a little amount of searching, anyone will be able to see what new features are being implemented and what’s being researched.
For more information on HTML 5.0, visit the HTML 5 Tutorial section on the w3schools site.
This brings a close to my blogs on HTML and translating for the web.
I would like to thank all of you for taking the time to read my blog, but more importantly, to have allowed me to share my research and what I have discovered while writing these blogs.
It was a fun, but trying experience. Often, I felt like my knowledge would not be enough, and I feared I could not rival the passion and expertise of my fellow bloggers! But through determination, friendly advice and encouragement, I made it.
I would like to take a moment to thank the LTRC for this amazing experience. I have learned so many things and improved my knowledge and skills in a way I could not have otherwise. Through trial and error I have come a long way, and I still have a long way to go!
Thank you all. Don’t give up and keep striving for your goals!
In this blog, we will see the last of the basic HTML tags required to build a webpage. While I chose what I considered essential, there are a lot more tags to learn and discover. To that end, I will list a few online sources and books that I found particularly helpful at the end of this blog.
Today’s HTML content includes hyperlinks, images, acronyms and abbreviations.
< a href=" " > < /a >
The hyperlink and image tags are slightly different than the ones we’ve seen so far. While the basics remain unchanged, there is an added element in the opening tag. This is best shown with an example. Here is the HTML code used to link to the Google homepage:
< a href="http://www.google.com/">Google homepage< /a >
As you may have noticed, the opening bracket has more content than usual. This is called the href attribute, which serves to create a link to another document. It can be used to link the user to another webpage, or to a page on the same website. This feature is particularly useful to lead the user to a page where more detailed information can be found. It can also prevent additional content from being written or making the page too dense with information. Text can also be added between the closing and opening brackets, making it appear as a hyperlink.
< img src=" "/ >
Like the line break tag, the image tag does not come in pairs, but it is still very important to add the forward slash before the closing bracket for the picture to display correctly.
To put a picture on a website, it first needs to be hosted on another website. This basically means that a picture cannot be directly uploaded from a hard drive and onto the webpage. There are several free websites that makes it possible for users to upload pictures for the specific purpose of hosting them, thus allowing them to post them on either social media websites or their own webpage.
Here are a few of those websites:
- Photobucket : http://photobucket.com/
- Flickr: http://www.flickr.com/
- ImageShack: http://www.imageshack.us/
- Imgur: http://imgur.com/
These are all websites I have used in the past. They are all user-friendly, but there are a lot more at your disposal on the World Wide Web!
Once a picture has been uploaded, the website will provide a link. It is important to note that it is not the link to the webpage where the picture is displayed! It will be another link that will specify the source of the picture to the image tag. Here is an example:
< img src="http://www.example.com/picture.jpeg"/ >
Alternate text can also be added to a picture. This text appears when the cursor is placed on top of an image for a few seconds. It will usually show up in a beige box and can take the form of a short description of the picture, a caption, or its title.
To do so, use the same tag as earlier:
< img src="http://www.example.com/picture.jpeg"/ >
Now add the following code after the link and before the forward slash:
alt="this is where the alternate text goes"
The final result should look like this:
< img src="http://www.example.com/picture.jpeg" alt="this is where the alternate text goes"/ >
The textbox and the font size for the alternate text are usually quite small, so it’s a good idea to keep the text short and to the point to make it easy to read.
< acronym > < /acronym > < abbr > < /abbr >
At the end of the lecture we received in our Rédaction Web class, the lecturer gave us one last HTML tag he found particularly useful for us.
An abbreviation or an acronym must be spelled out upon its first use. But on a webpage, information can end up being scattered and make it less accessible for users.
This HTML tag will have the same effect as hidden text with an image: as the user places his cursor on top of the abbreviation or acronym, an alternate text box will appear with the full spelling. This is a good accessibility feature and helps prevent the users from constantly scrolling or searching for the full spelling of the word in the text or website.
Here’s what it will look like.
< acronym title="Conseil de recherches en sciences naturelles et en génie" >CRSNG< /acronym >
< abbr title="Boulevard">blvd.< /abbr >
And there we have it, the basics of HTML! This is where the fun begins.
HTML takes a lot of patience, especially at the beginning. Even when writing every tag carefully, you are bound to make mistakes. I made plenty myself! Always remember that these mistakes can easily be fixed.
Here are the websites I mentioned earlier. They were very helpful in writing this blog because they provided a lot of interactive content specifically designed to help users learn through practice:
- W3Schools.com, the world’s largest web development site: http://www.w3schools.com/
- 30 Days to Learn HTML & CSS: http://learncss.tutsplus.com/
- HTML.net: http://www.html.net/
As for books, I recommend the following two:
- HTML for Dummies, by Ed Tittel and Stephen J. James, 1997 (available on Amazon)
- HTML & XHTML : The Definitive Guide, by Chuck Musciano and Bill Kennedy, 2006 (available on Amazon)
But these are just a few pages out of thousands written about HTML. My suggestion for those interested in picking up a book would be to stop by the local library and see that they have on their shelves!
I hope these blogs helped some of you understand the concept of HTML. To me, its logic makes it feel like another language altogether. I had a lot of fun writing my first webpage using HTML during the lecture in class. Seeing the elements come to life as I got the codes right, fixing and understanding my mistakes and even taking a few initiatives of my own felt very satisfying! I can only hope you will all feel the same when you attempt the same experiment.
Thank you for reading!
In part 2 of my HTML blog, we looked at the tags that make up the structure of a webpage. The next set of tags will enable you to input elements that will bring the structure to life. This includes heading tags, paragraph tags, line break tags and text formatting tags.
< h1 > < /h1 >
The heading tag needs to be placed before a paragraph, or a new area of content. There are six levels of headings with different size fonts, based on the needs of the webpage. The first, < h1 >, is the largest size, and level six, < h6 >, is the smallest. The most important headlines should be placed in < h1 > tags. Please note that these tags should not be used to make the text bolder or larger within a paragraph or in any text other than the heading.
Figure 1 - source
< p > < /p > and < br / >
Paragraphs are a basic component of any webpage. To make the text big and bold, paragraph tags will need to have nested HTML elements (< i >< b >example of nested elements< /b >< /i >) to have the same effect. This can make the HTML code look complicated depending on the amount of formatting that needs to be done. In HTML 4.0, a paragraph tag can be added without the closing tag (< /pr > without causing an error. However, I will explain a bit further why I advise against this practice.
Rather than adding a new paragraph, a < br / > tag can be used to put a line break in the text. Unlike the rest of the HTML code we’ve seen so far, this tag is the only one that doesn’t require a closing tag to end the code in HTML 4.0 and HTML 5.0.
In some of the HTML tutorials that I have seen, the line break tag was written without the forward slash. This is because some types of HTML (HTML 4.0) do not require a closing tag to make the code function (the paragraph and the line break tags are examples of this). There are, however, two reasons why I advise you to include a closing tag in the HTML code:
1- Making a habit of closing the tags will lower your chances of forgetting one.
2- XHTML, a more recent type of HTML code, requires all tags to be closed, including the line break and paragraph tags.
For those who haven’t heard of XHTML, or HTML 5, worry not! I will write about the different kinds of HTML in an upcoming blog.
Format tags < strong > < /strong >, < em > < /em >, < small > < /small >, < sub > < /sub >, < sup > < /sup >
For those already familiar with basic HTML, either from forums or message boards with the HTML enabled, some of these tags might seem unfamiliar. Back in the days of HTML 4.0, the formatting tags that were used were < b > for bold and < i > for italics. While these tags still work and are sometimes used while writing HTML code, the tags listed above are more current. The W3School website has a small article about the formatting tags:
Often, < strong > renders as < b >, and < em > renders as < i >.
However, there is a difference in the meaning of these tags:
< b > or < i > defines bold or italic text only.
Philippe Loranger taught us the functions of the new tags I have discussed today. According to him, older tags will soon vanish from use. I found it important to explain the differences between the old and new tags.
Here is an example of the formatting tags I listed above and their effect on the text format. In my upcoming blog, we will see the tags used to input hyperlinks, images, bullet lists, acronyms and abbreviations.
Figure 2 and 3- source
Please note that to prevent issues with your internet browser, I have added extra spaces to the tags. They would normally be written without the extra spaces before and after the brackets (< >).
Back when I knew little about HTML, I often imagined what a page of code would look like. What my mind conjured was a frightening picture that I thought I would never understand, and for a few years, it delayed my interest in learning anything related to HTML. Lines upon lines of code, for pages on end… It was quite the nightmare!
Figure 1- Source code taken from http://www.facebook.com, viewable by right-clicking on any web page and selecting “view page source”.
While there can be a lot of lines of code in HTML tags, they are much simpler than they appear to be. There is a strict structure to follow and very simple logic behind it all. Once these concepts have been grasped, the task becomes more about patience than skills!
The Basic Structure
Every HTML code starts with a basic structure. Think of the codes as the frame of your website.
< html >
< head >
< title > Title of the document < /title >
< /head >
< body >
< /body >
Every blank HTML webpage starts off like a blank canvas. Let’s take a look.
< html > < /html >
This tag will essentially contain the structure and any additional tags added to the webpage. Anything added outside of these tags will not appear on the website, so it is important to make sure that they are the first and last tags you see on your page.
< head > < /head >
The head tag contains all the head elements of the webpage. This is where the < title > will be inserted.
< title > < /title >
The title of your website will be written between these two tags and is required for the website to function. This tag will make the title appear in your web browser, give a title in the favorite folder when added to favorites, and most importantly, display a title for the webpage in the search-engine results.
< body > < /body >
Aptly named, the body tag is where the action happens! Beyond the basic tags listed in this blog, this is where commands will be entered to give life to your website. Simply put, you will be adding tags within tags. This is called nesting.
Nesting will be useful to format your text. This is what will allow you to make your text bold, underlined, and italic. And this is just the beginning!
An important point to mention about tags is that they always come in pairs. During the lecture given by Loranger in our Rédaction Web class, most students forgot to add the matching pair of the tag to end their code. I noticed this as I was helping some of them with their HTML. It is also important to note that the second tag will always have a forward slash between the brackets and before the letters (i.e. < html > < /html >). This forward slash “tells” the HTML code to stop at that point. If your entire text is suddenly bolded or underlined, do not worry! It is probably due to a stray forward slash and this can easily be fixed.
For my next blog, I will talk about the other basic tags used in an HTML page. I will teach you how to create headings and paragraphs, add links to other websites, and how to add pictures.
Back in January, the professor of our Rédaction Web class, at the Université du Québec en Outaouais, invited a guest lecturer to teach us about the basics of HTML. It was an unforgettable experience to see everyone at work in the classroom. Classmates, with varying computer skills, accomplished all the webpage building tasks set out for them by the lecturer. Classmates smiled when they saw that a tag, entered correctly, had resulted in a new feature for our project.
The lecture was given by Philippe Loranger. Besides being a fountain of computer science-related information, he also works tirelessly to make the governments’ pages as accessible and as error-free as possible. After the lecture, the whole class had understood the amount of work needed to reach such a goal, a difficult but not impossible task.
HTML stands for “Hyper Text Markup Language”. It is, essentially, a code used to give commands to the computer to have it input elements (images, text, formatting, etc.) into a webpage. We do so by using “tags”. These are the basic elements of webpage building. Tags are essentially commands written between two symbols known as brackets (< >). The commands written between the brackets will reflect what you want to do on your web page.
Anyone who owns a computer can write tags! Every computer with the Windows operating system has a program called Notepad. You may have used it before, and at first glance it might seem like a very simple program that is not very useful (especially when we have programs like Microsoft Word that have fancy formatting options). However, this is the basic program needed to write HTML. It doesn’t have as many advanced options as some other programs, but it is a good way to master the basics of HTML. This will be particularly helpful when reviewing the HTML from other programs, which are not fool-proof. Errors can happen; know your basics and you will notice errors faster.
Adobe Dreamweaver is a popular software program for writing HTML code. While it has a lot of interesting features to help users input their codes, it is also known to add superfluous codes to a webpage, which could end up slowing it down. Knowing the limits and functions of any tool can be tremendously helpful. While this software is expensive, the main advantages include constant updates and new functions. There is even a trial version available on the Adobe website for anyone who would like to try it. The website also offers tutorials on how to use the software for those who require more help.
Another program that came up during the lecture was Frontpage. This software, developed by Microsoft, was discontinued in December 2006. The last version, Frontpage 2003, was said to have been replaced by Microsoft SharePoint Designer. Information on how to use FrontPage can be found on the Microsoft website at office.microsoft.com/en-ca/frontpage-help/. The tutorials can be a bit hard to navigate through, but they are very well written and easy to understand. This has always been one of the strong points of Microsoft products.
Other programs exist for writing HTML code, of course, but I chose to show you those that had been presented during the lecture. Please feel free to leave a comment and share your knowledge with us all!
You’ve probably heard the initialism before. For some, it means a tool used to build a website. For others, it’s technological, and it does or means something.
To begin our introduction, here is an excerpt from Wikipedia:
“HyperText Markup Language (HTML) is the main markup language for displaying web pages … HTML elements form the building blocks of all websites.”
While it may seem complicated at first, the logic behind HTML is easy to grasp once you start using it.
Let me explain my understanding of it:
HTML is a language that your web browser translates into what a website should look like through a series of commands. Of course, there are several other components that come into play, but let’s leave it at that for now.
But why should I even learn about it, you might wonder? I asked myself that question as well. While it’s a useful skill to have, can it really have an impact on my translations?
In a world where technology is a part of our daily lives, a basic understanding of HTML could provide you with valuable assets, such as:
- Effective communication between the various team members of a website, where the translator would have a better understanding of the inner workings of the website to be translated;
- Simple coding that can be done by the translator to lighten the work load of the webmaster;
- Skills that could help a translator obtain a contract or a job that involves the translation of a website.
These elements were the first part of the lecture presented by Philippe Loranger for my Rédaction Web class at the Université du Québec en Outaouais. He also mentioned that, where he currently works, it was not uncommon to have translators working on some parts of the HTML code while translating, and that this would probably become a trend in years to come. While this is his personal opinion, it convinced me to try and learn as much as I could.
My next few posts will be about the basics of HTML, from what I have learned in the classroom, from books, and from online courses.
“There are so many things you normally don’t consider while translating!”
This statement, I once received during an e-mail conversation with a fellow language practitioner, brought me back to a conference I attended during last year’s Translation Week. The conference itself was about localization, but also the variety of elements to translate inside a webpage, or software program, which were not just text.
It’s true that, as far as content goes, translating for the web is very similar to translating a normal text. Words are words, after all. We all know, however, that translating goes beyond words. We want to deliver a message.
Traditionally, the message is conveyed through words, whether it be in the form of an article, a press release, a novel or a letter. In recent years, the Internet has been one of the most efficient ways to transmit a wide variety of messages, thanks to its speed and high volume of users.
When we think of the Internet, though, we do not simply think of the text. Think about it for a moment: what makes our experience so different when using an internet browser, compared to traditional media?
Images, videos, widgets, applications, country-specific websites, interactive menus, and much more.
As I mentionned earlier, the subject of the conference was localization. According to the lecturer, the translator’s task was not only to translate the text to reflect the location-specific details in the text, but also the content of the website that was not detailed in words.
The example he gave was the weather widget at the bottom of the sample webpage.
The widget was originally set to display the temperature in the users’ area and was set in Fahrenheit. Although this may seem like a mundane element, it’s a known fact that certain countries (Canada for instance) check their weather forecast in Celsius and not in Fahrenheit.
What are the chances of dealing with a website with a weather widget on it? Slim, I agree, but a website translator will still face non-traditional elements he will need to translate for the users. This may take the shape of hidden text (also known as alternate text) that appears when your cursor hovers over an image, a link to a website with the appropriate language for the user, subtitles for a video, voice-overs, currency for purchases, advertisements, etc.
One could even go as far as choosing more content-appropriate web elements for the users. Color schemes, pictures, choice of music, and sometimes even the layout can be different from one country to the next to appeal to its users. This can be seen when you browse a website that has multiple versions for different countries, like the IKEA website. That, though, falls into the realm of localization.
One of the first thoughts that came to mind when I started considering studying translation was "translating for the web shouldn’t be that much different from general translation!"
I couldn’t have been more wrong.
The basic skills required are the same. The goal is to accurately translate from one language to another and convey the message the author wished to transmit to the readers. You still need to understand the author’s message and do your best to retain the characteristics of the text as you transfer it to the target language. In that sense, I was right.
Shouldn't translating a webpage be as easy as sending a Word document with the source text?
Those were my thoughts as I accepted my first-ever translation contract for a contact of mine in a restaurant, before I even started university. Looking back nearly four semesters later, I see how it truly wasn't the way to go, and why.
I received the zip file containing several Word documents, and each one had the text for a specific page. I translated to the best of my ability, and sent the text back to my contact. It was only several months later that I saw how the result could have been improved.
The text was in large blocks, and my translations were lengthy. I should have omitted some words to make sure that the core information was easy to read on the pages.
Some of the formatting could have been done differently, and sometimes the focus was on the wrong part of the text. This could have been avoided if I had been in contact with the webmaster, but alas, we never met.
I never had the chance to see the mock-up of the website prior to translating, and I find it would have been a vital element to my translation. Space restrictions, font and contrast all would have had an impact on my decisions, such as wording. I might have made the webmaster’s task more difficult when I put in spaces and paragraphs where there shouldn’t have been.
I still firmly believe that we learn best by trial and error, and I urge you all to try this at least once. You will learn a lot, just as I did!
Have you ever noticed how different reading off a computer screen is from reading a book or a newspaper article? Or that most of the time users (ourselves included!) tend to skip webpages that have large blocks of text? There are exceptions, of course, but reading that much information on a computer screen is usually unpleasant, and somewhat hard on the eyes. But why is that?
In my opinion, there are two major factors that affect a user’s reading abilities on a computer screen. The first one is the formatting, and the second is the technology involved. Let’s have a look.
Text formatting is an essential component of a good website. Most websites want to attract more users and transmit information (store website vs. city website, for example). A text that has certain words in bold will more easily attract the eye, and the same applies to italicized or underlined texts. Learning to use these tools strategically will enhance the user’s reading experience tenfold!
While these tools are useful, overusing them will result in a very unattractive webpage that will be hard to read. Here is an example:
www.serene-naturist.com(Warning, music ahead!)
What is wrong with this picture? (And yes, this is a recent website). The animations are distracting to the reader, and the inconsistent formatting makes for a difficult read. On top of poor formatting, the creators of the website have also decided to place vital information (e.g. 24 hours’ notice) alongside unrelated, non- essential text (e.g. Escape for a while and enjoy a naturist massage).
Spreading out the information on relevant pages, spacing the text, and only using formatting when necessary could have saved us quite the headache.
As for the technology, this aspect impacts us less and less as technology improves and people are upgrading their systems. A good-quality monitor will make reading online easier as opposed to a poor-quality monitor with poor lighting and resolution.
A translator that is aware of these fundamental rules is an asset. Knowing how to format your own text could also be the very next step in web translation! I will be addressing this subject in my next blog.
Writing or translating for the Web requires a whole new perspective on writing. Texts need to be spaced out to give the eye a reference point—should the user lose track of his reading—and the information needs to be divided efficiently to allow quick research throughout the page. Knowing how to give this to your readers is the key to a successful and helpful website!
If you’re feeling adventurous, try a Google search for bad websites. I found my example here: www.webpagesthatsuck.com
A French author, Kavanagh, wrote an interesting article in 2006, titled "La rédaction Web : anatomie d'une « nouvelle » expertise.". If web translation interests you, I suggest you give it a read.
There aren’t a lot of people who do not own or work with a computer nowadays. For most of us, they are an essential component of our everyday lives. They make it possible to perform a range of tasks from personal banking to managing terabytes of information.
As a student in translation, computers are already a great help in my day-to-day tasks. Typing is significantly faster than traditional writing, and a variety of web-based dictionaries are only a simple click away. I also have access to programs like Microsoft Word to help with my translations and homework.
Another essential component to a computer is the Internet, of course. Millions of websites are created by individuals or businesses with an amazing amount of information on a very wide variety of subjects.
I’ve always been attracted to this seemingly infinite world. It was with joy that I discovered, on the Translation Bureau's website, that there is a job niche for translators wishing to translate websites. Although the description is no longer available on their website, I remember reading through the very brief text with a gleam of hope. Further research brought me to the website of the Université du Québec en Outaouais (UQO), which offers a specialized diploma in localization. Brimming with excitement, I called the University… only to find out that the course was on-hold until further notice. (I will talk about localization in greater detail later!)
It was there that I found what would be the first of many stepping stones on my path to learning more about this career that interested me (and still does!).
After my registration, I set out to ask my teachers and fellow students if they were aware of the program and why had it been suspended. For the most part, the answer was the same; they didn’t know. A few teachers told me that the demand for such a program just wasn’t there.
This baffled me in many ways. The Internet is more popular than ever. Wouldn’t it be logical then, for a career based on it to follow in its footsteps?
Finding information about localization was an even harder task, for no one seemed to have any answers to my questions. What skills should I be looking to learn? Where should I look for an internship? Are there any resources available to me? The bookstore only held one copy of A Guide to Localisation on its shelves. From the dust that had gathered on the pages, I figured that no one had looked through it in a while.
Another thing that surprised me was the lack of interest shown by my classmates. As of today, I know of only two classmates with similar interests.
Through pure chance, I met a few people that would spark my hope again. They taught me that there was more than one road to follow, that multiple possibilities existed within the world of web translation. Localization, as I have come to learn, is a jack-of-all trades that wears many masks.
I hope that you will all join me as I set out to discover the true meaning of localization (or at least part of it!), and shed some light on this unknown profession.