第4回『Google Chromeで開く』『ZIPファイルを展開する』

ホームページとブログの教室、第4回は、Chromeブラウザを選んで開くことと、リンクタグの復習です。
ダウンロードした圧縮ファイル『ZIP』の展開も学びます。

配布資料

ブラウザとは

ブラウザとは、インターネット上のウェブサイト(ホームページ)を見るためのアプリ(アプリケーションソフトウェア)です。

ブラウザには様々な種類があります。
パソコンの初期状態では以下のブラウザが入っています。

  • IE(インターネット・エクスプローラー):Windows8.1以前
  • Edge(エッジ):Windows10より
  • Safari(サファリ):Mac

その他に、Google Chromeや、FireFoxなどがあり、もともと入っていないブラウザはインストールして使います。

※当『ホームページとブログの教室』では基本『Google Chrome』を使いますので、ない方はインストールしてください。

既定のブラウザ

htmlファイルをダブルクリックして、自動的に開くのが既定のブラウザです。
初期状態でウィンドウズの方はIEかEdgeになっています。

既定のブラウザが何になっているかは、htmlファイルのアイコンの画像を見ればわかります。


↑既定のブラウザが『IE』になっている場合


↑既定のブラウザが『Chrome』になっている場合

既定のブラウザの変更

よく使うブラウザを『既定のブラウザ』にして置くと便利ですが、場合によっては、既定じゃないブラウザで開きたい場合もあります。
(たとえば、ある銀行はIEでないとログインすることができません)

その場合は、アイコンを右クリックして

『プログラムから開く』から選択すればOKです。

ファイルの解凍と確認

20170516サンプルファイルの中身を確認します。

ダブルクリックして、『すべて展開』をクリックし展開します。

※ダブルクリックするだけで、中身は見えますが、展開(解凍)されていないので、さまざまな操作をすることができません。

index.html
hello.html
base.txt
/img

それぞれのファイルをダブルクリックして、確認してください。

『index.html』をブラウザで開く

『img』フォルダの中の画像が表示されています。

HTMLの基本(ベース)

base.txtの中はこのようになっています

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タブのタイトル</title>
</head>
<body>
(ここに内容を書きます)
</body>
</html>

各タグの意味

<!DOCTYPE html> :html5の形式で書くよという宣言
<html lang=”ja”> :言語の宣言 ja は日本語
<head> :ヘッダー、表には表示されない設定
<meta charset=”UTF-8″>:文字コード設定、原則UTF-8
<title>(タイトル)</title> :ブラウザタブに表示されるタイトル
</head>  :ヘッダーがここで終わる、終了タグ
<body>  :ボディ、ページの本文がここから始まる
</body> :ボディがここで終わる終了タグ
</html> :htmlの終わり、一番最後に必ずつく

実践ワーク

ファイルのコピー

hpフォルダに
base.txtと
imgフォルダをコピーします

index.htmlの入れ替え

base.txtをメモ帳で開き『index.html』と名前を付けて保存
上書き確認。

ファイルを開く

『index.html』をダブルクリックして、ブラウザで開いてみます。
『index.html』をメモ帳でも開いてみます

※base.txtは書き換えないように注意!

BODY内の編集

表に表示される部分は
<body></body>
に挟まれた部分です。

現在の『index.html』は、(ここに内容を書きます)と書かれています。

この部分を書き換えます。

リンクタグを記入してみる

前回書いたリンクタグを(ここに内容を書きます)の部分に書き加えてみましょう。

<a href=”hello.html”>ごあいさつ</a><br>
<a href=”https://www.yahoo.co.jp/” target=”_blank”>ヤフー</a>

リンクがちゃんと作動するか確認します。

Google Chromeで開いてみましょう。

まとめ

  • 既定のブラウザと、Chromeで開く開き方を知る
  • 『ZIP』ファイルを展開する
  • base.txt(ベースのテキストファイル)から、index.htmlを作る
  • BODYの中にリンクタグを記入することを知る
タイトルとURLをコピーしました