前回と前々回の内容

前回と前々回の内容 Excelの使い方 • 　表の作成 • 　関数の利用 • 　グラフの作成

今日の内容 HTMLについて (Hyper Text Markup Language) （基本的なタグの紹介）

HTMLファイルの作り方 いろんな方法とツールがあるが、ここでテキストエディタを利用してHTMLファイルの作り方を紹介する • 作業手順： • 　ファイルを作る • 　ファイルを保存する • 　ブラウザで確認する

作成に必要なもの • テキストエディタ • 　画像編集ソフト • FTPソフト • 　プロバイダとWebサーバ

HTMLの要素・タグ・属性と値 HTML文書内で、Webページの動きをあらわす命令やコメントを書き込むための書式。テキストをタグではさむことで、インターネットブラウザで表示するときのデザインなどが決まる。ウェブページを作成することは、ＨＴＭＬのタグをいかに使いこなすかにかかっている。要素(element) 要素名(element) 要素内容(content) < h1 align=“right” > タグと要素は別のもの </h1> 値(value) 属性(attribute) 終了タグ(Tag) 開始タグ(Tag)

文書の構造を定義する • <html>タグと</html>タグは • 文書がHTMLで書かれている • ことを宣言するもので、基本 • 的に文書全体と最後に置く。 <html> <head> 文書の情報 </head> <body> 実際に表示される文書の内容 </body> </html> • <body>タグと</body>タグで挟 • まれた部分が、実際にブラウザ • に表示される文書部分となる。 • <head>タグと</head>タグの間には、文書のタイトルや特徴、 • 製作者の情報をはじめとした、文書に関する情報を記述す • る。基本的に<title>タグと</title>タグで挟まれたテキスト以外 • ブラウザには表示されない。

文書にタイトルをつけたい ヘッダで記述される文書の表題は<title>タグと</title>タグの間に書かれる。 <title> How to write a web page? </title> これを<head>タグと</head>タグの間に入れる。

コメントを入れたい タグの間に挟まれた部分がコメントになる  • コメントになった内容がブラウザには表示されない。 • 編集時のメモなどに利用する。 • 文書の一部を一時的に隠したり、タグを無効にしたりする時 • 　にも便利である。 • <!と--（ハイフン2つ）の間には空白を入れず、必ず続けて • 　記述する。 • 複数行を跨ることができる。

背景色を指定したい <body>タグのbgcolor属性でページの背景色を指定する。色の指定には、「＃」のあとにrgbの値を16進数で記述するか、直接色名を書き込む。 <body bgcolor=“red”> 表示される内容をここに書く。 </body> “#ff0000” • 色の指定がされていない場合、ブラウザの設定に従って • 　背景色が表示される。 • 色名について、大文字と小文字は区別されない。

背景に画像を設定したい ページの背景に画像を使う場合は、<body>タグのbackground 属性で使用する画像ファイルを指定する。読み込んだ画像は連続してタイル状に表示される。 <body background=“cat1.gif”> 背景に画像を使っている。 </body> • 背景画像だから、サイズの大きな思い画像ファイルは • 　なるべく避けたほうがよい。

見出しを設定したい <h>タグで見出しを設定する。全部で１～６の６段階あり、h1が一番上位、以下数字が大きくなるにつれて見出しのレベルが下がることを意味する。 <h1>見出し１</h1> <h2>見出し２</h2> <h3>見出し３</h3> <h4>見出し４</h4> <h5>見出し５</h5> <h6>見出し６</h6> <h*> ~ </h*> * 1~6 一般的にタグに挟まれた部分は太字で、前後に空白をあけて表示される。数字が大きいほど小さいフォントになるが、実際画面上に表示される大きさは、環境設定によって左右できる。

段落を設定したい その範囲がひとつの段落であることを示す。一般的にブラウザでは段落の前でテキストが改行され、さらに一行分の空白が挿入される。 <p> ここに表示内容を書く。 </p> p: Paragraph • 内容の空の<p>は無視される。 • 終了タグ</p>は省略できるが、正しいHTML文書を作成する • 　ためにはつねにつけたほうがよい。

段落の位置を指定したい <p align=“★”> ～ </p> ★left, center, right <p>タグにalign属性を指定すると、段落の位置をleft（左揃え／デフォルト）、center（センタリング）、right（右揃え）のいずれかに指定できる。例： <p align=“left”>　段落の左揃え</p> <p align=“center”>　段落のセンタリング</p> <p align=“right”>段落の右揃え</p>

改行させないで表示したい 通常ブラウザでは、画面に収まるように、ウィンドの幅に合わせてテキストを自動的に改行している。しかし、<nobr> タグと</nobr>タグで挟むと、その範囲のテキストは改行されずに１行で表示される。 <nobr> 改行させない表示内容をここに書く。 </nobr>

改行させたい HTML文書で改行を入れてもブラウザ上の表示には反映されない。ブラウザ上で実際に改行させるには、改行したい位置に<br>タグを記述する。 <br> • ひとつの位置で改行であるので、終了タグがない。

画像を表示したい 指定した場所に、画像をうめこむ。 <img src=“*”> *には画像ファイルや画像のURLを記述する。終了タグはない。例： <p> <img src=“FlowerRed.gif”> </p>

画像の代わりのテキストを指定したい <img src=“*” alt=“text”> 画像表示できないブラウザのために、画像の代わりに表示されるテキストを指定するのがalt属性である。画像を読み込まないように設定しているブラウザや、画像を表示できるブラウザであっても画像を読み込むまでの時間、または画像の読み込みに失敗した場合にもこのテキストが表示される。例： <p> <img src=“FlowerRed” alt=“赤い花”> </p>

画像のサイズを指定したい <img src=“★” width=“◆” height=“◇”> ★ ・・・画像のファイル名 ◆ ・・・幅（ピクセルまたは％） ◇ ・・・高さ（ピクセルまたは％） • 画像のサイズを指定する時には、width属性、height属性を使う。 • 　ピクセルでは画像のサイズを直接指定し、パーセントではウィンド • 　の大きさに対する割合で指定する。 • パーセントでは画像のサイズは相対的になり、ウィンドのサイズ　に左右される。 • サイズ属性を指定しない場合は画像の本来のサイズで表示　される。

テキストとの並び方を指定したい <img src=“★” align=“◆”> ★　画像ファイル名（URL) ◆top, middle, bottom 通常、画像は前後のテキストと一緒に、ひとつの行の中に配置される。Aligh属性を使用すると、その際の画像とテキストの並び方を指定することもできる。 top: 画像の上部とテキストの上部をそろえる。 middle:画像の中央と周囲のテキストのベースラインをそろえる。 bottom:画像の下部と周囲のテキストのベースラインをそろえる。　　　　　（デフォルト）

リンクを設定したい 任意のテキストや画像にリンクを設定する。移動先のURL （ファイル名）を記入する。URLは、現在のファイルとの位置関係を考えて、絶対URLか相対URLを決める。 <a href=“*”> ~ </a> HTML文書をはじめインターネット上の特定の資源（リソース）を示すため、HTML3.0まではURL(Uniform Resource Locator)という名称が使われてきた。HTML4.0からはこのURLにかわってより広義なURI(Uniform Resource Identifier)という用語が使われているようになっている。URIのほうが上位の概念である。

問い合わせ先を示したい <address> ~ </address> 文書製作者と連絡をとるための情報（製作者、e-mailアドレス、住所、電話番号など）を記載する場合に使用する。一般的なブラウザではイタリックで表示される。例： <address> 製作：　<a href=“URL”> XX会社</a> <br> Email： <a href=“mailto:メールアドレス”> メールアドレス </a> </address>

