ホームページとブログの教室、第8回目は文章ファイルを貼り付けて、段落と改行タグをつけていきます。
リンクタグ、画像タグのおさらい
今回も、リンクタグと画像タグのおさらいからです。
タグの入力時は『半角英数モード』で
タグは入力時に『半角英数モード』にしておくのがおすすめです。
パソコン右下の文字が『Ａ』になっているか確認しましょう。
（『あ』になっている場合は全角モードになっていて、入力間違いのもとです）
マウスで『あ→Ａ』とクリックして切り替えることも可能ですが、
キーボードの『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ファイルを編集し、上書きできるでしょうか？
- 文章をコピー＆ペースト（コピペ）できたでしょうか？
- 段落と改行タグをうって確認できたでしょうか？
次回は、このファイルをさらに編集していきます。