about[1] history[2] writings[3] links[4] sitemap[5]
/テーマ別書庫/HTML入門/参考
go back to top page[0]

日本語版翻訳覚書

  1. この文書の原著は、W3C(World Wide Web Consortium)"Getting started with HTML(http://www.w3.org/MarkUp/Guide/)" by Dave Raggett(2002-02-13改訂版)であり、当該原著についての著作権などの知的所有権についてはW3C知的所有権覚書最新(2003-01-18現在)の正文(英文))に記載の通りです。
  2. 正式版は、W3Cサイトの英語版です。
  3. 翻訳版は、翻訳からくる間違いがあり得ます。
  4. 翻訳についての著作権などの取扱いについては、当サイトの定めの通りです。
  5. 誤訳など、日本語表記についてお気づきの点がありましたら、webmaster@bewaad.comまでお願いします(メールフォームもご用意しております)。

デイブ・ラジェット  HTMLを始めてみよう(Getting started with HTML)

デイブ・ラジェット(Dave Raggett)、2002年2月13日改訂(revised 13th February 2002)

webmaster

この文書は、短いHTMLの書き方入門だ。 ウィンドウズならメモ帳、マックならSimpleTextってあたりを使って、HTMLを書いている人はまだ多いよね。 このガイドを読めば、よくわかって、もう大丈夫。 直接HTMLを書く気なんかなくて、Netscape ComposerとかAmaya(W3Cの、ね)のようなHTMLエディタで書こうとしている人にとっても、このガイドを読めば、そういったツールをよりうまく使えるようになるし、いろんな種類のブラウザでもきちんと表示できるHTML文書の作り方がわかるようになる。 HTMLの書き方の基礎を一度身につけちゃえば、CSSを使ってちょっとスタイルにこってみる(訳注:リンク先は英文です)にはどうするかを学んでみたりとか、より高度なHTML(訳注:リンク先は英文です)についての僕のページで書いていることを試してみたりとか、そんな気になるかも。

This is a short introduction to writing HTML. Many people still write HTML by hand using tools such as NotePad on Windows, or SimpleText on the Mac. This guide will get you up and running. Even if you don't intend to edit HTML directly and instead plan to use an HTML editor such as Netscape Composer, or W3C's Amaya, this guide will enable you to understand enough to make better use of such tools and how to make your HTML documents accessible on a wide range of browsers. Once you are comfortable with the basics of authoring HTML, you may want to learn how to add a touch of style using CSS, and to go on to try out features covered in my page on advanced HTML

HTML Tidy(邦訳(1998-09-01版1999-01-22版)があります。ちなみに原文は2003年に入ってからも更新されています)を使うってのは、マーク付け(訳注:要素の先頭に開始タグ、最後に終了タグを付けて要素を明らかにすること)の間違いを自動的に直しちゃう便利なやり方だ。 こいつを使えば、マーク付けを読みやすく、手を入れやすくすることだってできちゃう。 HTMLを書くたびにTidyを必ず使うってことにしておくことをお薦めしておく。 Tidyはオーサリングツール(訳注:前段落のHTMLエディタ)がいい加減なやり方ではき出したマーク付けをきれいにするにはとっても役立つんだ。

A convenient way to automatically fix markup errors is to use the HTML Tidy utility. This also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits.

付け足し。他の人がどんな風にHTMLを書いているのか見てみるってのはいい勉強法だ。 どうすればできるかっていうと、メニューの「表示」をクリックして、「ソース」を選べばいい(訳注:IEの場合。Operaなら「表示」→「ページのソースを表示」、和ジラなら「表示」→「ページのソース」)。 このページで試して、これから説明することを、実際にどんな感じに書いているのか見て欲しい。 目利きになって、多くのページが、どちらかといえば見かけほどじゃないってことが見えてくるはずだ!

p.s. a good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". Try it with this page to see how I have applied the ideas I explain below. You will find yourself developing a critical eye as many pages look rather a mess under the hood!

このページでわかるのはどんなことかといえば、次の通りだ。

もしほかの何かを探しているなら、より高度なHTMLに挑戦してみてくれ。

This page will teach you how to: If you are looking for something else, try the advanced HTML page.

題名で始める(Start with a title)

どんなHTML文書であっても題名が必要だ。こんな感じに打ち込まなきゃいけない。

<title>最初のHTML文書</title>
Every HTML document needs a title. Here is what you need to type:
<title>My first HTML document</title>

「最初のHTML文書」ってのは必要に応じて変えるように。 題名の文は、開始タグ<title>で始まって、対応する終了タグ</title>で終わる。 題名は、文書の最初のところに書いておくべき。

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.

