Basic web technology - and discussions about the EBHL website My name Ingrid Skoglund (Librarian) From Göteborg University Library, Botanical and Environmental Library, Sweden E-mail: [email_address] Web: http://www.ub.gu.se/Gb/index_eng.html

My topics An quick introduction to Web files HTML encoding (tags) Linking (Read this later!) To publish on a server Other web techniques A Web tip! Then, a little bit about The EBHL pages, created in the “old” way, HTML 3.2 Discussion part What do we want for the EBHL website?

An quick introduction to

Web files

HTML encoding (tags)

Linking

(Read this later!)

To publish on a server

Other web techniques

A Web tip!

Then, a little bit about

The EBHL pages, created in the “old” way, HTML 3.2

Discussion part

What do we want for the EBHL website?

If you are not able to see the text from a distance... … read it from your handouts

… read it from your handouts

My thoughts for this talk If you don’t ALL fully understand the web basics already, you will hopefully understand some more after this slide show. Before discussing the EBHL website, it is perhaps better to understand the technique behind it a little bit more?

Is the slide show to quick for you? ( I haven’t got very much time) Don’t worry, sit in front of a computer later with your paper and try to make a page of your own. It’s easy! Any questions? Ask me in the brakes later. Some of the slides are only available in your handouts! I haven’t got enough time for them in this slide show. At the top of those pages, it says: Read this later

Don’t worry, sit in front of a computer later with your paper and try to make a page of your own. It’s easy!

Any questions? Ask me in the brakes later.

Some of the slides are only available in your handouts! I haven’t got enough time for them in this slide show. At the top of those pages, it says: Read this later

Let’s start! Web files (background) Any webmasters here? Take a nap, OK?

Web files (background)

Any webmasters here? Take a nap, OK?

Planning Planning is very important if you want to set up a new website (containing several pages). The most important to think about Who is the website intended for? What information is necessary? Structure of the information? Appearence?

Planning is very important if you want to set up a new website (containing several pages).

The most important to think about

Who is the website intended for?

What information is necessary?

Structure of the information?

Appearence?

A web file uses HTML HTML stands for H yper T ext M arkup L anguage. HTML is the language that browsers, such as Internet Explorer or Netscape, understand.

HTML stands for H yper T ext M arkup L anguage.

HTML is the language that browsers, such as Internet Explorer or Netscape, understand.

Read this later Web addresses As you all know, a page address (ours) on the web looks like this: http://www.ub.gu.se/Gb/ebhl/home.htm Upper case and lower case letters are important in web addresses. The address is partly a ”mirror” of your own file manager/Explorer, as we will now see.

Web addresses

As you all know, a page address (ours) on the web looks like this: http://www.ub.gu.se/Gb/ebhl/home.htm

Upper case and lower case letters are important in web addresses.

The address is partly a ”mirror” of your own file manager/Explorer, as we will now see.

Read this later A little bit of file managing C: (drive of your own choice) Gb (catalogue, created by me) ebhl (subcatalogue, created by me) board.htm (files/pages, created by me) board_fre.htm direct.htm direct_fre.htm extern.htm extern_fre.htm home.htm home_fre.htm and more files ...

A little bit of file managing

C: (drive of your own choice)

Gb (catalogue, created by me)

ebhl (subcatalogue, created by me)

board.htm (files/pages, created by me)

board_fre.htm

direct.htm

direct_fre.htm

extern.htm

extern_fre.htm

home.htm

home_fre.htm

and more files ...

Read this later The address on the web will then look like this 1) http://www.ub.gu.se (server name in MY case) 2) /Gb/ebhl/home.htm (local structure, created by me) Remember the structure? 1+2) Together the web address (URL) will be: http://www.ub.gu.se/Gb/ebhl/home.htm

The address on the web will then look like this

1) http://www.ub.gu.se (server name in MY case)

2) /Gb/ebhl/home.htm (local structure, created by me) Remember the structure?

1+2) Together the web address (URL) will be: http://www.ub.gu.se/Gb/ebhl/home.htm

What is an HTML File? An HTML file is an ordinary text file that also contains markup tags. Tag example: <p> </p> These two surround a paragraph. The markup tags tell the Web browser how to display the page. Use .htm or .html as file extension when you save the file.

An HTML file is an ordinary text file that also contains markup tags. Tag example: <p> </p> These two surround a paragraph.

The markup tags tell the Web browser how to display the page.

