ホームページとブログの教室、第8回目は文章ファイルを貼り付けて、段落と改行タグをつけていきます。
リンクタグ、画像タグのおさらい
今回も、リンクタグと画像タグのおさらいからです。
タグの入力時は『半角英数モード』で
タグは入力時に『半角英数モード』にしておくのがおすすめです。

パソコン右下の文字が『A』になっているか確認しましょう。
(『あ』になっている場合は全角モードになっていて、入力間違いのもとです)
マウスで『あ→A』とクリックして切り替えることも可能ですが、
キーボードの『Alt』を押して『半角/全角 漢字』キーを押すのでも切り替えられます。
htmlファイルをコピペで編集
パソコンには『コピー&ペースト』という便利な機能があります。
これを使いこなせば、文章やタグを一から全て入力することなく、時間と労力の節約になります。
前回『20170620』フォルダの中の『base.txt』から、『wagahai.html』を作りました。
base.txtの中身

『wagahai.html』と名前を付けて保存し、ブラウザで開くと、以下のようになります。

(ここに内容を書きます)しか文章はありません。
『wagahai.html』を、メモ帳で開き、(ここに内容を書きます)の部分に、ホームページの中身を入れていきます。
文章素材を用意
今回の文章は、別に用意しました。
『20170620』フォルダの中の『wagahai.txt』を使います。

『wagahai.txt』は『txt』拡張子の『テキストファイル』なので、ダブルクリックすると『メモ帳』が開きます。
標準が『メモ帳』なので、みなさんは何も設定しなければメモ帳が開きますが、別のさまざまなアプリでも開くことができます。
今回の文章は夏目漱石の『吾輩は猫である』
青空文庫より頂戴しました。
→ 原文はこちら
青空文庫は、年月が経って著作権が切れた作品がフリー素材として公開されています。
htmlファイルに文章をコピー
wagahai.txtの文章をすべて選択し、コピーします。
キーボードでは
すべて選択:『Ctrl+A』(AllのAと覚えると良いです)
コピー:『Ctrl+C』(CopyのCと覚えると良いです)

前回作った『wagahai.html』を開き、(ここに内容を書きます)の部分を、反転選択させるか、消すかして、先ほどコピーした文章をペーストします。
ペースト:『Ctrl+V』(”ヴェ”ーストまたは、Cの隣と覚えましょう)

メモ帳で文章を貼り付けるとこのようになります。
『上書き保存』をしてください。
そして、今度は今編集した『wagahai.html』を、ブラウザで開いてみます。
すると、

メモ帳から貼り付けたときにはあった、改行が無視されているのがわかると思います。
『20170620』フォルダにある『sample-wagahai1.html』がその状態です。
段落と改行をつけてみる
文章を見やすくするために、改行タグ<br>を適宜入れてみましょう。
『wagahai.html』をメモ帳で編集します。
閉じてしまった方はもう一度メモ帳で開きましょう、ブラウザではありませんよ。
段落タグ
<p>○○○</p>
段落のはじめと終わりを表します。
改行タグ
<br>
改行します。
段落と改行の違い
厳密な決まりはありませんが、おおまかな文章のかたまりは段落タグ<p></p>で囲います。
改行は、見やすくするために行をあらためる場合に使います。
文章が読みやすくなるように自分なりに工夫してみましょう。

このように段落と改行のタグを入れてみました。
上書き保存して、ブラウザで開いてみます。

原作者の夏目漱石の段落・改行に近くなり、だいぶ読みやすくなったのではないでしょうか?
3~4行くらいで段落をあけたり改行をすると良いでしょう。
『20170620』フォルダにある『sample-wagahai2.html』がその状態です。
メモ帳を書き換えて、上書き保存したのにブラウザの表示が変わっていない場合、ブラウザの『リロードボタン』を押すか『F5』キーを押して更新しましょう。
まとめ
- htmlファイルをメモ帳とブラウザ、両方で開けるでしょうか?
- htmlファイルを編集し、上書きできるでしょうか?
- 文章をコピー&ペースト(コピペ)できたでしょうか?
- 段落と改行タグをうって確認できたでしょうか?
次回は、このファイルをさらに編集していきます。