講議資料 http://www.center.nitech.ac.jp コンピュータ プレゼンテーション 講議資料 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)を見ることができます。
ホームページの登録(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」の画面上にドラッグ＆ドロップすることで 登録(アップロード)することができます。 登録されているファイルを削除したい場合には、 削除したいファイルをゴミ箱にドラッグ＆ドロップすることで削除できます。