Use .htm or .html as file extension when you save the file.

You can use different programs for your web work. We will use Notepad today.

Read this later Other programs that you can use: You can also use an editor like FrontPage, Claris Home Page, or Adobe PageMill. (WYSIWYG, what you see is what you get programs)

Other programs that you can use:

You can also use an editor like FrontPage, Claris Home Page, or Adobe PageMill. (WYSIWYG, what you see is what you get programs)

You can create web pages in Office programs such as Word, Excel, Powerpoint (newer versions). Actually, in a lot of programs you can now save your files as HTML. You will then be able to publish it on the web. Read this later

You can create web pages in Office programs such as Word, Excel, Powerpoint (newer versions).

Actually, in a lot of programs you can now save your files as HTML. You will then be able to publish it on the web.

Best way to learn... Experts strongly recommend that you use a plain text editor like Notepad or similar. Otherwise, you will not learn the coding properly. Personally, I like to use programs where the tags (the coding) have other colours. I will tell you more about tags in a minute.

Experts strongly recommend that you use a plain text editor like Notepad or similar. Otherwise, you will not learn the coding properly.

Personally, I like to use programs where the tags (the coding) have other colours.

I will tell you more about tags in a minute.

And now... HTML encoding (tags)

HTML encoding (tags)

HTML without coloured tags ... <CENTER> <TABLE cellpadding=&quot;8&quot; bgcolor=&quot;#fffaf0&quot; border=&quot;1&quot; cellspacing=&quot;0” width=&quot;600&quot;> <TR><TD bgcolor=&quot;#fffaf0&quot; align=&quot;left&quot; width=&quot;100%&quot;> <FONT face=&quot;Verdana, Arial,Helvetica, sans-serif&quot; size=&quot;-1&quot;> <P><BR><FONT face=&quot;Verdana, Arial,Helvetica, sans-serif&quot; size=&quot;4” color=&quot;#111111&quot;> <STRONG>Board of the European Botanical and Horticultural Libraries Group</STRONG></FONT><BR> <P><B>Chairman:</B> Jane Hutcheon<BR>Library<BR>Royal Botanic Garden, Edinburgh<BR>Scotland<BR>E-mail:<A href=&quot;mailto:j.hutcheon@rbge.org.uk&quot;> j.hutcheon@rbge.org.uk</A> <P><B>Secretary:</B> Raymond Clarysse<BR>National Botanic Garden of Belgium, Library<BR>E-mail:<A href=&quot;mailto:clarysse@br.fgov.be&quot;> clarysse@br.fgov.be</A>

<CENTER>

<TABLE cellpadding=&quot;8&quot; bgcolor=&quot;#fffaf0&quot; border=&quot;1&quot; cellspacing=&quot;0”

width=&quot;600&quot;>

<TR><TD bgcolor=&quot;#fffaf0&quot; align=&quot;left&quot; width=&quot;100%&quot;>

<FONT face=&quot;Verdana, Arial,Helvetica, sans-serif&quot; size=&quot;-1&quot;>

<P><BR><FONT face=&quot;Verdana, Arial,Helvetica, sans-serif&quot; size=&quot;4”

color=&quot;#111111&quot;>

<STRONG>Board of the European Botanical and Horticultural Libraries

Group</STRONG></FONT><BR>

<P><B>Chairman:</B> Jane Hutcheon<BR>Library<BR>Royal Botanic

Garden, Edinburgh<BR>Scotland<BR>E-mail:<A

href=&quot;mailto:j.hutcheon@rbge.org.uk&quot;>

j.hutcheon@rbge.org.uk</A>

<P><B>Secretary:</B> Raymond Clarysse<BR>National Botanic Garden of

Belgium, Library<BR>E-mail:<A href=&quot;mailto:clarysse@br.fgov.be&quot;>

clarysse@br.fgov.be</A>

Tags - usually in pairs Tags usually come in pairs, the start and the end of a tag. Example: <html> start of html </html> end of html <body> start of body </body> end of body I picked these two as examples since they are absolutely necessary tags.

Tags usually come in pairs, the start and the end of a tag.

Example:

<html> start of html

</html> end of html

<body> start of body

</body> end of body

I picked these two as examples since they are absolutely necessary tags.

And now... Our example file

Our example file

