コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第２回　HTML基礎（4月16日）

課題：プロフィールページ作成

HTMLを手打ちで入力してプロフィールページを作成する：完成見本

Dreamweaverや他のホームページ作成ソフトは使用禁止

教材のダウンロード：web_01.zip

教材はダウンロードして解凍後、フォルダ名を変更する（例「web_01_10810000」）

HTMLとは

  • Webページはテキストや画像などの複数の形式のデータから構成されている
  • HTMLはそれらのデータを組み合わせ、画面の基本構成を定義するための言語
  • HTMLはWebページを構成する土台となる技術
  • 現在のWebページにおいてはHTMLだけでなくFlashやJava・JavaScript・PHP・CGIなど様々な言語・技術が使われている

HTML記述の基本

  • 文書の要素（見出し、本文、リストなど）をブラウザに理解させるために要素にしるしを付ける（マークアップ）のが基本
  • HTMLではタグで括ることでしるしを付ける
    例：<h1>ページの大見出し</h1>
  • 通常は開始タグと終了タグを組み合わせて使用するが単独で使われるタグもある
    例：<br>、<img>など
    注：XHTMLにおいては単独タグは<br />のように記述する
  • 属性を与えてタグの性質を定義する場合がある
    例：<p class="main">

HTML記述の注意点

  • タグは半角英数の小文字で記述する
  • HTMLファイル上での改行はブラウザでは反映されない
  • 機種依存文字（丸数字など）を使用しない
  • ファイル名は半角英数で記述し、_（アンダーバー）以外の記号は使用しない
  • 拡張子は.htmか.htmlとし、両方を混在させない

基本タグ

  • <html>
    • HTML文書であることを宣言するタグ
    • 基本的にHTML全体をこのタグで括る
  • <head>
    • HTML文書のヘッダ情報を記述するタグ
    • タイトル以外の情報はブラウザでは表示されない
  • <body>
    • 実際にブラウザに表示される部分

ヘッダ内で使用するタグ

  • <title>
    • 文書のタイトルを記述する
    • ブラウザのウインドウのタイトルバーに表示される

ボディ内で使用するタグ

  • <h1>
    • 見出しタグ
    • <h1>から<h6>まであり、数字が小さいほど文書中で重要であることを示す
  • <p>
    • 段落タグ
    • 基本的に見出しやリスト以外の文章はこのタグで括る
  • <ul>, <li>
    • リストタグ
    • メニューや箇条書きなどに使用する
    • <ul>でリスト全体を、<li>で各アイテムを括る
  • <img>
    • 画像タグ
    • src属性で画像ファイル（GIFまたはJPEG）を指定する
      例：<img src="img/icon_01.jpg">

課題評価ポイント

  • HTML記述の注意点を守れているか？（20点）
  • 基本タグが正しく記述できているか？（20点）
  • タイトルが正しく設定できているか？（20点）
  • 表示用タグが正しく記述できているか？（20点）
  • タグの意味を理解して正しく使い分けているか？（20点）

提出期限は授業日の翌週の月曜日の午後９時まで

HTMLファイルのみを提出する

教材に含まれていた画像ファイルは提出しない

自分で画像を追加した場合はその画像ファイルも提出すること

提出はログイン後に課題提出ページからアップロードして行う