2010-01-14

HTML

今年の予定

1月14日
HTMLを使ってブログを書く
1月21日
HTMLを使ってホームページを作る
1月28日
課題作成
2月4日
課題提出締切
来週、最後の課題を出します。その締め切りが2月4日です。講義は来週までで、1月28日と2月4日は課題作成の時間です。

今日の内容

  • 前回の課題提出
  • HTML言語

課題提出

前回作った、条件分岐フローチャートのプログラムを提出してください。
件名:学籍番号と「If文」、本文:プログラムと名前

ブログに動画

以前、ブログの作り方を説明しましたが、ブログにこのように動画を貼り付けることもできます。

このように凝ったことをするには、設計図であるHTMLを使う必要があります。
この講義の最後のテーマとして、HTMLについて勉強し、ホームページを作りましょう。

いきなりホームページを丸ごと作るのは大変なので、まずブログの記事をHTMLで書いてみましょう。googleにログオンして、ブログを書く画面を表示してください。やりかたを忘れた人は10月15日の講義を見てください。
パスワードを覚えていますか？忘れた人はアカウントにアクセスできない場合をクリックして指示に従ってください。

ブログに投稿する画面を表示したら、右上の「HTMLの編集」をクリックしてください。

上に並んでいるものが少し変わっただけに見えますが、実はここには普通の文章を書くのではなくHTMLというものを書くのです。
とは言ってもいきなり書くことは出来ませんから、既に書かれているものをコピーして貼り付けてみましょう。
上の動画をクリックするとYouTubeに移動します。右上の

の「埋め込み」に書かれている文字をコピーしてここに貼りつけてください。貼りつける前に大きさを選ぶことも出来ます。

貼りつけたら「投稿を公開」をクリックしてください。ブログに動画が貼り付けられています。

google mapも同様に貼ることが出来ます。「リンク」をクリックして表示される「HTML を貼り付けてサイトに地図を埋め込みます」の部分をコピーしてブログに貼りつけます。

HTMLを書いてみよう

貼りつけるだけでなく、自分で書いてみましょう。手始めに表を書いてみましょう。このとき、VBA同様、仮名漢字変換をOFFにして入力してください。
最も基本的な表の形は

<TABLE border="1">
<TBODY>
<TR><TD>左上</TD><TD>右上</TD></TR>
<TR><TD>左下</TD><TD>右下</TD></TR>
</TBODY>
</TABLE>

です。この通りに入力すると

左上右上
左下右下
になります。順を追って説明します。

HTMLでは基本的に<命令>と</命令>がペアで使われます。
まず<TABLE>と</TABLE>がペアとなって、表の始まり、表の終わり、を表します。
表の中では<TBODY>と</TBODY>がペアとなって、表の本文の始まり、表の本文の終わり、を表します。
そして本文の中では<TR>と</TR>がペアとなって、一つの行の始まり、行の終わり、を表します。
最後に、各行の中では<TD>と</TD>がペアとなって、セルの始まり、セルの終わり、を表します。

TABLEの後のborder="1"は、境界線の幅が1だということです。この数字を大きくすると境界線が太くなります。

練習問題

次の表を作ってください。

左上中上右上
左中中中右中
左下中下右下

追記
Google bloggerで表を書くと妙に空行が空きます。「設定」の「フォーマット」画面で「改行の変換」を「いいえ」にして「設定を保存」をクリックしてください。

表に関するいくつかの補足

  • 表の見出のために太文字にするには<TD>　</TD>の代わりに<TH>　</TH>と書きます。
  • 複数のセルを横に繋げて表示するには<TD colspan="2">中身</TD>のように書きます。これで二つのセルが横に繋がります。
  • 縦に繋げて表示するには<TD rowspan="2">中身</TD>のように書きます。
  • セルの中央に文字を表示するには<TD>を<TD align="center">に、右に表示するには<TD>を<TD align="right">に書き直します。
  • セルの上のほうに表示するには<TD valign="top">, 中央なら<TD valign="middle">, 下のほうなら<TD valign="bottom">です。
  • 文字に色を付けたいときは<FONT COLOR="red">赤い文字</FONT>と書いてください。 大きさを変えるなら<FONT SIZE=大きさ>です。例えば<FONT COLOR="green" size="7">大きな緑の文字</FONT>のように、両方同時に指定することも出来ます。
    詳しくは<FONT> を見てください。
  • 色の名前は、色の名前を見てください。
  • bgcolor="色の名前"という方法で表の塗りつぶしが出来ます。<TABLE bgcolor="red">とか<TR bgcolor="green">とか<TD bgcolor="blue">を試してみてください。どこに色がつきましたか?

練習問題2

以前使った中国地方の県別人口データを次の表のように書いてください。
県別人口性別
男女
県名鳥取294321
島根368402
岡山9391014
広島13981484
山口734817
時刻: 16:00
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)