実際にやってみるなら、上の文をテキストエディタで打ち込んで、"test.html"というファイル名で保存するんだ。 ファイルの拡張子が".html"か".htm"なら、ブラウザにはそいつがHTMLであるってことがわかる。 ほとんどのブラウザでは、題名がタイトルバーに表示されるよ。

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar.

見出しと段落を追加する(Add headings and paragraphs)

マイクロソフトのワードを使ってるなら、重要性の異なる見出しに違うスタイルを当てはめるのには慣れっこだろう。 HTMLには6段階の見出しがあるんだ。 H1は一番重要で、H2はそれよりちょっとだけ重要じゃなくって、・・・と一番重要性の低いH6までそろってる。

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

それじゃあ重要な見出しを追加してみよう。

<h1>重要な見出し</h1>
Here is how to add an important heading:
<h1>An important heading</h1>

次はちょっとだけ重要じゃない見出しだ。

<h2>ちょっとだけ重要じゃない見出し</h2>
and here is a slightly less important heading:
<h2>A slightly less important heading</h2>

文書に書き込むどの段落も、<p>タグで始めなきゃいけない。 </p>タグは省略可能で、見出し要素なんかの終了タグとは違ってる。 用例はこんな感じだ。

<p>最初の段落。</p>

<p>2番目の段落。</p>
Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

強調をちょびっと(Adding a bit of emphasis)

次のように、いくつかの単語を<em>タグで強調できる。

こいつは本当に<em>興味深い</em>話題なんだ!
You can emphasize one or more words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!

画像でページに惹きつけよう(Adding interest to your pages with images)

画像を使えばウェブページを目立たせることができて、メッセージを伝えるのにとっても役立つだろう。 画像を追加する簡単な方法は、<img>タグを使うことだ。 "peter.jpg"という画像ファイルがHTMLファイルと同じフォルダかディレクトリにあったとしよう。 幅が200ピクセルで、高さが150ピクセルなやつだ。

<img src="peter.jpg" width="200" height="150">
Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.
<img src="peter.jpg" width="200" height="150">

src属性は画像ファイル名を表している。 width(属性)とheight(属性)は厳密には必要じゃあないけど、ウェブページ表示をより早くする助けになる。 あっ、まだあれが足りない! 画像を見られない人たちには、その埋め合わせになる記述が必要だ。 次のような簡単な記述を追加できるのだ。

<img src="peter.jpg" width="200" height="150"
alt="僕の友達のピーター">
The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="peter.jpg" width="200" height="150"
alt="My friend Peter">

alt属性は短い記述−この場合だと、「僕の友達のピーター」ってやつ−を書くのに使われる。 複雑な画像には、もっと長い記述が必要かもしれない。 そいつが"peter.html"ってファイルに書かれてるとすると、次のようにlongdesc属性を使って組み込むことができる。

<img src="peter.jpg" width="200" height="150"
alt="僕の友達のピーター" longdesc="peter.html">
The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:
<img src="peter.jpg" width="200" height="150"
alt="My friend Peter" longdesc="peter.html">

画像は、デジカメを使ったりとか、スキャナで取り込んだりとか、ペインティングツール・ドローイングツールで作ったりとか、いろんな方法で作ることができる。 ほとんどのブラウザはGIFフォーマットとJPEGフォーマットを表示できて、新しいのになるとPNGフォーマットも表示可能だ。 ネットワークから画像ファイルをダウンロードするまで長い時間がかかっちゃうのを避けるため、大きいサイズの画像ファイルは使うべきじゃないね。

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.

一般論としては、JPEGは写真とか、画像がなめらかに変化していくものに最適で、GIFとPNGは同じ色の部分があったり、線や文字が入っているCG作品に向いてる。 この3つのフォーマットはどれもプログレッシブ(訳注:GIFではインターレースとも言う)描画のオプションがあって、この場合最初におおまかな画像が送られてきて、だんだん細部がはっきりしてくることになる。

Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

ほかのページへのリンクを追加する(Adding links to other pages)

ウェブがなぜこんなに使いでがあるのかって、あるページからほかのページへリンクを張って、クリックでリンクをたどれるからだ。 一回のクリックで世界へ飛び立つんだ!

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

リンクは<a>タグで定義される。 "peter.html"ファイル中にページがあるとして、そこへのリンクを張ってみよう。

これは<a href="peter.html">ピーターのページ</a>へのリンクです。
Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.

<a>と</a>の間の文字はリンクの表題として使われるんだ。 この表題は、通常、青い下線付きの文字になっている。

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