HTML with coloured tags <html> <head> <title> EBHL HOMEPAGE (This text will turn up at the top of your browser) </title> </head> <body> <h1> We want a large heading for our EBHL Homepage </h1> <p> <b> In bold letters: EBHL is an organisation for botanical and horticultural <br> libraries </b> </p> </body> </html>

Let’s go back one page - I want to copy our file! (I will paste it in later)

1. First: Go to your file manager/Explorer 2. Create a catalogue – give it a logical and easy-to-remember-name, ebhl for instance I will now make these steps in the file manager How to make a web page - step by step

1. First: Go to your file manager/Explorer

2. Create a catalogue – give it a logical and easy-to-remember-name, ebhl for instance

I will now make these steps in the file manager

We will now create a very simple HTML file 3. Start Notepad 4. Type the text from our HTML example file 5. Save the file as home.htm – or whatever you find suitable I will now make these steps in Notepad I copied the example file, remember? So, we only have to paste it in.

3. Start Notepad

4. Type the text from our HTML example file

5. Save the file as home.htm – or whatever you find suitable

I will now make these steps in Notepad

I copied the example file, remember? So, we only

have to paste it in.

Read this later If your memory isn’t so good … Write this down on a piece of paper: C:ebhlhome.htm (or perhaps you will choose another drive than C ?) - to remember where you saved the file!

If your memory isn’t so good …

Write this down on a piece of paper:

C:ebhlhome.htm (or perhaps you will choose another drive than C ?)

- to remember where you saved the file!

Next steps ... We will now check what it looks like in a browser! 6. Start your Internet browser 7. Select &quot;Open&quot; (or &quot;Open Page&quot;) in the File menu . A dialog box will appear. 8. Select &quot;Browse&quot; (or &quot;Choose File&quot;) – where did you save it?

We will now check what it looks like in a browser!

6. Start your Internet browser

7. Select &quot;Open&quot; (or &quot;Open Page&quot;) in the File menu . A dialog box will appear.

8. Select &quot;Browse&quot; (or &quot;Choose File&quot;) – where did you save it?

And some more steps ... 9. Find C – find the ebhl catalogue – find the file home.htm - select it and click &quot;Open&quot;. 10. Click OK, and the browser will display the page. I will now make the steps 6-10 in the browser We want to check what it looks like, remember? Where will the text between the <title></title> tags turn up?

9. Find C – find the ebhl catalogue – find the file home.htm - select it and click &quot;Open&quot;.

10. Click OK, and the browser will display the page.

I will now make the steps 6-10 in the browser

We want to check what it looks like, remember?

Where will the text between the <title></title> tags turn up?

This is still a local file on YOUR computer – it is NOT yet out on the Internet.

Was it OK? Or do you need to modify? So, this is how you check the appearence of the page locally, again and again, before you publish the file/page. I made 10 steps out of this procedure. When you are used to it, you will do all this in some seconds! Important: you must save in Notepad after every change! Press the refresh button in your browser - then you will see the changes.

So, this is how you check the appearence of the page locally, again and again, before you publish the file/page.

I made 10 steps out of this procedure. When you are used to it, you will do all this in some seconds!

Important: you must save in Notepad after every change! Press the refresh button in your browser - then you will see the changes.

Read this later A lot ot tags are available to choose from. You will find some more information from the sites on the next page. And of course, there are very good Web technology books, too.

A lot ot tags are available to choose from.

You will find some more information from the sites on the next page. And of course, there are very good Web technology books, too.

HTML Basics ” http://www.echoecho.com/htmlbasics.htm” HTML Tutorial ” http://www.w3schools.com/html/” Examples of colours ” http://www.geocities.com/SiliconValley/Network/2397/” CSS, Cascading Style Sheets ” http://www.w3.org/MarkUp/Guide/Style” HTML Quicklist ” http://www.idocs.com/tags/quicklist.html” Read this later

Let us try a list!

This is an unordered list Start with the <ul> tag (ul=unordered list). Each item starts with the <li> tag (li=list). But first, I want a heading. <h2> EBHL Board </h2> <ul> <li> Jane Hutcheon </li> <li> Cees Lut </li> <li> Raymond Clarysse </li> </ul>

Start with the <ul> tag (ul=unordered list).

Each item starts with the <li> tag (li=list).

But first, I want a heading.

<h2> EBHL Board </h2>

<ul>

<li> Jane Hutcheon </li>

<li> Cees Lut </li>

<li> Raymond Clarysse </li>

</ul>

