Html 2
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 14,581
- Pages: 41
27/5/2009
DM INFORMATICA
HTML
HTML FOR BEGINNERS | [Digite o nome do autor]
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
INTRODUCTION 1. You need HTML Home pages are a genial medium. It is simple and easy to use, and easily accessible for most. Through the internet large parts of world’s population can communicate, directly and without restrictions. By making your own homed pages you get the option to ”publish” your work to thousands of other people! I started making home pages in 1996. In the beginning I used the Netscape Composer program, which was freeware and easy to work with. Later I tried with the somewhat larger programs FrontPage and Dreamweaver. But regardless of what I did I always ended up having to adjust the HTML-code manually. Within a couple of years I gradually dropped the graphic editors (Composer, FrontPage, Dreamweaver etc.) and started to write all the code manually. That turned out to be a good choice, especially when I started to use the shareware program NoteTab. That turned out to be much faster and simpler to create home pages with. Over time I have created thousands of HTML documents, and it is all done with NoteTab – that tells something about the capabilities of this program. This book is written based on my experiences with HTML through the last 6 years. I have tried to write the introduction to HTML, which I could have used when I started the work. Those are the fundamentals that all in my humble opinion need to master. At the same time I am trying to give some hints for effective and appropriate work habits. We should not forget that when it comes to home pages, the contents are the most important. Therefore the HTML coding in itself is not particularly interesting. It just has to work – and I hope I can help you with that! The lay-out of this book The book is in three parts, and they should ideally be read continuously from beginning to end. The coverage is built up around a long number of exercises that you need to do on your pc. The exercises are not at all hard or complicated; at least that was not the intent. Maybe some of them are even boring at first glance. But the exercises are very important for learning. So I highly recommend that you do all exercises as they are described here. Then you will guaranteed learn a lot about HTML! In pat one there is an introduction to HTML and to choice of programs. But the exercises start soon, and here is the primary focus on formatting of text and layout with graphics etc in the home pages. In part two the exercises continue and you are introduced to tables and hyperlinks. We look at different options to control the home page layout – including the use of Cascading Style Sheets (CSS). In the appendix I have included a number of more unique tips and descriptions that you will enjoy in the long run. Many thanks to my good helpers Ebbe, Jan and Peter, who have gone through the exercises and approved of them. Also thanks to Jette and Kirsten, who as usual have been invaluable during the work! Have fun! Michael B. Karbo. August 2001/March 2006 Home page for this book: www.mkdata.dk/html/us www.karbosguide.com
2. Getting to know to HTML My coverage starts by giving you a brief introduction to the HTML concept. It is my thought that you need to learn the subject through the exercises that appear later in this book, but start by reading this short introduction. Then you need to ready your pc with the programs that you will be working with. Premises Of course you need a pc with the proper accessories to make the various exercises in the book. But not too much is required: •
Your pc has Windows 98, Me, 2000 or XP (as I use) plus an internet connection.
•
You have installed the necessary internet components in Windows (TCP/IP etc.), so you can log on to the internet.
You have installed Microsoft Internet Explorer – preferably in version 5.5 or 6. The program is freeware from the internet, as is a couple of other • programs we need to use in this book. •
That you retrieve the shareware program NoteTab from the home page for this book and install it as described.
Finally I presume that you are reasonably proficient in the use of mouse, dialog boxes, menus and keyboard in Windows. Some times I will cover all steps of the operations; other times I expect that you can figure them out for yourself. The illustrations come from a pc with Windows 98 and Internet Explorer 6. What is a home page? A home page is one or more documents. Documents that include graphics and possibly different kinds of formulas or whatever other interesting content that can be placed on the internet. Home pages can be displayed on the screen, and you can print them. That is done through a browser that you use to surf the net. General format Home page documents are special compared to many other types of documents. For one thing they are written in what is termed pure text, and they are formatted using HTML, which is an open standard that is defined through a number of interest organizations around the world. In reality that means that no company has a monopoly on the home page format. And with that: •
The home page can be read through multiple different programs (browsers, word processors and other program types).
•
The home page can be placed on many different types of computers (i.e. Windows, Unix, Macintosh).
•
The home page can be authored with lots of different programs.
We can then conclude that the home page format, also called HTML, is 100% general universally spread. Everyone can make, see and use home pages – as long as they have internet access. Therefore it is excellent – also for laymen – to know of and possibly be able to work with HTML, at least to some extent. And that is the issue for this book! Graphics, links, multimedia etc. HTML is a ”language” that is used for formatting home page documents. The language consists of some codes, also called tags that are woven into the text – and you will work with that in this book:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 1. Part of a HTML file. Notice that the content is text, but part of it is so-called codes. When the home page is written (in HTML), it needs to be shown with a browser. Then you can see that the home page is composed of many elements:
•
Text that can be formatted different fonts, -color and sizes, Italic, underlines etc.
•
Photos and other graphics.
•
Text and graphics can be inserted in tables or in other ways, resulting in different layouts.
•
Links to other home pages on the internet.
The above mentioned elements are the most common; they are included in almost every home page. Beyond those there are plenty of other elements that can be included in a home page. Than can be formulas where to enter user information, Database connections, sound or video clips that stream (the transfer is done simultaneously with the display). Furthermore the HTML format can be made more advanced with JavaScript, which is a specific programming language that dramatically expands the possibilities to put life in the home page. And there are many other techniques that you can blend into your home pages. But in this book you will only work with the most fundamental HTML elements. Actually about 90% of all home pages include only a few elements. You can get a long way with text, graphics!
Copyright Michael Karbo, Denmark, Europe.
• Next chapter. • Previous chapter.
1. Tags – make it work The real genial thing about the HTML format is that it written in pure text. This means that the individual HTML file only consist of letters, numbers and other symbols that anyone can read. So it does not require any special program or any decoding to see and manipulate the content in a HTML document. The mentioned tags determines where and how the home page will appear. Here you will a very small introduction in this subject. Read it thoroughly, since it is a very central subject. A HTML code The individual tag (HTML code) has a name. The name is written within a couple of < and > symbols. As an example it could be:
This HR (Horizontal Ruler) code causes a horizontal line to be placed where is the code is located. But notice that the code is written inside the <> symbols. These symbols say that this is a HTML code, a tag. The browser interprets anything within these symbols as codes that need to be interpreted and worked on!
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 2. The browser needs to interpret the HTML codes so they will work in the home page. See the effect Let me show you a couple of examples of HTML codes. First I place the
code in a home page document. You can see the text and the codes here:
When this bit of text with codes appear in the browser, it can appear as shown in the figure below. First come a line with four words, concluded with line break (caused by the
code). Then come the
code, which results in a horizontal line. That is followed by another line break and a couple of more words:
Figur 3. A part of a HTML file, as it appears in the browser. Notice the horizontal line between the two texts. That is a result of the
code. Another example So the HTML document is actually ordinary text ”spiced” with codes. The codes can format the text in various ways, but they can also be used for many other things. In the following example I will make a very simple page. It contains four words followed by a photo. Here you see the code for the page, actually that is all it takes to make a home page:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 4. The content of a HTML document. Here you see the screen image that the browser creates from the HTML document:
Figure 5.The browsers interpretation of the code in Figure 4. Look at the code Let us study the code in Figure 4. There is really not much to it, so we should be able to understand it. We take it ”bit by bit”. The top section reads: The very first code simply indicates that it is to be understood as a HTML document. Next comes the so-called HEAD section, which in this case is empty. The HEAD section is always found in the top of a HTML document, where it can include various information about the home page, such as who the author is. The HEAD section begins with the start code . The idea is that it should contain some text or other codes, but here there is none. But the HEAD section concludes with the end code . So there must be a start- and end code in this code. The two codes are identical, except for the slash in the end code:
Start code End code
That is how some HTML codes are; they consist of two halves, in between which there can be some text or other contents. Can you see in the document that there is nothing between the two HEAD codes? Later in the book you can read more about basic construction of HTML documents. BODY and BASEFONT The next code block in the example reads:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. in the bottom of Figure 4 – the BODY code ends there, can you see that? The end code reads . In this case I selected the Arial font for the home page example. You can indicate fonts in several ways in a HTML document; here you can see that I use the BASEFONT code. That selects the base font, which is the font which prevails if nothing else is selected in the document. You have the option to select more han one font. Those could be the Arial, Helvetica and Sans Serif fonts, as I have done in the example. The advantage of this is that the home page must be visible on many types of computers. Remember it is the computer with its browser and operating system that creates the screen image for the user who needs to read my home page. Anyone who has Windows has also the Arial font, but Macintosh and Unix users may not have. Therefore two similar fonts are listed, which (hopefully) can be interpreted by other computer platforms. The contents of the page The BODY code (see still Figure 4 on page 7) starts the large section that has the actual home page content; that which is to seen in the browser. My example has the following content: This is from Venezia:
The first line is pure text, which is to be shown on the screen. There is no code in that line. Therefore it is shown as text on the screen, as you also can see in Figure 5. Then comes the code
, which causes a line break (actually an empty line). The P stands for paragraph. After the empty line comes the picture. That is inserted with an image code. IMG SRC stands for image source. The image source is a file name (venezia.jpg), which is indicated in the IMG code. Can you see that? Also take note, that we only use lowercases for file naming (venezia.jpg instead of Venezia.JPG). The end code The last two codes in the HTML document are: They are both end codes as indicated by the / first in the code). Naturally the end codes are linked to the corresponding start codes in the beginning of the document. Error possibilities The IMG code contains the name of the image file, but often also a reference to what folder holds the file. In the case in Figure 4 it is expected that the image file is in the same folder as the current HTML document. If the image contrary to expectation is not found in that folder, then of course the browser can not show the image. There must be a spelling error in the reference; the file must be named precisely as indicated in the code. If there is an error, it will result in an empty field in the browser window where the image should have appeared:
Figure 6. A typical error in a home page: The picture can not be shown. Either it does not exist, or there is an error in the HTML code. Also there is a significant difference between lower and upper case letters when we talk about web. It does not work if you use upper case in the file name and write it in lower case in the HTML document (and vice versa). My clear advice is: always use just lower case in naming files and folders. Then you avoid this type of error. Do I have to write all these codes? Now I have shown a couple of examples of codes, so you might think that you have to write them yourself, codes symbols and all. Of course you could do that, but fortunately we have programs that will do a large part of the work for us. Actually you can create lots of home pages without knowing or writing very many codes! You will see that soon.
Chapter 2. The choice of programs
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. You usually use a so-called editor to make home pages. Editors are programs that are especially designed to write HTML files. There are many and very different editors, but they can roughly be defined in two categories: •
The graphic oriented editors
•
The code orientated editors
The more graphic editors let you work in a word processing-like environment, where you only see the contents of the home page; all the codes are hidden. In the real code-editors you work directly in the codes. And that is what we are going to do in this book. The graphic editors At first glance it appears very user friendly that the home page author is spared from seeing the ”awful” HTML tags. Therefore the graphic editors are quite useful for many beginners. I have written two books: ”Home pages – teach yourself” and ”Home pages with FrontPage Express” that use those types of programs. Let me show you the best known: Program Netscape Composer Microsoft FrontPage Express Microsoft FrontPage 2000 Macromedia Dreamweaver Adobe GoLive
Comments Excellent free ware program for beginners. Free program for Windows 98. Fine for beginners. Large and reasonably comprehensive. Is part of the Office suite. Very large, expensive an ”complete” programs that can make the most advanced home pages with all the new technologies.
Figure 7. There are lots of graphics editors for HTML editors. The problem with the graphic editors is often that they cannot make the really ”good” HTML code. The graphic editors have their own way to create code, and basically it is not intended that the user needs to be familiar with the code. But most home page authors really want full control over how to format the home page. You almost always end up having to polish the code off manually. That can be quite cumbersome and time consuming. Therefore many choose to drop the graphic environments and work directly in the codes. That is often much faster, and you get 100% control over the home page, which is very satisfying.
Figure 8. In FrontPage 2000 you work in a graphic environment – without seeing the HTML codes. The ”real” HTML editors All the graphic editors that are mentioned in Figure 7 can also work in a ”code environment”. This means that you can enter and adjust the HTML codes directly. But the graphic oriented programs are not really designed to work directly in the code; this is more of a support function. So when we want to work directly in HTML you need an editor that is designed for that – and nothing else. There are scores of these editors; I will only mention a small handful that I know and can recommend: Program NoteTab Light WebWriter AceHTML 4 Pro
Comments Swiss. Lightening fast, flexible and free. Free and effective. American shareware, a very thorough program.
Figure 9. There are lots of “pure” HTML editors. They are also included in programs such as Dreamweaver (as you can see in Figure 7).
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Pure text In this book you will work with the free ware program NoteTab Light. That is a nice program to work with and actually just as easy to use as for example FrontPage Express. If we wanted an even simpler program, then we could select Windows’ Notepad. That is also a text editor, with which you can edit HTML documents. But the disadvantage in Notepad is that it provides no help to the author; you have to enter every single code yourself. That is not the case with NoteTab Light, as you will see later. There you find lots of program functions, which simplify your work greatly.
Figure 10. Windows’ Notepad is the simplest editor available. It can not do much else but saving text files, and I can not recommend it. Other editors My choice of NoteTab Light for this book does not mean that you locked to that program forever. On the contrary, you can easily work on the same home pages using different programs – even simultaneously. The genial part is that home page files contain only HTML, which is written in pure text. Therefore different programs can easily modify the same document without interfering with each other. As an example I use Dreamweaver besides NoteTab. That happens when I need specific functions, for which Dreamweaver is excellently suited. I also use the AceHTML editor for certain tasks, where that one is a little smarter than NoteTab. To produce buttons I often use Fireworks, which actually is a graphics program that can also make the HTML code needed for the buttons. But by enlarge you can get very far just with NoteTab! Working with graphics Since Web is a graphic medium you will probably also need a program on your pc for photo editing or picture processing. Many programs are available, and you do not have to be faithful to just one of them. Personally, I often switch between using Photoshop, Fireworks, Paint Shop Pro and the small and limited freeware IrfanView. Some tasks are so simple that it is not worth it to open a large and heavy program like Photoshop. And as mentioned, Fireworks is quite good for making ”buttons” in the home page.
Figure 11. IrfanView is a free program that can be used for many graphics tasks when producing home pages. The home page for his book I have made a home page that contains links, pictures, code etc. – all of what you need for your work in this book. Now open your browser (I recommend that you use Microsoft’s internet Explorer), and enter this address: www.mkdata.dk/html/us Now you are going to get into the nitty-gritty work!
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Chapter 3. Installation and preparation To do the exercises in this book you need to install a HTML editor, and you need to create some folders for all the files that you will working with. Let us do that now! Windows Explorer To work with home pages, it is valuable to know about file management. I recommend that you use Windows Explorer, which you always have available on your pc. 1.
It is easiest to open explorer with the Windows key on you keyboard. Press Windows+e to open Explorer.
2. The Explorer is divided in two frames. In the left frame you see the drives (hard disks, CD-ROM etc.) that are on your pc, including various system folders. Select the C: drive:
Here I show as it appears in my Windows, but it might look a little different on your pc. 3.
You have selected the C: drive. Now select the menu item New à Folder:
4.
The folder is created (at the button in the right frame), and now you need to enter the word HTML, which will be the name for this folder:
5.
Finish with Enter.
6.
Open the new folder (HTML) with a double click.
7.
In the same way create the folders download, test and site1. The names must be copied precisely in lower case and without spaces.
8.
Now you can see the subfolders for C:\HTML in the left frame of Explorer:
9.
The folders are ready, and you can now retrieve the files and programs that you need to work with.
NOTE: When you do the many exercises in this book, it is very important that you use precisely the same file and folder names as I write them. This is because later in the book all the exercises will be linked together in a larger site, and among other things that is done by using the file names. Find NoteTab The first task is to retrieve the HTML editor NoteTab. 1.
Look at the home page for this book (on the address http://www.mkdata.dk/html/us) in your browser.
2. One the first page you find the link Get NoteTab Light. Click on it:
3. That brings you to a new page where you can retrieve the program wither in full version for $20 or the free version that I have had made. Start with that, so click on the link Download NoteTab Light:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
4.
That starts a transfer of the installation file to your pc. First select the file on your hard disk. Select Save like here:
5.
The next dialog box reads Save As, and here you need to choose the folder Download:
6.
Then click the Save button, and the transfer starts.
7.
When the transfer is completed you can chose to open the file right away by clicking Open:
8. Now the installation of NoteTab Light starts. That sends you through a lot of screen images, the first of which says welcome to NoteTab. Click on the Next button:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
9.
Then click twice on the Next button.
10. Then you can see in which folder the program will be installed:
11. That is quite OK, so click on Next again, and then twice more. Finally click on the Close button. 12. Now the program is installed. The last you see is a small window with a shortcut icon to NoteTab Light:
Figure 12. The freeware program NoteTab Light is installed.
Chapter 4. Start the home page Now you have retrieved and installed NoteTab, which you will use to produce your first home page. Start NoteTab Light You can use the program right away: 1.
Open Windows Start menu. You can just click on the Start button. Point to the menu item Programs and then find:
2. First time you start the program, you see ”Tip of the Day.” I suggest that you eliminate this function by deleting the check mark in the field Show Tips on Startup. Then click on the Close button:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 3. The program is now ready. Look around in the program window to familiarize yourself with it. There are the familiar menu and tool bars on top. Below that you see a field with the document name NoName01.txt:
That is the name of the (empty) document that you have on your screen. But we are not going to work on that right now. 4.
Look at the two buttons in the bottom of the window. They cover the two clipbook libraries Autotext and HTML that you will get acquainted with later:
5.
Try to click alternately on those two buttons; that changes the content of the tall narrow frame in the left side of the window.
6. The content of both libraries is a collection of clips. Clips are a specialty in NoteTab that you will be using a lot. Those are small scripts, which each can be used to insert different HTML codes. Click on the HTML button. Now you see the biggest library, where the different clips are sorted in groups (each with a red title):
7.
Your cursor is flashing in the large white frame to the right. That is where you write the text content of the home page.
8.
Now press function key F6. That opens a file list in the right side of the window. Now NoteTab is ready to use:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Figure 13. NoteTab Light is ready for use. Notice that the screen is divided in three frames. Get a template Now you are ready to make your first home page. I have made a small HTML file that you can use as your template: 1.
Again, open the home page for this book (www.mkdata.dk/html/us).
2.
The click on the link The templates.
3.
The click on the link template1.htm:
4.
That opens a home page with a very limited content.
5.
You need to save it on your pc since you will use it repeatedly later in your work.
6.
Close the page, which opened in a new browser window.
7.
Right click on the link template1.htm, and choose Save Target As…:
8.
Now save the file in your folder C:\HTML:
9.
Click on the Save button and the file is copied to your pc. Now you can work with this file on your pc without being connected to the internet.
In this way you can always download existing HTML documents from the net. You can save them as files on you own pc. Then you could study the HTML code if you are looking for some good ideas to copy.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Create your first HTML file Now you are going to use my template as the starting point for your first home page. You have NoteTab Light on your screen. 1.
Open the file template1.htm. First press Control+o.
2. NoteTab is by default set to work with text files (with the suffix .txt). We need to change that. Click on the arrow by the field Files of type: and select HTML files from the list as here:
3.
Then you need to find the folder C:\HTML:
4.
Select the file template1, and click on the Open button:
5.
Now this small HTML document will be loaded in NoteTab Light:
Figure 14. NoteTab Light with the HTML document entered in the large middle window. Testing Now you are finally ready to work with the home page.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 1.
Start by saving the HTML document under a new name. So select the menu item File à Save As.
2. Click on the folder test, since that is the file has to be saved. Enter the file name test.htm, and click on the Save button. Now the program’s title bar tells the proper file name:
3. Start by looking down in the large, white text field. Move cursor with the arrow keys (ArrowLeft ArrowRight ArrowUp ArrowDown) – it works like any other word processing program. 4.
Find the line that reads Hallo…. Delete that and write this in stead:
5.
Be careful not to deleted the codes
and
, they need to remain!6. Press Control+s to save the document. Now let us see if it works. So press F8. This ”sends” the HTML document directly to the browser, so you can see the result. Sometimes it takes a little time before it works, but the home page appears in the browser window:
7. Now you have both NoteTab Light and the browser open on the screen, and you can switch between the two windows by clicking on their respective button in the task bar at the bottom of the screen:
8.
But in my opinion the easiest way to switch between the two program windows is to press Alt+Tab. Try that a couple of times!
9. Close any other windows you might have open, so you can concentrate on the two you see above. Now you can modify the home page in the NoteTab window, where after you with F8 can ”send” the changes directly to the browser window. This page (test.htm) will not be used for anything else but to give you a small feel for the work with NoteTab Light. So we will make a couple of more small exercises. Title for the page You just observed the title bar in the browser window. There you can read the file name for the current HTML document. But actually the browsers title bar is intended to show the title for the home page. So let us make one. The title is governed by the code <TITLE>, which has to be in the HEAD section of the HTML document. Your document has currently no title – therefore the browser shows the file name in stead in the title bar. 1.
The <TITLE> code is a start code that requires a corresponding end ode. So place the cursor between the two codes:
2. Enter the text My first page ... between the two codes. Save and test the page in the browser. NOTE: sometimes you have to press F8 more than once to pen the browser window. 3.
You see right away that the content in the blue title bar in top of the browser window has changed:
4.
Return to the NoteTab window. Now you are going to work down in the BODY section. Adjust the document, so it appears like here:
5. Test the page in the browser. You can surely see that the
causes double spacing between the different paragraphs. Normally the browser will let the text distribute over a number of lines (create automatic paragraph breaks) when you just write in one long line. 6.
Try to extend the first line of text with lots of characters. Save it and test it in the browser:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 15. Here the second paragraph includes one very long line. When it is shown in the browser, the paragraph will be broken into shorter lines.
Chapter 5. Text and line length We keep concentrating on the text, as it is shown on the home page. I presume you have typed in a long line of nonsense similar to what you saw in Figure 15. Now let us check the browser and see how it shows text in lines. As you read it, the following review may appear quite ”dry.” But the subject is central to present the text neatly on the page. And that requires an understanding about the relationship between line and paragraph! Line breaks in paragraphs As you can see Figure 15, the window is quite small. I chose that to force a couple of line breaks. I succeeded, now the first paragraph is ”broken up” in three lines. In the following figure I reduced the window even more, which forces the browser to break up the paragraph into four lines. Remember still that the
code concludes the paragraph Try for yourself You still have the windows with NoteTab Light and the browser open. 1.
Try to scale your browser window up and down in size. You can ”drag” in the window corner to change the size:
2. If you can not drag the window size, it is because you work with a window in full screen size. You change that easily by clicking on the center of the three small buttons that are in the upper right corner of the window:
3.
Now you can change the window size. You will surely see that the line length in the large text paragraph changes.
4.
In NoteTab the same holds true, only it is of less importance. If you reduce the NoteTab further, you get more line breaks in the text:
5.
Finally maximize both program windows.
Generally you should organize your test in paragraphs, each of which may be multiple lines. The problem with line breaks is that not all monitors have the same ”size”; some use a resolution of 800x600, others 1024x768 etc., and that can make the breaks quite different from pc to pc. The line length can be reduced by placing the text in a table, as you will see later. Certainly do not make manual shifts. The line can be broken You can ”break” lines two ways:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. •
With the
code
•
With the
code
BR stands for break. That forces a new line within the same paragraph. That means that there will not come ”extra space” above the line. Contrary, the P code set an amount of space between the paragraphs, as we have seen. 1. Try to insert some BR codes here and there in the long text string. For now the easiest is to use the HTML function library, so if you have not done that already click on this button:
2. You see that all the codes can be inserted from the clips in the library that is seen in the tall left panel. Try to thumb your way to the bottom, then you find the so-called Quick Tags:
3. Place the cursor where you want the line break. Select the clip br, as seen in the above figure, then insert it either with a double click or by pressing Control+Space. 4.
Move the cursor somewhere else and insert another line break. Repeat that a couple of times.
5.
Then look at your ”work” in the browser window. Try to figure out, how many
codes I have inserted in my version below:
Figure 16. The long text string is broken up in five single lines. This happens in the browser! Another attempt I want to dig in a little deeper in the subjects line and paragraph break. Do this exercise in NoteTab Light: 1.
Save the test.htm document as it appears on the screen now.
2.
Then save it again, but this time under the new name test2.htm (menu selection File à Save As).
3.
Now delete all text between the two BODY codes, so all text is removed from the home page:
4.
Save the file and test it in the browser. The page needs to be blank.
5.
Then enter the following between the two BODY codes, using the panel with Quick Tags to insert the codes:
Line Line Line Line
1 2 3 4
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Line 5
Line 6 6.
Save the document and check the result in the browser.
The explanation If you look in the code, then you see that the lines 1, 3 and 5 end with BR codes. That does not cause use of extra space since those codes do not cause paragraph breaks. After line two there is ”extra space”, which is then followed by the paragraph code
. After line four you inserted two
codes, and that results in the same space as one
code:
1.
Now try to experiment with two
codes at the end of line two. What kind of spacing does that give?
2.
Then try to put three
codes in line four – what happens then?
3.
Save the document.
4.
Close NoteTab Light with Alt+F4.
If you look in the browser window, you will see that line two has not changed. No additional spacing was added, even though you added another
code. So this does not work; you can add
codes until you are blue in the face, You only get ONE new paragraph. But the
code can be repeated, as you certainly have seen. Each repeat moves the following text down one line.
Chapter 6. Headings and basefont The next real central subject will look at is the so-called headings and font selection. Re-enter the document You will continue working with some small exercises that both show how the NoteTab program works and then continue with different HTML codes. 1.
Open the NoteTab Light program again.
2.
Notice that those documents you worked with last (here test2.htm) are entered automatically.
3.
But it is always easy to re-open documents in NoteTab; try for you. Select menu items File à Reopen:
4. That gives a list of the latest files that you have used. There are some other methods to quick re-opening of HTML documents, but we will return to that later. 5. You have the test2.htm document on your screen. Delete the 6 lines of text that you worked with in the preceding exercise. In stead insert some blank lines between
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 6.
Save the document as test3.htm.
7. Now we are going to look at the headings concept. Look in the left frame (the HTML library). There you need to return to the section with quick tags. Find the clip h1 and double click on that:
8.
The result is that two codes (
and
) are inserted, and the cursor is placed between them:9.
Now enter the text This is heading 1.
10. Press End and Enter to go to the next line. Enter the following sentence here: And this is an ordinary paragraph 11. Save the document and test the product in the browser (press F8). Explanation follows…
Figure 17. The first text line is formatted with Heading 1. An explanation In the previous exercise you formatted a line with the HTML codes
and
. Headings are formatted as such and that is some of the oldest and most basic in the HTML standard. The system is quite simple: •The codes
, , and give the heading levels 1, 2, 3 and 4.
•
Each level has its own font formatting. H1 gives the largest font, H2 a little smaller and so on.
•
The end codes (fx
) result in a paragraph break. and give the heading levels 1, 2, 3 and 4.
•
Each level has its own font formatting. H1 gives the largest font, H2 a little smaller and so on.
•
The end codes (fx
•
Each level has its own font formatting. H1 gives the largest font, H2 a little smaller and so on.
•
The end codes (fx
I am sure this sounds quite simple, and it is. Try for yourself all four heading levels: 1.
You need to copy the two lines of text. Select them, and make a copy with Control+c.
2.
Insert the copy three times with Control+v. Adjust the three new blocks, so you are using H2, H3 and H4 in those:
3.
It is nice to be able to copy and reuse/adjust code lines across the documents. That is a lightning fast technique one you get used to it!
4.
Save the document, and test it in the browser. The result should look like Figure 18.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 18. The result of the exercise using headings.
Chapter 7. Fonts Notice in Figure 18 that the font is probably Times. Can you see that? We need to change the font. 1.
This is important: Place the cursor right after the code. If there is not enough room then insert an empty line.
2.
Now you need to find the clip named BASEFONT in the HTML library. That is not a quick tag, so you need to go higher up in the list. Double click here:
3.
The code does not enter the document directly; in stead the clip opens a dialog box, where you can select font, size and color:
4.
Click on the small arrow to the right of the top field (Font name). Select Arial by clicking here:
5.
Then click OK. Now the code is inserted in the document:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
6.
Save the document and test the page in the browser. You can clearly see a new font in the home page.
7.
Close all open documents with the keyboard shortcut Control+Shift+F4, and close NoteTab (with Alt+F4).
How does BASEFONT work? BASEFONT is a code that is typically used in the top of the document. It works ”downwards” so to speak. All text following the code will be formatted from that. If you place a new BASEFONT code further down in the document, then it takes control – and works until you might enter another code etc. Let us look closer at the code content. You can see that it actually defines more than one font, since the parameter is named: FACE="Arial, Helvetica, Sans Serif" The three fonts are actually identical, but they are used on different types of computers. On pc’s with Windows it is called Arial; on other computers it is called Helvetica – etc. As mentioned, BASEFONT can indicate both font, -size and -color. That is all done with the same code. As an example I can in the BASEFONT dialog box select like this:
That results in this code. The line break that you see in the code is of no significance:
Figure 19. The BASEFONT code with additional parameters to control the font. The three parameters The code BASEFONT then has three parameters: •
FACE="Arial, Helvetica, Sans Serif"
•
SIZE="+2"
•
COLOR="#008000"
We have described the font before. The size is relative, and that is quite unique for HTML. Here it is set to +2, which is larger than +1 and less than +3! That happens to be the essense of relative sizes. When I test this page in the browser, it turns out that the size only governs the body text and not the heading; they do not change size. I also selected a green color for the text. That is indicated by COLOR="#008000". You can also write COLOR="green", that works in modern browsers. The data logical value #008000 is understood by all computers and browsers, since the 6 digits are actually three pairs, which refer to the colors red, green, and blue. Here the green value is set at 80. But you will see more about that later in the book. Relatively few font sizes If you have worked with fonts in word processing, you will be used to absolute sizes that are measured in points. Here you see a clip from Word, which I often use:
Within regular HTML you can only specify a few font sizes. The HTML codes like BASEFONT that we experiment with here, can only handle font sizes between 1 and 7. Size 3 is the ”normal size”, that is the one use in the body text. In the example in the previous paragraph I inserted the value two.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. You can experiment with this yourself. Insert a new BASEFONT code for each line (copy it). Set font size one step down for each text line, so the result looks like this:
Figure 20. There are seven different font sizes for the body text It is important to understand that the local browser forms the font on the screen. You could for example easily imagine a browser that does not respond to the SIZE=”” parameter at all, so all texts are shown in the same size. The browser exercises a lot of ”power” over the actual showing of the home page. The home page author can not always control the final formatting the browser does (at least in regular HTML). How do headings work? We started this chapter by writing four headings each with their own code. You saw the result in Figure 18 on page 38. Again you need to be aware that the browser controls the final appearance when you use headings. By using internet Explorer the page will appear as shown in the figure. Another browser could in principle show the page quite differently. Besides the individual user can also select browser settings that dictate the result of the heading codes. In Figure 18 you see an example that the heading levels 1 to 4 all result in bold print. Heading 1 level gives a rather large print. Heading 2 is slightly smaller and 3 even smaller. With Heading 4 the print is the same size as normal print. Can you see that? Headings are an excellent formatting tool. But if you want to control font type and size and thus take control of the browsers, then you need to use CSS (Cascading Style Sheets). This is a technique that breaks the traditional HTML limitations. You can for example ”lock” the font sizes with CSS, so neither browser settings or anything else can change them. We will get to that later in the book.
Chapter 8. Graphics and colors Now we will look at two other very central subjects regarding home page design. That is the use of graphics and colors. Here you will see a long string of exercises that illustrate many of the possibilities. Insert a picture In the first small exercise you will make a new page, and you need to insert a picture in it. 1.
First get the picture venezia.jpg from the home page for this book. Click on the link Material for the exercises, and then click on this link:
2.
When the picture opens in the browser window, you should save it locally. Using Internet Explorer version 6.0, you may just click on this button:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 3.
Otherwise right click on the image and select Save Picture As…:
4.
Save the picture in the folder C:\HTML\site1
5.
Then open NoteTab Light, if that program is not already on your screen.
6. Get the HTML document template2.htm from the home page for this book. Save the document in the C:\HTML folder by right clicking on the link and using the menu item Save Target as… It is quite important that it ends in the right place! 7. Open template2.htm in NoteTab and save it right away under a new name: The document needs to be placed in the folder site1 under the name venezia.htm. 8. NOTE: Since the two files have different suffixes, it makes no difference that there is a file with the name venezia.jpg in the same folder. But as mentioned before, it is very important that you name the file precisely as I write it and that you save it in the right folder! 9.
Open venezia.htm in NoteTab.
10. Enter the heading Venezia … like here:
Now you are going to insert a picture below the heading. 11. Move the cursor to the line below the heading. Insert a P code and then press Enter to go to an empty line (there is already a P code further down in the document, but just leave that there). 12. In the clips panel in the left side of the screen image you need to find the section Image Elements. Double click here on the clip Image:
13. That opens the dialog box Image:
14. The Image dialog box can insert the HTML code for a picture. Here you will not utilize all the options for different parameters that are available in the IMG code. In stead: just click on the button to the right of the topmost field:
15. Now you have to click on (select) the picture file Venezia:
16. Then click on the Open button. Then you see the file name in the dialog box:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
17. Then click on the OK button. 18. Now the HTML code is inserted in the document as in Figure 21. Save the document and test the page in the browser. Hopefully the result looks like Figure 5.
Figure 21. NoteTab writes the code for you.
Chapter 9. Studying the code Now look at the code that NoteTab inserted in the HTML document venezia.htm.
1. The code itself is named IMG, as you see in the beginning. Then comes the parameter: SRC="venezia.jpg"
2. The SRC parameter refers to the name of the picture file that has to be inserted. In your example the picture file is placed in the same folder as the HTML document. That is called a relative placement. This code will always work regardless of which folder the home page is placed, as long as the picture file is in the same folder. 3. The next two parameters are: WIDTH="384" HEIGHT="256"
4. They specify the pictures pixel size (width and height). NoteTab finds this information in the dialog box Image. You do not need to specify height and width when the picture is to be shown in 100 percent size – in our case you could have omitted that information. 5. The last parameter is called BORDER="0". Border means edge or frame, and here it is set to 0 pixels. If you change the value to 1 or 2, you will see en thin frame around the photograph. Try for yourself! Colors Color is a very basic element in most home pages. You can insert the finest pictures in all kinds of colors, but you can also color the page yourself. Let us look at an example.
1. Start by reading the BODY code in the document venezia.htm, which you have on your screen. That consists of several parameters. Here I show it with line breaks, but that is of no significance. If your code looks quite different, you have probably saved the template wrongly (see the description on page later). Here you see the code as it should be:
2. Within this BODY code there are a number of color instructions. You can see that from the 6 digit color codes between the quotation marks. In this context letter F is a number as I will explain in a minute. Compare with Figure 19 on page 40. 3. Among others the document reads: BGCOLOR="#FFFFFF".
4. In plain english that means background color = white. 5. Try to change the code to BGCOLOR="#00F000" 6. Then test the page in the browser. Now the background is certainly not white; it is light green. See the following volor examples, but remember that the percentages indicate the strength of the individual color, as will be explained in the following section.:
Hexvalue #00FFFF #DC143C #FF00FF #40E0D0 #000080
Name
Composed of
Aqua Crimson Fuchsia Turquoise Navy
0% Red, 100% Green, 100% Blue 86% Red, 7.8% Green, 23.4% Blue 100% Red, 0% Green, 100% Blue 25% Red, 87.5% Green, 81.3% Blue 0% Red, 0% Green, 50% Blue
Figure 22. All the screen colors appear as mixtures of red, green and blue, each of which can be set from 0 to 100%.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Understand the color codes The color codes are used a lot in HTML, so let us look at them briefly. I have mentioned before that colors are described with a 6 digit color code. The color code is written in the hexadecimal number system. That is a number system where each digit can assume one out of 16 values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. Actually the color code consists of three pairs of numbers, each of which is associated with the three basic colors red, green and blue (also called the RGB color system). Each of the three pairs can go from 00 to FF. That results in a total of 255 possible steps (since #FF=255).
Figure 23. The screen RGB colors are formed from a mixture of three color rays, ech of which can be set in 255 steps.
The desired color is a mixture of the three basic colors, and it is described with the three pair of numbers that are linked together in the 6 digit color code. The three colors can each be adjusted in intensity. The number #00 indicates 0 intensity for that color. The value #40 gives 25% intensity, #80 gives 50% and #C0 gives 75%. Try for yourself It may be difficult to understand the color mixtures based on a table like the one in Figure 22. That is due to different conditions, but the most confusing is that a higher percentage for an individual color component results in brighter colors. That is because the screen starts out being black. The pure black color is called #000000, since this means that all three colors are turned off. On the other hand pure white is called #FFFFFF, since white is created by turning both red, green and blue on to maximum (100%). 1. Now try to change the background color in venezia.htm with the five colors you see in Figure 22. 2. Test each color in the browser. Which is the brightest? 3. Try some other colors. Select the color value in the BODY code:
4. The find the section Other Elements in the HTML library and double click on the clip Color:
5. Now you can choose among a number of colors from this menu. Try the color peru:
6. Click on OK, then the color is inserted –as a hexadecimal value:
7. Test the page in the browser. The color peru is apparently a shade of brown. 8. You can also enter the colors by their name. Try to enter this (remember to delete the #):
9. Gold is one of the colors that the browser recognizes. Whether you specify it by name or by color code is actually immaterial. However it is that the color code gives the fastest retrieval in the browser – it does not ”have to think so much about it”. You do not need to know and remember all the different hex codes for different screen colors – just take it easy. You can get help for the codes in the clip Color! I took you through this exercise primarily to show you that there are multiple colors, and that they can be used on home pages
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Additionally the colors can be used both for text fonts and various backgrounds.
Chapter 10. Background graphics We continue the experiments with the HTML document venezia.htm. Another very popular way to ”dress up the pages” is to put graphics in the background. Let us try that. 1.
Open the home page for this book and get the two backgrounds back1.gif and back2.gif:
2.
Save them in the folder site1.
3.
Check with the Explorer that you have the right files in the folder site1:
4.
If you see back1.gif in your browser, than that is small item of graphic; actually it occupies only 128 x 128 pixels:
5.
The thought with small graphic file is not that it should be shown as a picture. Rather it will form background in the venezia.htm HTML document.
6.
Now delete the parameter BGCOLOR="" in the document venezia.htm. In stead enter this:
7.
Save the document and test it in the browser. That looks quite neat, right? The yellow pattern forms a background for the whole page.
8.
Now you have to use the other background, which you have downloaded before. So change the code to: BACKGROUND = "back2.gif"
9. Save the page and test the result in the browser. That is not really very good, right? The background is a colored band in the left side, and it collides clumsily with the contents of the page:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 24. This background is bad, since it creates confusion and makes text hard to read. Adjusting the page If you are going to use background graphic like in Figure 24, you have to adjust text and graphics relative to the actual background. In this case text and picture need to be moved in on the page. 1.
Select the text and the pictures HTML code in NoteTab:
2.
Then find the Block Formatting section in the HTML library and double click on the Center clip:
3.
That inserts the code CENTER around the selected document section. Press ArrowRight to remove the selection.
4.
Notice that the CENTER code consists of both a start code and an end code:
5.
Everything between the two codes will be centered on the page.
6.
Save the page and test it in the browser.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Figure 25. By centering the page contents the layout is improved in the screen presentation. Here you see the result with a screen resolution of 800 x 600 pixels. What does the centering mean ? You can actually learn a lot about HTML just by studying the small example venezia.htm. For example what does it mean to center text and graphics like you just tried? 1. In Figure 25 the screen resolution is relatively low (800 x 600). In that case the centering gives left margin of suitable size. Can you see that? Is the same the case on your screen? 2. You can try to change the window size and judge the appearance of the page. That is especially a good technique when the screen has a resolution of 1024 x 768 pixels or more. Then you can test different browser window widths and see how the layout turns out. 3. You can easily get a neat layout, but the window must not be too wide. It turns out that this layout fits fine in a window with a width of 800 pixels. That corresponds to the (still) very common screen resolution of 800 x 600 pixels. 4.
The colored pattern in the left side is around 160 pixels wide:
5.
If you have the option to see the page in 1280 x 1024 pixels resolution, you will see that a centering moves picture and text way too far to the right.
Figure 26. When you increase the screen resolution, the centered sections move further to the right. Absolute and relative measures In the preceding exercise you encountered a very serious problem – that is the relationship between absolute and relative sizes. Try to study Figure 26, and see if you can follow this argument:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. • The pattern in the left side and the photograph in the middle of the page have absolute (exact) pixel sizes of 160 and 384 pixels respectively. These sizes do not change – regardless of which pc and screen resolution they are shown in. •
In this case the screen resolution is 1280 X 1024 pixels. That means th at the screen image in the figure is 1280 pixels wide.
• Centering means that the photograph is placed in the middle of the screen image. That is a relative measure, since it depends on the width of the current screen. When the screen image is 1280 pixels wide, the centering results in an indentation like in Figure 26. When the screen image is 800 pixels wide like in Figure 25, the indentation becomes quite different. The different screen resolutions Since internet users have screens with many different resolutions, it is hard to make a precise design. You often see a conflict between different kinds of graphics that have specific (absolute) pixel measures and formatting that works with relative measures.
Width: 640 pixels
Width: 800 pixels
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Width: 1024 pixels
Width: 1280 pixels Figure 27. Both graphics placement and size change when the screen resolution is increased. We return to these problems later in the book, but it is a good rule of thumb to start with a screen resolution of 1024 x 768 pixels (or maybe 800 x 600). That turns out to be the most common resolution among net users. So if you design your pages so they look neat in this resolution, you will not be far off the mark. In Figure 27 I show the appearance of the page at different resolutions. The figures are small, but I am sure you can see the tendency. Graphics with ”fixed” (absolute) measures appear ”smaller” when the screen resolution (and with that windows pixel size) is increased.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. •
Chapter 11. More about graphics Transparency is a concept that you neeed to be aware of, since Web graphics in GIF format can be transparent. Transparency means that certain areas in the picture are transparent, and that can be used in numerous ways in web design. Here comes a small exercise that demonstrates the effect. At the same time we will look a little more on the clips that are hidden in the HTML library. A digital zebra First do this exercise, where we insert an ordinary piece of graphic. 1.
Open the document template2.htm.
2.
Save the document as zebra.htm in the site1.folder It is important that you use the right folder!
3.
Open the home page for this book in the browser and click on the link The two zebra pictures:
4.
See the two pictures – they look alike, right? They are not!. Save them both in the site1 folder (right click on both pictures and select Save As …)
5.
Switch to NoteTab and give the page the heading A digital zebra …:
6.
Insert the picture zebra.gif in this way: Find the Quick Tags section in the HTML library and double click on the img clip:
7. That is a simpler way to insert graphics. You just need to enter the file name zebra.gif at the cursor:
8.
Save the page and look at it in the browser. I am sure it looks quite neat.
About the HTML library Here follows a brief explanation that you ought to read: The HTML codes can be inserted in many ways. You could write them yourself, but that takes too much time. The easiest is to use NoteTab’s HTML library, which is a collection of so-called clips. Each ”clip” can insert certain HTML code. But as you have seen there is often more than one clip that can result in the same code. If we look at the IMG code, which is used to insert graphics in the HTML document, then NoteTab offers two clips, that will insert that code. They are both found in the HTML library: • In the Image Elements section is the clip Image. When you activate that clip a larger dialog box open (see page 22). That gives you access to control all the HTML codes possible parameters. • If you just need to insert a very simple version of te code (like in the previous exercise), you need to use the Quick Tags session. There is a clip called ”img” that gives a direct insertion of the most essential code, which you complete by entering the file name. This ”multipage functionality” is very characteristic for the NoteTab program. There are many ways to insert HTML codes, and that makes the program extremely flexible and fast to work with. A transparent picture We continue with the zebra exercise. 1.
Now try to change the background color to ”gold”:
2.
Save the page and test it. Now you see the zebra on a white background on top of the golden background – I do not think that is pretty!
3.
So adjust the IMG code to zebra_t.gif like here. That is the name of the transparent version of the zebra picture:
4. Save the page and test it. Can you see that the zebra picture background is transparent, so the golden background color covers the whole background – also that which is seen below the animal? 5.
Close all open documents by pressing Control+Shift+F4.
6.
Close NoteTab with Alt+F4. Now take a break. Get a cup of coffee!
A little about transparent graphics
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Normally you would use the JPEG file format for photos, since it compresses much better than GIF does (the image files occupy less space). When I in the example selected GIF for the zebra it is because the JPEG format cannot hold transparent areas; but GIF can.
Figure 28. The photograph is partially transparent. That means that the home page background color ”shines through” large parts o the photograph. The picture is saved as a GIF file, since the JPG format does not allow transparencies. If you want to make pictures with transparencies, you need a picture processing program. In Photoshop you could use the tool Magic wand to remove selected areas from the picture:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
The ”empty” areas become transparent, when you choose to save the picture in the GIF format, and select transparency:
Figure 29. All image editing programs can save partially transparent GIF pictures; here is at clip from Photoshop. Notice the check mark in the transparency field.
Chapter 12. Introduction to the tables Basically you do not need to know very many HTML codes to enable you to make home pages. One of the most important is the TABLE code, which is used for tables. Tables can be used for a lot of different things, and they are really indispensable. At the same time the table codes are somewhat complicated to understand, so we need to spend some time studying them. What is a table? You surely know of tables from many different contexts; I use them here in the book, and they are used in newspapers and magazines. A table can organize a text in a number of rows and columns. In HTML we do not use the term columns, in stead we call them cells. Each row can consists of a number of cells; below you see three rows with two cells:
Figure 30. A simple table with three rows each having two cells. Try for yourself To understand the construction and function of tables it is easiest simply to construct a table and experiment with it: 1.
Open the HTML document template2.htm. Save it right away in the test folder under the new name: tables.htm.
2.
Place the cursor in the BODY section under the H1 codes.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 3.
The HTML library has a section called Table Elements. Here you need to find the clip Table wizard (simple) and select that:
4. Activate the clip either with a double click or by pressing Control+Space. This clip opens a very simple small dialog box, where you just need to indicate how many rows and cells (columns) you want. 5.
You need two rows and two cells, which is the default value suggested in the dialog box. So then click OK or press Enter:
6.
That inserts a lot of code right away in your document:
7.
This code needs an explanation, but start by seeing it in action: Enter the four digits 1, 2, 3 and 4 as shown below:
8. The ”empty characters” right after the numbers mean nothing. You need to be aware of this: spaces following completed texts (like in the figure above) can be without meaning in a HTML document. 9.
Save the document and test it in the browser. Now you can see the four digits each in their own cell, right?
Figure 31. A table with four cells in two rows. The TABLE code Let us now quietly look at the code, which is in the table. See Figure 32 where I have numbered the code lines. 1.
The code is spread over 10 lines. The first line reads:
Significance Here comes a table. Table Row. A row. Table Data. A cell. Final code |
Figure 33. The three basic codes that are used in any table. Since a table often has more than one row, you will see the TR codes repeated over and over. As an example in Figure 32 there der TR start codes in line two and 6. Since there often are multiple cells in a given row, there will also be multiple TD codes within each row definition (like in line three and four). Besides: If you want to divide a cell in more smaller cells, you need to insert a table in the cell. But you have to experiment with that by yourself!
Chapter 13. Color and spacing in tables You can use back ground colors in the table or in individual cells. Try that: 1.
Place the cursor in the end of the TABLE code and insert a space:
2.
Now you need to use the clip Bgcolor:
3.
That opens a dialog box, where you need to select a color. Try the color blue violet:
4.
When you click OK, the code will be inserted:
5.
Save the page and test it in the browser. Now you see a violet background color:
6.
Since you placed the BGCOLOR code within the TABLE code, the whole table (meaning all the cells) gets this background color. But you can change that.
7.
Place the cursor in the end of the first TD code and insert a space:
8.
Use the clip Bgcolor again and try to select the color bisque.
9. Repeat the operation in the three other TD start codes, but select a new color for each cell. Select the colors burley wood, coral and dim grey for the last three cells. Now the code looks like this:
10. Save the page and test it in the browser.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. You have indicated a BGCOLOR for each of the four cells, which then got different colors. The original violet color, which was indicated in the TABLE code, is seen in the border around the cells (here in black and white):
Figure 34. A 200 pixel wide table, which is colored in five different colors. By default texts are left justified in the table cells. Spacing around the cells The last table parameters we will look at deal with spacing. Do you need some space between the cells or between cell border and content? Try this: 1.
Place the cursor in the end of the TABLE start code and insert a space:
2.
Now find the clip Spacing & Padding and insert that:
3.
That adds two new parameters, each with the value 0. that deals with the following coder: CELLSPACING="0" CELLPADDING="0"
4.
Save the page and test it in the browser. Nothing has changed.
5. But now adjust the code to CELLSPACING="5" and test the result. Can you see that the border between the cells got wider? Actually it became five pixels wide. 6. Then adjust the code to CELLPADDING="10". Test the result in the browser. Can you see what happened? That is the distance inside the cell, between the border and the text (on all sides). It was increased to 10 pixels. 7.
Adjust the code to CELLPADDING="25", and delete the code WIDTH="200".
8.
Test the result in the browser.
Enter the names of the colors Now you can enter texts with the names of the colors. You need one text in each cell. 1.
Start in Cell 1. Select the number 1, which you see as text in the cell, press Enter to delete the number, and a blank line comes in.
2.
Then enter:
The back ground color is
bisque Enter 3. Now you can ”push the two lines in with the Tab key. That has no bearing on the home page when it is shown in the browser, but it looks neat in NoteTab. Now the code looks like this:
4.
Select the two new lines:
5.
Make a copy with Control+c.
6.
Now repeat that operation in the three other cells: delete the number that appears as text, and insert in stead the copy with Control+v.
7. Finally adjust the color names to burley wood, coral and dim grey respectively. 8.
Then save the document.
Now adjust the table width to the length of the texts in the cells. The 25 pixels padding is also clearly seen (see Figure 35). The two parameters CELLSPACING and CELLPADDING are really nice to know. In some situations it is valuable to be able to control the distance between the individual cells and from cell border to text or figure. Notice also that you can format text in a table like anywhere else. In this exercise you inserted a BR code in each cell, but you can also select other fonts etc. for the contents of the table.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Finish the page Now you are going to finish the page completely. 1.
Go to the line with the heading codes and adjust it this way:
A table with four cells:
2.Save the page and test it in the browser..
3.
If you have a color printer, you should print it on paper.
4.
Close all open documents.
Figure 35. The four cells are separated by a five pixel wide border, which is indicated by the parameter CELLSPACING. Inside the cell there is 25 pixels space between border and text. This spacing is indicated with the parameter CELLPADDING.
Chapter 14. The Fish Page For the last exercise in this sequence you are going to make a very graphic oriented page, where you will also use the table function. Get ready for a new page You are going to make a small page that deals with fish. The page is neither comprehensive nor advanced, but it shows the use of tables. Go to the home page for this book and get all the pictures you need for the fish page. 1.
Save them in the site1 folder. There are 7 pictures all together. They are: fish1.gif, fish2.gif, fish3a.gif, fish3b.gif, ship1.gif, ship2.gif and wave1.gif:
2.
Open the HTML document template2.htm.
3.
Save it right away in the folder site1 under the new name fishisgood.htm.
4.
Correct the page title to Fish is good!:
5.
Delete the heading codes , we do not need them here.
6. Now we need to insert a table. It needs two rows with three cells in each: find the clip Table wizard (simple) and activate it with a double click. The dialog box suggests two rows, and that is OK. 7.
Press Tab to jump to the next field and enter 3 there:
8.
That brings a lot of codes into the document. Now start by adjusting the TABLE code parameter to: BORDER="0".
9.
Also delete WIDTH="80%". Now it should read like here:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
10. Now enter the text Fisk is good! in the second cell in the top row and select the text:
11. This text should be in a large font. So you need to select the text as shown in the figure. Then find the clip Font (in the Block Formatting section) and activate it with a double click:
12. That opens a dialog box, where you can specify font and size etc. Press 7 in the Font size field. That is the largest font.
13. Click OK or press Enter. You could press ArrowUp to remove the selection. 14. Save the page and test it in the browser. There is not much to see yet... Insert a couple of fish You have created a table in the fishisgood.htm document. In the first row there is a text in the center of the thre cells. We need to place some graphic in each of the two outer cells: 1.
Place the cursor within the codes in the first cell:
2. Now you need to make an IMG code. Find the Quick Tags section in the HTML library and double click on the img clip (you might want to look at the review on page Fejl! Bogmærke er ikke defineret.). Enter the file name fish3a.gif right away. 3.
Place the cursor in the code for the third cell and repeat the operation there, as you enter the file name fish3b.gif in the IMG code.
4.
Now the codes look like this in the first row of the table. Your line breaks may be slightly different, but that is immaterial:
5.
Save the page and test it in the browser. If you have made the exercise correct, the result will look as shown in Figure 36.
Figure 36. The two fish and the text are placed in three cells in a table.
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
Chapter 15. Insert bookmarks Now you have made a quite neat small home page with three animal pictures. It works – or does it? You sure have to thumb up and down a lot in the page to see all the pictures. Then you would normally place some links in the top of the page to help the reader with the navigation. You are going to do that also: 1. You use bookmarks to link to defined positions on a page. Those are codes that can quickly be inserted: So place the cursor in the start of the line titled A horse (before the
code). 2.
Enter the auto text bm followed by a space.
3.
That opens a dialog box where you enter a name for the bookmark. Type horse and Enter:
4.
That inserts the code :
5.
This code inserts a bookmark that you can link to (either from the same HTML document or from another). We will get to that.
6.
Insert a horizontal line above the bookmark by pressing phr.
7.
Now insert similarly the bookmark goose just above the heading A goose.
8.
Then insert the bookmark leopard above the heading A leopard.
9.
Save the document. You can test it in the browser but you can not see the bookmarks, since they are not linked yet.
A list Now you are going to make a small list of contents on top of the animal page. 1.
You have the HTML document animals.htm open in NoteTab. The Autotext library is active in the left window.
2.
Place the cursor in the line under the top heading (H1), and enter the following:
The contents: Enter p (space). 3.
That inserts a P code and the cursor goes to the next line.
4. Now you need to insert another line. The code is still
Chapter 16. The first links Now you are going to make a link where the code will look like this: See the horse First a brief explanation: code consists partly of a text (”See the horse”) and partly of a reference. The reference is where the link will lead to. In our case it is the bookmark ”horse”. When the reference is a bookmark, that is specified with the # symbol, which is made by pressing Shift+3. 1. Use autotext hl2 (for hyperlink). That opens a dialog box, where you first enter #horse (remember the lower cases). 2.
Then press Tab Tab to go to the field Link description. Enter this text: See the horse. Now it will look like this:
Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 3.
Click on OK or press Enter.
4.
Press ArrowDown and lin1 plus a space to insert the next bullet.
5.
Press the following sequence: hl2 space #goose Tab Tab See a goose Enter.
6.
We insert the last item: Press ArrowDown and lin1 plus a space.
7.
Press hl2 #leopard Tab Tab A leopard Enter.
8.
Save the document. Now the code should look like Figure 41.
41. Three lines of code that contain three text links. . But when we work a lot with text like here, they are indispensable!
