『ホームページとブログの教室』第９回は、段落・改行タグを仕上げて画像とリンクを貼ります。
ページを読みやすく仕上げます
前回の続きです。
『20170620』フォルダの中に作った『wagahai.html』を、『sample-wagahai4.html』のように仕上げていきます。
から
このように仕上げます。
配布資料
基本のタグの一覧
見出しタグ ＜h1＞～＜h6＞
h1 ~ h6 のタグは見出しを表します。
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
これを実際にブラウザに表示させるとこんな感じです
見出しの見た目は、CSSというデザインによって大きく異なります。
参考：当ブログの見出しデザインはこんな感じです↓。
『wagahai.html』をメモ帳で開いて、適宜見出しを打っていきます。
ブラウザで開くと、文章にメリハリがついて見やすくなりました。
見出しの基準は？
本などの目次を作る感覚で見出しを設定するとわかりやすいです。
大項目、中項目、小項目というように、順番を意識してみてください。
※今回の例は小説をコピペしたものですので、あまり見出しの内容は関係ありません。
見出しはあくまでも、文章の構造を示すものです。
ですので文字を大きくしたいから見出し1（h1）を使うということをしてはいけません。文字の大きさを調整したい場合は、別途『スタイル（CSS）』というものを使います。
画像を貼ります
『20170620』フォルダの中に、『cat.jpg』という画像がありますので、それを貼り付けます。
『wagahai.html』をメモ帳で開いて、以下のタグ（コード）を入力します。
上書き保存して、ブラウザで開きます（開いたままだった場合、リロード
）
すると以下のように表示されるはずです。
画像が表示されない
画像が表示されない場合は、
- 同じフォルダの中に画像があるか
- タグを半角英数で入力しているか（特に『”』や『.』等に注意）
- 綴りが間違っていないか
確認してください。
画像が表示されるが、見本より大きい
画像のサイズが大きすぎたりする場合、サイズの入力が正しくされていない場合、
原因のほとんどが入力ミスです。
今回の場合、画像のサイズは横幅1600ピクセルですが、
widh=”500″
として、幅を500ピクセルにしてあります。
たとえば、『＝（イコール）』を入力し忘れると。。
このようにドーンと大きく（もとの画像のサイズに）表示されてしまいます。
印刷と画面は違う？？
ブラウザから表示されているページを印刷（右クリック→印刷）すると、ホームページが印刷できますが、画面とは文字の形や画像のサイズなどが違う場合が多々あります。
それはホームページの設定やパソコンの中にある文字フォント（活字の種類）、プリンターなどによって変わります。
ホームページは流動的に表示が変わりますので、全ての人が全く同じ状態でホームページ印刷することは不可能なのです。
メモ帳に貼り付けたのに、メモ帳を開いても画像がない？
Wordなどのワープロソフトに親しんでいる方は不思議に思うかもしれませんが、ホームページの画像は、メモ帳の中に貼り付けられるのではありません。
習った『imgタグ』で、画像を呼び出して、メモ帳の文字と合体させ、ブラウザで表示させているのです。
戸惑うかもしれませんが、作っているうちにだんだんつかめてきますのであまり気にしないでおきましょう。
フォルダの表示の切り替え
パソコンの基本操作ですが、フォルダの『アイコン』と『詳細』の切り替えです。
画面はWindows8.1ですが、Windows10でもほぼ同じです。
フォルダ上の部分『表示』というタブを選んで『大アイコン』と『詳細』を切り替えることによって表示を変えられます。
『大アイコン』、画像を開かずに確認したりするのに便利です。
『詳細』、ファイルの更新日時や、サイズなどを見たり、名前順に並べ替えたりするのに便利です。
強調タグ＜strong＞
太字などにして強調したい場合は、
と言うタグを使います。
このように囲むと、
このように表示されます。
取り消し線 ＜del＞
修正箇所を残しておいて、取り消し線をつけたい場合は、
と言うタグを使います。
このように表示されたりします。
リンクを貼りましょう
最後に、青空文庫『吾輩は猫である』ページへのリンクを貼りましょう。
メモ帳に書くと、長いアドレスを含む部分はそこで自動的に改行されてしまいます。
自分では改行を入れずに、続けて書いてください。
target=”_brank”を入れて別タブで開く設定にしてあります。
リンクをクリックして、青空文庫のページが別タブで開けば完成です。
開かない場合は入力を見直してください。
完成サンプルは『20170620』フォルダの『sample-wagahai4.html』
まとめ
今回はもりだくさん、タグをたくさん使いました。
最低限覚えていただきたいのが、
- リンク a
- 画像 img
- 段落 p
- 改行 br
- 見出し h1 – h6
それ以外は、一覧表などを見て必要な時だけ使えば大丈夫です。
次回の課題
次回は無料ブログを使って記事を書いていく練習に入ります。
分からない方は、講座でやりますので、大丈夫です。