Let’s go back one page, I want to copy our list! We will now add this list of EBHL Board members to the Notepad file. And save!

Perhaps a background colour? Then add some more code to your body tag: <body bgcolor=”#ffff9f” > (RGB code - red, green and blue ) I will now add this to our Notepad file. And save!

Then add some more code to your body tag: <body bgcolor=”#ffff9f” > (RGB code - red, green and blue )

I will now add this to our Notepad file.

And save!

Let us check what has happened to our file now! (A list + a background colour) Press refresh in the browser!

Read this later Examples of things you can try Buttons Drop down boxes Forms Frames Blinking Animated pictures Colours in text and backgrounds Background images Scripts, as Java scripts for example (And - as you all know, less is more …)

Examples of things you can try

Buttons

Drop down boxes

Forms

Frames

Blinking

Animated pictures

Colours in text and backgrounds

Background images

Scripts, as Java scripts for example

(And - as you all know, less is more …)

And now... Linking

Linking

Links all over the web ... As you all know, linking is the basic idea for the entire web. HTML uses hyperlinks to link to other documents on the web .

As you all know, linking is the basic idea for the entire web.

HTML uses hyperlinks to link to other documents on the web .

The Anchor Tag and the Href Attribute HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor a stands for a nchor href stands for h ypertext ref erence <a href=” URL &quot;> Text to be displayed </a> This anchor defines a link to the EBHL Homepage: <a href=&quot; http://www.ub.gu.se/Gb/ebhl/home.htm &quot;> EBHL Homepage </a>

a stands for a nchor

href stands for h ypertext ref erence

<a href=” URL &quot;> Text to be displayed </a>

This anchor defines a link to the EBHL Homepage: <a href=&quot; http://www.ub.gu.se/Gb/ebhl/home.htm &quot;> EBHL Homepage </a>

It will look like this in a browser EBHL Homepage

EBHL Homepage

Linking to another web page Let us insert a link to CBHL in our file! <a href=” http://huntbot.andrew.cmu.edu/CBHL/CBHL.html ”> External link to CBHL </a> I will now copy and paste this CBHL link into the home.htm file in Notepad. And save, remember?

Let us insert a link to CBHL in our file! <a href=” http://huntbot.andrew.cmu.edu/CBHL/CBHL.html ”> External link to CBHL </a>

I will now copy and paste this CBHL link into the

home.htm file in Notepad.

And save, remember?

Does it work? Let us try the link in the browser. Refresh! An external link (to other websites) will not work if you are not connected to the Internet.

Let us try the link in

the browser. Refresh!

An external link (to other websites) will

not work if you are not connected to the

Internet.

Read this later How to view HTML Source Have you ever seen a Web page and wondered &quot;How do they do that?” To find out, simply click on the VIEW option in your browser and select SOURCE (or PAGE SOURCE). Voila! (It works in most cases, but perhaps not with more modern pages that might have some hidden coding). Then copy it. (Perhaps you have to use the Ctrl+C command). Create a new file, paste it in and save. You can save the source file, and use it as a template for your own Web pages.

How to view HTML Source

Have you ever seen a Web page and wondered &quot;How do they do that?”

To find out, simply click on the VIEW option in your browser and select SOURCE (or PAGE SOURCE). Voila! (It works in most cases, but perhaps not with more modern pages that might have some hidden coding). Then copy it. (Perhaps you have to use the Ctrl+C command). Create a new file, paste it in and save.

You can save the source file, and use it as a template for your own Web pages.

Read this later Don’t forget! Check for copyright notes on the page! If you see something about that - don’t copy the entire page.

Don’t forget!

Check for copyright notes on the page!

If you see something about that - don’t copy the entire page.

Read this later To publish on a server

To publish on a server

Read this later Password! You will always need a password. You can probably get one from your IT department. When you send your file to the server (a computer) - you will make it available on the Internet . It is then published. Y ou are now “out there”!

Password!

You will always need a password. You can probably get one from your IT department.

When you send your file to the server (a computer) - you will make it available on the Internet . It is then published.

Y ou are now “out there”!

Read this later Sending files to a server Using FTP-programs ( FTP = F ile T ransfer P rotocol) is probably the most common way to send the file to a server. I have used the program WsFTP earlier. I am now using an online web interface/program called Roxen Platform. It is very easy to transfer files! But perhaps you will need some help with the settings of your FTP program.

Sending files to a server

