*情報教育演習II 第13回 [#vf9c09c5] **前回の復習:HTMLファイルの作成 (2) [#nfe6fdea] :箇条書きのタグ| --ul -- 番号なし箇条書き --ol -- 番号つき箇条書き ---li -- 箇条書きの項目 --dl -- 説明つき箇条書き ---dt -- 箇条書きの項目名 ---dd -- 項目名に対する説明 :色の指定| --光の三原色である、赤(R)緑(G)青(B)の強さを値であらわす --16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)で、RGBそれぞれを00〜FFまでの256段階で設定 ---例:blackは#000000、redは#FF0000、whiteは#FFFFFF(「#」のあとにRGB値を設定) :特定の場所やページ全体の文字色の設定| --font -- 文字の色や大きさの設定 ---color="指定した文字色" ---size="指定した大きさ" (大きさは1〜7の数字を指定) --body -- ページ全体の設定 ---text="指定した文字色" ---bgcolor="指定した背景色" **HTMLファイルの作成 (3) [#a6e29fc1] 前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 ***他のページへのリンク [#q86056a4] -<a href="...">...</a> --他のWebページにジャンプするリンクを設定します。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクとして表示する文字を設定します。 --次のように、リンク先にURLを指定すると、「Yahoo! JAPAN」のところにリンクが作られます。 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> --次のように、リンク先にファイル名を指定すると、「ほげほげ」のところにリンクが作られます。 <a href="hogehoge.html">ほげほげ</a> --次のように、リンク先に「mailto:メールアドレス」を指定すると、指定したメールアドレスへメール送信のウィンドウが開きます。 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a> 「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a> 箇条書きの項目に、次のようなリンクを設定してください。 -「わたし」について:prefile.htmlへのリンク -「街」について:town.htmlへのリンク -「わたし」と「街」:memory.htmlへのリンク ***画像データの表示 [#kacbc47d] 画像データを表示するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします <img src="gazou1.jpg" alt="絵本を読む園児の様子"> ***表によるレイアウト [#z16b7341] -<table>...</table> --テーブル(表)を設定します。 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します(0にすると枠線が見えなくなる) -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<tr>...</tr> --テーブルのひとつの行を設定します。 -<td>...</td> --テーブルのひとつのマス目(セル)を設定します。 #ref(Lecture/JouhouC2004/12th/table_el.png,nolink); <table border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <table> |1|2|3| |4|5|6| -<table cellspacing="セルの間隔"> --セルとセルの間隔を設定します(セルと外枠の間隔も設定されます) -<table cellpadding="セル枠と内容との間隔"> --セルの枠と内容の間隔を設定します <table border="2" cellspacing="1" cellpadding="5"> ''<table>''要素は、本来、表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。 |>|CENTER:メインメニュー| |CENTER:サブメニュー|CENTER:コンテンツ(内容)| |>|CENTER:署名| **Webページの公開 [#vd84c656] インターネットで公開されているWebページは、 すべて、 ''Webサーバ''というコンピュータで管理され公開されています。 つまり、 Webページをインターネットに公開するには、 作成したHTMLファイルを、 手元のパソコンからWebサーバへ転送する必要があります。 #ref(server.png,nolink); ***ファイルの転送方法の種類 [#nfcdcf49] Webサーバにファイルを転送するには、いくつかの方法があります。 +「ftp」を使う --以前から使われている、標準的な、ネットワークを使ったファイルの転送方法 --設定が少しややこしい(初心者にはちょっと難しい?) +「記録用メディア」を使う --フロッピーやCD-ROMなどに記録したファイルを、サーバを直接操作してコピー --運用上の大きな問題がある +++サーバを直接操作しないといけない(サーバの場所までいかないとできない) +++サーバを操作するための権限がないといけない(管理のための権限) +「Webフォルダ」を使う --Windows上でファイルをコピーする感覚で、転送ができる(難しい設定はいらない) --サーバ側にいろいろな設定が必要(どんなサーバでも利用できるわけではない ***Webフォルダによる転送方法 [#a709cc90] Windowsで''Webフォルダ''を利用するには、 ''Internet Explorer''を使用します。 次のように操作すれば、通常のデータのコピーと同じように Webサーバへファイルを転送することができます。 +Internet Explorerを起動 +メニューから、「ファイル」→「開く」を選択 ++「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック ++「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力 ++「OK」ボタンをクリック #ref(html00.png,nolink); +ユーザ名とパスワードを入力し、「OK」ボタンをクリック +通常のフォルダと同じようなウィンドウが表示されるので、 通常のコピー操作をして フォルダへ作成したHTMLファイルなどをコピー **参考リンク [#z73e9e07] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |