コンピュータプレゼンテーション

コンピュータ
プレゼンテーション
講議資料
http://www.center.nitech.ac.jp
ホームページの作成(HTML基礎)
ホームページを作成するには主にHTML(Hyper Text
Markup Language)という簡易言語で記述します。HTML
では、文書の段落構造、見出し、表組み、画像、音声、
動画などの文字以外の情報の貼り付けや他の情報へ
のリンクを、「タグ」で表記します。HTMLを記述するに
はSimpleTextなどのエディタを使用します。なおHTML
の文法をしらなくてもホームページを作成できるアプリ
ケーションがあります。Netscape Communicator や
Microsoft Word でもホームページを自動的に作成する
機能を持っています。ここでは、HTMLの文法の基礎的
な事柄について説明します。
タグの基礎
HTMLの基本形は、<タグ名>任意の文字列</タグ名>
となります。
<タグ名>で始まり任意の文字列が続き</タグ名>で終
了するというように対になっているものがほとんどです。
最も基本的な形は次の通りです。
タグはすべて半角文字で入力します。
また、タグでは大文字と小文字は区別されませんので
<title>と<TITLE>は同じ意味となります。
タグの基礎
 HTML文書を作成する時は<HTML>で始まり文
書の最後は</HTML>で終了します。
 <HEAD>～</HEAD>で囲まれた部分がHTML
文書のヘッダであることを示します。
 <TITLE>～</TITLE>で囲まれた部分がタイトル
として扱われます。タイトルはページ上には表示
されませんがブラウザのウインドウタイトルなど
に表示されます。
タグの基礎
 <BODY>～</BODY>で囲まれた部分が
HTML文書の本文であることを示します。
この間に記述されたことがブラウザのペー
ジ上に表示されます。
 改行をあらわします。HTMLでは本文中の
改行は無視されます。ページ上で改行させ
たい時は行末に<BR>を記述します。
タグの基礎
②
①
④
– <HTML>
<HEAD>
<TITLE>My HomePage</TITLE>
</HEAD>
<BODY>私のホームページです。<BR>
よろしくお願いします。<BR> </BODY>
<HTML>
タグの基礎
保存とブラウザ
 前セクションで作成した書類を
「index.html」という名前で保存します。
 この書類をブラウザのアイコンにドラッグ＆
ドロップすることでブラウザで表示すること
ができます。
文字の装飾
 太文字：<B>～</B>
– 文字を<B>太字</B>にする。
文字の装飾
 斜体文字：<I>～</I>
– 文字を<I>斜体</I>にする。
文字の装飾
 文字の大きさを変える：
<FONT
SIZE=...>～</FONT>
 サイズには１～７の値を指定できます。
– 文字を<FONT SIZE=7>大きく</FONT>する。
文字の装飾
 文字の色を変える：
<FONT
COLOR=...>～</FONT>
– 文字を<FONT COLOR=RED>赤く</FONT>
する。
色を指定する属性では、次のような方法で色を指定します。
COLOR="#FF0000" ... 色のRGB値を指定する。
COLOR="RED" ... 色の名前を指定する。
RGB値は #FF0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分
を00～FFまでの１６進数で記述します。ちなみに赤は #FF0000 となります。
レイアウトに関するタグ
 見出し：<H 数値>～</H 数値> 文書の見
出しを表示します。
 数値には１から６が指定でき数値が小さい
ものほど文字が大きくなります。
– <h1>見出し１</h1>
<h3>見出し３</h3>
<h6>見出し６</h6>
レイアウトに関するタグ
 改行：<BR> HTML文書のテキストの改行
はブラウザには無視されますので、自分の
好きな位置で改行するには<BR>を用いま
す。
– テキストの途中で<BR>改行します。
レイアウトに関するタグ
 段落：<P> <P>～</P>で囲まれた部分がひ
とつの段落になります。</P>は省略できま
す。
– <P>１つめの段落です。
<P>２つめの段落です。
レイアウトに関するタグ
 整形済みテキスト：<PRE> 通常のHTML
ではスペースや改行が無視されますが、
<PRE>～</PRE>の間ではスペースや改行
がそのまま表示されます。
– <PRE>
１行目です。
２行目です。
</PRE>
レイアウトに関するタグ
 水平線：<HR>
– <HR>
リスト(箇条書)
 記号によるリスト書き、番号によるリスト書
き、説明付きリスト書きの３種類のリスト書
きが利用できる。
リスト(箇条書)
 記号によるリスト書き：<UL>～</UL>がリ
ストの始まりと終わりを表し、<LI>が項目
を表す。
– <UL>
<LI>いちご
<LI>りんご
<LI>バナナ
</UL>
リスト(箇条書)
 番号によるリスト書き：<OL>～</OL>がリ
ストの始まりと終わりを表し、<LI>が項目
を表す。
– <OL>
<LI>いちご
<LI>りんご
<LI>バナナ
</OL>
リスト(箇条書)
 説明付きリスト書き：<DL>～</DL>で定義リスト
全体を、<DT>～</DT>で定義語を、<DD>～
</DD>でその説明を行います。 </DT>、</DD>
は省略可能です。
– <DL>
<DT>電子マネー
<DD>硬貨や紙幣を使わず、電子情報などの・・・
<DT>デビットカード
<DD>日本では1999(平成11)年1月4日より・・・
</DL>
リスト(箇条書)
テーブル
 テーブルには<TABLE>～</TABLE>を用います。
 <TR>～</TR>が各行、<TD>～</TD>や <TH>
