1-4回授業

5/19 授業

5/26 授業

6/2 授業

6/9 授業

6/16 授業

6/23 授業

6/30 プレゼン大会とHTML入門(1)

7/7 HTML入門(2)

  • 最初のHTML文
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>ホームページのタイトル</title>
 </head>

 <body>
  Hello World!
 </body>

</html>
  • 基本的な文法(1)
  • 見出し
<h1>章</h1>
<h2>節</h2> 
<h3>小節</h3>
<h4>小々節</h4>
<h5>段落小見出し</h5>
<h6>小段落小見出し</h6>
  • 段落・改行
<p>ここは一つの段落になります。前後に空白が入るのがわかりますね。</p>
前後に空白なく改行だけしたい場合は<br>このようにします。
  • 基本的な文法(2)
  • 番号付リスト
<ol>
<li>リンゴ
<li>バナナ
<li>ミカン
</ol>
  • 記号付リスト
<ul>
<li>リンゴ
<li>バナナ
<li>ミカン
</ul>
  • 基本的な文法(3): ハイパーリンク
    • 絶対パス
<a href="http://www.google.co.jp">google</a>
<a href="http://www.aichi-edu.ac.jp">愛知教育大学</a>
  • 相対パス
<a href="index.html">このページ</a>
<a href="class/class.html">classフォルダの中にある情報教育入門のページ</a>
  • 相対パスの確認
    • HTMLフォルダの中にclassフォルダを作成
    • classフォルダの中にclass.htmlを作成
    • classフォルダの中のclass.htmlの中身は以下のようにする
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>授業のページ</title>
 </head>

 <body>
 <h1>授業一覧</h1>
 <ul>
 <li>情報教育入門
 </ul>
 </body>

</html>
  • 基本的な文法(4): 画像
    • 画像の準備
      • HTMLフォルダの中にimgフォルダを作成
      • imgフォルダの中に以下の画像を保存
        cat.png
    • 書き方
<img src="img/cat.png" width=200 height=50>
<img src="img/cat.png" width=200>
<img src="img/cat.png" width=50%>
  • その他のタグ・使い方

7/15 自己紹介Webページの作成

7/23 自己紹介Webページのアップロードと確認


添付ファイル: filelesson1_2014.pdf 120件 [詳細] filelesson2_2014.pdf 94件 [詳細] filelesson4_2014.pdf 134件 [詳細] filelesson3_2014.pdf 160件 [詳細] fileslide14_2014.pdf 199件 [詳細] fileslide13_2014.pdf 151件 [詳細] fileslide12_2014.pdf 192件 [詳細] fileslide11_2014.pdf 111件 [詳細] filecat.png 82件 [詳細] fileslide10_2014.pdf 217件 [詳細] fileslide9_2014.pdf 162件 [詳細] filelesson8_2014.pdf 174件 [詳細] filelesson7_2014.pdf 272件 [詳細] filelesson6_2014.pdf 205件 [詳細] filelesson5_2014.pdf 174件 [詳細] filefig1.png 119件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-07-23 (水) 07:17:09 (1161d)