###その壱・・・・文字のはさみ揚げ###
用意する物 | |
・道具・・・ | PC PC内メモ帳(windows) PC内Simple Text(マック) ブラウザ(オフラインモードで使用) ※ブラウザは、インターネットエクスプローラー(IE)か ネットスケープ(ネスケ)がいいです。 私が他のものをもってないので、確認できない為です。 決して回し者ではありません。/^-^; |
●まず、初めの第一歩、htmlの土台、お鍋と生地を用意しましょう。 (半角英数であれば、大文字でも小文字でもかまいません) ※色は、便宜的につけてあるだけです |
|
右側を見て下さい。 <>で囲まれた中の文字が、必ず『/』のないものとあるものとペアで書かれていることに気づいてくれたでしょうか? そうです!つまりこれは、なんでもかんでも挟んでしまおう!ということです。 最も蓋がどっちなのか、どっちが上なのか、という問題はありますが、つまり・・・ HTMLは、とにかく『<xxx>』で始まり、『</xxx>』で終わります。その間にいろいろなものを入れていきます。 (『<』と『>』で囲まれたものを『タグ』と呼びます。) |
<html>・・・・鍋 <head>・・・・鍋の取っ手 <title>・・・・鍋についたラベル ページのタイトル (これはそのページには表示されません。) </title>・・・・鍋についたラベル タイトル以外の注記のようなものを入れます。 (必要な時) </head>・・・・鍋の取っ手 <body>・・・・生地(上) ここに書かれたものが画面に表示されます。 </body>・・・・生地(下) </html>・・・・鍋蓋? |
ということで、少し説明方法が違いますが・・・ 最もシンプルなHTMLはさみ揚げ *小麦粉は、勿論水でといたものです(笑)・・・・・ つっこまれるといけないので念のためお断りを。/^-^; *そして、絵にはありませんが、<head></head>内のものは 通常見えないので、隠し味と言えるかも?(笑) (タイトル以外に必要なとき、metaタグやjavascript、stylesheetなどを入れます。) |
|
●では、具を入れて『○○.html』といった形で名前をつけて保存しましょう。 (○○にあたるところは半角英数で!) そして、その出来上がったファイルをダブルクリックすると・・・・ (マックの場合は、ブラウザをたちあげて、作成したファイルを読み込ませて下さい。) |
|
入力が面倒だったら左のソースをマウスでドラッグして選択し、編集からコピーを選び、 それを、メモ帳にペーストして保存してもOKです。 |
|
ソース(htmlで書かれたものをこう呼びます) | 画面表示 |
<html> <head> <title> 練習のページ </title> </head> <body> わたしのホームページへようこそ♪ </body> </html> |
わたしのホームページへようこそ♪ |
●では、次に、少し調味調を加えてみます | |
ソース(1) | 画面表示(1) |
<html> <head> <title> 練習のページ </title> </head> <body> <center> わたしのホームページへ<br>ようこそ♪ </center> </body> </html> |
わたしのホームページへ ようこそ♪ |
※<center>と</center>で囲まれた部分は、画面中央に表示されます。 <br>は、改行させる時に使います。これには</br>はいりません。 |
|
ソース(2) | 画面表示(2) |
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <b><i>わたしの</i><u>ホームページへ</u><br>ようこそ♪</b> </center> </body> </html> |
わたしのホームページへ ようこそ♪ |
・<b>、</b>→太字にする ・<i>、</i>→傾斜させる ・<u>、</u>→アンダーラインを引く ※スペースの都合で、ソースの方で「・・・ホームページへ」で改行されてますが、ここは続けて書いてもらって構いません。 |
|
ソース(3) | 画面表示(3) |
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪ </center> </body> </html> |
わたしのホームページへ ようこそ♪ |
・<font>、</font>→文字を変化させる ・<font color="色">、</font>→文字の色を指定 ・<font size="数字">、</font>→文字の大きさを指定 *<>内の空欄は、半角スペース1つです。 ※一度に<font size="数字" color="色">、</font>として、両方一度に指定することもできます。 サイズや色は、いろいろ試してみてください。 尚、色名は、「#c0c0c0」とか色コード(シーケンス番号)でよく指定されてますが、ある程度のものは、色名そのもので指定できます。(black,white,red,green,yellow,purple,brown,blue,silver,navy,orange等140色以上らしいです・・・知っている英語の色名で試してみてはどうでしょうか?) 参:「カラーリスト(ブラウザ対応色名)」 |
上手く文字のはさみ揚げ(表示)ができたでしょうか?
次は、画像のはさみ揚げです。