HTML Essential Tutorial : Introduction

If you intend on approaching the field of writing on the web, you may possibly be able to get by with minimal or even little to no knowledge of html coding – or “hypertext mark up language” – for a while. There are publishers and editors who will only ask for a text or Word file, and programs (called Content Management Programs, or CMS) which will do much of that work for you.

Long Tail Pro

 

However, it will certainly limit your suitability for many work opportunities if you don’t have a working understanding of html. It’s not difficult to learn and even when you use an html editor – software that allows you to type as if in a word processor, adding the html coding for you (like a CMS) – knowledge of html will give you more flexibility and creativity too.

 

Topics will include:

  • What is html?
  • Basic coding that anyone should know
  • More complicated coding (still affecting text only) to enhance visual interest and scannability/readability
  • References and troubleshooting
  • html editors and what to keep in mind when using them

 

Learning Outcomes

At the end of this HTML essential tutorial, you will be able to:

  • Describe what html is and the role it plays in writing on the web
  • Use html coding to add common enhancements such as bolding and italics to text passages
  • Understand how more complex coding is structured
  • Know where to find quick answers to any questions and issues that arise as you work
  • Use html editors in a more effective manner

 

HTML Essential Tutorial : What is html ?

meta tag generator

html, or hypertext mark up language, is the coding that your web browser uses to tell it how to display everything from text passages to entire webpages. You can think of it as similar in function to word processing programs.

 

If you’ve ever saved the same file as a plain text (with the suffix “txt”) file and as a Word file (with the suffix “doc” or docx”) you’ve probably noticed right away that the Word file is very much larger in size.  That’s because the word processing program is adding codes – codes that you don’t see of course – in order to make changes in the appearance and formatting of your document including everything from setting up margins to separating paragraphs and all the many ways that we enhance text with elements like bolding and italics.

One of the reasons that html was developed, in fact, was to make the coding simpler and more uniform, and cut down on the size of those relatively large word processing files when they became webpages.

 

When it comes to font, html tells the browser what to display in terms of colour, size, type of font and appearance. html coding will indicate where pictures and graphs are inserted, along with the parameters of those objects. It’s the basis for website design, in conjunction with other programs.

 

This is a sentence with text enhancements :

<b>This</b> is a <u>sentence</u> with <i>text enhancements</i>.

 

What you’ll notice first are the brackets – < and > – which encapsulate the html tags. There is one to begin the effect, and one to close it that includes a slash / before repeating the code. Hopefully you’ll also notice that the tags themselves tend to be intuitive, and therefore easier to remember – b for bold, i for italics. They’re not always quite so simple, of course, and there are variations we’ll look at as well, but in general, what you should be realizing is: this isn’t brain surgery!

HTML Essential Tutorial : Basic html Coding

html-humor

Here are some basic codes that anyone who wants to write on the web should know. I’ve worked with corporate clients large and small, and even among the many who use a web admin module, typically called a CMS or “Content Management System” – that’s a program that allows you to input and upload material to a website easily – your work will still require the insertion of certain types of html tags.

 

<b> </b> bold – you may also see <strong> </strong> used for the same purpose*

<i>  </i> italics – you may also see <em>  </em> used for the same purpose*

 

<u>  </u> underline

 

<br> line break – you’d use this as a “soft” break that takes your cursor down to the next line, as here:

 

<p>  </p> paragraph – this coding separates paragraphs with an extra line

 

* There are often variations on the codes – usually most will work even if they vary in the same webpage. I know this sounds confusing, so we’ll try to keep things streamlined and simple for our purposes.

 

The line break code <br> “breaks” the rule in that it does not require you to close it off, as in <br> </br>. Only one is required. The logic that applies is this: you will need to open and close elements that apply only to certain sections. A line break simply occurs and then does not effect the text before or after it. It may seem a little convoluted at first if you’ve never encountered anything to do with html or programming languages in the past, but it really can be understood logically.

 

More Advanced Coding

 

To set up a bulleted list, you’d combine a few different tags or codes.

 

