HTML Tutorial (bare-bones) HTML TUTORIAL Introduction What is HTML? Page Structure Header Body Paragraphs Formatting Style Horizontal Lines Links Putting Color On Our Page Inserting Images Creating Lists Table of Codes for Special Characters
INTRODUCTION My intention with this tutorial is nothing more than to try and teach HTML, with the hope that I will learn more about HTML in the process of writing it out. So from the outset I ask your patience with any mistakes I might make. And if you notice any errors, please let me know so I can improve this tutorial. First, you should know that creating a web page is very simple and that it is not necessary to know HTML. With one of the many software programs that exist in the market, you can put up a web page in a flash. Even so, there’s always some little thing to fix or polish, and that’s why I’m writing this, so that with a little knowledge we can give a personal touch to the pages we design. What is HTML? Good question, eh? Well, HTML is an acronym for HyperText Markup Language. Basically, it’s a programming language, pretty standardized, that allows us to create documents that can be read by any web browser. HTML documents are made with plain text—just numbers and leters—but watch out, because not all characters are valid. Some special characters must be represented by their own code (i.e. accented lower-case characters). To tell the browser to show us an accented a we have to put in á and so on for the other vowels. Later on, I will show a table with the special characters, but that’s all you need to know for now. What you do have to remember is that with HTML markup language it doesn’t matter whether you use upper-case or lower-case letters. What you do have to be careful about
are the external links, especially to file names. With the marvellous operating systems that we have these days, we can give our files very long names, with spaces even. For combatability reasons, I have stuck with the use of short names, and if I have to separate words, I never use a space. A dash (underscore) is quite handy for this. And also, where you should be careful with upper and lower-case letters is in the naming of files. PEPE is not the same as Pepe or pepe. Those would be three different file names. So be careful with that. Don’t say I didn’t warn you… PAGE STRUCTURE Alright, now we get to the interesting part. We’re going to begin by writing our first bit of HTML code. The first thing you need to know is that every HTML document should begin and end with the tags and respectively. Now we’re going to start using this language. All of the tags go between <>. And most of the tags are paired, to show a beginning and an end tag, by adding a / to the end tag. Super easy, right? All HTML documents have two parts: the header and the body (pretty obvious, right…) But we’ll need tags for both parts. The tags for the header are and In this section we put information about the page and that’s about it. This is where we’ll put the title of our page, so that the whole world will know what we’re about. The title goes between the tags
and , which will show up in the left side of the top part of the window. Ok. Good work. Little by little we’ll put together our first page. Use any word processor and remember to save your document in text (.txt) format.
My Web Page Now we’ll move on to the important part, the body of the document, where we’ll insert our text, images, hyperlinks, scripts, etc. ……… the body also has its tags (how could it be any other way?). They are and and what goes between them? Our WEB page, like all documents, needs a header, something that will get the reader’s attention and describe the rest of the page. We can define up to 6 different heading sizes and this is done with the tags
to , where the number 1 defines the largest font size and 6 the smallest. We continue designing our page: WELCOME TO MY PERSONAL PAGE
Welcome to my personal page (H1)
Welcome to my personal page (H2)
Welcome to my personal page (H3)
Welcome to my personal page (H4)
Welcome to my personal page (H5)
Welcome to my personal page (H6)
PARAGRAPHS Now that we have a title for our page, let’s fix the formatting a bit by aligning paragraph text. Usually we’d want to put the title in the center of the page. This is done with the tag . This tag is also valid for images, as we will see later on. WELCOME TO MY PERSONAL PAGE
WELCOME TO MY PERSONAL PAGE (H2)
Parragraphs go between the
and
tags, and we can set the text to align to the left, to the right, and as we’ve already seen, in the center. So we continue with our page by introducing the attribute ALIGN.
WELCOME TO MY PERSONAL PAGE
Now I am writnig the first paragraph of my personal web page, which I want aligned to the left.
But I want this line aligned to the right.
Grab it and put it in the center.
Now I am writnig the first paragraph of my personal web page, which I want aligned to the left. But I want this line aligned to the right. Grab it and put it in the center. You’ve seen how to align paragraph text, but there’s more. If we wanted to justify a paragraphy, we could write between the tags
and
. FORMATTING With all of that under out belts, we’ll start to add a little formatting to our text. First we’re going to see how to modify the size of the font with the attribute
, together with the modifier SIZE. There are various ways of modifying the font size. The first way is to describe the fixed size of the font. Fixed sizes range from 1 to 7, 7 being the largest and 1 the smallest. The second way to modify size is to describe the relative font size, subtracting or adding to
the font size already in force. This modifier can range between -4 and +4. But this will be more clear as we continue writing our page.
This line is written with size 3
This line is written with size 3
This line is written with size 5
This line is written with size 5
This line is written with relative size -3
This line is written with relative size -3 As you can see in this last example, the result is the same as if we had written
, the result of subtracting 3 from the last defined font size, in our example, 5. So knowing that, that last bit is to mention that it is possible to determine the baseline font size for any HTML document with the tag , which should be inserted right after the tag. STYLE To highlight certain words, we can use styles like bold, italic, etc. The most common tags are listed in the following table: Style Tag Bold Bold Italic Italic Underline Underline Quote Quote Code Code Emphasis Emphasis Strong Strong Teletype Teletype Strike-through Strike-through Subscript Subscript Superscript Superscript Larger text Larger text Smaller text Smaller text This will appear in bold lettering.
HORIZONTAL LINES Someteims we need to separate different sections in our HTML document. A simple way to do this is to insert horizontal lines. This is done with the tag
. This tag doesn’t require a closing pair. By default, in leaves one single line across the width of the screen. But it can also be modified by adding the following modifiers: SIZE = Indicates the thickness of the line, in pixels WIDTH = Designates the width of the line across the screen, in pixels or with a percentage ALIGN= Alignment of the line NOSHADE = If we want the line to have a drop shadow or not. But all of this is clearer in an example:
The result is a line that is 5 pixels thick, covering 5% of the screen, aligned to the left, and without a drop shadow, or:
LINKS The real power of the internet is found in its ability to link to other pages, as if they were all part of a spider’s web. A web page with out links doesn’t make a whole lot of sence, so we we will look at very quickly how to insert links in our page. Links can take us to another page or even another section inside of the same page. This tutorial page is full of links to the same page, as you have seen in the index that is at the top of the page. From this index, you can jump to any section directly and from any section back to the index. This page also has external links, as you will see at the bottom of the page. There you will find a link to the home page of my site and another link to
If you like to read and listn to music, click on this link and you will be able to buy the best books and the best music on theinternet, and also generate revenue to suppor the maintenance of this page. Ok, and now lets return to the task at hand. We will generate a link to one of the bestknown search engines, YAHOO. Search YAHOO! Search YAHOO! Now we’ll complicate things a bit by making the Amazon graphic a direct link to the page: 
Believe me. It’s much easier than it looks. We’ve already made two links to other pages, but with the same format we can link to many other services on the internet. We can link to ftp sites, email, etc. Let’s see how to add an email link: Send me an email Send me an email To add links to anchors within the same page, or inside of another page, the first thing is to define the anchor, like this: Anchor text
Anchor text A link to the anchor would be written as follows: Link to previous anchor As you can see, the symbol "#" is placed before the anchor name. Link to previous anchor You can all create links to anchors inside of other pages: Link to an anchor in the page index.html PUTTING COLOR ON OUR PAGE We’ve already covered the basics for creating our first WEB page, but now, let’s liven it up a bit. Black text over a white background can be a little boring. So let’s modify the color of the background as well as the text. We’ll even place a graphic as the background of our page. To modify the page’s background color we need to add body tag to the page will take the attribute BGCOLOR="#RRGGBB" where #RRGGBB designates a combination of the red, grean, and blue tones necessary to create the desired color. Even without the codes, HTML recognizes sixteen simple colors by first name: black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue and fuchsia. So to create a blue background, all we’d have to do is write and that’s it. If we wanted to complicate things, we could look up the hexadecimal code that defines the precise color red we’re looking for, for instance #FF0000. To define text color then, we will use the attribute TEXT=#RRGGBB". To define the color of links to pages that haven’t been visited, use LINK="#RRGGBB". For visited links, use VLINK="#RRGGBB". And for active links that are being clicked ALINK="#RRGGBB". To insert a background image, we use the attribute BACKGROUND="imagenfondo.gif". The file formats most often used for images are gif and jpg. Remember that the file must be in the same folder as the HTML document, or you must specify a file path to its precise loation. And DON’T GET CONFUSED about what I said about HTML not caring whether a tags are upper- or lower-case. That may be the case for tags, but file names are different. And just to be on the safe side, I suggest writing file names and paths in lower case. INSERTING IMAGES And since many documents will need images, we’re going to learn how to easily add them to our page, with the expression 
. And if we want to specify the size with x as the image size in pixels. And let’s add to this what we learned before. We can align the image and create a link from it to other pages, etc. etc.
Now you should understand mauch better the earlier example LISTS This is one of the most useful elements in HTML pages, since it allows us to clearly organize the information contained in our document. A list is a sucession of items that belong to the same structure, and which can easily be numbered, without having to manually re-number. The index of this page was made from a list. There are different types of lists, unordered, ordered, numbered, alphabetical, etc…. Often you’ll see bullet points or numbers to differentiate one line from another. To create an ordered list, use the tags and
and to specifiy each new item, use the tags and . For example, - INTRODUCTION
- WHAT IS HTML?
would give this result: INTRODUCTION WHAT IS HTML? Unordered lists use bullet points. The are written almost exactly as the above, only is used instead of So list items will look like this instead - Structure of an HTML Document
Structure of an HTML Document Header Body For ordered lists, we can also use the attributes TYPE and START to define the type of numbering that we want and which number to use to start off the list, for instance AaIi, for alphabetical lists, lower-case alphabetical lists, roman numerals, and lower-case roman numerals, respectively. For example, with , the first numbered item will begin with the letter C.
SPECIAL CHARACTERS Code Special character < < > > & & " " ¿ ¿ ¡ ¡ á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ü ü Ü Ü &nbs; Espacio en blanco (c) 1998-2000 Fernando A. Casa Last update November 14, 2000