Mantex

Tutorials, Study Guides & More

>> Home / Archives for Technology

How to zip and unzip files

by

what to do with compressed files

Zip files

redbtn Some files are compressed to make them smaller.

redbtn This process is also known as ‘zipping’ the files.

redbtn It also makes them quicker to download.

redbtn You can also zip up a number of different files into one – which is called an ‘archive’.

Zip Utilities

1. To deal with zipped files, you need a special program called a ‘utility’.

2. Two of the best known are UltimateZip and WinZip

3. They are often available free on magazine cover disks.

4. Alternatively, you can download from a free software site.

5. Go to tucows for instance. Look for ‘Compression Utilities’.

6. I use UltimateZip, which is free.

Downloading

1. Zipped files will have a .zip filename extension.

2. Click on the item you want to download.

3. Your browser will open a dialogue box.

4. You should then save the file – for example

C:TEMPfilename.zip

5. This puts the file into a folder called TEMP.

Unzipping files

1. Start up your zip utility program.

2. Choose FILEOPEN, and locate your zipped file.

3. In our example it’s C:TEMPfilename.zip

4. Choose EXTRACT FILES from the menu bar.

5. Extract files to C:SOMENAME

6. It all happens very quickly!

7. Then open a program which will read your files.

8. This could be a web browser for .htm files.

9. It could be MS Word for .doc files.

10. Don’t worry if anything goes wrong…just repeat the steps above.

Zipping files

1. First put your file(s) into a folder.

C:DEMO file-01.htm
file-02.htm
file-03.htm

2. This collection is sometimes called an ‘archive’.

3. Start up your zip utility program.

4. Select FILE/NEW – or FILE/New Archive.

5. Create a name for your zipped files.

newfiles.zip

6. Decide where to save your zipped files.

7. You can create a new folder, or use the existing.

C:DEMO

8. Then select and add all the files you wish to place in the zipped archive.

9. Press OK – and newfiles.zip is created.

10. The originals – file-01.htm, file-02.htm, and file-03.htm – are still in their folder C:DEMO

11. But you also have a copy of them, compressed into newfiles.zip

12. Have fun!

© Roy Johnson 2004

More on How-To
More on literary studies
More on writing skills

HTML and XHTML

by

the encyclopaedia of HTML coding – and the latest XHTML

The problem with HTML is that just when you thought you had grasped the basics of web page design, something new emerges. Here comes the latest development – XHTML – which stands for ‘extensible hypertext markup language’. Musciano and Kennedy aim to keep you up to date with these latest developments. So – what are they? XHTML is an extension to the HTML code – at 4.01 in its present version. It is in fact a part of the XML code – and XML is itself a subset of the general Standard General Markup Language (SGML). Still confused? The authors have already guessed that, and in HTML and XHTML they do their best to explain.

HTML and XHTMLWhat they do in this excellent manual is cover every element of HTML/XHTML in detail, explaining how each element works and how it interacts with other elements. Many hints about HTML/XHTML style help you write documents ranging from simple online documentation to complex presentations. With hundreds of examples, the book gives you models for writing your own effective web pages and for mastering advanced features like style sheets and frames.

When HTML was originally conceived, no one had any idea it would be so successful or be asked to handle so many kinds of documents, browsers, and media. While it has borne up admirably under the demands of web users, HTML 4.0 has stretched as far as it can to accommodate new technology. While HTML 4.0 is petering out, XHTML 1.0 stands ready to step in, designed to handle almost anything web authors can dream up.

There are in fact three possibilities for XHTML – the ‘strict’ version which is limited but future-proof; the ‘transitional’ version which allows authors to write with current browsers in mind; and a third version which deals with frames. The reassuring news they offer is that “learning HTML is still the way to go for most authors and Web developers” – but they do remind readers that “content is paramount; appearance is secondary”.

They also warn that “writing XHTML documents requires much more discipline and attention to detail than even the most fastidious HTML author ever dreamed necessary.” This sounds a bit frightening – but really, it just means being extra careful with coding. It means that all tags must be opened, then closed. No more leaving out those </P> paragraph tags.

And the beauty of this book is that all the basic HTML coding is covered in the great detail which has been generated over its earlier editions. They deal with forms, frames, tables, and even Java scripts, and all the tutorial material is fully illustrated, with plenty of screenshots and understandable code.

All the really useful appendices are there too – HTML grammar, Cascading Style Sheets, the HTML and XHTML document definitions, character entities, color names and values, and of course a complete list of XHTML tags with browser compatibility notes.

If you want the very best reference manual to HTML and its latest developments – this is it. I guarantee that no matter which other web page design books you might have on your shelves, this is the one to which you will keep coming back – again and again.

© Roy Johnson 2006

