20251114h

ＩＣＴメディア編集Ⅱ　2025年11月14日

作成練習３（演習）

簡単なHTML文法によるＷｅｂページ作成

まずは，以下の画像をディスクトップ上に保存する．

　neko3.jpg

タグ（命令）を用いてＷｅｂページをテキスト入力し，作成しましょう．

（テキストエディタ（文字編集ソフト）として，一般的な「メモ帳」（スタートメニュー→プログラム→アクセサリの中）を使いましょう．「秀丸」というソフトもテキストエディタです．）

以下のテキスト（文字）を入力（コピーと張り付けを用いて入力）して、 test3.html　というファイル名で保存し、そのファイルをWebブラウザ（EdgeやSafariなど）で開いてみてみよう。

【注意】メモ帳では、保存時に「保存」ボタンの左横に、エンコード「UTF-8」などと書かれた部分があります。これは、ブラウザで表示するときに、日本語などとしてあらわすかを決めるものですが、「UTF-8」のままで、明治大学のサーバにアップロードすると、文字化けを起こすことがあります。そのため、これを「ANSIと必ず、変更して、保存してください。

￣￣￣￣￣￣￣￣　これ以降

<HTML>

<HEAD>

<TITLE>Ｗｅｂページの作成練習（３）</TITLE>

</HEAD>

<H1>これはＷｅｂページ作成を練習するページ（３）です</H1>

<P>

<H2 ALIGN=LEFT>左寄せの見出し</H2>

<H2 ALIGN=CENTER>中央寄せの見出し</H2>

<H2 ALIGN=RIGHT>右寄せの見出し</H2>

<P ALIGN=LEFT>左寄せの段落</P>

<P ALIGN=CENTER>中央寄せの段落</P>

<P ALIGN=RIGHT>右寄せの段落</P>

<CENTER>中央寄せのテキスト</CENTER>

<U><CENTER>中央寄せのテキスト</CENTER></U>

<P>

<UL>

<LI> １つめの箇条書き

<LI> ２つめの箇条書き

<LI> ３つめの箇条書き

</UL>

<P>

<OL>

<LI> １つめの箇条書き

<LI> ２つめの箇条書き

<LI> ３つめの箇条書き

</OL>

</FONT>

（罫線ありの表）

<CAPTION>Title</CAPTION>

</TABLE>

（罫線なしの表）

<TABLE>

</TABLE>

（表の内容にリンク先を指定する場合）

<TR><TH>リンク先の指定</TH></TR>

</TABLE>

<P>

<MARQUEE>ここがスクロールする文字</MARQUEE>

<P>

<BLINK>ここが点滅する文字</BLINK>

<P>

</BODY>

</HTML>

　￣￣￣￣￣￣￣￣　ここまで

以下のようなＷｅｂページとなるはずです．

説明: gamen

この中のいくつかのタグを解説していきます．

上記のtest3.htmlのファイルにタグを変更もしくは追加し，どのような表示になるか試していきましょう．

タグの解説（３）　（HTML文法の命令）

1. 本文の基本文字色を設定する：

<BODY TEXT="#0000FF"> … </BODY>

2. ページの背景に画像（画像ファイル）を使う：

ただし画像はページ全体に敷き詰めるように表示されるので，通常テクスチャ（横や縦に並べることで模様が連続するものを使用することも可能である．

<BODY BACKGROUND="ファイルのディレクトリ／画像のファイル名"> …… </BODY>

例）<BODY BACKGROUND="g1.gif">

　　<BODY BACKGROUND="1.jpg">

　　<BODY BACKGROUND="neko3.jpg" TEXT="#FFFFFF">

テクスチャ（織地，表面の感じ）の例）

　g1.gif

　g2.gif

　neko3.jpg

3. 見出しの位置を”左寄せ、中央寄せ、右寄せ”したい場合：

<Hy ALIGN=LEFT | CENTER | RIGHT>

例）<H2 ALIGN=LEFT>左寄せの見出し</H2>

　　<H2 ALIGN=CENTER>中央寄せの見出し</H2>

　　<H2 ALIGN=RIGHT>右寄せの見出し</H2>

4. 段落の位置を”左寄せ、中央寄せ、右寄せ”したい場合：

<P ALIGN=LEFT | CENTER | RIGHT>

例）<P ALIGN=LEFT>左寄せの段落</P>

　　<P ALIGN=CENTER>中央寄せの段落</P>

　　<P ALIGN=RIGHT>右寄せの段落</P>

5. 空行を入れずにテキストだけを”中央寄せ”したい場合：

<CENTER> …</CENTER>

例）<CENTER>中央寄せのテキスト</CENTER>

6. 文字に下線を引く：

