Q&A: Plain text and HTML

Student question:

Is plain text the same as txt? I’m still having a problem with it.

Answer:

Beginning students learning how to code with web standards are sometimes confused about what plain text is and how it applies to HTML.

Plain text refers to simple character set, like ASCII, or Unicode. It is the set of characters that allow us to put alpha-numeric characters on a page. They are the symbols that make up certain languages. ASCII (American Standard Code for Information Interchange) is a character set of  128 characters that make up the English language. Since the web is a global network of documents, the ASCII character set is insufficient to represent many of the languages that use it. That’s why in most HTML documents you find a tag like…

<meta charset=”UTF-8″ />

” (UCS Transformation Format—8-bit[1]) is a variable-width encoding that can represent every character in the Unicode character set. It was designed for backward compatibility with ASCII and to avoid the complications of endianness and byte order marks in UTF-16 and UTF-32.”

Wikipedia

Plain text refers to characters without any regard to formatting; i.e. font, size, color, justification, weight, style, etc. Many applications are capable of reading plain text information. We normally use plain text editors like Notepad (PC) and TextEdit (Mac), vi, or emacs to create the documents so that we don’t introduce formatting codes into our documents. As web designers, we  introduce the formatting into our web documents through Cascading Style Sheets.

When we use a program like Microsoft Word, OpenOffice, Google Write, or a host of other word processing packages, we are putting simple characters onto a page and then use the programs to add the formatting to change the characters appearance. While you normally don’t see the formatting codes that the software uses to make that happen, they are there, in the background, invisible to us. When we format a web page, we see all those codes in the form of HTML and CSS and have minute control over them. It is the browser that takes those codes and uses them to transform the plain text into formatted text.

Plain text files can have more than one extension but usually  have a .txt extension. An HTML document is created using plain text. We create tags with the plain text characters that communicate specific things to a browser. So in HTML you could say that we are giving instructions to a browser (or user agent) using the Unicode plain text character set. The HTML tags, CSS, and Javascript code that we write needs a program that understands how to interpret those tags and code. We give HTML files  an extension of .html so the Operating system knows to open it up with a browser instead of TextEdit or Notepad. The browser knows what to do with the codes and show us what the content looks like when the codes are rendered. We call that interpreting the code, or rendering the page. A text editor just shows us the characters, it does not interpret them.

For a list of Text editors see the following wikipedia article, http://en.wikipedia.org/wiki/List_of_text_editors

 

Basics: Domain names and Web Servers

Question from a student: Do I need a domain name [to upload my files to a server]?

Yes and no. FTP (File Transfer Protocol) is the means by which we transfer files from a client computer to a server. In order to connect to a server you need its address, and login credentials. Every server has an IP address (IP stands for Internet Protocol). It’s like a telephone number that identifies a specific computer connected to the internet. EVERY computer connected to the internet has one. IP addresses are hard to remember, so domain names were created to make that process easier. A domain name is associated with an ip address. That way when someone types in http://www.dalerogers.me, a chain of events happens that finds a specific file, in a specific folder, on a specific computer, out of billions that make up the World Wide Web. So yes, you need to know the server’s address. Usually we use a domain name to identify the server.

The Basics

There are several parts to having a web site:

  1. The designed and coded pages,
  2. a domain name,
  3. and a web server.

Designed and coded pages

When we consume content on a web page (read, listen, watch a video, play a game, etc) we are consuming content that is being presented on the screen through a program, usually a web browser. The technical community calls these programs user agents. To standardize the way that user agents present information, HTML, CSS, and JS were created. Each are languages that instruct the user agent how to display the content.

  1. HTML (Hypertext Markup Language) puts a structured element on a page
  2. CSS (Cascading Style Sheets) allows us to control the properties of those elements
  3. JS (Javascript) allows us to control the properties of those elements based on page events, or other criteria

Each language has its own job. They all work together to create the experiences we all enjoy on web sites. All of the languages are living languages. New tags, properties, and functions are constantly being added and refined to accommodate the needs of the the web. The organization responsible for overseeing the development of the languages is the W3C (World Wide Web Consortium). The developers of the user agents (browsers) are responsible for ensuring that their products present content using the guidelines provided by the W3C.

Therefore, when we design and created web sites on our computers, what we are doing is designing to the browser; i.e. we are giving instructions on how to position and display our content. We don’t need a web server to do that, we only need to know how the languages work, our media, images, etc, and a browser to display them. Having said that, as soon as we want the rest of the world to see our creation through the web, we need to copy our web site to public web server.

Domain Names

