PowerPoint プレゼンテーション

前回と前々回の内容
広島工大
Excelの使い方
 表の作成
 関数の利用
 グラフの作成
コンピュータリテラシー
1
広島工大
今日の内容
HTMLについて
(Hyper Text Markup Language)
（基本的なタグの紹介）
コンピュータリテラシー
2
HTMLファイルの作り方
広島工大
いろんな方法とツールがあるが、ここでテキストエディタを利用
してHTMLファイルの作り方を紹介する
作業手順：
 ファイルを作る
 ファイルを保存する
 ブラウザで確認する
コンピュータリテラシー
3
作成に必要なもの




広島工大
テキストエディタ
画像編集ソフト
FTPソフト
プロバイダとWebサーバ
コンピュータリテラシー
4
HTMLの要素・タグ・属性と値
広島工大
HTML文書内で、Webページの動きをあらわす命令や
コメントを書き込むための書式。テキストをタグではさむ
ことで、インターネットブラウザで表示するときのデザイン
などが決まる。ウェブページを作成することは、ＨＴＭＬの
タグをいかに使いこなすかにかかっている。
要素(element)
要素名(element)
要素内容(content)
< h1 align=“right” > タグと要素は別のもの </h1>
値(value)
属性(attribute)
終了タグ(Tag)
開始タグ(Tag)
コンピュータリテラシー
5
文書の構造を定義する
広島工大
<html>
<head>
文書の情報
</head>
<body>
実際に表示される文書の内容
</body>
</html>
<html>タグと</html>タグは
文書がHTMLで書かれている
ことを宣言するもので、基本
的に文書全体と最後に置く。
<body>タグと</body>タグで挟
まれた部分が、実際にブラウザ
に表示される文書部分となる。
<head>タグと</head>タグの間には、文書のタイトルや特徴、
製作者の情報をはじめとした、文書に関する情報を記述す
る。基本的に<title>タグと</title>タグで挟まれたテキスト以外
ブラウザには表示されない。
コンピュータリテラシー
6
文書にタイトルをつけたい
広島工大
ヘッダで記述される文書の表題は<title>タグと</title>タグの間に
書かれる。
<title>
How to write a web page?
</title>
これを<head>タグと</head>タグの間に入れる。
コンピュータリテラシー
7
コメントを入れたい
広島工大
タグの間に挟まれた部分がコメントになる
<!-コメントの内容
-->
コメントになった内容がブラウザには表示されない。
編集時のメモなどに利用する。
文書の一部を一時的に隠したり、タグを無効にしたりする時
にも便利である。
<!と--（ハイフン2つ）の間には空白を入れず、必ず続けて
記述する。
複数行を跨ることができる。
コンピュータリテラシー
8
背景色を指定したい
広島工大
<body>タグのbgcolor属性でページの背景色を指定する。
色の指定には、「＃」のあとにrgbの値を16進数で記述するか、
直接色名を書き込む。
<body bgcolor=“red”>
表示される内容をここに書く。
</body>
“#ff0000”
色の指定がされていない場合、ブラウザの設定に従って
背景色が表示される。
色名について、大文字と小文字は区別されない。
コンピュータリテラシー
9
背景に画像を設定したい
広島工大
ページの背景に画像を使う場合は、<body>タグのbackground
属性で使用する画像ファイルを指定する。読み込んだ画像は
連続してタイル状に表示される。
<body background=“cat1.gif”>
背景に画像を使っている。
</body>
背景画像だから、サイズの大きな思い画像ファイルは
なるべく避けたほうがよい。
コンピュータリテラシー
10
見出しを設定したい
広島工大
<h>タグで見出しを設定する。全部で１～６の６段階あり、h1が
一番上位、以下数字が大きくなるにつれて見出しのレベルが
下がることを意味する。
<h1>見出し１</h1>
<h2>見出し２</h2>
<h*> ~ </h*>
<h3>見出し３</h3>
* 1~6
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
一般的にタグに挟まれた部分は太字で、前後に空白をあけて
表示される。数字が大きいほど小さいフォントになるが、実際
画面上に表示される大きさは、環境設定によって左右できる。
コンピュータリテラシー
11
広島工大
段落を設定したい
その範囲がひとつの段落であることを示す。一般的にブラウザ
では段落の前でテキストが改行され、さらに一行分の空白が
挿入される。
<p>
ここに表示内容を書く。
</p>
p: Paragraph
内容の空の<p>は無視される。
終了タグ</p>は省略できるが、正しいHTML文書を作成する
ためにはつねにつけたほうがよい。
コンピュータリテラシー
12
段落の位置を指定したい
広島工大
<p align=“★”> ～ </p>
★ left, center, right
<p>タグにalign属性を指定すると、段落の位置をleft（左揃え／
デフォルト）、center（センタリング）、right（右揃え）のいずれかに
指定できる。
例：
<p align=“left”> 段落の左揃え</p>
<p align=“center”> 段落のセンタリング</p>
<p align=“right”>段落の右揃え</p>
コンピュータリテラシー
13
改行させないで表示したい
広島工大
通常ブラウザでは、画面に収まるように、ウィンドの幅に
合わせてテキストを自動的に改行している。しかし、<nobr>
タグと</nobr>タグで挟むと、その範囲のテキストは改行
されずに１行で表示される。
<nobr>
改行させない表示内容をここに書く。
</nobr>
コンピュータリテラシー
14
広島工大
改行させたい
HTML文書で改行を入れてもブラウザ上の表示には反映
されない。ブラウザ上で実際に改行させるには、改行したい
位置に<br>タグを記述する。
<br>
ひとつの位置で改行であるので、終了タグがない。
コンピュータリテラシー
15
画像を表示したい
広島工大
指定した場所に、画像をうめこむ。
<img src=“*”>
*には画像ファイルや画像のURLを記述する。
終了タグはない。
例：
<p>
<img src=“FlowerRed.gif”>
</p>
コンピュータリテラシー
16
画像の代わりのテキストを指定したい
広島工大
<img src=“*” alt=“text”>
画像表示できないブラウザのために、画像の代わりに表示される
テキストを指定するのがalt属性である。
画像を読み込まないように設定しているブラウザや、画像を表示
できるブラウザであっても画像を読み込むまでの時間、または画
像の読み込みに失敗した場合にもこのテキストが表示される。
例：
<p>
<img src=“FlowerRed” alt=“赤い花”>
</p>
コンピュータリテラシー
17
画像のサイズを指定したい
広島工大
<img src=“★” width=“◆” height=“◇”>
★ ・・・画像のファイル名
◆ ・・・幅（ピクセルまたは％）
◇ ・・・高さ（ピクセルまたは％）
画像のサイズを指定する時には、width属性、height属性を使う。
ピクセルでは画像のサイズを直接指定し、パーセントではウィンド
の大きさに対する割合で指定する。
パーセントでは画像のサイズは相対的になり、ウィンドのサイズ
に左右される。
サイズ属性を指定しない場合は画像の本来のサイズで表示
される。
コンピュータリテラシー
18
テキストとの並び方を指定したい
広島工大
<img src=“★” align=“◆”>
★ 画像ファイル名（URL)
◆ top, middle, bottom
通常、画像は前後のテキストと一緒に、ひとつの行の中に配置
される。Aligh属性を使用すると、その際の画像とテキストの並び
方を指定することもできる。
top: 画像の上部とテキストの上部をそろえる。
middle:画像の中央と周囲のテキストのベースラインをそろえる。
bottom:画像の下部と周囲のテキストのベースラインをそろえる。
（デフォルト）
コンピュータリテラシー
19
リンクを設定したい
広島工大
任意のテキストや画像にリンクを設定する。移動先のURL
（ファイル名）を記入する。URLは、現在のファイルとの位置関係
を考えて、絶対URLか相対URLを決める。
<a href=“*”> ~ </a>
HTML文書をはじめインターネット上の特定の資源（リソース）を
示すため、HTML3.0まではURL(Uniform Resource Locator)という
名称が使われてきた。HTML4.0からはこのURLにかわってより広
義なURI(Uniform Resource Identifier)という用語が使われている
ようになっている。URIのほうが上位の概念である。
コンピュータリテラシー
20
問い合わせ先を示したい
広島工大
<address> ~ </address>
文書製作者と連絡をとるための情報（製作者、e-mailアドレス、
住所、電話番号など）を記載する場合に使用する。一般的な
ブラウザではイタリックで表示される。
例：
<address>
製作： <a href=“URL”> XX会社</a> <br>
Email： <a href=“mailto:メールアドレス”> メールアドレス </a>
</address>
コンピュータリテラシー
21
テキストの色を指定したい
広島工大
<body text=“★”> ~ </body>
<body link=“★”> ~ </body>
<body alink=“★”> ~ </body>
<body vlink=“★”> ~ </body>
★ 色指定値(#rrggbb)、または色名(colorname)
全体のテキストやリンク部分のテキストの色を指定する。
text: 標準のテキストの色を指定
link: まだ見ていない（キャッシュされていない）ページへリンク
している部分の色を指定
alink: リンク部分を選択した瞬間（クリックなど）の色を指定
vlink: すでに見た（キャッシュされている）ページへリンクしている
部分の色を指定
コンピュータリテラシー
22
テキストの色を部分的に指定したい
広島工大
<font color=“★”> ~ </font>
★ 色指定値(#rrggbb)、または色名(colorname)
指定した範囲のテキストの色を変更する。
<body>タグのtext属性でテキストの色を指定する場合は文書
全体に対して有効になるが、<font>タグのcolor属性では、タグ
に挟まれた部分にのみ有効になる。
コンピュータリテラシー
23
リストを作りたい
広島工大
<ul>タグと</ul>タグでその範囲がリストであることを示す。項目
の順序が重要でない箇条書きを作成したい場合に使用し、行頭
に「・」を用いたリストが形成される。リスト表示したい項目はそれ
ぞれ<li>タグと</li>タグに挟んで並べる。
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
ul: Unordered list
li: List
コンピュータリテラシー
24
番号付きリストを作りたい
広島工大
<ol><li> ~ </li></ol>
<ol>タグと</ol>タグでその範囲が番号付きのリストであること
を示す。
順番が重要なリストを作成したい場合に使用する。
行頭の記号が連番の数字になって表示する。
一般的なブラウザでは、項目がインデントされ、上下に
ｽﾍﾟｰｽをあけて表示される。
コンピュータリテラシー
25
テーブル（表）を作りたい
広島工大
<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=“*” > 枠の幅を指定する。*ピクセル
コンピュータリテラシー
26
テーブルの見出しを作りたい
広島工大
<th> ~ </th>
<th>タグと</th>タグで行や列の見出しを作成する。見出しとして
定義されたテキストは、一般的には太字でセンタリングされて表
示される。
例：
<table border=“1”>
<tr><th>列１</th><th>列２</th><th>列3</th></tr>
：
：
：
</table>
コンピュータリテラシー
27
入力したとおり表示したい
広島工大
<pre> ~ </pre>
このタグで囲まれた部分が、整形済みであることを示す。通常、
<pre>タグと</pre>タグで挟まれたテキストは等幅フォントで表示
され、HTML文書内の空白文字や改行などがブラウザ画面にそ
のまま反映される。
例：
<pre>
main()
{
int a,b,c;
a=5; b=10;
if(a<5) c=20;
}
</pre>
コンピュータリテラシー
28
長い文書を引用したい
広島工大
<blockquote> ~ <blockquote>
比較的に長い文書を抜粋・引用する時に使用する。一般的に
<blockquote>タグと</blockquote>タグで挟まれた部分は上下
一行分のｽﾍﾟｰｽが挿入され、左右もインデント（字下げ）されて
表示されるので、上下左右にｽﾍﾟｰｽがあく形になる。
<p>ある原稿より引用</p>
<blockquote>
<p>引用文１</p>
<p>引用文２</p>
</blockquote>
コンピュータリテラシー
29
横罫線を表示したい
広島工大
<hr>
<hr ★>
★ size=“太さ”（ピクセル）, width=“長さ”（ピクセルまたは％）,
align=“left”, “center”, “right”, noshade
<hr>で横罫線が画面の左右いっぱいに表示される。前後との
間隔は、ブラウザに依存する。
横罫線の属性を設定できる。ピクセル単位の太さ、ピクセル
単位または画面の横幅に対する割合の幅、左右に寄せ、
センタリング（デフォルト）の位置属性
noshadeを指定すると、立体的ではなく、平面的に表示される。
終了タグなし。
コンピュータリテラシー
30

Download Report