HTML文章作成

(1)

HTML 文章作成

Web ページは、「HTML(Hyper Text Markup Language)」という言語を使って欠かれた「HTML」ファイルでできています。ここでは簡単な HTML 文章を実際につくっていきます。参考文献：エクスナレッジ「HTML とスタイルシートによる Web サイト作成術」１．簡単なホームページをつくりましょう。 1-1. html 用フォルダの作成・D:¥home¥users¥Administrator の中に“public_html”という名前のフォルダを作成する。 1-2. html ファイルの作成・ TeraPad でファイルを新規作成（デスクトップ上の「TeraPad」をダブルクリックする）・枠線で囲まれた内容を記述する。・終わったら保存する。保存先は「D:¥home¥users¥Administrator ¥public_html」で、ファイル名は“index.html”とする。・ファイルの確認をする。ただし、現在の Windows の設定では拡張子を省略してファイルを表示しています。Web ページを正しく作成するために拡張子を含んだファイル名を表記する必要があります。＜拡張子を表示する方法＞ (1) フォルダウインドウのメニューバーの「ツール」から「フォルダオプション」を開く。 (2) 「表示」タブを選択する。 (3) 「登録されている拡張子は表示しない」という項目のチェックをはずす。「OK」ボタンを押す。 [基本的なタグ] <html> </html>：このファイルが html ファイルであることを意味します。 <head> </head>：HTML 文章に関する情報を指定する部分です。 <title>*** </title> ：***に、ページタイトルを書きます。この内容がブラウザの上でに表示され、“お気に入り（ブックマーク）”の名前等に使用されます。

(2)

に、ブラウザのウインドウ内に表示される内容を記述します。<body>タグは、一つのHTML ファイルに一度のみ、<html>と</html>の間に記述します。 <br>：改行（ファイルの中で改行しても、表示の際には改行されません。） <hr>：水平線 <pre> </pre>：この間に記述した内容は、改行やスペースを含めてそのまま表示される。 <b> </b>：この間に記述した内容は太字で表示される。 <a href=”URL”>***</a>：”URL”へのリンクの記述。表示されるのは***の部分。 <h1> </h1>：文字の大きさの指定。<h1>から<h6>まであり、数字が小さいほど大きくなります。 <p> </p>：段落であることを示すタグです。長い文章を段落わけするごとに <p>～</p>で囲むと、それぞれの別の段落という扱いになります。 <html> <head>

<title>Your Name’s Portal</title> </head>

<body>

The Portal by Your Name. <br> <hr>

<pre>

<b>[検索エンジン]</b>

<a href=”http://www.google.co.jp/”>Googleへ</a> <a href=”http://www.yahoo.co.jp/”>Yahooへ</a> <b>[大学]</b>

<a href=” http://www.tohoku-gakuin.ac.jp/”>東北学院へ</a> </pre>

</body> </html>

1-3. ブラウザを使ってページを確認

(3)

1-4. Mozilla Firefox のデフォルトページに指定する。 a) 一度、Mozilla Firefox を閉じます。

b) 作成した index.html をクリックして(Mozilla Firefox で)開きます。

c) 「ツール」→「オプション」を選択する。「オプション」ウィンドウが開く。左側フレームにある「全般」と書かれたボタンをクリックする。 d) 右側のフレーム内の「ホームページ」枠内の「現在のページを使用」ボタンをクリックする。「OK」ボタンをクリックする。 e) 「ファイル」→「終了」を選択して、Mozilla Firefox を終了する f) 確認のため、もう一度 Mozilla Firefox を起動する。自分のページが表示されればOK です。（デスクトップ上の「Mozilla Firefox」をボタンをダブルクリックする。または、「スタート」メニューから「Mozilla Firefox」をクリックする。） g) Mozilla Firefox は開いたままで次に進んでください。２．内容を修正しましょう。 TeraPad での HTML 文章の入力・保存・更新（再読み込み） a) 起動：[スタート]→[すべてのプログラム]→[TeraPad]→[TeraPad]を選択 b) 「ファイル」→「開く」で「index.html」を選択します。 c) 内容を変更します。

<a href=” http://www.tohoku-gakuin.ac.jp/”>東北学院大学</a>の次の行に「<a href=”http://www.cs.tohoku-gakuin.ac.jp/gakubu4/html/index.html”>教養学部へ</a>」と書いてください。

d) HTML 文章の保存：メニューバーの[ファイル]→[上書き保存]を選択する。 e) Mozilla Firefox の再読み込みします。（左右に矢印があるボタンをクリック） f) Windows を一旦シャットダウンし、Linux を立ち上げましょう。Mozilla

