情報処理実習F:第6回　HTMLの基礎3（画像の貼り付け）

前回の復習

• 表の作成方法について、table, tr, tdタグの使い方を覚えた。
• リンクの方法について、相対リンクの使い方をよく理解すること。
• 手元のフォルダ名を含むファイル名をそのままリンクしている人が何人かいた。そうではなくて、常に「リンクする側のファイル」「リンクされる側のファイル」のフォルダの位置関係を考えて、相対リンクでフォルダの位置を指定する。
• 更新したファイルをすべてアップロードしたことをきちんと確認すること。
• 「手元のファイルをテキストエディタで更新する」「手元のファイルをブラウザで確認する」「ftpでサーバーにアップロードする」「アップロードされたファイルをブラウザで確認する」という一連の作業を、よく理解すること。
• 時間内に課題ができなかったら、簡単にあきらめず、次の回の授業がはじまるまでに課題を終わらせること。
• 分からないことがあれば、授業中にできるだけ積極的に質問し、また授業が終わってからも連絡方法を読んで積極的に質問すること。

画像の貼り付け

• ホームページ入門の「画像を貼り付けよう」を習得する。
• 作成例：関 勝寿のページのソースを見る。写真を表示している箇所はどこか。写真を文章の左に表示するために、どのような手法を用いているか。
• 先週の宿題：画像ファイルを持って来ましたね。
• デジカメで撮影した写真をそのままウェブに掲載すると、サイズが大きくなりすぎることがある。その場合には、適切なサイズに直してからウェブに掲載する。画像サイズ比較で、様々なサイズの画像を比較してみよう。
• コンピュータの画面解像度には色々あるため、あまり大きな画像サイズの写真を使うのは不適切である。
• 画像サイズを変換する方法には色々ある。IrfanViewという画像閲覧ソフトを使うことで、画像サイズの変換が出来る。このソフトはフリーソフトであり、日本語版も配布されている。
• なお、大量の写真をウェブで公開する場合には、zphotoのようなソフトを利用すると便利である。Macであれば、iPhotoにアルバムWebページ書き出しの機能がある。

様々なタグ

• HTMLリファレンスで、色々なタグが説明されている。以下のタグの意味を調べてみよう。
• コメント: <!-- -->
• 水平線: <hr>
• テーブル: <th> <caption>
• 意味: <address> <blockquote> <q> <sub> <sup> <em> <strong> <acronym> <cite>
• べたテキスト: <pre>

公開されている素材の利用

• Web上には、ボタン、背景画像等の様々な素材が公開されている。利用許諾に関する記述をサイトで確認してから、素材を利用する。
• Silk icons preview: アイコン
• 素材HP 無料素材サイト集: フリー素材サイト専門の、素材検索エンジン

課題

先週の宿題で用意した画像を貼り付けて、画像に簡単な説明を加えてください。作成したページを授業用ウェブサーバーにFTPでアップロードして、名簿のリンクから更新されたことを確認してください。

情報処理実習F