「ホームページで
使うことば-HTML-」について |
 |
|
 HTMLとは／タグ（tag）とは
文字や写真の表示位置を中央にしたい。
他のホームページやホームページの中のあるページにリンクをはる
表を作るには？
問い合わせをメールで受け付けたい
文字の色や大きさを変えたい
文字を動かす
画像を取り込むために画像を小さくしたい（2）
画像を50k以下にするのに【Jtrim】というソフトは使いやすいです
文字を枠の中に入れるには
|
|
| HTMLとは／タグ（tag）とは46 |
|
HTMLは Hyper-Text Markup Language の略で
ウェブページを記述するための記述言語のことです。
タグ(tag)
HTMLで用いる制御文のことです。＜HTM＞や＜BODY＞や＜B＞などあります。
括弧は半角で書き込みますと制御文になります
例えば＜br＞
br は BReak（改行）の略です。テキストをこの位置で改行します。
HTML文書中の改行は無視されるか、1文字分のスペースとして扱われるため、
文章を明示的に改行するためには ＜br＞ を用います。
一行あけたいときにはもう一つ＜br＞を入れます
例えば＜center＞～＜/center＞
～の部分が中央寄せになります
例えば＜B＞～＜/B＞
～の部分が太字になります
例えば＜I＞～＜/I＞
～の部分がイタリック（斜体）になります
例えば＜U＞～＜/U＞
～の部分に下線がつきます
|
|
topに戻る
|
|
| 文字や写真の表示位置を中央にしたい。15 |
|
中央に置きたい文字や写真を次のtagで囲む。
<center>ことばがこどもの未来をつくる</center>
|
|
topに戻る
|
|
| 他のホームページやホームページの中のあるページにリンクをはる16 |
|
<a href="http://www.labo-party.jp">LABO PARTY</a>
" "の部分にリンクしたいホームページのアドレス（http://www.labo-party.jp）を入れます。
使用例．ラボ公式ページはLABO PARTY
ボタンの画像をつけただけではリンクボタンになりません
リンク先のホームページのアドレスが必要になります
|
|
topに戻る
|
|
| 表を作るには？21 |
|
基本的なテーブル
■ テーブル（表）を作成するには主に次のタグを用います。
<table>～</table> ... テーブル全体
<tr>～</tr> ... テーブルの１行
<td>～</td> ... テーブルの１マス（列）
<table border="1">
<tr>
<td> ● </td>
<td> ■ </td>
<td> ▲ </td>
</tr>
<tr>
<td> ○ </td>
<td> □ </td>
<td> △ </td>
</tr>
</table>
これをブラウザで表示すると次のようになります。
横の段増やすのは
<tr>
<td> ● </td>
<td> ■ </td>
<td> ▲ </td>
</tr>
<tr>
<td> ● </td>
<td> ■ </td>
<td> ▲ </td>
</tr>
とコピーして増やせばいいし
<tr>
▲ </td>
</tr>
を増やせば縦の段が増えます。
幅や高さは自動的に調節されます。（設定も可能です。）
ホームページ作成ソフト等で作成し、それをここに貼り付けたりすると簡単です。
１セル(１マス)の中で2行<BR>で改行します。
・参考になるホームページ
http://tohoho.wakusei.ne.jp/wwwbeg.htm
・テーブルについては
http://tohoho.wakusei.ne.jp/wwwbeg4.htm#Table
■ 項目を連結するには<td colspan="n">を用いると、右方向に n 個の項目を連結することができる。
<table border="1">
<tr>
<td colspan="2"> ● </td>
<td> ▲ </td>
</tr>
<tr>
<td> ○ </td>
<td> □ </td>
<td> △ </td>
</tr>
</table>
これをブラウザで表示すると次のように･････
<td rowspan="n"> を用いると、縦方向に n 個の項目を連結することができる。
<table border="1">
<tr>
<td rowspan="2"> ● </td>
<td> ■ </td>
<td> ▲ </td>
</tr>
<tr>
<td> □ </td>
<td> △ </td>
</tr>
</table>
これをブラウザで表示すると次のように・・・・・
|
|
topに戻る
|
|
| 問い合わせをメールで受け付けたい23 |
|
★★★をクリックすると問合せメールが出せるようになっています。
例えば表の下にこんなふうにつけます
<TABLE border="1" cellpadding="3">
<TR>
<TD align="center">曜日</TD>
<TD align="center">時間</TD>
<TD align="center">年齢</TD>
<TD align="center">コメント</TD>
</TR>
<TR>
<TD>金曜</TD>
<TD>PM 3:30-4:15</TD>
<TD>プレイルーム</TD>
<TD>親子で絵本やお歌を楽しんでいます。<BR>ただいま会員募集中</TD>
</TR>
<TR>
<TD>金曜</TD>
<TD>PM 4:30-5:30</TD>
<TD>幼児～小学生</TD>
<TD>とても元気な子供たちと楽しく活動しています。</TD>
</TR>
</TABLE><BR>
※ただ今,会員募集中。金曜以外のクラス準備中です。<BR>
<B>・フリーダイヤル 0120-XXXX-XXXX</B><BR>
<B>・●●●パーティへのメールは</B> <A href="mailto:hiroba@labo-global.co.jp">★★★</A>
mailto:の後がご自分のアドレスになります
これをブラウザで表示すると次のようになります。
| 曜日 | 時間 | 年齢 | コメント | | 金曜 | PM 3:30-4:15 | プレイルーム | 親子で絵本やお歌を楽しんでいます。
ただいま会員募集中 | | 金曜 | PM 4:30-5:30 | 幼児～小学生 | とても元気な子供たちと楽しく活動しています。 |
※ただ今,会員募集中。金曜以外のクラス準備中です。
・フリーダイヤル 0120-XXXX-XXXX
・●●●パーティへのメールは ★★★
|
|
topに戻る
|
|
| 文字の色や大きさを変えたい24 |
|
①文字の色を変える
文字にお好みの色がつきます。
(虹の色は 赤（セキ）橙（トウ）黄（オウ）緑（リョク）青（セイ）藍（ラン）紫（シ）っと覚えるといいと聞きました。）
<font color="red">LABO</font>
LABO
Never cross when the light is red
<font color="orange">LABO</font>
LABO
On Friday he ate through five oranges, but he was still hungry.
<font color="yellow">LABO</font>
LABO
Wait when the light isyellow.
<font color="green">LABO</font>
LABO
A green truck with bottles og gas in the back.
<font color="blue">LABO</font>
LABO
A blue car.
<font color="indigo">LABO</font>
LABO
<font color="violet">LABO</font>
LABO
Taro has some potted violets.
<font color="purple">LABO</font>
LABO
Purple hunkies pop out!
<font color="lime">LABO</font>
LABO
<font color="cyan">LABO</font>
LABO
<font color="pink">LABO</font>
LABO
The pink cheeks huff and puff.
<font color="brown">LABO</font>
LABO
Daruma-chan puts on his brown rain boots.
<font color="gray">LABO</font>
LABO
His skin is lovelygray.
<font color="white">LABO</font>
LABO
What are those white marks in the street?.
whiteは消えてしまうようです。
<font color="knaiki">LABO</font>
LABO
<font color="magenta">LABO</font>
LABO
<font color="sky blue">LABO</font>
LABO
<font color="gold">LABO</font>
LABO
We stood in silence, gazing out at thegolden glow of the twilight sea.
<font color="silver">LABO</font>
LABO
＠いとうちゃんさんからの情報
色の種類を増やしたり､どの色の背景にどの色の文字なら目立つかを確かめられるページです。
使い方はタグ（内にかかれた文字のこと）の色（redとか）の部分を"#f0f8ff"とかに変えるだけです。
まずは自分の日記で試して、やり方を確認されると良いかと思います。
Color Test
<font color="#3cb371">いろいろ</font>
<>のような特殊な文字はキーワード指定か、番号指定で表示できます。
半角小文字で「＆ｌｔ；」「＆ｇｔ；」と書きます。
HTMLタグ辞典などに一覧が出ています。
♥というのも使えちゃいます。
②サイズを変える
<font size="1">LABO</font>
LABO
<font size="2">LABO</font>
LABO
<font size="3">LABO</font>
LABO
<font size="4">LABO</font>
LABO
<font size="5">LABO</font>
LABO
<font size="6">LABO</font>
LABO
<font size="7">LABO</font>
LABO
<font size="8">LABO</font>
LABO
色をあわせる場合
<font size="5" color="vermilion">LABO</font>
LABO
③文字を太くする
<b>LABO</b>
LABO
色とサイズを変える
<b><font size="5" color="royal blue">LABO</
font></b>
LABO
④文字を中央にする
<center>LABO</center>
LABO
⑤文字を斜体にする
<i>LABO</i>LABO
|
|
topに戻る
|
|
| 文字を動かす25 |
|
<marquee>LABO</marquee>
(Internet Exploreのみで作動）
|
|
topに戻る
|
|
画像を取り込むために画像を小さくしたい（2）
画像を50k以下にするのに【Jtrim】というソフトは使いやすいです33 |
|
画像を50k以下にするには、いろいろなソフトがありますが
【Jtrim】というソフトは使いやすいです
ダウンロードはこちらです
http://www.woodybells.com/jtrim.html
説明文紹介
「JTrim(ジェイトリム)は初心者にも簡単に操作が出来るフォトレタッチソフトです。
多くの加工機能で画像に様々な効果を与えることができます。
非常に軽快に動作するため、ストレスなく操作できます。 」
リサイズを選び、数値を小さくすれば、軽い画像をつくれます
* Windows95/98/Me/NT4/2000/XPに対応
|
|
topに戻る
|
|
| 文字を枠の中に入れるには59 |
|
文字を枠の中に入れる
＜table＞
＜table cellpadding="10" cellspacing="0" style="border:2px dotted #FF0099;"＞
＜tr＞
＜td bgcolor="white" style="border:2px dotted #FF0099;" align="center"＞
＜font color="#696969" size="3"＞
＜b＞ここにタイトル＜/b＞＜/font＞
＜br＞
＜font color="#000000"size="3"＞
表（テーブル）の中に入れたい文字を＜br＞
ここに入力してください＜br＞
＜/font＞＜/td＞＜/tr＞＜/table＞
ここにタイトル
表（テーブル）の中に入れたい文字を
ここに入力してください
|
|
topに戻る
|
|
|
