HTML 学習と課題作成の手順

1. Google検索などやオンライン辞書などを用いて「HTML」について調べよ．少なくとも3つの説明を調べよ．
2. いくつかの参照用ウェブサイトの冒頭のセクションを読み，HTMLの概要を理解せよ．
3. ★特にタグ，（開始タグ内に記述される）属性，アンカーといった概念を理解すること．
4. HTML課題用のファイルを保存するためのフォルダを各自のUSBメモリなどの保存領域内に作っておく（複数のファイルを扱うので，散逸を防ぐため。また，フォルダを提出してもらいます．）．
5. サンプルフォルダ「HTML_sample2017」をYドライブよりダウンロード．
6. メモ帳を起動し，サンプルファイルを読み込んで，「名前を付けて保存」でファイル名を「（学籍番号）HTML課題（氏名）.htm」（アルファベット・数字はすべて半角，カッコは付けない）として各保存領域内のHMTL課題用フォルダにセーブ．

- 1. 【注意1】テキストエディタでファイルをセーブする際，「ファイル名」のところで拡張子を省略すると，拡張子「.txt」が自動的に付加されてしまうので十分注意せよ．メモ帳の場合は拡張子「.htm」を含むファイル名を記入して「保存」をクリックすればOK．
  2. 【注意2】拡張子「 .html 」もHTMLファイルを表しWebページのソースとして認識されますが，Windowsの初期設定では拡張子が表示されないため，「*.htm」というファイルと「*.html」というファイルが混在すると非常にやっかいです（たとえば「test.htm」と「test.html」は通常の表示では区別がつかない）．混乱を避けるために，この課題ではHTMLファイルの拡張子をすべて「.htm」で統一すること．
  3. ■メモ帳で「test.htm」と「test.html」を作成（区別が付くように内容は適当に変える）して「ドキュメント」など適当なフォルダに保存し，どのように表示されるか観察せよ．
  4. 【注意3】HTMLファイルの保存は常にエディタ上で行なう．Internet Explorer上で保存すると表示情報を元に同名のHTMLファイルが自動生成されるが，これは元の（テキストエディタで作った）ソースファイルとは異なるものであり，リンク情報などが変更されてしまう．
  5. ■試しにInternetExplorerでファイルを保存し（名前は適当でよい），生成されたHTMLファイルと元のソースファイル（「表示」→「ソース」をクリックして開く）を比較してみよ．
  6. 【注意4】全角文字を含むファイル名はインターネット上でアクセスできないことがあるので，ファイル名は必ず半角英数字のみとする．

1. 以下に示す学習項目（カッコ内は関連するタグとその属性）を，参照用ウェブサイトにより学習し，サンプルファイル内でどのように記述されているか確認せよ．
2. ■事前に拡張子を表示させるための設定を行っておき，拡張子を確認しつつ作業すること．
3. ■［メモ帳で属性等を変更して上書き保存→Internet Explorerで表示を確認］という作業を繰り返すこと．
  1. - HTML文書の基本構造，タイトルおよび本文の記述法（<html>，<head>，<title>，<body>）．
    - 背景色の設定（<body>タグのbgcolor属性）
      - 色指定に関する詳細は（５）の「色入門・色見本」参照．
    - センタリング（<center>）．
    - 改行（<br>または<br />），区切り線（<hr>または<hr />）．
    - 見出し（<h1>～<h6>），パラグラフ（段落）（<p>）
    - 文字の大きさ・色の指定（<font>のsize属性・ color属性による）．
    - 画像の表示（<img>＋src属性，width属性，height属性，alt属性 etc.）．
    - テーブル（表）関係：
      - <table>タグ＋width属性（外側の枠の幅），border属性（枠の太さ），bgcolor属性（枠内の色）etc.
        <tr>タグ，<td>タグでセルの構造を記述．
    - リンク関係（<a>＋href属性，name属性）．
      - <a>タグ＋name属性でリンク先として指定するアンカー名を設定することができる．
        <a>＋href属性でリンク先（URLやアンカー名）を指定．
        同じページ内へのリンクを張る場合はhref属性に「#アンカー名」を記述．
        外部サイトへのリンクはhref属性にURL（＋#アンカー名）を記述．
        同じディレクトリ（≒フォルダ）内の他のページへのリンクはhref属性にファイル名(＋#アンカー名)を記述．
        新しいウィンドウを開く場合は target属性で「 _blank 」を指定．
    - リスト表示
      - 番号無しリスト（<ul>），番号付きリスト（<ol>）・・・ <li>に項目を記述．
        定義リスト（<dl>）・・・ <dt>に見出し（定義する用語），<dd>にその説明を記述．
    - 太字（<b>），斜体（<i>），下線（<u>）．
4. サンプルページを元に自分のWebサイトを作成．上記学習項目を可能な限り盛り込むこと．また以下の条件1.～4.を満たすこと．１点でも満たさないものは減点対象とし再提出を求めることもあるので，必ず提出前にすべての項目を確認せよ．

- - 1. 最小限の構成要素はHTMLファイル「HTML課題（学籍番号）（氏名）.htm」および自画像ファイル（JPEG形式）の2つ．ページを増やしてより複雑な構成にする場合を除き，サンプルページの基本構造は変えないこと．
    2. ページ，画像を増やす場合も含め，すべてのファイルにはファイル名を「（学籍番号）HTML課題（氏名）」と先頭に学籍番号・課題名・氏名を入れること．また学籍番号は半角英数字のみ用いること． ★ファイル名にスペースは入れないこと．（例）「16161000HTML課題八島高将.htm」「16161000HTML課題八島高将トップ画像.jpg」「16161000HTML課題八島高将自画像.jpg」「16161000HTML課題八島高将写真.jpg」など。
      1. ★HTMLにおいてファイル名を記述する際，一般にアルファベットの大文字と小文字は区別されます．拡張子も含めて大文字・小文字の違いを意識すること．
        ファイル名（拡張子も含む）に関するミスも頻出します。よく確認してください。
    3. 画像を増やしても良いが，ネット上の画像等で，著作権侵害・肖像権侵害となるものは使用禁止とする．自分で撮影or作成した画像はその旨を明記し，いわゆるフリー素材を使用する場合は入手先のURL等を明記すること．またPNG, GIF, JPEG以外の形式のファイルは使わないこと（保存の際に「ファイルの種類」を指定，拡張子はそれぞれ.png, .gif, .jpg）デジカメ画像等で容量が大きなものは必ずリサイズして1ファイルあたりの容量を100KB以下に抑え，かつ全体の容量（提出するzipファイルの容量）は250KB以下となるようにすること．リサイズやトリミングはペイントでも行えます．また画像ファイルの簡単な編集（色や濃度の調節を含む）は画像管理ソフトViXやMS Officeに付属するPicture Managerでも行えます．
    4. その他サンプルページ内に書かれた指示・注意事項も守ること．レイアウトや配色が著しく見づらいもの，手抜きが明らかなもの（使用タグの種類が少なすぎる等）も減点対象とする．