専門ゼミⅠ 南ゼミ 特別授業③ ２００２年６月７日 金曜日 ４限目 今泉 裕隆 前回のレポート • コピー＆ペーストみたいな文が多い • 参考HPのアドレスがあればなおよろしい • 個人的によいと思うレポート ー 成田君と青木君のレポート 今回の目的 • ＨＴＭＬについて • プログラミングツールをＤＯＷＮＬＯＡＤ • 実践！ＨＴＭＬプログラミング ＨＴＭＬとは？ • • • • Hyper-Text Markup Language スクリプト言語：書いた物がそのまま反映 ＨＰを作る際に使われる言語 もはや、ＨＰを作るのに欠かせない存在 • 他の言語と比べると非常に簡単なので、 と てもとっつきやすく，覚えやすい プログラミングツールをＤＬ • まず、下記サイトへアクセス 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 body title font b i br hr center a img table これだけ覚えれば，HTMLはほぼマスター htmlタグ：＜ｈｔｍｌ＞ • html このタグで囲むと囲まれた区間がhtml表示できる E.g. <html> こんにちは～ </html> bodyタグ：＜ｂｏｄｙ＞ • body このタグで背景や文字の色などを指定できる 背景色：bgcolor=“色” 文字色：text=“色” E.g. <html> <body bgcolor=“blue” text=“white”> こんにちは～ </body> </html> titleタグ：＜ｔｉｔｌｅ＞ • ブラウザの上のバーにページタイトルを 入れることができる 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:[email protected]”>メール</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し，それを修正する．
© Copyright 2024 ExpyDoc