～</TH>が各項目を示します。
 テーブルのそれぞれの升目のことをセルと呼び
ます。
 <TABLE>タグではBORDER属性でテーブルの
外枠の線の太さを数値で指定できます。
テーブル
– <TABLE BORDER>
<TR><TD>支店名</TD><TD>売上</TD></TR>
<TR><TD>東京</TD><TD>1,500</TD></TR>
<TR><TD>名古屋</TD><TD>800</TD></TR>
<TR><TD>大阪</TD><TD>1,300</TD></TR>
</TABLE>
テーブル
 セルの結合及びセル内の位置指定
– <TD>タグで、縦と横にまたがったセルを作成
したり、文字の配置の指定などができます。
• ROWSPAN=n 縦方向に項目 n 個分連結します。
• COLSPAN=n 横方向に項目 n 個分連結します。
• ALIGN=... 項目の中身の表示位置を指定します。
– ALIGN=RIGHT なら右揃えを表します。
テーブル
– <TABLE BORDER>
<TR><TD ALIGN=CENTER>国</TD>
<TD ALIGN=CENTER>支店</TD>
<TD ALIGN=CENTER>売上</TD></TR>
<TR><TD ROWSPAN="3">日本</TD><TD>東京</TD>
<TD ALIGN=RIGHT>1,500</TD></TR>
<TR><TD>名古屋</TD>
<TD ALIGN=RIGHT>800</TD></TR>
<TR><TD>大阪</TD><TD
ALIGN=RIGHT>1,300</TD></TR>
</TABLE>
テーブル
リンク
 リンクを張るには<A>～</A>を用います。HREF
でリンクをクリックした時のジャンプ先や電子メー
ルの送信先を指定します。「名古屋商科大学の
ホームページへ」をクリックすると
http://www.nucba.ac.jp にリンクの設定をする場
合
– <A HREF="http://www.nucba.ac.jp">名古屋
商科大学のホームページへ</A>
画像ファイルの貼り付け
 HTMLでは GIF や JPEG 形式の画像ファイルをページに
貼り付けることができます。GIF(Graphics Interchange
Format 「ジフ」と読む)やJPEG(Joint Photographics Expert
Group 「ジェイペグ」と読む)は代表的な画像圧縮形式で
ホームページでよく使われます。画像ファイルを用意する
には次のような方法があります。
– お絵書きソフトなどを用いて自分で作成する
– スキャナやデジタルカメラなどから取り込んで作成する
– フリーの画材集を利用する
• 市販のものを購入したり、インターネットで入手したりできます
画像ファイルの貼り付け
 <IMG SRC=“...”>で画像を貼り付けます。
– <IMG SRC="index1_07.gif">
ホームページのソースを見る
 Netscape Communicator ではブラウザ中の
ページのソース(HTML)を見ることができ
ます。
 「表示」メニューから「ページのソース」を選
択すると表示中のページを構成している
ソース(HTML)を見ることができます。
ホームページの登録(Fetch の利用方法)
 ホームページのデータをサーバ
(http://opinion.nucba.ac.jp)に登録するためには FTP(File
Transfer Protocol)のアプリケーションを利用します。
Macintosh では「Fetch」(フェッチと呼びます。シェアウェ
ア)がよく使われます。ここでは Fetch を使用しての登録
方法について説明します。なお、「Fetch」を使用してイン
ターネット上から様々なアプリケーションやファイルなど
をダウンロードすることなどもできます。
ホームページの登録(Fetch の利用方法)
 「Fetch 3.0.3j2」のアイコンをダブルクリックし
Fetch を起動します。
 下記の画面が表示されますので、下記の通り入
力してから「ＯＫ」をクリックして下さい。
– ホスト(接続先)：には接続したいサーバ名を入力しま
す。ここでは「opinion」
– ユーザー名：自分の学籍番号
– パスワード：自分の電子メールパスワード
ホームページの登録(Fetch の利用方法)
 サーバに接続され次の画面が表示されます。最初に使
用する場合のみ、下記の通りの設定を行います。「カス
タム」メニューから「初期設定...」を選択し、「Upload」のタ
グを選択し下記の通り設定を行います。
–
–
–
–
–
–
「デフォルトのテキスト形式：」：「生データ(Row data)」を選択
「テキストでないとき：」：「生データ(Row data)」を選択
「BinHex ファイルに.hqxの拡張子をつける」のチェックを外す
「MacBinary II に.binの拡張子をつける」のチェックを外す
「テキストファイルに.txtの拡張子をつける」のチェックを外す
「ファイル・ディレクトリ名のエンコード」のチェックを外す
ホームページの登録(Fetch の利用方法)
 「public_html」の項目をダブルクリックしてディレ
クトリを移動します。ホームページのデータは必
ず「public_html」のディレクトリの中に登録してく
ださい。
 登録したいファイルを「Fetch」の画面上にドラッグ
＆ドロップすることで登録(アップロード)すること
ができます。登録されているファイルを削除した
い場合には、削除したいファイルをゴミ箱にド
ラッグ＆ドロップすることで削除できます。

Download Report