Firefox を立ち上げて、「index.html」を開きましょう。

g) このページを現在のホームページとしましょう（Windows と同様な方法）。 h) Mozilla Firefox と「index.html」を閉じましょう。

i) Linux をシャットダウンして、Windowd に戻りましょう。

３．改行・スペースはどのように表示されるの？

(4)

a) 起動：[スタート]→[すべてのプログラム]→[TeraPad]→[TeraPad]を選択 b) 枠線で囲まれた内容を記述する。 <html> <head> <title> タイトル </title> </head> <body> <p > 本文 </p> </body> </html> c) 「test.html」という名前で保存する。

d) Mozilla Firefox で「test.html」を開いて、内容を確認する。 →タグの前後で改行しても、表示結果は変わりません。 e) test.html を以下のように変更してみよう。 <html> <head> <title>かぐや姫</title> </head> <body> <p>たけとりのおじいさんがきらきらひかる竹を見つけました。</p> <p > たけとりのおじいさんがきらきらひかる竹を見つけました。</p> </body> </html>

(5)

f) 「test.html」を保存して、Mozilla Firefox で開いてみよう。 →本文中の改行はスペースに置き換えられる。 g) test.html を以下のように変更してみよう。 <html> <head> <title>全角/半角スペースをどう表示されるか</title> </head> <body> <p>[ ]←半角スペース 1 個の空き</p> <p>[ ]←半角スペース 4 個の空き（半角スペースに 1 個に置き換えられる） </p> <p>[ ]←全角スペース 1 個の空き</p> <p>[ ]←全角スペース 4 個の空き</p>（そのまま表示される） </body> </html> h) 「test.html」を保存して、Mozilla Firefox で開いてみよう。 i) test.html を以下のように変更してみよう。 <html> <head> <title>未対応なタグ</title> </head> <body> <p> <ruby>桃太郎<rt>ももたろう</ruby> </p> </body> </html>

(6)

ブラウザが未対応のタグ(<ruby>,<rt>)の場合、ブラウザは無視して表示します。 k) test.html を以下のように変更してみよう。 <html> <head> <title>タイトル</title> </head> <body> <p>本文</p> <--本文終わり-->  </body> </html> l) 「test.html」を保存して、Mozilla Firefox で開いてみよう。 →ブラウザに表示されないメモを入れるときは、で囲む。４． HTML の基本を復習しましょう ○ 開始タグと終了タグで、意味を指定する範囲を決める。 HTML では、「ここからここまでが HTML 文章である」といった指定を「<html>」などのタグで行います。指定する範囲の前後に「開始タグ」と「終了タグ」を記述すれば、指定は完了です。ここで、開始タグから終了タグまでの範囲を「要素」と呼び、タグで囲まれた範囲を「内容」と呼びます。例えば、「<title>第一章</title>」は全体が「title 要素」、「第一章」の部分が「title 要素の内容」にあたります。 ○ タグとタグは入れ子構造になるよう記述する。 HTML では、開始タグ、終了タグを入れ子にするのがルールです。例えば「<html>~<head> 」と２つの開始タグを記述したら、終了タグは「</head>~</html>」の順で記述します。 ○ <html><head><body>が HTML 文章の基本的な構造を作る。

(7)

<html>,<head>,<body>の３つのタグは、HTML ファイルの最も基本的な構造を作っています。<head>~</head> に HTML 文章そのものの情報を、 <body>~</body>に HTML 文章の具体的な内容をそれぞれ記述し、これら２つのタグは<html>~</html>の範囲に記述する、という構造です。 ○ 属性と属性値「index.html」内の「<a href=”http://www.cs.tohoku-gakuin.ac.jp”>」という部分は、「a」という要素名と、それに関する細かな指定から成り立っています。このようにタグの中に書かれる細かい指定は「属性」と「属性値」といいます。 [href]が属性で、「http://www.cs.tohoku-gakuin.ac.jp」が属性値です。属性値は「”」(ダブルコーテーション)で繰り返します。 ○ 注意：<p>は「前後に一行あけるタグ」ではありません。一般的なブラウザは、<p>~</p>タグの前後に一行あけて表示されます。このことから「<p>タグは前後に一行空けるタグである」と誤解されがちですが、<p> タグはあくまで「段落を定義するタグ」です。一行空けて表示されるのは、ブラウザが段落を段落らしく表示しようとした結果です。段落の前後に行があかないようにするにはスタイルシートのところで記述します。５．画像をリンクし、その画像の大きさを変えてみよう a) ftp.cs.tohoku-gakuin.ac.jpの/TG-Local/NotePC/NotePC2005/Htmlフォルダから「2005」フォルダを「D:¥users¥Administrator¥Public_html」フォルダにダウンロードする。 b) 「 kyoyo_text.txt 」と「 izumicampus.jpg 」を一つ上のフォルダ (D:¥ users¥Administrator¥Public_html)にコピーする。 c) 「kyoyo_text.txt」を TeraPad で開く。 d) 以下のように変更して、「名前を付けて保存する」で、ファイル名は「test1.html」とする。