<ul> – stands for “unordered list”, which will be indented

<li> – this adds a bullet at the beginning of the line

<br> – this separates the lines

 

This example:

 

I’d like you to answer the following questions:

<ul>

<li>When did you decide to take up writing?<br>

<li>What kind of writing do you want to pursue?<br>

<li>How you see your writing career developing into the future?<br>

</ul>

 

Appears as:

 

I’d like you to answer the following questions:

  • When did you decide to take up writing?
  • What kind of writing do you want to pursue?
  • How do you see your writing career developing into the future?

 

Please notice that the line breaks appear as they are coded – putting an html tag on a line does not automatically add a line break. In fact, you could write all the coding on a single line and it would still appear exactly as shown. The computer reads what is inside those brackets strictly as code, and not as text in other words.

 

<ol> </ol> creates an ordered list, with the points being separated by numbers or letters, as you choose. Check the references listed below for more on this particular syntax and its optional parameters.

 

A helpful “cheat”

 

If you want to insert bullets but don’t necessarily want to indent the list, then you can use an “alt code”. Alt codes add characters that aren’t represented on your keyboard, and are often used, for example, to add accents to French text when you’re not using a fully bilingual keyboard. Alt codes are activated by pressing the ALT button and one or more other keys, and they will work equally well in documents as on the web.

 

The ALT code for a bullet point is ALT + 7 – press both simultaneously, and the coding (if you can’t use an ALT code for some reason) is &bull;

 

Font Codes

 

There are a number of codes that fall under the font category. These include style, size and colour, and all are based on numeric codes. These fall under the “less important to know” category, since you will most often be working with system default settings in any case. However, it will add to your creative toolbox to be able to jazz up your text when it’s called for.

 

The defaults are:

 

size =  3 (or 10 points)

colour = (black)

type =  it may depend on the exact software and website but it’s most often Times Roman or Arial

 

Font is coded as:

 

<font size=x> </font> – where x is a numeric code

<font color=x> </font> – where x is an alphanumeric code

<font = x> </font> – where x is the actual name of the font

 

After the closing code </font> the font display will revert to the default setting.

 

Examples:

 

<font size=”3″></font> Sets size of font, from 1 to 7

 

<font color=”green”></font> Sets font color, using name or hex value

 

Hex values (short for hexadecimal) will give you more flexibility in choosing colours. You can reference them easily here:

 

hex codes: http://www.webmonkey.com/2010/02/color_charts/

 

<font> font <font face=”Times New Roman”>Example</font>

 

Shows as: Example

 

<font> font <font face=”Times New Roman” size=”4″>Example</font>

 

Shows as: Example

 

<font> font <font face=”Times New Roman” size=”+3″ color=”#ff0000″>Example</font>

Shows as: Example

 

Text alignment

 

<text align=x> </>

 

This code will centre, right or left justify your text (although please note it will always use “center” and other American spellings). The default is left side alignment, so it’s not necessary to code that unless you’re switching back and forth in your document.

 

Link code

 

The code whereby you’d add a link to your piece begins to get into a more complex syntax. The code is this:

 

<a href=”here you’d put the url including http://”>here you’d put the word(s) you want to appear as the link</a>

 

So this:

 

<a href=”http://www.google.ca”>Google</a>

 

will appear as:

 

Google

 

Codes you should recognize

 

The following codes are ones you should recognize if you come across them, if for no other reason than you’d want to avoid tampering with them unintentionally.

 

<body> </body> – these, as the tag suggests, encapsulate an entire document. You don’t want to remove one by mistake, or put coding after it that won’t apply the way you intend it to.

 

“Table” codes set up a table in the text. They include <table> </table> which will set up the table, along with other codes in between that determine the overall size of the table, number and sizes of columns and rows, “cell padding” (which is the space between the entries in rows and columns) and so on.

 

If it’s relevant to your work and of course if you like to, you can certainly memorize the syntax to creating tables, or simply use references (see the section below) for that purpose. It’s a more efficient use of your time, however, particularly if it’s a table structure you’ll use again and again, to simply copy the coding from an existing  one and change the numbers or words in the cell. How can you do that? It’s simple.

 

