A Look at HTML

This is what I actually typed in by hand to form the active HTML code on this page when I began:

<html><head><title>HTML-Page 1</title></head><body>

<h1 align=center>A Look at HTML</h1>

<p></p>

</body></html>

Let's look at the tags I used:

<html></html> - Everything inside here should be HTML code--it stands for "Hypertext Markup Language," and I was using it for months before I found out that factoid.

<head></head> - This is the header part. This is stuff that (usually) doesn't appear on the page. The only part I really use is . . .

<title></title> - Ah, finally something that does something! This will put a title into the title bar most browsers have--probably that blue bar at the top of the window if you are using Internet Explorer and haven't fooled with the settings.

<body></body> - This is where the HTML that actually shows on your page should go.

<p></p> - This is where I made a tag pair to start the first paragraph. You don't actually need the </p> at the end, but it can make a difference if you have other things besides text, so I usually put it in. Arachnophilia won't put it in; <Ctrl><Enter> will make a <p> and skip down two lines.

Front Page Express puts </p>s in; Netscape Composer (at least the version as of 4.5) will take them out.

So what does this do? It means "Skip down two lines to start this block of text. At the end, skip one line before beginning anything else."

<h1></h1> - You can get this up in Arachnophilia by pressing the "Font" button at the bottom of the page, and then pressing the "H1" button on the bar that comes up. It will put the pair around any block you have selected. What "H" stands for is "Heading;" the number indicates one of six sizes.

H1

H2

H3

H4

H5
H6

Notice that I put something else inside the opening - "align=center". You can also do this with <p>. If you examine enough web pages, you will see all sorts of fancy things done with <h> and <p> tags. <h> tags are considered old-fashioned, but they are a simple way to put in a different-sized title or just change the size of text. Some webauthors use nothing but <h> tags for their text.

Other Junk

This is what you get if you press that globe thingie in the upper left corner of Arachnopilia:

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>HTML-Page 1</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000">

</body>

</html>

Gee, quite a lot for just a blank page, ain't it? There is a chance a browser might actually do something with the "doctype" line, but I haven't seen much evidence of it.

Here's what a new blank page looks like in the web page builder I use most often: good old freeware Frontpage Express:

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Untitled Normal Page</title>
</head>

<body bgcolor="#FFFFFF">
</body>
</html>

I don't really get the "content" line but I think it can make a difference. I think there is a certain character set that allows you to see Japanese if you've loaded the font. That can make a real difference when looking at, say, Hitoshi Doi's Sailor Moon site. This is what a bit of his site looks like on my screen right now:

Part of a screen
grab from Hitoshi Doi's site.

The menu selection for looking at source code in Internet Explorer

Now, let's look at some of the code. Assuming you are using Internet Explorer, you go to the menubar at the top, select "View" and then "Source". You can do this with Netscape, but the menu commands are different. Anyway, IE opens up Notepad and copies the source code into it, so you have a new window now. And this is the how the first part of Hitoshi's code looks in Notepad:

<HTML>
<HEAD>
<TITLE>Bishoujo Senshi Sailor Moon</TITLE>
<!-- this html page was generated by MKHTML5.pl (based on root) -->
<!-- NO copying or redistribution of this page allowed -->
<!-- Hitoshi Doi - doi@usagi.org - Sat Apr 15 00:19:10 JST 2000 -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-jp">
</HEAD>
<BODY bgcolor="#ffffff">
<CENTER><H1>Bishoujo Senshi Sailor Moon</H1></CENTER>
This document is the <i>on-line</i> Sailor Moon (美少女戦士セーラームーン)
encyclopedia.
This document does contain spoilers, if you have not seen most of the series.
<p>
<H2>Introduction</H2>
<TABLE width="100%"><TR valign=top><TD >
<IMG ALT="" SRC="../images/smoon/senshi2.gif">
</TD><TD >
Bishoujo Senshi Sailor Moon is a story about a klutzy, crybaby,
14 year old underachiever named
<A HREF="char/moon.html">Tsukino Usagi (月野うさぎ)</A>
who was given some transformation items and super powers.
Usagi transforms into the pretty, sailor suited fighter called
Sailor Moon to fight against evil.
But even as the super hero, Sailor Moon is klutzy and a crybaby.
Then as time goes by, Usagi is joined by some other girls to form
a team of sailor suited fighters.
</TD></TR></TABLE>

