第7回『テキストファイルからhtmlファイルへの変換』

ホームページとブログの教室、第7回目は『2つのタグおさらい』と、『txtファイルからhtmlファイルへの変更』です。

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

前回やったファイルをもう少しおさらいして、『a』タグと『img』タグを使いこなせるようにしましょう。

空白、ダブルクォーテーション、スラッシュの位置などに気をつけましょう。

このタグの意味がわかりますか?

<a href=”./img/rose1.jpg” target=”_blank”>
  <img src=”./img/rose1.jpg ” alt=”黄色いバラ” width=”150″>
</a>

文章構造のタグを知る

タグはたくさんありますが、一度に覚える必要はありません。
必要なものから少しずつ使えるようにしていきましょう。

ZIPとフォルダの違いに注意

『.zip』の拡張子のファイルは、ファイルが圧縮されて固まっているファイルです。
ダブルクリックすると中身はみれますが、編集などができません。


zipファイルは、Zipper(ジッパー=ファスナー)がついたようなアイコンになっています。


フォルダは、紙ばさみのように、開いて中身のファイルが見えるようなデザインになっています。

テキストファイルからhtmlファイルを作る

『20170620』フォルダの中の『base txt』と言うファイルは、ダブルクリックすると、メモ帳(エディタ)が開きます。

拡張子が『txt』になっていると、メモ帳が立ち上がることを確認します。

『base.txt』を、『wagahai.html』という名前を付けて保存してください。
文字コードは『UTF-8』を選んでください。

『wagahai.html』をダブルクリックすると、ブラウザが立ち上がります。

※拡張子を意識できるようになりましょう^^

htmlファイルを編集する

  • ブラウザは『Chrome』で開く(既定のブラウザがIE、Edgeの人は注意、クロームを選んで開けますか?)
  • メモ帳で開く (メモ帳で開くには?)

ブラウザで開くのは:ホームページを見る時
メモ帳で開くのは:編集するとき

次回の予告『文章構造の作り方』

『20170620』フォルダの中の、『wagahai1.html』を、習ったタグを使って『wagahai4.html』のようにしていきます。

まとめ

  • a タグ img タグは書けますか?
  • ファイルをダウンロードして、展開できますか?
  • 『txt』ファイルを名前を付けて保存『html』ファイルにできますか?
  • 『html』ファイルをメモ帳で開けますか?
タイトルとURLをコピーしました