This is the code for a table – it’s a sizing chart for a garment:

 

<table width=”258″ height=”250″>

<tbody>

<tr>

<td>Size</td>

<td>Waist</td>

<td>Hips</td>

<td>Inseam</td>

</tr>

 

<tr>

<td>30”</td>

<td>32″</td>

<td>37″</td>

<td>34″</td>

</tr>

<tr>

<td>31”</td>

<td>32.5″</td>

<td>38″</td>

<td>34″</td>

</tr>

<tr>

<td>32”</td>

<td>33.5″</td>

<td>38.5″</td>

<td>34″</td>

</tr>

<tr>

<td>33”</td>

<td>34.5″</td>

<td>39″</td>

<td>34″</td>

</tr>

<tr>

<td>34”</td>

<td>35.5″</td>

<td>39.5″</td>

<td>34″</td>

</tr>

</tbody>

</table>

 

The numbers that appear between the <> tags are the variables which are entered into the cells. If you wanted to change those variables, all you’d have to do is go into the html and change those elements. Just be careful not to delete brackets or alter the coding along the way – but if you keep a copy of the original, you can always see what needs to be fixed or re-entered after the fact.

 

References

 

Will you have to memorize these codes? Certainly not. We’ll look at some easy web references that allow you to look up coding at any given time. If you were a website designer and you used html codes every day for a variety of purposes, you’d become very familiar with them of a necessity. You will also as of a matter of course become familiar with what you use routinely, but you’ll never have to fret about knowing them off the top of your head.

 

These websites:

 

 

 

along with many others you’ll find on the web, provide excellent, indexed references to various types of codes. Notice, however, that they don’t explain how or where to use them; they simply list the appropriate codes. You still need to understand the structure and syntax of html in order to apply them properly.

 

Html Editors or CMS “Content Management Systems”

 

html editors are programs that allow you to type as you would in a word processing program – i.e. there is a bold and italics key, you can highlight to drag and drop and so on, and the program itself will add the html coding for you.

 

Word can be used as an html editor, as can most word processing programs. All you would need to do is “save as” and then choose “html” or “webpage” or similar option. I wouldn’t, however, recommend using word processors as html editors in general. They will do in a pinch, but in practice, they often use proprietary variations of the codes than can cause issues in some kinds of applications.

 

For example, for a line break, Word will use the code </ br> instead of simply <br>. It will often work as intended, but I have used applications in work situations where the variations have caused unintended problems. Another issue is that your working window will sometimes have a character limit – i.e. it will only accept up to a certain maximum number of characters, including coding, so the addition of extra characters isn’t desirable.

 

Common html editors include Dreamweaver, Frontpage and Coffee Cup. A Content Management System, or CMS (as we’ll call it from now on) is the same idea, but will be specific to the requirements and needs of a particular website or company application. A large company, for example, might develop a retail website and include in it a CMS which provides an easy way for their employees to update the products and the way they’re displayed. Depending on the foresight of those designing the website and CMS, you may or may not have to know basic html.

 

html Editors or CMS

 

The above is what a common CMS or html editor looks like, although you will encounter those with fewer parameters. You’ll notice icons at the top which resemble those in Word and other word processors, and will have the same functions.

 

One thing you should have recognized by now is that the class blog itself uses an html editor, in common with most other blogging applications. The set up of the blog is very similar to what you’ll find in other commercial applications.

 

So, you’re thinking, if I will virtually always have access to an html editor that will do the work for me, why would I ever bother with learning any html myself? The first reason is, nothing is foolproof. Unless you stick to very standard text documents (and we’ve already looked at why you shouldn’t!) and always input directly into the editor (i.e. you never copy & paste material from elsewhere or add any other elements) every now and then, you will run into a case where something just won’t work, and your text won’t display properly. Sure, you could simply scrap it all and start over, but there’s no guarantee that will help, and there are certainly quicker and more effective ways to deal with problems that come up. A little knowledge of html can go a long way.

 

