ソウルホテルへ

lobbyへ

☆タグに強くなりましょう☆

頑張って！


メモ帳を使ってＨＴＭＬでこのＨＰを作りました。

　ツールを使うと簡単に出来るＨＰですが、
管理をするときに自分できちんとＨＴＭＬを打っていた方が、分かりやすい
という理由で、メモ帳に書いていくことにしました。

　 コレがやり始めると意外と面白い。
私の命令をこんなに良く聞いてくれるなんて、久しぶりの感覚です。（笑
　


☆「スタート」→「プログラム」→「アクセサリ」→「メモ帳」で、
メモ帳を起動します。
そして大事なことです。

☆ひな形を作りましょう


<html>
<head>
<title>
</title>
</head>
<body>
</body></html>

上のソースをドラッグして右クリックでコピーしてメモ帳に張れば一番簡単なＨＴＭＬのカタチができます。
張り終わったら適当に保存して下さい。
デスクトップに出しておくのが、便利です。
html・・・「これから先はhtml文書です」と言っているのです。
title・・・青いタイトルバーに出ている文字です。
body・・・「これから先は本文です。」
タグ＝＜＞はすべて入れこの形で打ち込むのがお約束。


☆次は色を変えてみます。

何もしない状態では背景色は白、文字色は黒です。
それを変えるには、
<body>を
<body bgcolor="背景色名" text="文字色">
に変更します。

blackやwhiteなど、単純な色なら名前を入れるだけでいいけど、
ややこしい色になると色コード（１６進法で表示）を入れないとブラウザによって
違う色で表示されたりします。

色コードを知るためには、
自分で計算して１６進法に直すとい手段もありますが、
私はココの色見本をコピーアンドペーストしています。