<U> … </U>

7. 注意：タグは入れ子にして使う．（タグをネストする）

<U><CENTER>中央寄せのテキスト</CENTER></U>

8. 箇条書きを指定したい場合：

<UL> もしくは <OL>

例１）点をはじめに付ける場合

<UL>

<LI> １つめの箇条書き

<LI> ２つめの箇条書き

<LI> ３つめの箇条書き

</UL>

例２）番号を付ける場合

<OL>

<LI> １つめの箇条書き

<LI> ２つめの箇条書き

<LI> ３つめの箇条書き

</OL>

9. テーブル（表）を作成したいとき：

<TABLE></TABLE>でくくられたタグに表を作成するタグを入れていく。罫線を引く場合には<TABLE BORDER=y>で罫線の太さ（y）を指定する。タイトルは<CAPTION></CAPTION>でくくる。各行の内容を<TR></TR>の間に書いていく。各セル（表の１つの枠）は<TD></TD>で区切ることになる。見出しは、<TD></TD>の代わりに、<TH></TH>を使用すると太めの文字で表示される。

例）

（罫線ありの表）

<TABLE BORDER=5>

<CAPTION>Title</CAPTION>

<TR><TH>Head1</TH><TH>Head2</TH></TR>

<TR><TD>Data1</TD><TD>Data1</TD></TR>

<TR><TD>Data2</TD><TD>Data2</TD></TR>

<TR><TD>Data3</TD><TD>Data3</TD></TR>

</TABLE>

（罫線なしの表）

<TABLE>

<TR><TH>Head1</TH><TH>Head2</TH></TR>

<TR><TD>Data1</TD><TD>Data1</TD></TR>

<TR><TD>Data2</TD><TD>Data2</TD></TR>

<TR><TD>Data3</TD><TD>Data3</TD></TR>

</TABLE>

（表の内容にリンク先を指定する場合）

<TABLE BORDER=1>

<CAPTION>リンク</CAPTION>

<TR><TH>リンク先の指定</TH></TR>

<TR><TD ALIGN="CENTER"><A HREF="http://www.meiji.ac.jp">明治大学</A></TD></TR>

<TR><TD ALIGN="RIGHT"><A HREF="test1.html">テスト１</A></TD></TR>

</TABLE>

10. 文字をスクロールさせたいとき(Edgeの機能、Mozilla Thunderbirdでは可能)：　

<MARQUEE> … </MARQUEE>　とする。Edge（旧IE）などの機能であるため、Ｗｅｂページを見る側がブラウザとしてEdgeなどの対応しているブラウザソフトを用いていないと、効果は得られない。

位置に関する属性

　ALIGN="top、middle、bottom"：マーキーの位置

　HEIGHT="ピクセル数または％"：マーキーの高さ

　WIDTH="ピクセル数または％"：マーキーの幅

　HSPACE="ピクセル数"：マーキーの左右の余白

　VSPACE="ピクセル数"：マーキーの上下の余白

動きに関する属性

　BEHAVIOR="scroll、slide、alternate"：マーキーの動き方

　DIRECTION="left、right"：スクロール方向

回数と時間に関する属性

　LOOP="回数、-1、infinite"：マーキーの回数

　SCROLLDELAY="ミリ秒数"：再描画までの時間

　SCROLLAMOUNT="ピクセル数"：再描画までの距離

色に関する属性

　BGCOLOR="#RRGGBB、colorname"：マーキーの背景色

例）<MARQUEE>ここがスクロールする文字</MARQUEE>

　　<MARQUEE ALIGN="top" HEIGHT="20" WIDTH="80%" DIRECTION="right" LOOP="10" SCROLLDELAY="100" SCROLLAMOUNT="5" BGCOLOR="#80FFFF">このようなスクロール表示ができます。</MARQUEE>

11. 文字を点滅させたいとき(Mozilla Thunderbird (旧Netscape Navigator)の機能)：　

<BLINK> … </BLINK>　とする。Netscape Navigatorの機能であるため、Ｗｅｂページを見る側がブラウザとしてMozilla Thunderbirdなどの対応しているブラウザソフトを用いていないと、効果は得られない。

例）<BLINK>ここが点滅する文字</BLINK>

12. ハイパーリンクの色を指定する：

<BODY LINK="#0000FF"> … </BODY>

リンク済みのハイパーテキストの色を指定する．<BODY VLINK="#0000FF"> … </BODY>

リンク瞬間のハイパーテキストの色を指定する．<BODY ALINK="#0000FF"> … </BODY>

加藤のページへ　|　ＩＣＴメディア編集Ⅱ　|　Ｗｅｂページ開設練習とファイル転送（アップロード：ページ更新）について