HTML 手書きで書く文章

手書きで文章を書き、ワープロソフトを使ったときのように文字の大きさを変えたり、色を変えたりします。
そのための用意しておくもの、簡単なパソコンの設定確認、具体的な作業の説明です。
ここ迄で文章だけのページなら、手書きのHTMLでほとんど作れるようになります。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

用意するもの ▲ 通常のパソコンなら最初から付属しています

テキストエディター	windowsを使っている人は「Notepad(メモ帳ともいいます)」、macを使っている人は「simple text」を用意します。 windowsまたはmacに最初からついている標準ソフトです。「Notepad」の入っている場所
ブラウザー	IE 6.0(インターネットエクスプローラ6.0)　新しいパソコンなら最初からついています。少し古いとIE5.0とかIE5.5ですがそれでも問題はありません。最新のIE6.0を入手する方法

上に戻る

文章を書き、その文章がホームページでどう表示されるか確認する ▲

文章を書く前の準備

パソコンの設定を一箇所だけ確認します。windowsではファイル名の後に「拡張子」というものが付きます。テキストファイルでは.txt、エクセルのファイルでは.xls、画像のファイルでは.bmp、といったものですが、パソコンの設定によってはこの拡張子が表示されないようになっています。表示されるように設定を変更します。

拡張子表示方法

上に戻る

文章を書く

ここで覚えることはひとつだけです。文章の最初に半角で<HTML>と書き、最後にこれも半角で</HTML>と付け加えることです。
これだけで終わりです。どんなに長い文章でも、これだけでHTMLの文章としてホームページに表示することができます。例えばこんな風に書きます。文の終わりは読みやすいように改行しています。

<HTML>
週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

これでこの文章はHTMLの文章だと宣言したことになります。この<HTML>、</HTML>のようなものをタグと呼び、必ず半角で記入します。前後一対のブロックからできており、後のタグは前のタグに/(スラッシュ)を追加しただけです。この一対のタグで囲まれた部分に、タグが持っている効果が発揮されます。
これで終わりなのですが、皆さんはノートパッドに書いた文章しか目にしていません。ホームページではどう表示されるかを確認してみます。
そのためには一旦この文章を保存し、IEで開くという作業を行います。IEで開いた状態が、ホームページの表示状態を表しています。

各種記号、キーボードの位置

上に戻る

書いた文章を保存する

ここでも覚えておくのもひとつだけです。ファイルの名前の最後に「.htm」を付けるということです。
ここでは「Cドライブ」の「My Documents」の中に、あらかじめ「My Homepage」という名前のホルダーを作っておき、そこに「book.htm」という名前をつけて保存します。
最初に拡張子を表示するように設定変更したのは、この「.htm」を表示させるためです。パソコン任せにすると「.txt」をつけたりしますのでチェックが必要です。

保存のしかた

上に戻る

保存した文章をIEで開く

保存ができたら、これをIEで開いてみます。「My Homepage」の中の、今作った「book.htm」をダブルクリックすれば、IEが起動し「book.htm」が表示されます。
下のように、Notepadでは入れたはずの改行がなくなってしまい、一続きの文章になっています。タグもなくなってしまっていますが、これが正しい状態です。

<HTML>
週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。ドラクエ4の特集が載っています。汚れ、破れ、書き込み等なく非常にきれいです。

上に戻る

ここで覚えておくこと

とりあえず文章を書き、それをIEで開くことができました。ここ迄で覚えておくことは三つだけです。

文章の最初に<HTML>と書き、最後に</HTML>と付け加えること
タグは必ず半角で書くこと、
ファイル名は最後には　.htm(ドット　エッチ　ティー　エム)を付けること、この三つです。

<HTML>の書き方はあまりうるさくありません。文字は大文字でも小文字でも、大小混じっていてもかまいません。記入箇所も先頭と最後であればどこに書いてもかまいません。自分が後で見直しやすいように書いておけばいいのです。

問題のない書き方の例

こんな書き方でもいい

<Html>週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。</Html>

こんなんでもいい

<html>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

</HTML>

ただひとつやってはいけないのはタグ自身の英単語を途中で改行することです。

これはだめ

<Ht
ml>週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。</Html>

上に戻る

改行する ▲