また、black(#000000)のように名前だけでいい色もあります。
gray　(#808080)
silver　（#c0c0c0)
white　(#ffffff)
maroon　(#800000)
red　(#ff0000)
olive　(#808000)
yellow　(#ffff00)
green　　(#008000)
lime　　　(#00ff00)
teal　　　(#008080)
aqua　　　(#00ffff）
navy　　　(#000080)
blue　　　(#0000ff)
purple　　(#800080)
fuchsia　（　#ff00ff)

の十六色です。
き れ い ！



☆文字を入力する。

ＨＴＭＬ文書では改行が無視されます。
改行するには文末に<br>と入れます。
半角の空白も無視されます。
半角の空白はいくつ入れても半角の空白一個分しかスペースが空きません
全角なら空白として認識されます。

後は普通に字を入力しましょう。
ただし途中の文字を一部だけ変える時や
掲示板などの書き込みの文字を変えたいときは
fontの指定だけで出来ます。

下↓を利用してコピペしてください。






色の所をredやblackと変えてください

<font color="色">ここに文字入力</font>

大きさも数の所を消して変えてください

<font size="数" >ここに文字入力</font>

両方同時に変えるには


<font color="色" size="数">ここに文字入力</font>




☆文字の変化

文字に斜体を入れるには<i></i>を入力します。
<i>斜体</i>で
太文字にするには <b>太文字</b>で
ついでにアンダーラインは<u>ライン</u>
イタリックと太字とアンダーライン

となります。
ラインで訂正するには
<s>訂正</s>と入れます。
訂正しましょう。
teiseisimasyou


<sup>上に付く</sup>で上付き文字　

上に付く
　そしてこれは普通下に付く

　　　　　　　<sub>下付き文字</sub>

水平線は画面いっぱい。
パーセントで長さを変えられます。
<hr width="70%" align="center">　alighで場所も指定できます。
こんな風になります。


文字サイズを変えるには、<font size="1〜7の数値"></font>を使います。
１が最小で７が最大です。普通、表示されている文字は３です。
それぞれ、下のようなサイズになります。
１
２
３
４
５
６
７

また、<○○></○○>と、タグを必ず閉じるようにしないと、
<○○>以降の全文にタグが効いて大変な事になります。
タグは絶対のお命令なんです。


次にレイアウトのことです
☆右寄せ・左寄せ・センタリング

普通に文字を入力すると字が左に寄ります。
真ん中で目立ちたい場合は
<center></center> とします。
<center>真ん中</center>で

真ん中

となります。

右に持っていきたい場合は
<DIV align="right"></DIV>
と入力します。
<DIV align="right">右寄せ</DIV>で

右寄せ

となります。

左寄せするにはrightをleftに変えます。
centerのみ、DIV〜タグを省略できます。

段落を作ってみました。意外と便利。自動的に折り返してくれる。段落の次は改行してくれる。文章の中で使うと読みやすいかも。

色や大きさを変えてみる



一番難関（？）のリンクです。
☆単純にリンクを張る

<a href="リンク先のアドレス">ココ</a>
と指定します。
次にリンク部分にマウスを当てた時に解説文がでるようにするには
<a href="リンク先のアドレス" title="解説文"></a>
です。
例えば、ここからTOPに戻てみます。
ソース→<a href="index.html title="TOPに戻る">TOPへ</a> TOPへ
です。
同じページの違う部分に飛ぶには
<a href="#Ａ">Ａのところへ</a>
として、リンク先に<a NAME="Ａ">リンク先</a>と入れます。


☆画像を表示する

画像を表示するには
<IMG src="画像ファイル名">
を使います。
minyonさんの画像を表示するには
ソース→<IMG src="http://www.geocities.jp/soralier/minyo.jpg">


です。


☆表をつくる。

表をつくるのは<table>です。
そのままならば枠線は=0と言うことで表示されません。
<table border=1>
ならば、一番細い枠線が表示されます。
ホームページ名 BaeYongJun＆Song Yoona
とするには

<table border=1>
<tr>
<td>
ホームページ名
</td>
<td>
BaeYongJun＆Song Yoona
</td>
</tr>
</table>
となります。

<td></td>
は横の区切りです
<tr></tr>
は縦の区切りです。
項目と項目の間隔は
<table cellspacing="ピクセル数">
罫線と項目の間隔は
<table cellpadding="ピクセル数">です。

枠線を"3"、項目間の間隔と枠線との間隔を"10"で指定すると

ホームページ名 BaeYongJun＆Song Yoona


もう少し複雑に作ってみました。↓

表（授業態度）
自己評価
理解 記憶 態度
場所教室出来るすぐ忘れる必死
自宅遅い努力している積極的

こんな感じにいろいろ利用できます。

☆表で文章を割り付けてみました。

（１）今後・・・・ いくつかのページを作ってリンクする。FTP転送のやり方を教えていただく。具体的にアップするものが無いので教える方も難しいでしょうが・・・ 毎回の復習をきちんとやっておけば自分のものになるのでしょうが、なかなか時間がとれないのが現状です。
（２）反省・・・・ その時は理解しているのですが、自分のPCの前に来るとまた違って感じるものです。それに属性がまだどれに付けたらよいのか本を見ながらでないと覚えていません。 コンテンツをもっと具体的にしていかないとＨＰは完成しません。現場の資料がまだ揃っていない状態なので、少し時間がかかります。
この場合はborderを"0"にしているので、枠の線がありません。
  1. 今度は番号です。
  2. 整理するにはよいかも。
  3. 使い慣れること！
印なしです。
これはいろいろ出来る。
普通に使えます。
早く覚えたい。
上手に使うこと。
おもしろい！
ちょっとお遊び
貴女を胸に抱いて☆僕が抱かれて

５分だけ・・・。



色々試してみましたが、やはり慣れていないせいか、沢山ミスがあります。 これで大丈夫と思って更新しても、タグを間違えたり、閉じ忘れたりの連続です。 でもＨＴＭＬって面白い。自分の打った命令が形になって現れる不思議な世界です。 なかなか奥が深いようです。もっといろいろ書きたいのだけれど まだまだ沢山あるで思いつくたびに増やしていきます。 ちなみに今のタグはブロックコート。