May 31, 2003
JapanBloggers Webring
Maintained by Sousouzone of Cerebral Soup fame, the JapanBloggers Webring has been online since 20 April 2003.
A "webring" is a group of related websites that link to each other: JapanBloggers is a webring of weblogs in or about Japan, in either English or Japanese. I have just added the Tawawa Group Weblog to this webring.
On the Tawawa Group Weblog main page you will now find this at the bottom of the sidebar:
<< ? Japan # >>This is the webring navigation. It may look a bit crazy at first, but it's dead simple:
| << | = previous site in the ring |
| ? | = random site in the ring |
| Japan | = ring home page |
| # | = ring statistics |
| >> | = next site in the ring |
The sites listed on the JapanBloggers Webring are your new neighbours. Be nice to everyone!
May 28, 2003
Basic HTML: H tags
I took the first two static html pages you sent me and merged them into one html file. You have to be careful with the difference between the title tag and the heading tags.
The title tag appears only once in a html file, in the document head. On the page a browser renders on the monitor, the contents of the title tag do not appear. They appear only above the browser's task bar, straight in the top left corner of the screen.
Heading tags, by contrast, are part of your page. There are six of them, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and they structure a document hierarchically. That's a bit cumbersome to explain in the abstract, but take a look at the following code and you'll see what I mean. The code uses only two heading tags, <h1> and <h2>, because the document doesnt require any more hierarchical structuring:
<html>
<head>
<title>Soft Tennis with Five Guys :: Tama-chan.</title>
</head>
<body bgcolor="#ECE8DF">
<h1>Two Contributions to Tawawa.org</h1>
<p>The following two contributions have already been posted to Tawawa.</p>
<h2>Soft Tennis with Five Guys</h2>
<p><em>By Ayumi Sawa</em></p>
<p>I played soft tennis on May 18th with the Noro brothers (Kazuya and Kyota),
Shingo (50th), Hidetaka (51st) and Oka-chan (54th). We are all English
Department students except Kyota, but he is taking courses at the department.
It was a sunny day. We played at artificial turf courts Mie university.
Kyota (the younger Noro) and Oka-chan have some experience because they
played the game when they were junior high students. Kazuya (the elder Noro)
and Shingo once belonged to the soft tennis club in Mie university.
Hidetaka is a beginner.</p>
<p>I was surprised that they were very good at playing it; Kazuya plays
carefully, so does not miss the ball. Shingo has good control. Oka-chan
hits a ball as best he can. Kyota is very good at lobbing: to lob is
to hit a ball in a throw high curve. I have to run from side to side.
Hidetaka is a beginner, but he understands quickly. He is practicing
strokes against a wall rather than actually playing the game. If he
continues to practice, he will be a very good soft tennis player!</p>
<p>I enjoyed playing very much. I would like to play more with English
Department students. Does anyone want to?</p>
<p>Hidetaka-san and other guys, please post if you have any comment.</p>
<h2>Tama-chan</h2>
<p><em>By Yukiko Kojima</em></p>
<p>I love my grandparents, though my grandfather has been dead for about 14 years and I don't remember him very well.</p>
<p>My grandmother, whose name is Tamae and who is called Tama-chan by her friends, always complains that she has aches everywhere in her body, but she is doing well. Tama-chan is very talkative and she wants to know everything about me, my campus life, my friends and so on. She even asks me about my boyfriend! Sometimes I'm too embarrassed to answer her questions.</p>
<p>How about your grandparents? Do they ask questions like my grandmother does?</p>
</body>
</html>
Note that I added a background colour to the body tag:
<body bgcolor="#ECE8DF">
The colour #ECE8DF is a creamy sort of beige.
This is what the code looks like in your browser. It's fairly basic, but it's a correct html page.
To upload a static HTML page to the web, you first need a web server account (you should have the server's IP address, a user name and a password). Then you need an FTP client, a program that transfers the file from your hard drive to the web server (you can download free FTP clients from places such as Tucows.com. Go for a freeware application with lots of cows.)
May 27, 2003
Referrers
In the few weeks of its existence, Tawawa.org has received some attention from the outside. Culled from the referral logs, these are the sites that link to us:
Text Mentions
- Russianlegs.com see Thursday, 15. 05. 2003
- KenLoo.com
- KenLoo.com
- Easterwood.org
- SyncWorld.net
- kitaguni.tv
- Gen Kanai
Link Lists
- BrightBlack
- Akikochi
- Lifeandtimes.org
- Tallboy
- Vazdot.info
- WireFarm.com
- nipponDAZE
- PureLand
- MikeGerhardt.com
Thanks for those links, citizens!
– RKA
May 26, 2003
Basic HTML: II
This is the second part of the introduction to HTML, a little bit more complete than the first.
A complete HTML page consists of at least the following things, as illustrated in the code below:
- A starting and a closing html tag at the beginning and the end of the document, respectively.
- In between the starting and the closing html tags, the document breaks down into two main sections: Head and Body: the Head section mostly contains information about the page, whereas the Body section contains the page itself. Both Head and Body each have an opening and a closing tag.
- The Head must at least contain the document title, which appears inside the opening and closing title tag.
- The most basic elements in the Body are headings and paragraphs: both these elements have tags: headings have H tags, paragraphs have P tags. Every heading must be placed in an opening and a closing H tag, every paragraph must be placed in an opening and closing P tag. The first of the three paragraphs in the example below also contains a hyperlink.
<html>
<head>
<title>Lipsum</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce hendrerit neque ut dui. Etiam ut elit ut pede fringilla molestie <a href="http://www.google.com">ligula eu ipsum</a>. Donec sit amet augue nec odio luctus vehicula. Cras tempus. Pellentesque nisl ligula, eleifend at, dignissim ut, nonummy sit amet, sem. Nulla gravida. Suspendisse potenti. Sed urna. Sed convallis fermentum nunc.</p>
<p>
In laoreet, pede sit amet imperdiet semper, lectus nulla lacinia ante, ac ultrices lectus ligula ac elit. Maecenas sed nibh ut pede nonummy facilisis. Donec scelerisque, enim at elementum rutrum, erat urna vestibulum dolor, eu tempus odio lectus at nibh. Sed vitae purus. Proin lacinia lectus ac velit. Suspendisse quis lacus. Sed tincidunt, justo sit amet euismod vestibulum, erat nibh mollis ligula, in laoreet magna ante id mi. Nunc urna. </p>
<p>
Praesent tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed orci. Donec nunc. Quisque nec odio et elit mattis facilisis. Nulla et felis. Nulla sed enim non nibh aliquam accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nibh nibh, sollicitudin id, tempus non, aliquam eu, quam. Aenean condimentum enim in eros. Donec id mauris.</p>
</body>
</html>
In a browser, the above example looks like this.
To find out more about HTML, take a look at NCSA's A Beginner's Guide to HTML!
Basic HTML: I
Here's a short introduction to writing HTML by hand. For the sake of simplicity, it disregards the distinction between document head and document body. This distinction will be introduced in the second part.
- HTML is the source code which your browser requests from a server and then renders on the monitor so you can see the page. Your browser also allows you to look at the source itself. Assuming that you use Internet Explorer as your browser, do this:
You may be startled by this strange-looking text with all the angle brackets (this is a left-pointing angle bracket: <, this is a right-pointing angle-bracket: >). However: don’t panic. - Let’s take this step by step. To write HTML, you first need a text editor. MS Word is not suitable to write HTML, it’s far too big. You need a smaller program, and MS Notepad will do nicely. To open Notepad, click the "Start" button in the bottom left corner of your screen, then select Programs | Accessories | Notepad. You can also click on Notpad and drag it onto your desktop, so you can open it with a single click next time.
- Open a new document in Notepad, then write:
<html>
This is the opening html tag. A browser that reads this tag understands that the tag marks the beginning of an html document. The opening html tag has a partner, the closing html tag, which looks like this:
</html>
Insert a few blank lines after the opening html tag and then add the closing html tag. Whenever a browser comes across the closing html tag, it understands that the html document ends here. In other words: everything you want to put on a web page has to appear between the opening and the closing html tag. - What shall we put on the page? Well, first we need a heading. Headings need heading tags. The most important of these heading tags is the first-level heading tag, which looks like this:
<h1>
That’s the opening tag. The closing tag looks like this:
</h1>
Now, use both of these tags and write your title below the opening html tag. For example:
<h1>How to Find Things on the Web</h1>
- In addition to the heading, you need text. Text comes in paragraphs, and for paragraphs there’s the paragraph tag, which opens like this:
<p>
and closes like this:
</p>
Put these two tags around a paragraph:
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is google.</p>
- Next, you need to know the most important tag, the tag without which the web would not work: the link tag. The opening link tag looks like this:
<a href="URL">
the closing link tag looks like this:
</a>
Everything you write between the opening and the closing link tag will appear as hyperlinked text. In the opening tag, be careful to insert the full URL you want to link to, including the "http://" part. So, if you want to hyperlink the word "google" in the above example, here’s what your code will look like:
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is <a href="http://www.google.com">google</a>.</p>
- Let’s pull all of the above together:
<html>
<h1>How to Find Things on the Web</h1>
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is <a href="http://www.google.com">google</a>.</p>
</html>
- This is a complete html page. To save it, choose a name and add the ".html" extension. For example: websearch.html.
- Open your new file in a web browser to see if it works.
May 23, 2003
Portraits
Here's an idea: how about cropping all the portrait shots to the same size? I like the idea of allowing photos to span the whole width of the content area, but they shouldn't be too tall, otherwise they upset the visual balance.
Nice.
Not too bad. There isn't a whole lot of contrast between the face and the background.
Pretty.
OK
Very goofy. Try again!
This could have been a great picture, but the face is too dark.
Same problem: the face is too dark.
Very busy background, and not enough of it, so I had to cut away too much of the face.
The top of the head was cut off already. The shadow on the wall is not so great.
Nice picture. I would have liked a bit more background, so I wouldn't have had to cut away so much of the face and the hands.
Chie-san had her eyes closed, so we need another picture of her.
Daijirou-kun – all in all, there isn't a single portrait in this series that I'd call perfect. Could you do another series, and take maybe two or three shots of everyone, so we can choose from plenty of material? This is a digital camera, you're not wasting any expensive film if you take lots and lots of pictures. I'd also like to have a little bit more background with each portrait, so that there's a bit of breathing space and the portraits don't look like passport mug shots.
This post is temporary: I will delete it after a while. I simply found this the easiest and most effective way of sharing the pictures with you. I've managed to build the CD burner into one of my computers and should be able to burn high-resolution versions of Daijirou's pictures on a CD for you, but I will wait until the collection is complete.
This "Metalog" is probably going to stay since it makes it easy to present other things. I will not link to it from the rest of the site, however, so it'll remain sort of semi-public. "Meta", by the way, roughly means "about" – so a "metalog" is a log about a log...