e) Mozila Firefox で「test1.html」を開く。

f) TeraPad 上で図（ファイル名：izumicampus.jpg）で読み込む。「<h1>教養学部へようこそ</h1>」の次の行に以下を挿入する。 →<img src=”izumicampus.jpg”>

g) Mozilla Firefox で再読み込みする。図の上にマウスを移動しても何も変化がないことを確認する。

(8)

i) Mozilla Firefox で再読み込みする。図の上にマウスを移動した結果をみる。 j) 「 <img src=”izumicampus.jpg” alt=” 泉キャンパス ”> 」を「 <img src=”izumicampus.jpg” alt=”泉キャンパス” width=”200” height=”175”>」に変更する。 k) Mozilla Firefox で再読み込みする。 <html> <head> <title>教養学部</title> </head> <body> <h1>教養学部へようこそ</h1> <h2>教養学部の理念</h2> <p> 発足して 16 年。教養学部はまだ若芽のような瑞々しい学部です。この学部が 2005 年に大きな飛躍を遂げます。専攻に昇格する人間科学科言語文化学科情報科学科に加え、新たに地域構想学科を設置します。少人数教育によるきめ細かい指導を通して培ったこれまでの研究・教育の成果を、「地域」という具体的な場で検証し、種々の連携を模索しようと思います。</p> <p> 教養学部は学科間の敷居も低く、諸学問を交流させて、学びの視野を広げる機会が豊富です。これまで以上に多彩な学問群に出会い、豊かで深い教養の果実を実らせてもらいたいと願っています。</p> <h2>教養学部の構成</h2> <p>情報科学科<br> 言語文化学科<br> 人間科学科<br> 地域構想学科<br></p> <hr> </body> </html>

(9)

６．箇条書きの作り方 a) test1.html を以下のように変更してみよう。「情報科学科」から「地域構想学科」までを以下のように変更する。 b) 「test1.html」を保存して、Mozilla Firefox で開いてみよう。 <ol> </ol>：番号入りのリストを定義します。 <li> </li>：リストの各行を定義します。 c) <ol>を<ul>にかえてみよう。 <html> <head> <title>教養学部</title> </head> <body> <h1>教養学部へようこそ</h1>

<img src=”izumicampus.jpg” alt=”泉キャンパス” > <h2>教養学部の理念</h2> <p> 発足して 16 年。教養学部はまだ若芽のような瑞々しい学部です。この学部が 2005 年に大きな飛躍を遂げます。専攻に昇格する人間科学科言語文化学科情報科学科に加え、新たに地域構想学科を設置します。少人数教育によるきめ細かい指導を通して培ったこれまでの研究・教育の成果を、「地域」という具体的な場で検証し、種々の連携を模索しようと思います。</p> <p> 教養学部は学科間の敷居も低く、諸学問を交流させて、学びの視野を広げる機会が豊富です。これまで以上に多彩な学問群に出会い、豊かで深い教養の果実を実らせてもらいたいと願っています。</p> <h2>教養学部の構成</h2> <ol> <li>情報科学科</li> <li>言語文化学科</li> <li>人間科学科</li> <li>地域構想学科</li> </ol> <hr> </body> </html>

(10)

7. 「index.html」に「お気に入り」の Web ページを追加していみよう。例．（自分なりにアレンジしてください）

<title>Your Name’s Portal</title> </head>

<body>

The Portal by Your Name. <br> <hr>

<pre>

<b>[検索エンジン]</b>

<a href=”http://www.google.co.jp/”>Googleへ</a> <a href=”http://www.yahoo.co.jp/”>Yahooへ</a> <b>[大学]</b>

<a href=” http://www.tohoku-gakuin.ac.jp/”>東北学院へ</a>

<a href=”http://www.cs.tohoku-gakuin.ac.jp/gakubu4/html/index.html”> 教養学部へ</a>

<b>[お気に入り]</b>

<a href=”http://www.asahi.com/”>朝日新聞へ</a> </pre>

</body> </html>

！！ここでひとまず終了！！次はスタイルシートを学びます。