Troubleshooting Common Problems

 

Sometimes, whether you’re using an html editor or not, your text simply doesn’t look the way you intend it to. Here are some common issues and what to do about them.

 

Your html editor will most often have two views – one as text, the other as html. (These may be referred to as the “html view” and the “design view”.) You can switch to the html view and alter any coding to fix it, or simply to experiment with different effects.

 

1. Line breaks

Sometimes when using an html editor, you will hit enter and it will automatically take you two lines down – as in a paragraph break. If what you want instead is a single line break, you could go into the html view and change all the </p> codes to <br> codes. A simpler and quicker fix, however, is to hit the SHIFT and the ENTER key at the same time. This has the practical effect of adding a <br> instead of a </p>.

 

The difference between the two sorts of line breaks can come up in a bulleted or numbered list, for example. The list will continue if you use the <br> but will stop and revert to default formatting if you use the </p>.

 

2. Spaces that just won’t go away

Sometimes when copying and pasting text into an html editor, you can inadvertently copy over codes that you didn’t see. This is common if the original you’re copying from is a table, or was written in software other than a word processor (i.e. an Excel spreadsheet or even another webpage). Often what it has done, and what you’ll see if you look at it in html, is that it has added a number of “&nsp;” codes – all this lengthy code does is add an empty space. To fix it, just go into the html view and delete all those unwanted extra space codes.

 

  • Missing or incomplete tags

Your html editor or CMS (you’ll also hear this called a web admin tool or module) may or may not give you an error message if one of your tags is opened but not closed. That is likely where the mistake lies in a link code, for example. You may simply see part of your coding showing up in the text, rather than acting invisibly to enhance it.

 

You may also notice something like an entire paragraph in bolding when you only intended to bold a word or two – that’s the same issue. All you need to do in that case is check all of your codes and make sure that the ones that are opened are also closed. It may only be a matter of a missing bracket.

 

3. If nothing looks wrong in the html, try “cleaning” the text

If you can’t find anything that looks wrong, and you don’t want to simply give up and re-input your text entirely, then you can try cleaning it of all html. You will have to enter your enhancements again, but at least you will preserve the text itself. What you will do in that case is copy the text only display (i.e. not the html display in an html editor) and then paste it into Notepad. Since Notepad (the program that is) only deals in plain text, it simply removes all the invisible coding. You should then be able to paste it back into your html editor or CMS free of unwanted coding.

 

 

Helpful hint

 

There are free, downloadable website building software programs available, like the one at this link:

 

http://bluefish.openoffice.nl/index.html

 

Or the free version of Coffee Cup – http://www.coffeecup.com/free-editor/

 

I don’t necessarily recommend using any of them on a regular basis – some of the free software has a habit of getting corrupted to the point where the program won’t execute properly before too long. However, these programs will often have one very useful feature. You can open any webpage on the internet just by entering the url, and it will display the page in html coding. If you’re interested in furthering your knowledge of html, or have seen an effect online you’d like to duplicate, then this is a very handy way of seeing how it was accomplished.

 

CONCLUSION

html coding is the basis for everything you see on the web. It follows a kind of logic that can be used to enhance text and add other elements to it like images and video – which we’ll look at specifically later on in the tutorial. A working knowledge of html is really a must if you want to pursue writing on the web professionally, even if it’s as a sideline to other types of writing that you will do.

 

 

POINTS TO REMEMBER:

  • If you’ve never encountered html or programming languages before, you may be feeling somewhat overwhelmed at this point. Don’t be! We will keep things simple for the purposes of this course, and references are always available.
  • Html codes use “pointy brackets” <> and most will involve an opening and a closing, where the syntax is <x> </x>
  • html editors and CMS can make your life simpler, but they also have their limits and knowing html yourself will allow you to be more creative, as well as to troubleshoot and fix minor problems that arise.

 

Save

Save

Save

Save

LEAVE A REPLY

Please enter your comment!
Please enter your name here