専門ゼミⅠ 南ゼミ 特別授業③ ２００２年６月７日 金曜日 ４限目 今泉 裕隆
前回のレポート コピー＆ペーストみたいな文が多い 参考HPのアドレスがあればなおよろしい 個人的によいと思うレポート ー 成田君と青木君のレポート
今回の目的 ＨＴＭＬについて プログラミングツールをＤＯＷＮＬＯＡＤ 実践！ＨＴＭＬプログラミング
ＨＴＭＬとは？ Hyper-Text Markup Language スクリプト言語：書いた物がそのまま反映 ＨＰを作る際に使われる言語 もはや、ＨＰを作るのに欠かせない存在 他の言語と比べると非常に簡単なので、 とてもとっつきやすく，覚えやすい
プログラミングツールをＤＬ まず、下記サイトへアクセス そしてDOWNLOADして、適当なフォルダに保存 http://www.vector.co.jp/soft/win95/net/se203720.html そしてDOWNLOADして、適当なフォルダに保存 それを解凍してHTML-EFMF.exeを実行 解凍できない人：LhasaをDLしてください 解凍できても使えない人 ー VB Runtime6 SP5を入れてください
実践！ＨＴＭＬプログラミング HTMLプログラムに必要な知識 独創性とユーモアが出来映えを左右すると 言っても過言ではないだろう 文字入力 ファイルの保存 多少の英語理解力 独創性とユーモアが出来映えを左右すると 言っても過言ではないだろう
HTMLを書く時のお約束 ファイルの拡張子は，htmかhtmlにする タグと呼ばれるものを巧みに使う タグは確実に閉じる E.g. 正：<html></html>， 誤：<html><html HPを作る時は個人情報の出し過ぎに注意
基本的なタグ一覧 これだけ覚えれば，HTMLはほぼマスター html body title font b i br hr center a img table これだけ覚えれば，HTMLはほぼマスター
htmlタグ：＜ｈｔｍｌ＞ html このタグで囲むと囲まれた区間がhtml表示できる E.g. <html> こんにちは～
bodyタグ：＜ｂｏｄｙ＞ body このタグで背景や文字の色などを指定できる 背景色：bgcolor=“色” 文字色：text=“色” E.g. <html> <body bgcolor=“blue” text=“white”> こんにちは～ </body> </html>
titleタグ：＜ｔｉｔｌｅ＞ ブラウザの上のバーにページタイトルを 入れることができる E.g. <html> ブラウザの上のバーにページタイトルを 入れることができる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> こんにちは～ </body> </html>
fontタグ：＜ｆｏｎｔ＞ このタグで囲まれた文字の大きさや色を変えることができる 文字の大きさ：size=“1~7” （3が標準） 文字の色：color=“色” E.g. <html><title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> ごきげんいかがですか？ </body> </html>
b(bold)タグ：＜ｂ＞ このタグで囲まれた文字は太字になる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”> <b>こんにちは～</b> おげんきですか． </font> </body> </html>
i(italic)タグ：＜ｉ＞ このタグで囲まれると、文字が斜体になる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> <b>こんにちは～</b> <i>こんにちは～</i> </body> </html>
br(break)タグ：＜ｂｒ＞ このタグを入れると改行する E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> <b>こんにちは～</b><br> <i>こんにちは～</i> </body> </html>
hr(horizontal ruler?)タグ：＜ｈｒ＞ 改行してボーダーラインを入れてくれる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font><hr> <b>こんにちは～</b><br> <i>こんにちは～</i> </body> </html>
centerタグ：＜ｃｅｎｔｅｒ＞ このタグで囲むと、中央揃えする E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font><hr> <center> <b>こんにちは～</b><br> <i>こんにちは～</i> </center> ごきけんいかがですか． </body> </html>
ここで一度作ってみよう 今までのタグを使えば、大抵のことはできる プログラムミスをしても問題ないので 各自好きに作ってみる ５～１０分後に再開予定
a(anchor)タグ：＜ａ＞ 基本的にリンクを作る時に使われる 他のＨＰへのリンクを貼りたい場合 <a href=“行かせたいＨＰのアドレス”>文字など</a> E.g. <a href=“http://www.google.com”>googleへ</a> メールアドレスのリンクを貼りたい場合 <a href=“mailto:メールアドレス”>文字など</a> E.g. <a href=“mailto:hiro386@x.age.ne.jp”>メール</a>
img(image)タグ：＜ｉｍｇ＞ 画像(jpeg, gif)などを貼り付ける <img src=“貼りたい画像のファイル名”> htmlファイルと画像ファイルが同じフォルダにあるときは この書き方で問題ない 違うフォルダの場合は相対パスや絶対パスで指定する 横幅，縦幅はwidth, height で表す <img src=“ファイル名” width=“長さ” height=”長さ”> 長さは数字で表し，単位はピクセルで表す E.g. <img src=“banner.gif” width=“120” height=“40”>
tableタグ：＜ｔａｂｌｅ＞ このタグはキレイに書かないと混乱する 書き方は例の通りで，tdで囲まれた部分が表の中身 E.g.２行２列の表 <table border=“2”> <tr><td>Ａ</td><td>Ｂ</td></tr> <tr><td>Ｃ</td><td>Ｄ</td></tr> </table> これにはいくらかoptionがあるが、最初はここから初める
参考にするといいＨＰ とほほのＷＷＷ入門 http://tohoho.wakusei.ne.jp/www.htm
Ｈｏｍｅｗｏｒｋ 自己紹介ページをＨＴＭＬを使って作る (注) 自分のHPをSaveし，それを修正する．