Buy the book at Amazon UK

Buy the book at Amazon US

Chuck Musciano & Bill Kennedy, HTML& XHTML: The Definitive Guide 6th edition, Sebastopol (CA): O’Reilly, 2006, pp.654, ISBN: 0596527322

More on technology
More on digital media
More on web design
More on computers

HTML Tutorial 02 – code made simple

by

1. You can produce web pages using a simple word processor such as Windows NotePad or WordPad. The files you produce should be saved with an .htm extension.

2. The files can contain text, colour, and pictures [even sounds] – but they also contains HTML code.

3. HyperText Markup Language (HTML) uses ‘tags’ to send instructions to a web browser that will ‘read’ the web page. The browser then arranges the appearance of the text on screen.

4. The tags are a code which is placed between angled brackets – <H1> Here is a level one Heading </H1>.

5. Note that the tags are placed around any text you wish to affect. They commonly begin with one tag <H1>, and then they are switched off with another, </H1>, which contains an olbique stroke.

6. <H1>Heading</H1> – shows headings raging from big and bold at size 1 – to 6 – which is quite small.

7. You can also change the size of text on the page from 1 to 6 by enclosing the text between FONT SIZE tags

<FONT SIZE=”4″>produce text size four</FONT>

8. Notice that in this case the numbers 1 to 6 range from small to large.

9. Browsers show text at SIZE=”3″ unless told to do otherwise.

10. You can also change the colour of the text on the page – but note that the tag requires the US spelling of COLOR.

11. The text between the tags will appear in colour:

<FONT COLOR=”RED”>some text in red</FONT>

12. The <P> tag inserts a double space to start a new paragraph.

<P>
Here is the text of one paragraph, which is shown to illustrate the use of the paragraph tag.
</P>
<P>
And this is the start of the following paragraph, which as you can see has been separated from the first with a space.
</P>

13. The <BR> tag forces text to start on the next line down.

Here is a short statement.<BR>
The tag has been used to force the next sentence to begin on a new line.

14. The <HR SIZE=1> tag inserts a Horizontal Rule. The size of the line goes from 1 (most narrow) upwards, with 3 as the default.

15. There are two types of list – ordered and unordered. These are created by using the tags <OL> and <UL>. The first automatically numbers the points in the list, the second creates bulleted points.

16. The items in the list are created by using the <LI> tag. Notice that each point is automatically indented.

17. This is an example of coding for an ordered list:

<OL>

<LI>List item number one</LI>

<LI>List item number two</LI>

<LI>List item number three</LI>

</OL>

This will be show on the screen as follows:

  1. List item number one
  2. List item number two
  3. List item number three

18. This is the coding for an unordered list:

<UL>

<LI>List item number one</LI>

<LI>List item number two</LI>

</UL>

This will be shown on the screen as follows:

  • List item number one
  • List item number two

19. Emphasis is added to text using the BOLD and ITALIC tags, which are shown as <B></B> and <I></I> respectively.

20. Here is some text which is shown in bold and then in italics.

21. You can combine tags – by making text both bold and italic for instance. Here is bold italics.

22. The tags must be correctly nested. That is, they must be added and removed in the correct sequence (or syntax).

<B><I>bold italics</I></B>

23. You can also insert an extra space by using the non-breaking space tag – &nbsp; (which does not come in angled brackets).

no spaces abcdefgh
extra spaces a   b   c   d   e   f   g   h

24. That’s a quick run through some commonly used tags. Here are some general tips on writing the code.

General points

  • You can type tags in upper case <FONT SIZE=4> or lower case <font size=4>.
  • Do not miss out any angled brackets <these> or quote marks “these” – or the code will not work.
  • Do not insert any spaces, as in <FONT C OLOR=RED> or the code will not work.
  • You can combine tags, but they must be correctly nested, as in <B><I>EXAMPLE</I></B>.

NB! This is an extremely simplified account of HTML coding. The appearance of most web pages these days is controlled by style sheets. But the principles shown here are still working underneath.

© Roy Johnson 2002

previousnext

 

HTML Tutorial 03 – page template

by

1. A basic web page is fairly simple. You should COPY then SAVE the template shown below.

2. Copy the template into a word-processor, then save the file as template.htm.

3. Use a very simple word-processor, such as Windows NotePad or WordPad. Others, such as Microsoft Word, will try to add its own HTM code – and that will be confusing.

4. Then open the file template.htm, add your own text to the page, and SAVE AS filename.htm, where ‘filename’ is a word of your choice.

5. Give it a name, don’t leave any spaces, and use all lowercase letters. That is, avoid using capital letters in web page filenames.

6. You can view the results by opening the page in your web browser.

