| |||||||||||||
 |
 |
 |
 | ||||||||||
|
| ||||||||||||
| | | ||||||||||||||||||||||||
| | |||||||||||||||||||||||||
 |
1: IntroductionWhen I started writing HTML, I was looking for some information on the web about that. I did find something, sometimes also very detailed and complete, but then all that was too much possessing the character of a lexicon, too dry, so to say, and for beginners perhaps quite an overkill of information. So I want to express some thoughts on my own concerning this subject; not implying any completeness; that's why they are called remarks. Also, I will focus on HTML 4.0; the newest version. HTML is a formatting language, designed for hypertext documents. Hypertext is characterized as being more flexible than normal text. By linking several documents, intertextual connections can quite profoundly change the reading experience. There is no rigid sequential structure as it would be the foundation of normal text like featured in books; there may be, but needn't. Of course, as on this site also, there would be sections of text flowing sequentially. But among the pages, the files, there is not necessarily a given order: the access to a hypertext document can be organized and experienced more individually. Being a formatting language, HTML basically does the same a word processor does: You create a document, write your text, and format it accordingly. You can also apply directions for highlighting paragraphs, headings, lists, images and tables. In addition to the formatting capabilities of HTML, it can be combined with some elements of a programming language: by including Java©, JavaScript© or CGI (Common Gateway Interface) elements. But for the beginner, one should stick to the formatting nature. I will come back to this topic when I come to style. And now for some typical abbrevations:
| |
|
2: A Typical HTML fileHTML documents are text files, thus they can easily be created in a text editor (I would strongly recommend Editpad). HTML has a logical substructure, containing certain formatting commands added to the text. An HTML command (called HTML TAG) looks like the following:
The "<" and ">" symbols then are reserved for just that purpose, if you want to let such a symbol appear on the screen, you have to encode it. More to that later. The structure of an HTML file is the following:
| |
|
3: Basic Text FormattingThe following now happens only in the <body> part. The first and basic task is to actually write something on the screen. How to do that? That's simple: Just write the text in the <body> section:
HTML does not interpret line breaks as they might happen when you write something and then press [RETURN]. For that, there exists a simple command: <br> (break) So then:
And now concerning blank space: It does not matter how many spaces you leave between two words, or how many line breaks are included (unless produced by <br>), any space will be interpreted as one blank space unless you insert a normal blank space command: (non-breaking space) Thus
looks different from
In the last example, four blank spaces have been created between the words. But then, after having created breaks and empty space by that, it would be nice to have more. So be it: Some formatting tags:
Our abilities have thus increased:
But we also can combine several tags:
While you might not find too many fans by applying such a style to your site, it might be nice to know that it's possible.
| |
|
4: Paragraphs and HeadlinesWhen it comes to structuring documents, the best way to do this is to make use of paragraphs and headlines. Thus you can create a logical structure.
Paragraphs would be of little worth if you couldn't do anything else with them. So, there is the possibility to align them in the common way: left, right, center and justify. The preset value would be left alignment. The result looks like the following:
The difference between left and justified alignment only shows with a larger amount of text; these pages for instance are written with justified alignment. And, to give you a reason why to write HTML source code instead of using an HTML generator: It is usually not possible to create justified paragraphs with such programs, i.e. I haven't found one yet (so far I checked Netscape Composer, Frontpage Express, MS Word and MS Publisher). As you might have noticed, the <p> and </p> tags, also the headings, create space above resp. beyond the paragraph. While this effect can also be regulated with the use of CSS Style Sheets, you can use another tag, thereby creating a division of the text, which works like a paragraph: the <div> tag. All alignment options are possible with this one also:
With <div align=center> you also can center larger areas of text. There is also the <center> command, although this will probably be obsolete in a later version of HTML. Nevertheless, I still feel it is necessary to use this tag as older browsers (like Netscape 3) cannot interpret certain alignment attributes within other tags like tables etc.
| |
|
5: Images and LinesWithout images or other graphical elements, an HTML document would be quite boring or less transparently structured. Images to include are usually either GIF or JPG files; those formats do not need too much disk space and load time. Taking this into consideration, you should refrain from using BMP files - they are just too large. Also, strange or uncommon formats like TIF or PIC or anything else might not be known on other computers. To include an image to your page, you need its location, you need to know how to align it, and you might need the size of it.
And so it will look like:
Without applying width and height, the image will load in its normal size. But applying them will not mess with your layout by showing bulky place-markers. You can also resize the picture:
Now concerning lines. To loosen up your layout, there is the possibility to include horizontal lines: <hr>, also combinable with alignment and width attributes:
| |
|
6: HyperlinksAnd now, at last, we've arrived at a point where we actually will create hypertext. For this, we need an anchor which is the name of the target location, the place where we want to link to. Then we create a hypertext reference pointing to this anchor, and we make the link accessible through an object consisting of text or an image. By clicking on this object, we will be transported to the target location. And so it works:
Anything framed by the <a ...> and </a> tags will appear as a link; either highlighted in the way preset by the browser or document, or just being visible as a link when one moves the mouse pointer over it. You can also create document-wide links. For that you have to create anchors within your document which can then be accessed by a normal <a href=...> command:
And now an example for such an internal link:
Just a final remark: In HTML and Internet terminology, all file and anchor names are case-sensitive! HTML tags, on the other hand, do not care about case.
| |
|
7: The Head AreaThe head area is telling the browser something about the file which will not directly appear on the screen. Amongst those bits of information are the title which will show up in the window, certain information for search engine robots (the infamous META-tags) and CSS Style Sheets declarations. Following are some characteristical elements:
It is imperative to use such means of telling search engines what your site contains; and it also is essential to say the truth - keyword spamming is not only unfair, it can also lead to exclusion of your site from search engine catalogs. As the use of META tags is therefore that important, and I won't write anything more on this page than just the mere basics, check out locations like WebDeveloper and DublinCore META Tag Builder. A final remark on the head: There must not be any characters before the <HTML> tag; otherwise the output will not appear as intended.
| |
|
8: CommentsComments or comment lines in an HTML document will not be shown on the screen, they are just visible in source code view. Nevertheless, they can be quite useful as they help structuring the document and make it easier to edit it. There are two ways of inserting comments:
The symbols used to indicate a comment will also occur within CSS Style Sheet declarations, but there they have a different function. For that occasion, within those CSS Style Sheet tags, also within JavaScript, comments are created in the following way:
Some search engines or catalogs deliberately ignore information within the META-tags and search within the text of the file instead. For that purpose, you could additionally create comment lines with the META-contents to be sure your keywords are found. Another useful purpose for comments would be including your e-mail address as well as the URL of the site for those who would download it and then might forget where they found it.
| |
|
9: ListsThere are two types of lists within HTML: ordered (=numbered) and unordered (=unnumbered) lists. The tags are the following:
For unordered lists you can change the appearance of the bullet; this argument is to be inserted into the <ul> tag. How the result looks like, might be browser-dependent.
The enumeration of ordered lists can also be influenced by additional arguments therefore to be inserted into the <ol> tag:
And now for some examples:
As seen in the last example, the text between the list item tags (<li> and </li>) can also contain paragraphs, just as any other kind of formatting. But stick to the logical structure: The paragraphs are to be placed within the list tags.
| |
|
10: TablesTables in HTML serve two purposes: First to actually produce normal tables and, second, as a structural element. Following are the very basic elements of an HTML table:
Within the table rows, the cells are to be placed. There are two types of table cells:
Additional options can also be added to cells:
Additional options for the <table> tag:
And now for an example:
Browsers might differ regarding to how they display tables. If you want your table to show up at any time, stick to strict HTML design. Netscape e.g. won't show the table when the </table> tag is missing. Generally, tables will only show up when the browser has completed loading and calculating them. So large tables will definitely slow down you page; that's why you should use them just when it is absolutely necessary. And if it is possible, try to split up larger tables into smaller ones. For how this looks like, check my Chronology pages.
| |
|
11: Background and ColorsText would be boring if it lacked the ability of graphical elements being applied to them. Background images are quite easily to create. The respective option can be inserted into the <body>, <td> and <th> tags. The background image will be arranged as tiles in the background, the syntax being:
A bit more complicated it is with colors. Basically, the colors the screen produces consist of parts of three colors: red, green and blue (RGB colors). Within a color option, e.g.
the first two digits set the red, the next two the green, the final ones the blue portion in hexadecimal code. For exact color samples, you may check larger HTML documentations. The following links lead to the respective pages of the SELFHTML site of Stefan Münz, listing the 16 basic colors with both respective color names and hexadecimal code and the 216 standard colors in hexadecimal code.
| |
|
12: Object HandlingUp to now, we have encountered various objects which can be created with the help of HTML: text, images, links, lists and tables. Any of these objects can be handled like text objects. Two images following each other, without a break between, will appear in the same line if the window size would allow it; same would hold true for tables etc., unless their width would be set to 100%. Then the second one will appear beyond the other. To prevent such effects taking place, you have to insert a break. But one break might not be enough when the height of the object exceeds one line. With the following command, the break will affect any kind of object, regardless of its size:
To prevent any line break, use the following tags:
The alignment options have two effects: Left alignment both puts the object to the left and lets the rest of the text flow on the right; with right alignment it's vice versa. You can also center an object between two others, of which one is aligned on the left and the other on the right side:
Try to visualize the last example with an HTML editor. I wasn't able to do so, it doesn't seem to be possible - such programs think like text editors. But HTML is different. Isn't that another reason to learn HTML source code?
| |
|
13: Special CharactersAs HTML has to use certain commands, the tags, it needs special characters to mark them; characters which are then clearly designed to depict tags, not text. That makes them reserved characters. Another point is the universality of HTML: As it is supposed to work on any computer terminal, on any type of computer and on any operating system and keyboard, it cannot do all you can do with your specialized keyboard; certain characters are again special, like German umlauts and a whole bunch of other characters. Now follows a small selection of those characters. For a wider overview, check larger documentations like the respective page of the SELFHTML site.
see also: detailed table of special characters in HTML
| |
|
14: Style SheetsCascading Style Sheets (CSS) are an addition to the original HTML language and provide the programmer, i.e. you, with the possibility to influence to a large extent the way the text looks like. Basically, you set a range of formatting options and apply them to a certain HTML tag. The global (i.e. document-wide) solution looks like the following and is to be placed in the <Head> area:
The above example sets the style of all paragraphs in the document, defining its font, wich will be Tahoma, and in case Tahoma is not available, Helvetia. The font size is set, also color and weight (normal, bold, italics, ...). Basically, you can do this with all elements containing visible text of any kind (like <p>, <div>, <a>, <td>, <th>, <h1 .. hn>). The respective HTML tag would be the <font> tag, but that is supposed to become obsolete soon, so you should use style sheets. Apart from setting the styles en bloc at the beginning of the file, you can also define the style of single paragraphs by inserting style sheet commands into the respective tag:
Please note also that the grammar of the CSS language differs from the usual HTML look & feel: That's due to the fact that both are originally seperate languages. Also, most older browsers either ignore Style Sheets (like Netscape 3) or ignore them and also create quite a havoc within your document (like IE 2). And always, this counts for both languages, check out your site with various browsers like IE and Netscape, which differ sometimes a lot concerning how the file is displayed on the screen. For further insight into Style Sheets, well, you know, please refer to a larger documentation.
| |
|
15: FramesFrames are different window divisions within the browser window. If for instance you have three frames, that means that you must define at least four documents: One document defines the frame (this is the frame-set file), and then this document tells subsequent documents in which frame, i.e. in which window division, they are supposed to appear. To illustrate that graphically:
Here you have three frames, each supposed to contain an HTML document. The frame-set file itself remains invisible, but it sets the title and location; and thereby is so to say superior to the individual frame documents. To set a frame like the example above, the frame-set file would look like the following:
Please note that the frame-setting code is to be placed between the head and the body area. As you can see, there are two frame-sets being created; the first creating a frame-row at the top with the height of 100 pixels; the '*' meaning the remaining space. You can also use percental values (like rows="25%,75%"). - The thereby first established frame is represented by the first line following now, defining the file to be associated with that frame. The name of the frame window will be of importance when we go on. The second part, in the example represented with the '*'-joker, is being defined now: As another frame-set, this time consisting of two colums. The left column is then defined by the first file declaration following, the second by the second declaration. As usual, additional attributes can be added to the frame tags, making it possible to hide the borders and prevent scrolling. But I will stick to the basics here, as usual. The names given to the frames are the target locations which determine where a certain HTML file is supposed to show up:
The first link displays the respective file in the frame window named "Frame1", while the second one displays a file which leaves the frame-structure. Use this method to link to external sources, because it is quite a nasty approach to display other people's projects within one's own frame-set. You should also create non-frames areas, as indicated above - those appear within the frame-set file itself and are not shown when the browser knows frames. But there might still be some people browsing with a non-frames browser. Also, you should ascertain whether it really is necessary to work with frames. While they might look like a nice graphical way to organize your site, also simplifying navigation, they make browsing as well as book-marking and saving much more difficult; also it is more complicated to write with frames. I had frames on my site, too, but I felt compelled to change that because I thought that the cons of the frames would outweigh the pros. But see for yourself; different sites need different solutions.
| |
|
16: HTML StyleAnd now some final remarks on writing for the internet. You should always bear a logical and transparent structure in mind. Your visitors aren't interested in spending hours to understand how your site works; if they don't find what they were looking for, they will probably leave your site before your message (if there is any) gets to them. Also, make sure your text is readable agaist your background. There are way too many sites out there where the background color or image is way too similar to the text. Background pictures and colors are supposed to be just that: Background. They must not disturb the text. Always test your files on various browsers with various screen resolutions. If you have a background picture fitting your screen width of perhaps 640 pixels, that will only work on your screen and some others - but for those with larger resolutions what appears on the screen is just an ugly mess. Concerning ugly: While using no graphical elements might be boring, over-use of such is even worse. Think twice before using blinking text, lots of animated GIF files or even background sound. Such a design only shows how much you like gimmicks, but most would consider something like that quite deterring. There is the possibility to underline text. But mostly, underlined text stands for links. So if you do not want to mislead your visitors on purpose, don't make use of that possibility. Also, use heading tags for headings and for nothing else; and use them at all: They are designed to support the logical structure of the file; for other ways of formatting, use Style Sheets. When you use graphical navigation make sure you privide those who have their graphics switched off with an alternative text navigation; same holds true for JavaScript elements. Also, as I already have mentioned, include non-frames areas when you use frames. Design your pages so that everything fits into a 640-pixels-width window, making horizontal scrolling unneccessary. You might think that this is your page and you determine how it looks like; but on the other hand, it is you who wants visitors. So you should yield to the restrictions of technology. Concerning file size, there are two opinions baiscally. The first one is not to produce too large text files, for they would load too slowly. I agree to that if the respective file is containing a large table - because the browser displays the contents only after having read the entire table. So either produce small tables, split them into parts (see my Chronology page) or avoid tables at all. Apart from tables, as you can see, I obviously do not oppose large file sizes - if the text is not mainly contained in a table. I could also divide this text into sixteen parts, have sixteen files and make you click through those sixteen different documents - but I think that such an approach would slow you down much more. So it depends upon various factors; but I think my solution fits this site. - - - Finally, I wish you good luck with your HTML, it ain't difficult. A home page is an evolving thing, do not expect to produce perfect results right from the beginning. Up to now, I've changed my layout eight times. That's evolution - you also can observe this with professional sites. And if you think your site looks good, try to get more visitors by adding it to search engines and, if it fits into a certain topic, look for a webring you could join. And eventually it might pay off; you'll know that when the number of visitors is growing or at least remaining at a constant, not too low, number; and when you get positive feedback for your work.
|
|
|
|
| |||||||||||
 |
 |
 | |||||||||||