As mentioned above, domain names provide an easy remember set of alphanumeric characters that point to a server. When you know you are going to create a web site, you normally get the domain first because you want to make certain you get the one that best brands your information or product. You create (or register) the name through a registrar. Currently, I use goDaddy.com and nameCheap.com as my registrars, but there are lots of others out there. All they do is  reserve a custom name and high-level domain extension (.com, .net, .org, etc). The domain name is your individual identification on the web. The registrars act as agents for ICANN (Internet Corporation for Assigned Names and Numbers – http://www.icann.org/). ICANN is the official organization that registers and maintains every domain name in the world. All other registrars, like GoDaddy,  are agents (middlemen) that act as an interface between you and ICANN. They also provide online tools for you to manage and renew your domain license.

When you register a domain name, they ask you for information:

  • The Owner Contact info
  • The Administrative Contact info
  • The Technical Contact info
  • The DNS address (Domain Naming Server) – basically, where are you hosting your web site.

By default, the registrar will “park” your domain name on a generic page until you manually update the DNS address with the hosting server address where you are keeping your web site.

Web Hosts

After you design/code the pages to your web site on your local machine, you need a way that the world can see them. You need a web host. It’s a server (a computer) that has web server software on it. It is connected to the internet (usually with a robust connection to move lots of data). Many web sites can be hosted on these servers. The web server software’s job is to organize them into their own folders (directories) and keep track of them so when a request comes in for your domain name, it knows which folder and file to get and fulfill the request.

When you get a hosting account. The host needs to know what your domain name is. It will issue you a login and password. It will also create a primary FTP account. The web host will tell you what URI to use to access the FTP login. You use the FTP URL (it usually it is something like ftp.yourdomainname), your login and password to get in. When you log in, the web server software will automatically connect you to YOUR folder where you can upload your web site files.

The web host will provide you with the domain name(s) of the web hosting server that your account is associated with. You copy that server address into the NS field of your domain profile using your registrar’s interface.

Once you have your domain name, it is pointed at your web host, and you have your FTP login credentials, you can upload your web site to the server so the world can find you.

Problem solving 101

The issue

Here is a excerpt from a student email…

Mr. Rogers,

I’m taking the basic Web Graphics class this semester and I’m seeing subjects in the class expectations that remind  me of what [will be expected of me in the final Capstone class]. I’m writing this because I had some areas in HTML that kind of still seem cloudy in my mind. I bought a HTML 5, Word press and Flash books from books a million to read this semester.

Being so new to all this stuff kind of has me running around in circles. Is there any advise or a road to follow for someone like me to prepare me for the capstone class and better yet the job market.  Thank You for your guidance.

My response…

Maybe I’m wrong, but I think you’re concerned with how to solve a design problem. The first step in web coding is simply looking at a particular design issue and figuring out how to solve it using HTML, CSS, and Javascript. Look at a page and break it down.

 Remember the basics:

  • HTML simply puts an object (HTML element) on the page
  • CSS tells that HTML element what to look like and where it is on the page (layout)
  • Javascript controls behaviors, i.e. allows you to manipulate the elements and CSS to do stuff dynamically

Problem solving 101

What I recommend you do is take a page from a magazine (start with a simple one like an ad). Most ads have some images and text. How would you reproduce that ad using HTML, CSS, and Javascript (note: a static page won’t need javascript because it doesn’t change. Right? Javascript is only needed when you are programming the page to change something).

Try to recreate a magazine page using simple images and text in HTML and CSS and then get back to me. What issues did you have during that process? Then we’ll have something to talk about and can figure out where the gaps are in your understanding. My guess is you know how to do it. You just need practice. That will build confidence.

Process

  • You see a page in a magazine
  • What images are there? How can you get a copy of the images? Can you scan it? And in what format? What do you know about image formats? What format is best for pictures? What format is better for charts? Where are the images located on the page? How big are they (dimensions)?
  • What is the background color of the ad?
  • What text does it have? What is the font family? Is the text bold, normal, slanted? What color is it? What is the size?
  • etc., etc., etc.

Each of these questions will tell you whether to control the page through HTML, CSS, or Javascript. You first have to figure out what you are trying to do. Since I don’t know where your cloudy areas are, I don’t know how to address them. I do know that if you understand the basics, you can figure out the rest.

Conclusion

A Tai Chi teacher once told me, “If you want to understand Tai Chi, practice the form.” Reading will not make you a better designer. It will give you ideas. It will help you understand how other designers solved their problems. It will help you understand the technology. Creating web sites will make you a better web designer and coder. Get busy solving problems and coding. :o)

Don’t try to understand everything before you start coding. As you code, as you try and solve problems, you will go to resources to help you solve that problem.

Resources: