ＩＣＴメディア編集Ⅱ 2025年11月14日
作成練習２（演習）
簡単なHTML文法によるＷｅｂページ作成（２）
まずは，以下の画像をディスクトップ上に保存する．
(1.jpg)
タグ（命令）を用いてＷｅｂページをテキスト入力し，作成しましょう．
（テキストエディタ（文字編集ソフト）として，一般的な「メモ帳」（スタートメニュー→プログラム→アクセサリの中）を使いましょう．「秀丸」というソフトもテキストエディタです．）
以下のテキスト（文字）を入力（コピーと張り付けを用いて入力）して、
test2.html というファイル名で保存し、そのファイルをWebブラウザ（Edge, Safariなど）で開いてみてみよう。
【注意】メモ帳では、保存時に「保存」ボタンの左横に、エンコード「UTF-8」などと書かれた部分があります。これは、ブラウザで表示するときに、日本語などとしてあらわすかを決めるものですが、「UTF-8」のままで、明治大学のサーバにアップロードすると、文字化けを起こすことがあります。そのため、これを「ANSIと必ず、変更して、保存してください。
￣￣￣￣￣￣￣￣ これ以降
<HTML>
<HEAD>
<TITLE>Ｗｅｂページの作成練習（２）</TITLE>
</HEAD>
<BODY BGCOLOR ="#00FF00">
<H1>これはＷｅｂページ作成を練習するページ（２）です</H1>
<HR SIZE=10>
<P>
<FONT SIZE="4" COLOR="Red">これがFONT=4の大きさで，赤色の文字の表示</FONT><BR>
<P>
<FONT SIZE="3" COLOR="#0000FF"><I>これがFONT=3の大きさで，青の斜体文字の表示</I></FONT><BR>
<P>
画像を以下に貼り付けます．<P>
<IMG SRC="1.jpg" WIDTH="60" HEIGHT="30">
<P>
<HR SIZE=5>
明治大学へのリンク付けも以下のように設定できます．<BR>
<A HREF="http://www.meiji.ac.jp">明治大学のホームページへ</A> <BR>
</BODY>
</HTML>
￣￣￣￣￣￣￣￣ ここまで
以下のようなＷｅｂページとなるはずです．
この中のいくつかのタグを解説していきます．
上記のtest2.htmlのファイルにタグを変更もしくは追加し，どのような表示になるか試していきましょう．
タグの解説（２） （HTML文法の命令）
・以下のタグを作成練習で使ったファイルにテキスト入力して付加していき，どのような表示されるかを確認していきましょう．
1. 背景の色を変更したいとき： <BODY BGCOLOR="Olive"> … </BODY> とする。色の指定は、Black, Olive, Teal, Red, Blue, Maroon,
Navy, Gray, Lime, Fchsia, White, Green, Purple,
Silver, Yellow, Aqua などが直接指定できる。そのほかに、色の３原色を１６進数で #RRGGBB と表現しても良い。
例）<BODY BGCOLOR="Olive">…</BODY>
<BODY BGCOLOR="#FF00FF">…</BODY>
2. 文字の色を指定したいとき： <FONT COLOR="Olive"> … </FONT> とする。色の指定は、Black, Olive, Teal, Red, Blue, Maroon,
Navy, Gray, Lime, Fchsia, White, Green, Purple,
Silver, Yellow, Aqua などが直接指定できる。そのほかに、色の３原色を１６進数で #RRGGBB と表現しても良い。
例）<FONT COLOR="Red">…</FONT>
<FONT COLOR="#FF00FF">…</FONT>
3. フォントを変更したいとき：書体として、イタリック、ボールド、強調などが可能である。
例）イタリック：<I>…</I>
ボールド：<B>…</B>
強調：<STRONG>…</STRONG>
4. 改行したいとき：<BR>、段落の切り換え：<P>
5. 水平線を引きたい場合：<HR>
例）水平線：<HR>
サイズを変更する場合：<HR SIZE="1"> , <HR
SIZE=20>
( 色を変更する場合：
<HR COLOR="Blue"> , <HR
COLOR="#000000">
: Internet Explorer の機能)
6. 画像を貼り込みたい場合：<IMG SRC="ファイル名"> 画像のファイルは、GIF形式、JPEG形式である必要がある。
例）<IMG SRC="1.jpg">
大きさを変更したい場合：
<IMG SRC="1.jpg"
WIDTH="40" HEIGHT="20">
位置を指定したい場合：
<IMG SRC="1.jpg"
WIDTH="40" HEIGHT="20" ALIGN="RIGHT">
(1.jpg)
7. リンク付けしたい場合：リンク付けとは、アンダーラインの引いた部分をクリックすることによって、指定したファイルに飛んでいくための仕掛けである。<A HREF="ファイル名">リンクを張りたい部分</A> このファイル名の部分には、???.htmlというファイル名を指定しても良いし、http://www.meiji.ac.jpのようにURLを指定して他のホームページに飛ぶようにすることもできる。
例）<A HREF="test1.html">テスト１のページへ</A> <BR>
<A HREF="http://www.meiji.ac.jp">明治大学のホームページへ</A> <BR>
トリガーとして画像を指定したい場合：
<A
HREF="http://www.meiji.ac.jp"><IMG
SRC="1.jpg"></A> <BR>
電子メールを送るアドレスを指定する場合には、mailto:電子メールアドレスを用います。
<A HREF="mailto: shin.kato＠aist.go.jp">加藤晋へ電子メール</A> <BR>
ブラウザがmailto URLをサポートしてしれば、メール送信のためのウィンドウが表示されます。
加藤のページへ | ＩＣＴメディア編集Ⅱ | 作成練習（３）：タグの解説（３）