Notice that in Notepad the bit where you see Tsukino Usagi's name in Japanese looks like "Tsukino Usagi (月野うさぎ)." Notepad isn't smart enough to interpret the Japanese fonts, so it puts up the stuff in mostly extended characters. One thing that was added with Windows 95 was Unicode, which uses two bytes for each character, which allowed Microsoft to add Japanese characters. But Notepad knows from nothing about Unicode, so it takes each two-byte Unicode character and makes it into two one-byte characters from the set that's been around since the dark, distant days of DOS and even older operating systems. Hitoshi, of course is Japanese and he uses a Japanese-capable page builder or whatever--that's what one of the "meta" lines tells us. The meta line that actually tells Internet Explorer to use Japanese fonts is:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-jp">

<!-- --> This is how you enclose a comment or anything else you want the browser to overlook. Well, it's not quite simple; you'll see a lot of javascript inside these which newer browsers do use, but it's hidden from older browsers. Anyway, from his comments, it is obvious Hitoshi doesn't want us to steal his stuff, but here we are doing it. Welcome to the wonderful world of crime on the web!

<table><tr><td> . . . These are tags for building tables, something I will have more to tell you about later. What this particular table does is put a picture on the screen alongside text. Tables used to be the only way to do this and probably were when Doi-san started his site. <tr> means "Start a new row" and <td> means "This is another data item." I usually call these "cells" because a table looks sort of like a spreadsheet. Anyway, there is a lot you can do with tables, and I'll tell you about some of the things I use them for in an upcoming chapter.

<IMG ALT="" SRC="../images/smoon/senshi2.gif">

This line puts an image up on the screen, in this case a GIF with the filename "senshi2.gif." The ALT="" was put in by whatever page builder or HTML editor Hitoshi uses. Doi-san did not use good coding etiquette here; you should put something inside the quotes. What something? Something that describes the picture. If the picture ever gets deleted (that happens!) or a user has graphics turned off or isn't using a graphics-capable browser, nothing will appear except perhaps an empty box. But whatever is inside the quotation marks will appear. Also, in Internet Explorer and Netscape, a little popup of the text will show up when you put the cursor over the picture. This can be very handy if you are using the picture as a button--something else we'll cover later.

Say, how is the Old Gringo getting all those screen captures? Well, there's a couple of undocumented hotkeys in Windows. <Print Scrn> will copy everything on the screen to your clipboard, and <Alt><Print Scrn> will copy just the active window. Once I had my capture, I went to Irfanview (free for non-commercial users; available at www.software.net/irfanview/) and pressed V--the standard keystroke for pasting in Windows. You can do it with "Edit" and then "Paste" on the menu if you'd rather mouse around, but I've pasted so much I can do it one-handed. Anyway, Irfanview is not only a viewer; it can also edit pictures. So I selected what I wanted inside the image and chose "Edit" and then "Crop." Then I saved the part I wanted as a GIF file. I tried JPEG format which made for a smaller file, but the colors were pretty far off. This is how I put the picture of the menu on this page:

<img src=lookatcode1.gif width="251" height="244" align=right alt="The menu selection for looking at source code in Internet Explorer">

Here, incidentally, is the other way to put text alongside a picture: use "align=left" or "align=right" inside the <img> tag. Width and height I got from a shortcut in Arachnophilia, <Ctrl>Y. That usually works, but when it doesn't, or when you aren't using Arachnophilia, you can get the statistics about the picture from a viewer or graphics editor. Irfranview puts the width and height up right in its top bar--gee, isn't this a great program? You have downloaded it by now, haven't you? Specifying the width and height is always good practice because it makes the page load a little faster and allows your users to read the text while the pictures are still loading. And that's all I'm going to say about pictures for this chapter.

Actually you could do the job with Paintbrush, the free graphics editor you get with Windows, but it's a lot faster to do with Irfanview. If any of you want to know how to do it with Paintbrush, ask me.

Back to the HTML index.
On to the Wonderful World of Color.
Hosting by WebRing.