第8回『文章の段落タグと改行タグ』

ホームページとブログの教室、第8回目は文章ファイルを貼り付けて、段落と改行タグをつけていきます。

リンクタグ、画像タグのおさらい

今回も、リンクタグと画像タグのおさらいからです。

タグの入力時は『半角英数モード』で

タグは入力時に『半角英数モード』にしておくのがおすすめです。

パソコン右下の文字が『A』になっているか確認しましょう。
(『あ』になっている場合は全角モードになっていて、入力間違いのもとです)

マウスで『あ→A』とクリックして切り替えることも可能ですが、
キーボードの『Alt』を押して『半角/全角 漢字』キーを押すのでも切り替えられます。

htmlファイルをコピペで編集

パソコンには『コピー&ペースト』という便利な機能があります。
これを使いこなせば、文章やタグを一から全て入力することなく、時間と労力の節約になります。

前回『20170620』フォルダの中の『base.txt』から、『wagahai.html』を作りました。

base.txtの中身

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

(ここに内容を書きます)しか文章はありません。

『wagahai.html』を、メモ帳で開き、(ここに内容を書きます)の部分に、ホームページの中身を入れていきます。

文章素材を用意

今回の文章は、別に用意しました。

『20170620』フォルダの中の『wagahai.txt』を使います。

『wagahai.txt』は『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ファイルを編集し、上書きできるでしょうか?
  • 文章をコピー&ペースト(コピペ)できたでしょうか?
  • 段落と改行タグをうって確認できたでしょうか?

次回は、このファイルをさらに編集していきます。

タイトルとURLをコピーしました