Using FTP-programs ( FTP = F ile T ransfer P rotocol) is probably the most common way to send the file to a server. I have used the program WsFTP earlier.

I am now using an online web interface/program called Roxen Platform.

It is very easy to transfer files! But perhaps you will need some help with the settings of your FTP program.

Read the following 3 pages later Other web techniques

Other web techniques

HTML 4.0, with CSS ( C ascading S tyle S heets). A ”clean” form of HTML, strictly text formatting in the HTML file. Then you add the instructions for appearence in separate style sheets (you link to that file). You can also insert the instructions in other ways. This is a VERY good way, especially for a large web site. Very time saving!

A ”clean” form of HTML, strictly text formatting in the HTML file.

Then you add the instructions for appearence in separate style sheets (you link to that file). You can also insert the instructions in other ways.

This is a VERY good way, especially for a large web site. Very time saving!

XML , e X tensible M arkup L anguage A very good technique for publishing databases, for example. You will need 3 files in order to publish 1 page… 1. XML file 2. DTD file (Document Type Definition) 3. Style sheet file, usually XSL (eXtensible Stylesheet Language)

A very good technique for publishing databases, for example.

You will need 3 files in order to publish 1 page…

1. XML file

2. DTD file (Document Type Definition)

3. Style sheet file, usually XSL (eXtensible Stylesheet Language)

Read more about it on the Internet!

Read the following page later A Web tip!

A Web tip!

Search the web with Google toolbar! An easy way for searching the web is to install the Google toolbar from http://toolbar.google.com/ Very practical, it will always be there at the top in your browser. Just type the word or words you want to search for and press enter. You don’t ever again have to type the address to a search engine first - or use a bookmark. And, Google is a good search engine too.

And now to... The EBHL pages, created in the “old” way (HTML, version 3.2)

The EBHL pages,

created in the “old” way

(HTML, version 3.2)

HTML 3.2 is easy to copy... That is why I created our website in the ”old” way. There was some talk a while ago about translating the site into other languages. Then you only have to copy a page and translate the text between the tags.

That is why I created our website in the ”old” way.

There was some talk a while ago about translating the site into other languages. Then you only have to copy a page and translate the text between the tags.

Read this later Now you all know how to copy a web page - then just translate the text between the tags ! (How to view page source, and copy it, is described in an earlier slide).

Now you all know how to copy a web page - then just translate the text between the tags !

(How to view page source, and copy it, is described in an earlier slide).

Was the slide show too quick? Well, as I said earlier... Don’t worry, all of this will be crystal clear to you later. Sit for yourself in front of a computer and try it. Problems anyway? Just, send me an e-mail: Ingrid.Skoglund@ub.gu.se

Don’t worry, all of this will be crystal clear to you later.

Sit for yourself in front of a computer and try it.

Problems anyway? Just, send me an e-mail: Ingrid.Skoglund@ub.gu.se

” It’s a library, honey - kind of an early version of the world wide web”

Read this later This slide show is available on the Internet (use Internet Explorer). If you want to watch it go to: http://www.ub.gu.se/Gb/tillf/ebhl02.ppt Not available any more, sorry! (Note: 2009-06-21) Full screen slide show? In an English version of Internet Explorer: probably Browse - Full screen. And click - and click - and click (mouse) ... You will probably not be able to copy the coding as I did. Then you must TYPE the examples instead.

This slide show is available on the Internet (use Internet Explorer).

If you want to watch it go to: http://www.ub.gu.se/Gb/tillf/ebhl02.ppt

Not available any more, sorry! (Note: 2009-06-21)

Full screen slide show? In an English version of Internet Explorer: probably Browse - Full screen. And click - and click - and click (mouse) ...

You will probably not be able to copy the coding as I did. Then you must TYPE the examples instead.

Discussion part What do we want for the EBHL website?

What do we want for the

EBHL website?

I didn’t make any changes to the EBHL site before this meeting – I wanted to hear your thoughts first. Did you know that the website is visited approximately 55 times each day , from computers all over the world?

Below are MY personal thoughts. What are yours? Just a “yellow page”? Do we want to build in some functions? Shall we still keep the page with external links? What do you think about our logotype? (I had to design the pages to fit the logotype …) Any suggestions for the EBHL website?

Below are MY personal thoughts. What are yours?

Just a “yellow page”?

Do we want to build in some functions?

Shall we still keep the page with external links?

What do you think about our logotype? (I had to design the pages to fit the logotype …)

The End