先ほどの文章で、改行がなくなってしまいましたので、改行させるようにします。
改行を意味するタグは です。
 と書いた場所で改行されますから、Notepad上で自分が改行した場所に、 を置いておけばいいのです。先ほどタグは前後一対と書いたのですが、早速例外が出てしまいました。この はひとつだけで使います

例題を修正します。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

book2.htmとして「My Homepage」に保存し、先ほどと同じようにbook2.htmをダブルクリックすると、今度は改行された狙い通りの表示になっています。

改行の指示を２回すると１行空けることができます。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。

ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

２回分と同じような効果を出す というタグもあります。

<HTML>
週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。

ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

上に戻る

文字に効果を付ける ▲

ワープロソフトで文章を書くときは、強調したいところを太字にしたり、色を変えたり、文字を大きくしたりと、いろんな手法を使います。同じことをやってみます。

文字を太字にする

文字を太くする効果を出すタグは～です。太字にしたい部分をこのタグではさんでやります。
早速やってみましょう。例文の「週間ファミコン通信90年2月2日号」の部分を太字にします。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

これをbook3.htmとして保存し、ダブルクリックで開くと、上のように太字になっています。

上に戻る

文字の色を変える

文字はFONT、色はcolorですから、色を変える効果を出すタグは ～です。色を変えたい部分をとではさみます。 「FONT」と「color」の間には半角のスペースを入れます。基本的に単語と単語の間は半角スペースが入ります。間違って二つ三つと入れてしまっても問題ありませんが、入ってないとタグとして働きませんので忘れないように注意してください。
早速やってみましょう。「ドラクエ4」の部分を赤くします。

各種記号、キーボードの位置

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

これをbook4.htmとして保存し、ダブルクリックで開くと「ドラクエ4」の部分が赤くなっているはずです。青くしたいときはredの代わりにblue、緑ならgreenに変えるだけです。

その他の色の名前を見る

上に戻る

文字の大きさを変える

文字はFONT、大きさはsizeですから、文字の大きさを変える効果を出すタグは ～です。大きさを変えたい部分をとではさみます。数字は1から7までを使い、7が最大　1が最小です。「FONT」と「size」の間には先ほどと同様に半角のスペースを入れます。
早速やってみましょう。「非常にきれい」の部分を大きくします。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

こんな風になっているはずです。

上に戻る

効果をダブらせる

「非常にきれい」の部分を青字で大きくします。とを使います。
～ でもかまいませんが、２回も「FONT」を書くのはわずらわしいので、 FONTは共通で使い～とします。区切りの部分にはやはり半角スペースが入ります。「color」の前と「size」の前がそれに該当します。 colorとsizeを書く順番はどちらが先でもかまいません。でも でもどちらでもOKです。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。 
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

上に戻る

三つ重ねて効果を出す

青い太字で、サイズも大きくします。 ～を使います。

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれい
です。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

タグの書き方は非常にきれいでもいいですし
非常にきれいでもOKです。
ただしこれはだめです。
非常にきれい
理由はわかると思います。「非常にきれい」の前後のタグに着目します。 とという違った種類のタグではさまれているからです。

上に戻る

HTMLで文章を書くコツ

HTMLで文章を作るときは、通常の文章のように、タグも交えて前から順に書いていくのではなく、まず文章だけを先に書きます。次にどこにどんな効果を出したいかを考え、効果を出したい部分をタグではさんでいきます。二重に使うときはそれをまた挟むというようにするとわかり易くなります。どのタグでどんな効果が出るかさえ知っていれば、種類は違っても使い方は同じです。
これだけわかれば、文章のホームページは、もう作ることができます。

上に戻る

その他、文章に使うタグ

斜体にしたいときは～(アイ)

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。 
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

アンダーラインは～

<HTML>
週間ファミコン通信90年2月2日号です。 
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。 
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

区切りの線は<HR> と同じように単独で使います。改行の効果も持っています。

<HTML>
週間ファミコン通信90年2月2日号です。
<HR>
ドラクエ4の特集が載っています。 
汚れ、破れ、書き込み等なく非常にきれいです。 
</HTML>

週間ファミコン通信90年2月2日号です。

ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

これで大体文章を書くことはできるようになったはずです。しかし真っ白な画面に文字だけでは少し寂しい感じもします。次は画像を入れたり、背景を表示させます。

上に戻る