「ホームページで 使うことば-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> ... テーブルの1行 <td>~</td> ... テーブルの1マス(列)
<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> を増やせば縦の段が増えます。
幅や高さは自動的に調節されます。(設定も可能です。) ホームページ作成ソフト等で作成し、それをここに貼り付けたりすると簡単です。
1セル(1マス)の中で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>
<>のような特殊な文字はキーワード指定か、番号指定で表示できます。 半角小文字で「&lt;」「&gt;」と書きます。 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に戻る
|
|
 |