ほかのウェブサイト中のページへのリンクを張るには、例えばwww.w3.orgへのリンクであれば次のように、ウェブのアドレス(通常URLと呼ばれるやつだ)全部を書かなきゃいけない。

これは<a href="http://www.w3.org/">W3C</a>へのリンクです。
To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.

例えば次のように、会社のロゴをクリックするとそのホームページに行けるよう、画像をハイパーテキストのリンクにすることもできる。

<a href="/"><img src="logo.gif" alt="ホームページ"></a>
You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>

3種類の箇条書き(Three kinds of lists)

HTMLには3種類の箇条書き(訳注:以下「リスト」という)が用意してある。 1つ目は記号付きリストで、順不同リストなんてよく言う。 こいつは、次のように<ul>タグと<li>タグを使うんだ。

<ul>
  <li>最初の項目</li>

  <li>2番目の項目</li>

  <li>3番目の項目</li>
</ul>
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ul>

気をつけて欲しいんだが、リストの最後にはいつも終了タグ</ul>が必要で、 だけど</li>の方は任意で、省略可能だったりする。 2つ目のリストは番号付きリストで、序列リストなんてよく言う。 こいつは、次のように<ol>タグと<li>タグを使うんだ。

<ol>
  <li>最初の項目</li>

  <li>2番目の項目</li>

  <li>3番目の項目</li>
</ol>
Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ol>

記号付きリストと同じで、最後にはいつも終了タグ</ol>が必要で、 だけど</li>の方は任意で、省略可能だったりする。

Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.

3つ目の、そして最後のリストは定義リストだ。 こいつを使うと、用語とその定義を箇条書きにできるんだ。 このリストは<dl>タグで始まり</dl>で終わって、それぞれの用語は<dt>タグで、その定義は<dd>タグで始まる。 例えば次のような感じだ。

<dl>
  <dt>最初の用語</dt>
  <dd>その定義</dd>

  <dt>2番目の用語</dt>
  <dd>その定義</dd>

  <dt>3番目の用語</dt>
  <dd>その定義</dd>
</dl>
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>

  <dt>the second term</dt>
  <dd>its definition</dd>

  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>

終了タグ</dt>と</dd>は任意で、省略可能だったりする。 気をつけて欲しいんだが、あるリストの中にほかのリストを入れて、リストを入れ子にすることができる。 例えば次のような感じだ。

<ol>
  <li>最初の項目</li>

  <li>
    2番目の項目
    <ul>
      <li>最初の入れ子の項目</li>
      <li>2番目の入れ子の項目</li>
    </ul>
  </li>

  <li>3番目の項目</li>
</ol>
The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:
<ol>
  <li>the first list item</li>

  <li>
    the second list item
    <ul>
      <li>first nested item</li>
      <li>second nested item</li>
    </ul>
  </li>

  <li>the third list item</li>
</ol>

段落とか見出しなんかを、もっと長いリストの項目に使うこともできるよ。

You can also make use of paragraphs and headings etc. for longer list items.

この先の情報を集めよう(Getting Further Information)

もっと勉強する用意ができてるなら、兄弟分のより高度なHTMLちょっとスタイルにこってみようが待っている。

If you are ready to learn more, I have prepared some accompanying material on advanced HTML and adding a touch of style.

W3CのHTML 4.0勧告(訳注:邦訳がある)は信頼できるHTMLの仕様だ。 だけど、こいつは技術的な仕様だ。 もうちょっと技術的なハードルが低い情報源として、HTMLについて書かれたいろんな本から1冊、例えば1998年にAddison Wesleyから出版された"Raggett on HTML 4"を買ってみるのもいいだろう。 ほかにも、2000年にWrox Pressから出版された"Beginning XHTML"は、W3CによるXMLを適用してのHTMLの再定義(訳注:XHTMLをまとめたこと)について説明した本だが、こいつは読んで欲しい。 XHTML 1.0(訳注:邦訳がある)は、今ではもうW3C勧告だ。

W3C's Recommendation for HTML 4.0 is the authorative specification for HTML. However, it is a technical specification. For a less technical source of information you may want to purchase one of the many books on HTML, for example "Raggett on HTML 4", published 1998 by Addison Wesley. See also "Beginning XHTML", published 2000 by Wrox Press, which introduces W3C's reformulation of HTML as an application of XML. XHTML 1.0 is now a W3C Recommendation.

幸運を、そして書こう!

Best of luck and get writing!

Dave Raggett <dsr@w3.org>

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.


翻訳(2003-01-18): webmaster of bewaad institute@kasumigaseki <webmaster@bewaad.com>
go back to top page[0]
/テーマ別書庫/HTML入門/参考
about[1] history[2] writings[3] links[4] sitemap[5]