テキストの色を指定したい <body text=“★”> ~ </body> <body link=“★”> ~ </body> <body alink=“★”> ~ </body> <body vlink=“★”> ~ </body> ★　色指定値(#rrggbb)、または色名(colorname) • 全体のテキストやリンク部分のテキストの色を指定する。 • text: 標準のテキストの色を指定 • link: まだ見ていない（キャッシュされていない）ページへリンク • 　　　　している部分の色を指定 • alink: リンク部分を選択した瞬間（クリックなど）の色を指定 • vlink: すでに見た（キャッシュされている）ページへリンクしている • 　　　　　部分の色を指定

テキストの色を部分的に指定したい <font color=“★”> ~ </font> ★　色指定値(#rrggbb)、または色名(colorname) 指定した範囲のテキストの色を変更する。 <body>タグのtext属性でテキストの色を指定する場合は文書全体に対して有効になるが、<font>タグのcolor属性では、タグに挟まれた部分にのみ有効になる。

リストを作りたい <ul>タグと</ul>タグでその範囲がリストであることを示す。項目の順序が重要でない箇条書きを作成したい場合に使用し、行頭に「・」を用いたリストが形成される。リスト表示したい項目はそれぞれ<li>タグと</li>タグに挟んで並べる。 <ul> <li>項目</li> <li>項目</li> <li>項目</li> </ul> ul:Unordered list li: List

番号付きリストを作りたい <ol><li> ~ </li></ol> <ol>タグと</ol>タグでその範囲が番号付きのリストであることを示す。順番が重要なリストを作成したい場合に使用する。行頭の記号が連番の数字になって表示する。一般的なブラウザでは、項目がインデントされ、上下にｽﾍﾟｰｽをあけて表示される。

テーブル（表）を作りたい <table>と</table>は、これに挟まれた範囲がテーブル（表）であることを示す基本のタグである。テーブルを構成する各要素の最初と最後に置く。 <tr>と</tr>は行を定義するタグである。横一列分のデータの最初と最後に記述セルに入るデータはそれぞれ<td>タグと</td>タグの間に置く。 <table> <tr><td>項目11</td><td>項目12</td><td>項目13</td></tr> <tr><td>項目21</td><td>項目22</td><td>項目23</td></tr> <tr><td>項目31</td><td>項目32</td><td>項目33</td></tr> </table> • <table border>　枠をつける。 • <table border=“*” > 枠の幅を指定する。*ピクセル

テーブルの見出しを作りたい <th> ~ </th> <th>タグと</th>タグで行や列の見出しを作成する。見出しとして定義されたテキストは、一般的には太字でセンタリングされて表示される。例： <table border=“1”> <tr><th>列１</th><th>列２</th><th>列3</th></tr> 　：　：　： </table>

入力したとおり表示したい <pre> ~ </pre> このタグで囲まれた部分が、整形済みであることを示す。通常、 <pre>タグと</pre>タグで挟まれたテキストは等幅フォントで表示され、HTML文書内の空白文字や改行などがブラウザ画面にそのまま反映される。例： <pre> main() { int a,b,c; a=5; b=10; if(a<5) c=20; } </pre>

長い文書を引用したい <blockquote> ~ <blockquote> 比較的に長い文書を抜粋・引用する時に使用する。一般的に <blockquote>タグと</blockquote>タグで挟まれた部分は上下一行分のｽﾍﾟｰｽが挿入され、左右もインデント（字下げ）されて表示されるので、上下左右にｽﾍﾟｰｽがあく形になる。 <p>ある原稿より引用</p> <blockquote> <p>引用文１</p> <p>引用文２</p> </blockquote>

横罫線を表示したい <hr> <hr★> ★size=“太さ”（ピクセル）,width=“長さ”（ピクセルまたは％）, align=“left”, “center”, “right”,noshade • <hr>で横罫線が画面の左右いっぱいに表示される。前後との • 　間隔は、ブラウザに依存する。 • 横罫線の属性を設定できる。ピクセル単位の太さ、ピクセル　単位または画面の横幅に対する割合の幅、左右に寄せ、　センタリング（デフォルト）の位置属性 • noshadeを指定すると、立体的ではなく、平面的に表示される。 • 終了タグなし。

前回と前々回の内容

前回と前々回の内容

Presentation Transcript