7. To do this, go to FILE then OPEN PAGE, and type the pathname into the dialogue box. Alternatively, use the Browse feature to locate your file – filename.htm.

8. Don’t type the statements between the square brackets.

<HTML>

<HEAD>

<TITLE>

[ Insert the title of your page here ]

</TITLE>

</HEAD>

<BODY>

<H1>

[ Insert the main heading of your page here ]

</H1>

<P>
[ Start the text of your page here ]

</P>

<P>
[ Insert more writing here ]
</P>

</BODY>

</HTML>

© Roy Johnson 2002

previousnext

 

HTML Tutorial 04 – common tags

by

Tag(s) Function/Name
<P></P> paragraph
<BR> break [new line]
<B></B> bold
<I></I> italics
<H1></H1> heading
<A HREF=”name.htm”></A> hypertext link
<IMG SRC=”name.gif”> link to image source
<HR SIZE=1> horizontal rule
<CENTER></CENTER> centre
<FONT></FONT> font size/colour
<OL></OL> ordered list
<UL></UL> unordered list
<LI></LI> list item
<TABLE></TABLE> table
<TR></TR> table row
<TD></TD> table data

© Roy Johnson 2002

previousnext

 

HTML Tutorial 05 – common problems

by

1. Everybody runs into technical problems when they first create Web pages. Don’t feel bad about it. Just learn from your mistakes.

2. The most common problems are caused by small details and the need for complete accuracy.

3. Filenames must be spelled accurately. They should not contain any spaces, and some keyboard characters – such as /, &, and @ – are not allowed. [These are reserved for transmitting data over the Web.]

4. It is safest to use all lower-case letters. Some computers will treat filename.htm and Filename.htm as different files.

5. Tags must be opened and closed rigorously. If you type the following, it will not work:

<B>Put this in bold<B>

This is because the tag has not been properly closed with </B>.

6. The same would happen if you were to miss one of the angled brackets – <B>Put this in bold /B>.

7. HTML code must be completely accurate. The following examples all contain mistakes:

<A HREF=”filename.htm>filename</A>

<BODY BGCOLOUR=”AQUA”>

<FONT SIZE =”5″>some text here</FONT>

8. In the first example, one double quote mark is missing; in the second the spelling is incorrect; and in the third, there is a space. The correct codes are:

<A HREF=”filename.htm”>filename</A>

<BODY BGCOLOR=”AQUA”>

<FONT SIZE=”5″>some text here</FONT>

9. Missing items. It is very easy to omit a small element of code – especially if you are keying it in manually. For instance if you typed –

<A HREF=”filename.htm”filename</A>

– this would not show up on the screen. In fact nothing you typed after it would appear. That’s because the angled bracket is missing after the file name.

10. Bad syntax. Tags must be opened and closed in the correct sequence. The following is an example of incorrect ‘nesting’ of tags.

<FONT SIZE=5><B>big and bold</FONT></B>

This is the correct sequence:

<FONT SIZE=5><B>big and bold</B></FONT>

previousnext

 

HTML Tutorial 06 – adding colour

by

1. The default background colour of a web page is grey – which is not very exciting.

2. That is, grey is the colour which will show in a browser window unless you tell it to do otherwise. Web design guru David Siegel says that web pages such as this are – “like slide presentations shown on a cement wall”.

3. There are three easy ways to add colour to your pages:

  • use FONT COLOR for text
  • use BACKGROUND COLOR for the page
  • use a graphic for a ‘background wallpaper’ effect

4. Let’s look at each of these options in turn.

The font colour tag

5. When you specify the FACE or SIZE of your FONT, you can also say what COLOR you want it to be.

<FONT=”Arial COLOR=”RED”>my web pages</FONT>

This would produce the following effect.

The words ‘my web pages‘ are coloured red.

6. Other common colours are as follows.

Aqua – Fuchsia – Olive – Green – Lime
Blue – Maroon – Teal – Navy – Purple

Background colour

7. Background colour can be used to give colour to a page.

8. The code is inserted into the <BODY> tag at the top of your page. Notice that the term ‘background’ is abbreviated to BG.

<BODY BGCOLOR=”AQUA”>

9. The problem with most of the standard colours is that they are rather strong. They are too demanding, not quiet enough.

10. It is better to choose something more quiet and restrained.

BGCOLOR=”WHITE” is always safe.

BGCOLOR=”#FFFFEF” is more subtle.

