DHC-オンライン講座 文系の人にもわかる！ HTML入門 Textbook www.dhc-online.com 1 Textbook 1 Lesson 1 ワープロの文書とホームページの違い Lesson 1 ワープロの文書とホームページの違い この講座では，ホームページ1 の仕組みと作成方法の基本を学びます。まず，ホームページとワープロの文書を比較しな がら，初めてのページを作ってみましょう。 ●初めてのページの作成̶まずはワープロで 図1-1のようなとても短いホームページを作ってみましょ う。 いきなり，ホームページを作るのはちょっと大変ですの で，まず，ワープロを使って似たようなページを作って みましょう。Microsoft Word（マイクロソフト・ワー ド）などのワープロソフトを起動して，図1-1と同じよう なレイアウトのページを作成してみます。次の手順に 従ってください。 図1-2 Wordにおける「スタイル」の指定 1. Wordなどのワープロソフトを起動し，新しい文書 （白紙の文書）を作成します。2 2. 図1-1と同じように文字を入力し，大きさなどを指定 します。 「インナーウェブへようこそ」の部分はタイトル （見出し）なので，書体（フォント）を大きくして 太字にするか，図1-2のように，「見出し１」などの 見出し用の「スタイル（style）」を選択して目立つ ようにしてください。図1-3のようなページに仕上げ てください。 3. 入力が終わったら「ファイル」メニューから「上書 き保存」（あるいは「保存」）を選択します。 図1-4のようなファイル保存の「ダイアログボック ス」が表示されます。 図1-3 図1-1と同じような内容をワープロで作成 4. 適当な場所にwebpageというフォルダを作り，その フォルダに移動します。 図1-1 これから作成するページ 1 図1-4 ファイル保存のダイアログボックス 本当はウェブページ（Web page）と呼ぶのが「正しい」のですが，これについてはこのLessonの最後で説明します。 Wordで，「新規作成」メニューから「Webページ」を選択するとWordからホームページを作ることもできます。しかし，今のとこ ろWordのこの機能にはいろいろと問題がありますし，この機能を使ってHTMLの勉強をするのは困難ですので，ここでは普通の文書の 新規作成を選択してください。 2 -1- Textbook 1 Lesson 1 ワープロの文書とホームページの違い たとえば「マイドキュメント」の下に「webpage」 というフォルダを作ってください。この講座で使う 例題をすべてここに入れることにします。 Mac OS Xなど，他のOS（オペレーティングシステ ム）を使っている方はそれぞれ付属のエディタ （TextEditなど）を使ってください。なお，Wordな どのワープロソフトを使ってホームページを作るこ ともできますが，HTMLを使ってホームページを作 る場合はエディタを使うようにしましょう。 Windows XPなどの場合，新しいフォルダを作るに は，上の図1-4のように，ダイアログボックス右上の 「新しいフォルダ」のアイコンをクリックして作る のが簡単です。 7. 開いたウィンドウに図1-7のように文字を入力してく ださい。 新しいフォルダを作ったら，それを選択してその フォルダに移動してください。 リスト1-1に同じ内容がありますので，印刷前にダウ ンロードしたこのTextbookのファイルからコピーし ても結構です。Adobe Readerの「選択ツール」を利 用するとコピーができます（通常，手のひらのアイ コンの右にあります）。 5. example1という名前で保存します（図1-5）。 MEMO リスト1-1をはじめとして，これ以降のすべての例 は，この講座のサポートページで参照できるように なっています（ダウンロードもできます）。ログイン してこの講座の受講状況のページを開き，「サポート ページ」へ「ジャンプ」してください。 図1-5 名前を指定して保存 ●初めてのページの作成̶HTMLで 上で見たようにワープロソフトで図1-3のようなページを 作るのは簡単です。今度は同じような内容を持つホーム ページを作成してみましょう。ホームページの作成用の プログラム（アプリケーション）も市販されています が，じつは，既にあなたのパソコンの中に入っているプ ログラムを使ってホームページを作ることができます。 ホームページを作るにはWindowsの「メモ帳」などの 図1-6 「メモ帳」を起動 「エディタ」と言われるプログラムを使うのが手軽な方 法です。次の手順に従って，作成してみてください。 6. Windowsの「メモ帳」などの「エディタ」を起動し ます。 たとえばWindows XPならば，「スタート」メ ニューから「すべてのプログラム」̶「アクセサ リ」̶「メモ帳」の順に選べば起動できます1（図16）。 図1-7 「メモ帳」を使って入力 リスト1-1 example1.html 最初のホームページ <html> <head> <title>インナーウェブ ̶内なる宇宙を見つめて</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <h1>インナーウェブへようこそ</h1> <p> インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。 </p> </body> </html> -2- Textbook 1 Lesson 1 ワープロの文書とホームページの違い 8. 入力が終わったら「ファイル」メニューから「上書 き保存」を選択します。 9. 「マイドキュメント」の下などに作った 「webpage」というフォルダに移動します。 10.ダイアログボックス下の「ファイルの種類」の欄を クリックして，図1-8のように「すべてのファイル」 の方を選択します。 通常のホームページのファイルは，単純な「テキス ト文書」ではなくてホームページ用の「HTMLファ イル」として保存しますので，「テキスト文書 (*.txt)」ではなく，下の「すべてのファイル」の選択 します。 11.図1-9のように，example1.htmlという名前で保存 します。 図1-8 「すべてのファイル」を選択 これで準備は完了です。それでは，作成したページを ウェブブラウザで見てみましょう。 12.Internet Explorer（インターネット・エクスプロー ラー）などのウェブブラウザを起動して読み込みま す。 Internet Explorerの場合「ファイル」メニューから 「開く」を選び，「参照...」のボタンをクリックし て先ほど作成したexample1.htmlを指定しま す。「webpage」というフォルダの中にあるはずで す。標準の設定では拡張子の「.html」は表示されて いないので，example1という名前のファイルを選択 します（図1-10）。 図1-9 ファイル名の指定 これで，図1-11のようなホームページが表示されるはず です。初めてのページが完成しました。厳密には，ほか の人がインターネットを経由して参照（アクセス）でき ないと「ホームページ」とは呼べないかもしれません。 そうするにはここでできたファイルを，単に「ウェブ サーバ」と呼ばれるコンピューターにコピーすればよい だけですので，これも「ホームページ」と呼んでおきま しょう。 MEMO ホームページ用の文書は「テキスト文書」ではあるの ですが，特別な書式に則って書かれているため，通常 「テキスト文書」につける「.txt」という拡張子は使い ません。図1-8の「ファイル名」の右の「*.txt」はファ イル名の後に「.txt」という拡張子がつけられるという ことを示しています。 図1-10 ブラウザでファイルを選択 文字そのものに関するデータだけが入っている文書の ことを「テキスト文書」，このような文書が保存され ているファイルのことを「テキスト形式のファイ ル」「テキストファイル」などと呼びます。テキスト 形式のファイルには，文字について書体の種類や大き さ，レイアウトに関する情報はなく，また図なども 入っていません。単に，文字を表すコード（数値）が 並んでいるだけです。ホームページ用の文書はテキス ト文書なのですが，HTMLという特別な形式で書かれ ているテキスト文書なので，拡張子として「.html」あ るいは「.htm」をつけることに決まっています。 図1-11 ウェブブラウザで表示 -3- Textbook 1 Lesson 1 ワープロの文書とホームページの違い ●ホームページとワープロの文書の違い 部分の文字だけが表示されています（<title>...</title>に さて，初めてのホームページが完成しましたが，どう 囲まれた部分は，ブラウザのウィンドウの「タイトル だったでしょう？ ワープロで文書を入力するのと比べ バー」に表示されています。残りの<html>， てどちらが簡単でしたか？ ここで，ホームページと <head>，<title>，</title>などは「タグ（tag）」と言われ ワープロと比較して両者の特徴を見てみましょう。 るもので，ウェブブラウザには表示されません。HTML の「タグ」は何のためにあるのでしょうか？ 図1-1のワープロに入力した内容とリスト1-1と比較して みましょう。ウェブブラウザでは下のリストの濃い色の リスト1-1 example1.html 最初のホームページ（再掲） <html> <head> <title>インナーウェブ ̶̶ 内なる宇宙を見つめて</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <h1>インナーウェブへようこそ</h1> <p> インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。 </p> </body> </html> ●ホームページを記述する言語̶HTML で使われる大切なものばかりですので，しっかり覚えて ください。 ホームページは「HTML」という「言語」を使って書か □ <html>...</html>̶ファイルがHTMLで書かれた文書 であることを示すタグです。このタグがないとブラウ ザで正しく表示されません。HTMLの文書（HTML ファイル）は，通常，その頭の方に<html>タグが来 て，最後は</html>で終わります。 れます。HTMLはHyperText Markup Language（ハイ パーテキスト用マークアップ言語）を略したもので す。「ハイパー」は日本語にすれば「超」です。した がって「ハイパーテキスト」は単に文字が並んでいるだ けでなく，それを超えたものであるというわけで □ <head>...<head>̶ヘッダ（見出し）。「...」の部分 す。「マークアップ」は印刷の用語で活字の型や並べ方 には，ウェブブラウザのウィンドウ内には表示はされ ないが，この文書に関わる事柄を記述します。たとえ ば，ページのタイトル（表題）や，そのファイルで使 われている文字コードなどがここに書かれます。 などを指定する「組み指定」のことです。 Wordなどの従来のワープロでは，たとえば文字を大きく して「見出し」にするのに，文字を選択してから太字に □ <title>...</title> して大きくしたり，「見出し１」などの「スタイル （表題）を書きます。通常はウェブブラウザのウィン ドウの一番上のタイトルバーに表示されます（図1-11 参照）。上に書いたように，<title>...</title>は「ヘッ ダ」に入るので，<head>...<title>...</title>...</head> と並ぶことになります。タイトル部分に指定した文字 列は，「お気に入り（ブックマーク）」に入れたとき に表示されます。また，Google（グーグル）や Yahoo（ヤフー），Goo（グー）などの「検索エンジ ン」はこれを見てページの内容を判断することが多い ので，簡潔に，それでいて内容がよくわかる文字列を 書くようにします。 □ <body>...</body>̶...の部分にブラウザ画面に表示さ れる文字や画像など本体（コンテンツ）や，それが外 部を参照する場合はその位置を書きます。 □ <h1>...</h1>̶見出し（ヘッダ）。見出しのレベルに は<h1>...</h1>，<h2>...</h2>，...，<h6>...</h6>と ６種類あって，<h1>が一番の大見出しに，<h2>...</ h2>は２番目のレベルの見出しになります。この例で は，一番上のレベルの見出しだけを使いまし た。Lesson 2で<h2>...</h2>を使う例を見ます。 （style）」を指定したりします。これに対してHTMLの 文書では，「タグ」で「見出し」を指定（マークアッ プ）するのです。トレーナーやTシャツなど首のところに 「タグ」がついています。タグを見ると，大きさ（S, M, L, XL, XXL, ...），メーカーや加工した国，時には洗濯 の仕方などがわかります。同じように，HTMLの文書で は文字や単語，文などにタグを付けて，これが見出し， ここから次の段落の始まり，などと示すわけです。タグ をつける場所は対象の前と後ろ。開始タグで始めて，終 了タグで終わります。たとえば，一番大きな見出しなら ば，<h1>ではじえめて</h1>で終わるといった具合で す。 ●主要なタグの意味 それでは，上の文書で出現したタグの意味を見てみま しょう。いずれのタグもほとんどすべてのホームページ -4- ̶...の部分に，この文書のタイトル Textbook 1 Lesson 1 ワープロの文書とホームページの違い めの文字列にする」といったことを決めているのはブ ラウザなのです3。 □ <p> ... </p>̶普通の段落（パラグラフ）。...の部分 に書かれた内容が，ひとつの段落としてまとまって表 示されます1。 □ スペースやタブ，改行はどこにいくつ入れても表示結 これまでのところをまとめてみましょう。どのような 果は（ほぼ）同じになる ̶ タグが文字の文書中の意 HTML文書（ホームページ）でも次のような感じででき 味を決めるので，それに従ってブラウザがレイアウト します。このため，空行（何も文字が書いてない行） などを用いて，HTMLの文書を読みやすくすることが できます。 ているというわけです。 <html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> ＜＜本文＞＞ </body> </html> □ 表示される行の幅は，ブラウザが決める。また，印刷 される際のページ区切りがどこになるかは（通常）わ からない ̶ワープロの文書の場合，ワープロソフト で横幅を指定することができますが，ホームページの 場合は，通常，ウィンドウの幅で自動的に折り返され て表示されます。また，ホームページを印刷したとき それが何ページになるかは，作成者には（原則とし て）決められません。ブラウザによって決められま す。ブラウザを使う人が文字の大きさなどを自由に変 更することができますし，携帯電話などの小さな表示 画面しか持たない機器に付属するブラウザでは，１画 面に表示できる文字を少なくして表示したりします。 <<本文>>のところに，書きたい内容を書けばよい訳で す。今のところは，見出しと段落からなる単純な文章を 書くことができるだけですが，これからいろいろなタグ □ HTMLの文書は，テキスト形式のファイル（文字の修 飾情報などの付いていない単純な文字データのみの ファイル）なので，ほとんどすべてのコンピューター で内容を見ることができる。 を習えば徐々に面白いことができるようになります。 ●開始タグと終了タグ̶<xxx> ... </xxx> 多くのタグには「開始タグ」と「終了タグ」がありま す。終了タグは開始タグの名前の頭に「/」が付いたもの ●ホームページ Vs. ワープロ̶ホームページの特徴 で，開始タグと終了タグに囲まれた部分が，そのタグが HTMLの文書（ホームページ）では，このように実際に 適用される対象となります。<html>，<head>，<title>な 表示される内容と，内容をどう表示するか ̶「内容（コ どが開始タグで，</html>，</head>，</title>などが終了 ンテンツ）」と「見栄え」̶ を分離したため，どのよう タグです。 なコンピューターを使ってもブラウザさえあれば内容を 表示できるのです。たとえばリスト1-1の文書を ●タグとウェブブラウザの関係 Windowsとはまったく別系統のOSであるMac OS Xに付 HTML文書について，別の角度からタグの特徴を整理し 属するSafari（サファリ）というブラウザで表示しても， てみましょう。 □ 似たように表示されます（図1-12）。 のウィンドウに表示される 「文字（テキスト）」と，文字などが文書中でどのよ うな意味を持つかを表す「タグ」から構成される。 HTML文書は，ブラウザ2 □ タグに囲まれた文字列の意味（構造）を，タグの名前 が決める̶開始タグと終了タグに囲まれた文字列が， 見出しの役目をするとか，普通の段落をなすとかをタ グの名前によって指定します。 □ タグは対象となる文字列の文書中の役目を表すが，そ れがブラウザによってどう表示されるかはタグ自体で は決まらない̶表示方法を決めるのはブラウザの役目 です。たとえば「<h1>...</h1>の部分は，太字の大き 図1-12 Mac OS Xのブラウザ「Safari」で表示 終了タグ</p>は書かなくても次の開始タグ<p>で段落の開始はわかりますので，ほとんどのウェブブラウザでは</p>を書かなくても同 じように表示されます。しかし，ここでは詳しく説明しませんが，今後のことを考えると</p>も省略しないで書いておくことを強くお すすめします。 1 ブラウザ（browser）」は一般にはウェブページ（ホームページ）を見るためのものとは限りません。browseは「ざっと見る」「目を 通す」といった意味の言葉ですので，たとえば，顧客リストの一覧を見る「ブラウザ」もあります。この講座ではウェブブラウザしか 利用しないので，以降「ブラウザ」で「ウェブブラウザ」を指すことにします。 2 「スタイルシート」という仕組みを使うと，ブラウザに任せきりにしないで，ウェブページを書く人がかなり細かくレイアウトなどを 決められます。 3 -5- Textbook 1 Lesson 1 ワープロの文書とホームページの違い また，同じ内容を図1-13のように「携帯情報端末（PDA □ 印刷される際のページのイメージで作成する̶ホーム ページとは対照的に印刷したときに何がどこに（何 ページのどのあたりに）印刷されるかを作成者が厳密 に決められます ̶Personal Digital Assistant）」と呼ばれる，パソコン よりも小型軽量の機器で表示することもできます。 たとえば，Wordでは文字の大きさ，位置揃えなどは文字 を選択してその場で指定し，どのように表示されるかは Wordを作成したMicrosoft社が，独自に，しかも厳密に 決めています。これに対してホームページ（という仕組 み）は，単独の組織が独自に開発したものではなく，世 界中のどのような種類のコンピューターを使っても， ページが閲覧できることを目標にして，多くの人の共同 作業で構築されたものなのです。 HTMLはさまざまな環境をもつさまざまなコンピュー ターがつながれたインターネットの世界で，誰もが文書 を表示できるようにする目的で作られた言語です。この ため，HTMLのタグを解釈できるブラウザさえ用意すれ 図1-13 PDAのブラウザで表示 ば，どのようなコンピューターでもHTML文書を見るこ さらに，同じ内容を図1-14のように携帯電話で表示する とができるのです。これに対して，Wordを代表格とする こともできます1。 ワープロソフトは，印刷時にどのようなものになるかを 常に念頭において使われます。したがって，文書の作成 者が表示のされ方を細部まで規定できますが，逆に，た とえば「別の種類のパソコンでは見られない（別のOSで は見られない）」「新しいバージョンのワープロソフト で作った書類なので，このバージョンでは見られない」 といった問題も起こりうるわけです。 最近では，携帯電話を使ってホームページを見ることも 多くなりましたが，Wordの文書を携帯電話で見ることは （少なくとも今のところは）できません。しかし，普通 のホームページならば携帯電話でも読むことができるの です。HTMLという言語が決められたときには，携帯電 話がこれほど普及してホームページを見られるようにな 図1-14 携帯電話のブラウザで表示 るとはほとんどの人が予想していなかったのですが，ど ●ホームページ Vs. ワープロ̶ワープロの特徴 んなコンピューターを使っても見られるように，「テキ これに対して，Wordを初めとするワープロソフトには次 を指定するという仕組みが用いられたために，携帯電話 のような特徴があります。 でも簡単にホームページが見られるのです。 スト形式」で保存して，「タグ」によって文字列の意味 □ 文字の大きさ，位置などは文字を直接選択して指定 できる。表示の方法はワープロソフトが独自に厳密に 決めている □ ワープロソフトが独自にさまざまな機能を追加できる ̶脚注，ルビ，表計算の埋め込みなど実に多種多様な 機能をワープロ独自で提供しています □ ファイルに保存する際には，そのワープロ独自の形式 を用いるため，他のアプリケーションでは内容を見ら れないことが多い̶Wordのファイルは広く利用され ているため，他のアプリケーションから中身を参照で きることが多いですが，内容を直接変更したりするこ とはできません。また，携帯電話などでは内容を見る こともできません 1 MEMO 携帯電話のブラウザとパソコンのブラウザでは，表示 できる内容がかなり異なります。たとえば，多くの携 帯電話では大きさの違う文字を表示したり，複数の書 体を使ったりはできません。同じパソコンのブラウザ でも，以前のブラウザでは動画の再生には対応してい ませんでした。 じつは，ブラウザごとに対応しているタグが違ってお り，そのブラウザが対応していないタグは無視されま す。つまり，そのタグがなかったものとして扱われま す。タグが無視されるだけなので，無視されたタグに 囲まれた文字は画面に表示はされます。ただし，それ がタグで意図したとおりに表示される保証はなくなり そうです。この講座の内容をマスターすれば，あなたの使っている携帯電話から見られるページが作成できます。 -6- Textbook 1 Lesson 1 ワープロの文書とホームページの違い □ Internet Explorerなどのインターネットブラウザが一 番最初に表示するページ ます。たとえば，文字を強調表示するためのタグを 使っても，携帯電話のブラウザでは他の部分と同じ種 類の文字で表示されるわけです。動画の表示に対応し ていないブラウザでは，動画はまったく表示されない ことになります。 Lesson 1とLesson 2で紹介するような基本的なタグはこ こ数年流通しているすべてのブラウザ（携帯電話のブ ラウザも含む）が対応していますから，この種の問題 は起こらないはずです。ほかの本などで調べたタグを 使うときには，そのタグにほとんどのブラウザが対応 しているか意識して使った方がよいでしょう。 □ 会社や個人などのページの集まり（サイト）のうち， 一番上位に位置する入り口のページ（日本では「トッ プページ」と呼ばれることが多い） 日本ではインターネットが一般的になるにつれて，入り 口のページに限らずどのページも「ホームページ」とい 呼ばれるようになってしまいましたので，この講座のタ イトルも「ホームページ作成入門」としましたが，この 「ホームページ」は，英語の意味に従うと「ウェブペー ●ホームページ Vs. ウェブページ ジ（Web page）1」が「正しい」呼び方です。 このLessonの最後に言葉の定義をしておきましょう。パ ソコンや携帯電話を使って「ホームページ」を見るのは 「ホームページ」という言葉を使うと，現在広く使われ すっかり一般的になってしまいました。しかし，じつは ている意味なのか元々の意味なのかがになってしまいま 英語のhome pageあるいはhomepageは，もともと次の すので，この講座では，これ以降「ホームページ」とい いずれかの意味で使われていた言葉です。 う言葉は使わずに，「ウェブページ」という言葉を使う ことにします。 ●まとめ ■このLessonで登場したタグ 最初の「ウェブページ」を作成してみました。ま □ <html>...</html>̶HTMLのコードはこのタグに囲ま れる □ <head>...</head>̶ヘッダ部分 □ <title>...</title>̶ヘッダ部分に書かれるタイトル □ <meta ...>̶文字コードなどの指定 た，HTMLの文書の特徴をワープロソフトと比較しまし た。ワープロソフトは見栄えも自前で決めるのに対して HTML文書では，タグによって対象の文字列がその文書 においてどのような意味を持つのか，どんな役割をして □ <body>...</body>̶HTMLの本体部分（ブラウザに 表示される部分） □ <h1>...</h1>, ..., <h6>...</h6>̶見出し □ <p>...</p>̶段落（パラグラフ） いるのかを指定していきます。これにより，携帯電話な ど超小型のものを含むさまざまなコンピューターからイ ンターネット上の世界中のコンピューターにある文書を 簡単に見ることができるのです。 WebはWorld Wide Web（ワールド・ワイド・ウェブ）を省略したものですが，あまりに長いので，多くの場合単にWebと呼ばれま す。 1 -7- Textbook 1 Lesson 2 文章中心のページの作成 Lesson ２ 文章中心のページの作成 Lesson 1で，簡単な例を通してワープロソフトと比較してウェブページ（HTML文書）の特徴を見ました。Lesson 2で は，このほかの基本的なタグを学び，文字（テキスト）が中心のページが作成できるようにしましょう。自作のエッセイ や小説などを書籍にして発表するのは費用もかかりとても大変ですが，ウェブならば何十分の１か，何百分の１かの費用 で簡単にしかも世界中に発表することができます。公開の方法などこの他にもう少し学ばなければなりませんが，この Lessonの内容を理解すれば，自作の文章のページを作成でき，公開する準備がほぼ調います。 ●少し長い文書 まず，リスト1-1よりもう少し長いHTMLの文書の例を見 てみましょう。図2-1のようなページを作ります。 Lesson 1の例と同じように，「メモ帳」などのエディタ を起動して，リスト2-1のHTML文書を入力し，webpage フォルダの下に，たとえばexample2.htmlという名前で ファイルに保存してください。ブラウザに読み込むと， 図2-1のように表示されるはずです。 図2-1 WindowsのInternet Explorerによる表示 リスト2-1 example2.html 少し長いHTML文書の例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>温泉</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <!--この下から本文 --> <body> <h1>温泉</h1> <p>朝から晩までコンピュータの前に坐っているため，肩や首，腰などが慢性的にこったり痛かったり。 そんな私にうれしい味方が現れた。近くに温泉がオープンしたのである。 近くの駅から無料送迎バスがあり，家から30分少しで温泉に浸かることができるようになった。</p> <p>最初に行ったのは７月末の日曜日。 友人が「いい，絶対いい」と勧めていたのを思い出し， 「今日，温泉に行こうか」と家族みんなで繰り出した。 10:00発の送迎バスに乗り，20分弱で到着。 「カラスの行水コース」という１時間以内のコースを選び温泉へ。 東京近郊の温泉はどこもだそうだが，お湯の色はコーラのような色だ。 でも，とても気持ちがいい。</p> <p>完全にはまってしまって，週に１度のペースで行っている。 最近多いのが夜のコース。 仕事と食事を終えて，午後７時あるいは８時のバスに乗り， カラスの行水コースで１時間，家を出てから2時間半ほどで戻り， お酒を飲んで「お休みなさい」というコースだ。</p> <p>銭湯にに比べるとちょっと高めだけど， 温泉宿に１回泊まりで行くお金があれば，こちらには10回は行ける。 そして，この温泉は体にとてもいいような気がする。 お近くの方，おすすめです。</p> </body> </html> -8- Textbook 1 Lesson 2 文章中心のページの作成 <!-- あとで，ここに追加する。候補は次のとおり。 <h2>韓国のバス</h2> <h2>韓国の携帯電話</h2> 図2-1は，Windows用のInternet Explorerで表示したと ころですが，別種のコンピューターの別のブラウザ（今 度はMac OS XのFirefox（ファイヤーフォックス）を --> 上の例では，これから書こうとする内容のタイトルだけ 使ってみました）でもほぼ同じように表示されます（図 2-2）。また，「ウェブサーバ」に転送（アップロード） を書いておいて，後からその中身を書こうとしていま する必要はありますが，携帯電話でも見ることができま す。逆に，それまで表示されていた部分を消す目的でコ す。すでに説明したように，ウェブページの内容 メントを使うこともできます。削除したい部分を「<!--」 は，「特定のコンピューターあるいは特定のアプリケー と「-->」で挟めばよいのです。削除してもよいかもしれ ション（プログラム）でしか見られない」ということは ないけれど，あとでどこかで使うかもしれないといった ないのです。 内容は，コメントにしておけば簡単に復活させることが できます。 ●<meta>タグと属性 ５行目にある<meta>タグには終了タグはありません。こ のタグ単独で（対象の文字列なしで）役目を果たすもの です。対象の文字列の代わりに「属性（attribute）」が 指定されています。<meta>タグにはhttp-equiv，content などの属性があり，それぞれの属性に「値（属性値）」 を指定することによって，この文書の性質をブラウザに 知らせて，ブラウザによる処理を助ける役目をします。 下のように書くことで，このファイルの内容は日本語 で，「シフトJIS」コードで書かれていることを指定して います。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 図2-2 Max OS XのFirefoxによる表示 この指定がないと，ブラウザの設定によっては日本語が では，リスト2-1にあるタグなどで，先ほど説明しなかっ 正しく表示されないで，わけのわからないおかしな文字 たものを見ていきましょう。 がたくさん表示される，いわゆる「文字化け」を起こす ことがあります。ほとんどのパソコンでは文字コードと ●DOCTYPE宣言 してシフトJISが使われていますので，日本語の文書で まず，先頭にある<!DOCTYPE ...>はじつはHTMLのタグ は，この行はこのまま入れるようにしましょう。なお， ではなく，DOCTYPE宣言と呼ばれるもので，この文書 文字コードとしてシフトJIS以外のものを指定した場合 がどのような規格に基づいている文書であるかを示して は，それをここに書くことになります。 います。この行は書かなくてもブラウザは問題なくこの 文書を表示してくれますが，この宣言がある方が「正 属性値は必ず一組の引用符（「 " ... " 」または「'...'」）で 式」なので，将来を考えると書いておいた方がよいで 囲みます。囲まなくても有効になる場合はありますが， しょう。詳しい内容は省略しますので，当面このまま書 正式には必ず囲むことになっていますので，そうしてお いておいてください。 いた方が，将来苦労する可能性が減ります。 ●コメント̶<!-- ... --> MEMO ザには表示されません（「<!--」と「-->」はタグではあり 属性をたくさん指定すると，タグ全体が長くなってし まうことがあります。その場合は，属性を区切るス ペースで改行して，複数行を使って書いてもかまいま せん。 ません）。コメント部分には何を書いてもよいので，た MEMO ７行目にある「<!--」と「-->」で囲まれた部分は「コメン ト（comment）」で，この中に書かれた文字列はブラウ とえば，次のようなメモを書いたりもできます。コメン HTMLにはHTML 2.0，HTML 3.2，HTML 4.0，XHTML などいろいろな規格がありますが，この本では現在使 われているほとんどすべてのブラウザで意図したとお りに表示できるページを作ることを念頭において説明 します。新しいHTMLの規格では，<meta>タグや下で トは複数の行にまたがることもできます。とにか く，「<!--」がきたら，「-->」がくるまで途中の文字列は すべてブラウザに無視されてしまいます。 -9- Textbook 1 Lesson 2 文章中心のページの作成 出てくる<hr>タグなど，終了タグのないものについて は，たとえば次のようにタグの終わりに「/」をつける ことになっています。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> しかし，現在は以前の規格と新しい規格とが混在して いる段階で，上記のような記法を用いると，うまくタ グが解釈できないブラウザがあります。そこで，この 講座では，終了タグのないものについて最後の「/」を つけない記法を採用しておきます。 ●タグの大文字と小文字の区別 タグや属性に大文字と小文字の区別はありません。つま り，<h1>と書いても<H1>と書いても同じことになりま す。ただし，XMLという徐々に広まりつつある標準に 則った書式で書く場合には，タグは小文字にする必要が 図2-3 エッセイのページ（最初の部分） あります。このため，これから作るウェブページでは小 文字のタグを使っておくのがよいでしょう。以降，この 講座でも，タグや属性は原則として小文字で書きます。 以上でリスト2-1に出てくる新しいタグなどの説明はおし まいです。 ●より大きなページの作成 エッセイが３本ほどたまったので，まとめて図2-3と図24のような「エッセイのページ」を作ることにしましょ う。まずは先頭に簡単な目次をつけて，その下に３本の エッセイを並べることにします。ページの先頭に「エッ セイ」という一番大きな見出しをつけて，その下に目次 を書き，３本それぞれのエッセイに少し小さめの見出し をつけましょう。目次の下と各エッセイの間には横線を 引いて区切りをつけることにします。 図2-4 エッセイのページ（最後の部分） このページのHTMLコード（ソース）はリスト2-2のよう になります。 -10- Textbook 1 Lesson 2 文章中心のページの作成 リスト2-2 essay1.html ３本のエッセイのページ（次のページに続く） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>エッセイ</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <!-- 本体部分の開始 --> <h1 align="center">エッセイ</h1> <!-- 第１レベルの見出し。中央に配置 --> <h2>目次</h2> <!-- 第２レベルの見出し --> <ul> <!-- 順序なしリスト --> <li>蔘鶏湯（サムゲタン，2004年9月）</li> <!-- リストの項目 --> <li>夜の十分間 （2004年7月） </li> <li>温泉（2004年6月）</li> </ul> <!-- 順序なしリストの終了タグ --> <hr> <!-- 横線。目次と本文の区切り --> <h2>蔘鶏湯（サムゲタン）</h2> <p> 去年半年ほど韓国で暮らしました。韓国の食べ物はほとんど辛くて私の口には合わないものが多くて困ったのですが，なかにはと ても好きになったものもあります。中でも，蔘鶏湯（サムゲタン）とスジェビはうちの家族全員が大好きに。スジェビの方 は，「韓国式すいとん」などと紹介されているように，家でも比較的簡単に作れるようです。うちでも，「今日はスジェビにしよ う」と月に１ペンぐらいは言います。 </p> <p> 問題は蔘鶏湯の方です。読んで字のごとく，鶏肉がはいります。健康な若鶏を丸ごと入れるのだそうです。そして，朝鮮人参，干 しナツメなども。これらの材料はそう簡単には手に入りません。それに，おいしい蔘鶏湯を作るには結構煮込まなくてはいけませ ん。手間がかかります。 </p> <p> というわけで，できるだけ近所に<em>おいしい</em>蔘鶏湯のお店はないかと探してみました。２駅以内のところに３軒，蔘鶏 湯を出してくれるお店を見つけて行ってみました。しかし，どこの蔘鶏湯も圧力釜で調理してありました。圧力釜で調理すると， 骨がポロポロになります。蔘鶏湯の何がおいしいと言って，硬い骨の周りについた，たっぷり煮込んだ柔らかい鶏肉をかじるのが おいしいのです。だから，圧力釜で作ったものは「蔘鶏湯」とは言えないと私は思うのです。 </p> <p> 韓国では，思い出せるだけでも５軒の蔘鶏湯屋さんに入りましたが，圧力釜で作った蔘鶏湯なんて，ひとつもありませんでした。 しかも，値段は日本の1/4くらい。韓国の私の職場のそばの蔘鶏湯のお店の蔘鶏湯の値段の安いのなんの。たったの5000ウォン （約500円）なのです。日本では，安いところで2000円もするー。おいしければ，許せますが。骨がポロポロ。ひどい。 </p> <p> おいしい蔘鶏湯が食べたい。できれば，すぐに行けるようなところで。 </p> <hr> <!-- 横線。次のエッセイとの区切り --> -11- Textbook 1 Lesson 2 文章中心のページの作成 リスト2-2 essay1.html ３本のエッセイのページ（続き） 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 <h2>夜の十分間</h2> <p> 玄関の戸を開け外に出る。真っ暗闇の中，トイレを目指す。あと少しだ。手探りで裸電球のスイッチをパチッといれ，あたりが 明るくなってホッと一息。シャーといい気持ち。 </p> <p> おかしい。何やら暖かいものが股間を走っている。しまった。またやってしまった。 </p> <p> 私が小さい頃住んでいた家は，明治時代に建てられた古いもので，トイレが家の外にあった。暗闇に白い雪が舞うような寒い夜 でも，ぬくぬくとした布団からやっとの思いで抜け出し，用を足しに行かなければならなかった。時間にすれば十分もかからな いのだが，なかなか布団を出る決心がつかず最後の最後まで我慢して，やっとのことで起き出していくのが常だった。 </p> <p> 意識があって起き出せればよいのだが，時として夢の中で布団から抜け出して，トイレに駆けつけるときがあった。ホッとした のもつかの間，下半身に広がる冷たい感触で我に返り，ごそごそ起き出して始末をしなければならなかった。 </p> <p> 小学生の時，使いを頼まれ，叔母の家に一人で泊まったことがあった。いつものように夜中に用を足したくなり起き出したのだ が，寝ぼけていた私にはトイレの場所がわからない。家の中を，あっちへ行きこっちへ行きしているうちに，とうとう我慢がで きなくなり，畳の上を水浸しにしてしまった。 </p> <p> それでも眠かった私は，そのまま再び布団にもぐりこみ，知らん顔をして眠り込んでしまった。半分眠りながら，叔父が起き出 してきてあたりを見回していたような記憶が残っている。翌朝，何もなかったように朝飯をいただき，家に戻ったのだが，あの 夜のことは実は今でも鮮明に覚えている。 </p> <p> 今の私，夢の中でトイレに行くことはあっても，そこで用まで足すことはなくなった。だが，ふと気がつくと足がトイレに向い ていることが多い。あの夜の十分間が夢だったら，もっと平和な日々が送れているのかもしれないのだが。 </p> <hr> <!-- 横線。次のエッセイとの区切り --> <h2>温泉</h2> <p> 朝から晩までコンピュータの前に坐っているため，肩や首，腰などが慢性的にこったり痛かったり。そんな私にうれしい味方が 現れた。近くに温泉がオープンしたのである。近くの駅から無料送迎バスがあり，家から30分少しで温泉に浸かることができる ようになった。 </p> <p> 最初に行ったのは７月末の日曜日。友人が「いい，絶対いい」と勧めていたのを思い出し，「今日，温泉に行こうか」と家族み んなで繰り出した。10:00発の送迎バスに乗り，20分弱で到着。「烏の行水コース」という１時間以内のコースを選び温泉へ。前 に行ったことがある東京の温泉と同様，ここのお湯もコーラのような黒い色をしている。でも，とても気持ちいいのだ。 </p> <p> 完全にはまってしまって，１週間に１度は行っている。最近多いのが夜のコース。仕事と食事を終えて，午後７時あるいは８時 のバスに乗り，烏の行水コースで１時間，少し送迎バスで待つけれど2時間半ほどで家に戻って，あとはビールでも飲んで「お休 みなさい」というコースだ。 </p> <p> 銭湯にに比べるとちょっと高めだけど，温泉宿に１回泊まりで行くお金があれば，こちらには10回は行ける。そして，この温泉 は体にとてもいいような気がする。お近くの方，おすすめです。 </p> </body> </html> リスト2-2の中で新しく出てきたタグや属性などを上から ●位置指定̶align="..." 順番に見ていきましょう。新しい要素や主要な要素には 10行目の<h1>タグはすでに説明したように，一番大きな <!-- ... --> で囲まれた「コメント」で説明を付けておきま 見出しを表すものですが，今度の<h1>にはalign属性がつ した。 いています。alignは「揃える」という意味で，右揃え， 左揃え，中央揃え（センタリング）を指定できます。そ <head>...</head>に囲まれたヘッダ部分には特に目新し れぞれ，alignの値として"right", "left", "center"を書きま いものはありません。 す。align属性を省略すると左揃えされます。 7行目には空行（何も書いてない行）があり，ヘッダ部分 <h1 align=center>エッセイ</h1> <!-- 第１レベルの見出 し。中央に配置 --> と本体部分を視覚的に分けています。空行があっても， ブラウザによる表示は影響されませんので，HTMLの コードを見やすくするために，上手に空行を挿入してく align属性は，<h1>から<h6>までや<p>などのほか，これ ださい。 から登場する<hr>など多くのタグでも指定可能です。 -12- Textbook 1 Lesson 2 文章中心のページの作成 12行目には<h1>よりも１レベル小さな見出しである ●リストの入れ子 <h2>...</h2>が使われています。<h1>...</h1>は中央に配 リストの１項目をさらにリストにしたいケースがありま 置しましたが，こちらはレベルがひとつ下がるので， す。たとえば，図2-6のように，順序なしリスト align属性を指定しないで，左揃えで配置しました。 （<ul>...</ul>）の中に順序付きリスト（<ol>...</ol>）を 書きたくなる場合があります。 <h2>目次</h2> <!-- 第２レベルの見出し --> このような場合，次のリスト2-3のように，リストの中に ●リスト̶<ul>...</ul>，<ol>...</ol>，<li>...</li> リストを入れることができます。このように自分の中に 次は目次の部分を見ましょう。 自分を入れることを一般に「入れ子（nesting）」と呼び ます。 13 <ul> 14 <li>蔘鶏湯</a>（サムゲタン，2004年9月）</li> 15 <li>夜の十分間</a>（2004年7月）</li> 16 <li>温泉</a>（2004年6月）</li> 17 </ul> この部分は，リスト（列挙）を表します。ulは unordered list（順序なしリスト，順番がとくに意味を持 たないリスト）の略です。上の図2-3の先頭部分のよう に，番号がつかずに，多くのブラウザでは黒丸が項目の 頭について表示されます。 図2-5 番号付きのリスト。<ol>を使う 次の例のように，<ul>の代わりに<ol>（Ordered List，順 序付きリスト）を使うと，図2-5のように番号がつきま す。リスト2-2の例では目次で用いたので番号を付ける必 要はない（意味がない）ので<ul>を使いましたが，たと えば好きな順に並べるとすれば番号を振ってもよいで しょう。 <ol> <li>蔘鶏湯（サムゲタン，2004年9月）</li> <li>夜の十分間（2004年7月） </li> <li>温泉（2004年6月）</li> </ol> 図2-6 リストの入れ子 リスト2-3 nesting.html リストの入れ子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <!-- essay.html --> <html> <head> <title>リストの入れ子</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <h2>リストの入れ子</h2> <ul> <li>蔘鶏湯（サムゲタン，2004年9月）</li> <li>夜の十分間 （2004年7月） </li> <li>私の好きな歌手 <ol> <li>持田奈美恵（2004年3月）</li> <li>高井健（2004年6月）</li> <li>松ひく子（2004年5月）</li> </ol> </li> </ul> </body> </html> -13- Textbook 1 Lesson 2 文章中心のページの作成 上の例では，列挙される項目を空白文字を使って字下げ （48行目と81行目にも同じように横線を入れていま （indent）して，構造をわかりやすくしています。 す）。 <ul>...<ol>...</ol>...</ul>と，<ul>...</ul>の中に<ol>... <hr> <!-- 横線。目次と本文の区切り --> </ol>が入っている形になっていますので，字下げしてお くと全体の構造がよくわかります。。 横線は，視覚的に区切りを入れるのに便利です。 width="50%"やwidth="100"のように幅を指定したり1， ●横線̶<hr> size= " 4 " のように太さの指定2 もできます。たとえば，リ リスト2-2（図2-3と図2-4の例）を続けてみていきましょ スト2-4のような例を使って自分で試してみてください う。<ul>...</ul>を使った目次の下（19行目）には<hr>タ （図2-7）。 グを使って横線（Horizontal Rule）が引かれています リスト2-4 hr.html いろいろな横線 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <!-- hr.html --> <html> <head> <title>いろいろな横線</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <h2>いろいろな横線</h2> <hr> <hr width="50%"> <hr width="30%"> <hr width="50"> <hr width="30"> <hr width="30%" align="left"> <hr width="30%" align="right"> <hr size="4"> <hr size="8"> <hr size="8" align="left" width="30%"> </body> </html> 図2-7 いろいろな横線 1 widthに数値だけを指定すると，ピクセル単位（画面上の点の数）で長さを指定できます。 2 これもピクセル単位で指定します。 -14- Textbook 1 Lesson 2 文章中心のページの作成 さて，リスト2-2を最後まで見てしまいましょう。19行目 このように，これまでの２つのLessonで登場したタグだ の横線の下にはエッセイが３本並んでいます。ここに けを使っても，文章中心のページならば十分なものがで は，とくに新しいタグはありません。<hr>でエッセイの きます。皆さんも，自作のエッセイや小説，自分の好き 間を区切り，<h2>...</h2>でタイトルを書き，<p>...</p> な作品の翻訳などのページを作ってみてください。 で段落を区切っています。 ●まとめ ■HTMLのタグなど テキスト中心のページを構成するのに必要な主なタグを □ <!DOCTYPE ...>̶いつもHTMLファイルの先頭に入 れる決まり文句。今のところは省略しても大きな問題 はない。 □ <html>...</html>̶HTMLのコードはこのタグに囲ま れる □ <head>...</head>̶ヘッダ部分 □ <title>...</title>̶ヘッダ部分に書かれるタイトル □ <meta ...>̶文字コードなどの指定 □ <body>...</body>̶HTMLの本体部分（ブラウザに表 示される部分） □ <!-- -->̶コメント 見てきました。ここまで出てきたタグを使って自分の文 章をいくつか書いてみてください。 ■HTML文書の「型紙」 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> ＜＜本文＞＞ </body> </html> 以下は<body>...</body>の中に書かれるもの □ □ □ □ □ □ <h1>...</h1>, ..., <h6>...</h6>̶見出し <p>...</p>̶パラグラフ <ul>...</ul>̶番号の付かないリスト <ol>...</ol>̶番号付きのリスト <li>...</li>̶リストの項目 <hr>̶横線（区切り線） ■いろいろなタグで使える属性 □ align="left" | "center" | "right"1 ̶左寄せ，センタリ ング，右寄せ 「a|b|c」のように書いて，「aあるいはbあるいはcのいずれか」であることを表します（「|」はorの意味です）。この例の場合， align="left"，align="center"，align="right"のいずれかの形式が使えることを意味します。コンピューターの世界で広く用いられている 表記法です。 1 -15- Textbook 1 第１回 添削課題 第１回 添削課題 第１回の添削課題です。Lesson 1とLesson 2で学んだ事柄を思い出しながら，添削課題に取り組んでください。 まず，解答を作成してからDHC-オンライン講座のサイト（http://www.dhc-online.com/）に接続して提出してくださ い。接続時に解答に時間をかけすぎると，接続が切れてしまい，再度ログインして始めからやり直す必要があります。 不明な点がある場合は，『コースガイド』やDHC-オンラインの「ヘルプ」を参照してください。問い合わせ先も記載さ れています。 第１問 ポイント確認（5×10=50点） ●それぞれの選択肢から適切なものをひとつ選んでください。 1. ウェブページ用の文書を作るには a. ウェブエディタという専用のプログラム（アプリケーション）が必要である。 b. プログラミング言語を習う必要がある。 c. 通常，英語を使う。 d. 通常，HTMLという言語を使う。 2. 通常のHTMLの文書は a. 携帯電話では表示できない。 b. 携帯電話でしか表示できない。 c. パソコンでも，携帯電話でも表示できる。 d. ワープロソフトでなければ表示できない。 3. HTMLの文書は a. テキストファイルに書かれる。 b. アプリケーション専用の形式を持つファイルに書かれる。 c. Microsoft Wordでしか作成できない。 d. ウェブブラウザで作成するのが普通である。 4. HTMLのタグは a. 小文字で開始タグを書いて，大文字で終了タグを書くのが好ましい。 b. 大文字で書いたときと小文字で書いたときは意味が異なる。 c. すべて小文字で書いておくのが好ましい。 d. 開始タグと終了タグで大文字と小文字をそろえなくてはいけない。 5. HTMLのコメントは a. JavaScriptのプログラムを書くためだけに使われる。 b. ウェブブラウザでは表示されない。 c. // で始まり，その行が終わるまでである。 d. 1024文字以内で書かなくてはいけない。 6. ウェブページを作成するときは a. ページ番号を必ず振るようにするべきである。 b. 画面の大きさは640ピクセル×480ピクセルだと仮定しておけばどんな場合でも大丈夫である。 c. どんな用途に用いるページであってもInternet Explorerだけできちんと表示されればよい。 d. 一般的に，いろいろな環境で見られること想定しておくのが好ましい。 7. <h2>...</h2>は a. 一番大きな見出しを表す。 b. ２番目のレベルの見出しを表す。 c. 必ず太字で表示される。 d. 必ずセンタリング（中央揃え）されて表示される。 -16- Textbook 1 第１回 添削課題 8. タグのalign属性によって a. 対象の文字列などの横方向の並び方を指定する。 b. 文章全体のマージンを指定する。 c. 対象の文字列などの縦方向の並び方を指定する。 d. 画面上に文字が浮き上がるような効果を出すことができる。 9. <li>...</li>は a. 列挙される項目のひとつひとつを囲む。 b. 順序のつかないリストを作るときだけに使う。 c. 番号のついたリストを作るときだけに使う。 d. 列挙される項目のうち，先頭のものを囲む。 10. <hr>タグは a. 点線を書くのに使う。 b. 区切りを表すのに使うことができる。 c. 縦線を書くのに使う。 d. <hr>...</hr>で囲まれた文字列に下線を引くために用いる。 第２問 HTML文書作成穴埋め問題（4×15=60点） 1. 次のHTML文書の欄に適当なタグを入れてください。 解答には，<h2>のように「<」と「>」も記入し てください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>徒然草【a】 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 【b】 【c】 <h1>徒然草 吉田兼好著【d】 【e】序段</h2> <p> つれづれなるまゝに、日くらし、硯にむかひて、心に移りゆくよしなし事を、 そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 【f】 <!-- 区切り線を書く。長さは太さは指定しない --> 【g】 <h2>第一段</h2> <p> いでや、この世に生れては、願はしかるべき事こそ多かめれ。御門の御位は、いともかしこし。 竹の園生の、末葉まで人間の種ならぬぞ、やんごとなき。一の人の御有様はさらなり、たゞ人も、 舎人など賜はるきはは、ゆゝしと見ゆ。その子・孫までは、はふれにたれど、なほなまめかし。 それより下つかたは、ほどにつけつゝ、時にあひ、したり顔なるも、みづからはいみじと思ふらめど、 いとくちをし。 </p> <p> 法師ばかりうらやましからぬものはあらじ。 「人には心の端のやうに思はるゝよ」と清少納言が書けるも、げにさることぞかし。 勢まうに、のゝしりたるにつけて、いみじとは見えず、増賀聖の言ひけんやうに、 名聞ぐるしく、佛の御教へにたがふらんとぞ覺ゆる。 ひたふるの世捨人は、なかなかあらまほしきかたもありなん。 </p> </body> 【h】 -17- Textbook 1 第１回 添削課題 2. ブラウザで読み込むと図2-8のように表示されるページを作ります。 図2-8 目的のページ 次のHTML文書のに適当なタグを入れて，完成させてください。解答には，<h2>のように「<」と「>」 も記入してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>私の好きな作家</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <h1>私の好きな作家</h1> <p>私の好きな作家をリストします。【i】 【j】 <li>夏目漱石【k】 <li>林鴎外【k】 <li>吉本リンゴ【k】 【l】 <p>強いて順位をつけるとすれば次のような順になるでしょうか。</p> 【m】 <li>吉本リンゴ 【k】 <li>夏目漱石【k】 <li>林鴎外【k】 【n】 【o】 </html> -18- Textbook 1 第１回 添削課題 第３問 コーディング（90点） Lesson 1とLesson 2に登場したタグだけを使って，図2-9のようなページを作ってください。 図2-9 第３問 参考までに，文字（テキスト）の部分を下にあげておきます。空のファイルに下のテキストをコピー，ペースト（貼り付 け）し，適当なタグを入れ，不要な文字列を削除して完成させてください。できるだけわかりやすく記述するようにして ください。また，必ず，ブラウザで図2-9のように表示されることを確認してください。 リポート課題 第２回のリポートの課題は次のとおりである。いずれも簡潔な表現を用いて，わかりやすく説明すること。 1. パソコン業界の再編 調査会社Ｘの予測よると，現在トップ10にランクされているパソコンメーカのうち少なくとも３社が今後10年以内にパソコン事業から撤 退するだろうとのことである。この予測が発表されてから１週間もしないうちに老舗コンピューターメーカーＹ社のパソコン部門売却が発 表された。しかも，相手は新興の中国企業である。 この事実からＸ社とＹ社について，次のいずれの関係が成り立つかを推理し，その理由を述べよ。 1. Ｘ社とＹ社には資本関係がある 2. Ｘ社やＹ社の子会社である 3. Ｘ社にはＹ社から何らかの情報が流れている 4. Ｘ社はＹ社と敵対している 5. Ｘ社もＹ社も中国に支社がある 2. 携帯型ミュージックプレイヤーの今後 調査会社Ａの報告書によると，現在携帯型ミュージックプレーヤのトップ5にランクされているメーカーは次のとおりである。 ● パイナップル ● LINO ● 西芝 ● ニソー ● X-Eight それぞれのメーカーの携帯型ミュージックプレーヤ製品をひとつ以上あげ，それぞれについて，特徴を述べよ。さらに，今後どのメーカー がシェアを伸ばすことになるか予測しその理由を述べよ。 -19- Textbook 1 第１回 翻訳添削課題（申込者のみ） 第１回 翻訳添削課題 翻訳添削を申し込まれた方のための第１回提出の添削課題です。Lesson 1とLesson 2で学んだ用語や概念を思い出し て，原文の内容をきちんと反映した自然な日本語に翻訳してください。 Microsoft Wordなどのワープロやエディタなどで訳文を作成しておいてから，DHC-オンライン講座のサイト（http:// www.dhc-online.com/）を開いて提出してください。ログイン後最初に表示される「現在受講中のコース」のページで 「文系の人にもわかる！ HTML入門【オプション】翻訳添削」の「受講状況」を選択して受講状況を表示し，「提出」 ボタンをクリックして提出してください。わからない点がある場合は，『コースガイド』やDHC-オンライン講座の「ヘ ルプ」を参照してください。問い合わせ先も記載されています。 CAUTION! この課題は，翻訳添削を申し込んだ方専用です（それ以外の方は提出できません）。なお，講座の受講開始後（受講 終了後でも可）に翻訳添削を追加で申し込むことも可能です。『コースガイド』のお問い合わせ先にお申し込みくだ さい。 この講座の申し込みと同時に翻訳添削を申し込まれた場合は，提出期限は通常の課題の期限と同じです（必ずしも同時に 提出する必要はありません）。あとから翻訳添削を追加で申し込まれた場合は，申し込まれた時点から計算されます。 翻訳添削課題 下記の英文を翻訳して提出してください。なお，第１回の課題はかなり短くしてありますので，何度も見直して「完璧」 と思える訳文ができたところで提出してください。 <ul> <li>China</li> <li>India</li> <li>Canada</li> </ul> What is Tiny HTML? A stripped-down version of HTML designed for small information devices has been released. Tiny HTML (tHTML) defines a subset of HTML language. It is designed for displaying Web pages on small screens, including those on mobile phones and PDAs (Personal Digital Assistants). In tHTML, some HTML tags such as table related tags (<table>...</table>, <tr>...</tr>, etc.), frames (<frame>...</frame>), multiple fonts (<font>...</font>), etc. are not supported, since it is not realistic to display documents composed of tables, frames, and/or multiple fonts characters. The above code will display an unordered list like the following, on a mobile phone as well as on a PC display. ・China ・India ・Canada You can use <img> tags to display image files, but you have to remember that there are many mobile phones that cannot display picture images. Therefore it is very important to add the "alt=" attribute to the <img> tag so that the explanation of the image is displayed in case the device cannot display the image. As the grammar of the tHTML is the same as usual HTML, you can begin writing tHTML pages if you know how to write HTML pages. Look at the following example: -20- DHC-オンライン講座 文系の人にもわかる！ HTML入門 Textbook 1 第１版（1.03） 印刷 2005年4月20日 著者 武舎広幸＋河村政雄 編集 マーリンアームズ株式会社 http://www.marlin-arms.co.jp/ 発行人 吉田 嘉明 発行 株式会社DHC 教育事業部 〒106-0041 東京都港区麻布台1-5-7 TEL 03-3586-5701 FAX 03-3586-6925 http://www2.edu.dhc.co.jp/ © 2005 DHC CORPORATION & Marlin Arms Corporation この書類の内容の一部あるいは全部を著作権法の定める範囲を超え無断で複写，複製，転載すること を禁じます。 このファイルあるいはそれを印刷したものを他人に譲渡，販売，貸与することを禁じます。 バックアップ目的でのみ，コンピューターで読み取り可能な形式のこのファイルのコピーを一部作成 することができます。 この書類に掲載されているすべての会社名や製品名などは，一般に各社の商標または登録商標です。 この書類では™マーク，©マークおよび®マークは省略しています。
© Copyright 2024 ExpyDoc