[Don’t ask! Just use “#FFFFEF”.]

11. Note that the tag must be given its American spelling of COLOR. This is a very common technical problem.

Tiled graphic file

12. You can also create a coloured background for your page by using a graphic image. This will be ’tiled’ [repeated to fill the space] by
your web browser.

14. The code goes into the BODY tag at the head of your page. Notice that in this case the full term BACKGROUND is used.

<BODY BACKGROUND=”stripe.gif”>

15. You would save the graphic file ‘stripe.gif’ in the same folder as your .htm page.

16. But a tiled graphic makes reading more difficult. It almost always results in a visually disruptive page.

17. It’s usually much better to use a single colour – one which is muted and subtle. Choose something against which black text will stand out clearly.

18. Here are a good example and a ridiculously bad example.

© Roy Johnson 2002

previousnext

 

HTML Tutorial 07 – page anatomy

by

1. Let’s look at each section of a typical HTML page. We’ll see what the code means and what it does.

2. Much of this might seem pretty boring at first – but you will realise later why it can be important.

3. First of all, here is the absolute basic minimum HTML page.

<HTML>

        <HEAD>

                <TITLE>

                Page title

                </TITLE>

        </HEAD>

        <BODY>

                Here is the page content

        </BODY>

</HTML>

4. You can see that the structure of the page is a HEAD section, which contains the TITLE, and a BODY section, which contains the contents of what will appear on the page.

5. The first item is actually the <HTML>. This tells the browser “What follows is going to be an HTML page”. Like all the other tags, it is enclosed in angled brackets.

6. The next item is the <HEAD>. This section of the page can contain all sorts of technical data – which we’ll come to in a moment. For now, we’ll notice that it contains the TITLE of the page.

7. The <TITLE> does not appear on the page – so don’t look for it there. It appears at the top of your browser window – saying something like “Page title – Mozilla Firefox” or “Page title – Windows Internet Explorer”.

8. Next comes the <BODY> section. This contains the information you wish to appear in your page. It could be text, graphics, audio files, or even movie clips.

9. Note that each one of these tags must be opened – then closed. Otherwise, the page will not show up in your browser.

10. And that’s it! Those are the basic elements of a web page. But now let’s look at some of the additional features which might appear. For this we go back to the top of the page.

11. The other item which commonly appears in the HEAD section of the page is META data. That is, information about the content of the page. This is usually a DESCRIPTION of the page, and KEYWORDS which summarise its most important topics.

12. This information does not appear in your browser window. It is intended for search engines. They visit your pages [maybe] and want to know how to categorise them and what they contain.

13. Another thing you might see at any point in a web page is COMMENTS.

<!– these are comments –>

14. Anything which appears between <! and > will not show up when you view the page in a browser.

15. What use are these? Many designers use comments to mark special sections of their pages – as in the following example. They make editing easier at a later date.

<!– ######## START OF MAIN TOPIC ######## –>

16. There are many other elements you might find in a typical HTML page – but these are the most basic. Just remember that unless you open and close all your tags correctly, the page may not show up in your browser.

See the page of common problems for examples.

© Roy Johnson 2002

previousnext

 

HTML Tutorial 08 – questions of taste

by

1. Too much text
Some people put far too much text into their pages, and often don’t have margins or breaks between paragraphs. The result is a screen full of text – which is difficult to read. Use plenty of space around your text. It will look more attractive and be easier on the eye.

2. Bad colours
Combining coloured backgrounds with coloured text is dangerous. It can work if it is done with restraint – but many people are attracted to colours which clash and vibrate. For good results – ‘less is more’ is often the case so far as color is concerned.

3. Tiled backgrounds
Background graphics can often make text difficult to read. When a .gif file is tiled across a page, the resulting pattern often creates an effect which is visually disruptive. Use only very pale graphics.

4. Large graphics
These take up a lot of space, and can take a long time to download. People viewing your pages will switch off and go elsewhere. Shrink your pictures in a graphics editing package.

5. Long pages
Most people dislike scrolling through very long pages. They will often not read beyond 2-3 screens of text. The solution is to create separate pages, and put links between them.

6. Hit counters
These make any web site look very amateurish. If your web site is a hobby, you don’t need them. If it is commercial, you will not want to reveal this information. If you are determined to have one, it’s possible to make it invisible. You can record the ‘hits’ – but other people don’t see the results.

7. Animated graphics
These usually distract attention from what you have to say, and they generally look tacky. Unless they are very small, very subtle, and in non-conspicuous positions – leave them off your pages.

8. Garish colours
Your site will look cheap, amateurish, and vulgar if you use too many bright colours. The same is true of bad clip art and animated graphics. Yellow and blue starbursts against a speckly purple background will look naff. Leave those for the funfair.

9. To see a very funny and truly awful collection of bad taste designs, visit the following web site:

Budugllydesign.com

10. Well-designed web sites are often based on one of the most memorable slogans to come from the design profession – “Less is more”.

© Roy Johnson 2002

previousnext

 

Get in touch

info@mantex.co.uk

Content © Mantex 2016