webブラウザのいろは

webブラウザの主な仕様とwebページの作成について説明します。またwordpressを利用したホームページ作成も参考にして下さい。

1. webブラウザの種類
2. 検索窓によるキーワド検索
3. 新規ページの作り方
4. ファイルのダウンロードとその開き方
5. webページ内に表示されたpdfのダウンロード
6. 環境設定について
7. ブックマークの追加と整理 (firefoxの起動を修理)
8. webページの基本(htmlの初歩)
9. webページの作成(wordpressの使い方)

1. webブラウザの種類:safari, firefox, opera, IEなどがあります。また、google scholarなどを利用すると簡易的に学術的ページを検索できます。

2. 検索窓  トップへ

検索窓は以下のような窓があり、ここに検索するキーワードを入力します。
firefoxでは左側に検索窓がありsafariではURLを表示するところが検索窓になっています。
検索窓

検索窓2

3. 新規ページの作り方(タブの利用) トップへ

webブラウザの右上ファイル→新規タブ(新規ウインド)で新規ページ/タブ開きます。
(1)タブは同じウインドの上に新しいページを作ります。
(2)新規ウインドは新しい独立したウインドが開きます。
新規タブ新規ウインド

4. ファイルのダウンロードとその開き方 トップへ

webブラウザではリンク先のファイルを自動的にダウンロードします。標準のダウンロード先は”ダウンロード”(donwload)フォルダとなっています。これはホームディレクトリの下にあります。ダウンロードされたファイルのリストは上のメニューのウインド/ダウンロード(マネージャー)から開くか、フォルダを開いてダブルクリックで開くことができます。

1) リストをダブルクリックして書類を開くことができます。

ダウンロードリスト

ダウンロードリスト

2) Docの顔マークからか、Finderメニューの新規ファインダウインドからファインダウインドを開き、home→download→ファイル名を探し、ファイル名にマウスポインタを置き、右クリックして”アプリケーションで開く”のウインドをだし、アプリケーションを選択します。pdfの場合はプレビューかacrobat readerです。officeの書類はLibreOfficeなどを指定します。(または”control”キーを押しながらクリックすると現われます)

ダウンロードフォルダ
アプリケーションを指定して開く

さらに最近のブラウザではダウンロード履歴を下矢印から開くことができる。
Firefoxの場合

5. webページ内に表示されたpdfのダウンロード トップへ

Firefoxではプラグインを利用してpdfをwebページに表示さえることができます。この時に、pdfをプレビューなどを利用して表示させたり、印刷する場合にはページ内にある保存ボタン、印刷ボタンを利用します。

web内に表示されたpdfのコピーと印刷

web内に表示されたpdfのコピーと印刷

保存を選択した場合は以下のようなウインドでさらに保存でOKをクリックもしくはキーを押してdownloadホルダに保存します。できればプレピューで開くを選択し、OKをクリックもしくはキーを押してプレビューで開くことにします。プレビューで確認した書類を別名で保存します。

pdfを保存もしくはプレビューを時刻

web上のpdfの扱い

safariではpdfが表示されたページの下にマウスカーソルを移動すると以下のようなウインドが現れます。ここで保存もしくはプレビューで開くをクリックし同様の操作を行います。

safariでpdfを保存

safariでのpdfを保存

6. 環境設定について

トップへ
ファイルがダウンロードされるフォルダを指定するにはブラウザの環境設定を変更します。ブラウザを起動してメニューから環境設定を指定します。一般のダウンロード/選択をクリックしてディスクトップを選択します。(ディスクトップはiMacの表面のウインドです。ダウンロードしたものがすべて表示されます。ときどき整理していらないものはゴミ箱へ捨ててください。)

firefoxの環境設定

safariでは以下の環境設定で行われます。

 

webブラウザの環境設定

7. ブックマークの追加と整理 トップへ

訪れたサイトを再度訪れるために、URL(webページの番地)を記憶することが便利です。webブラウザのメニューの”ブックマーク/このページをブックマーク”(Firefoxの例)あるいは”ブックマーク/ブックマークに追加”(safari)とします。ブックマークメニューの左の三角をクリックしてフォルダリストを開き、整理することもできる。ブックマークの名所を入力し、もしくは一番上のブックマークツールバーをクリックすることでタブの下にメニューをおくことができます。safariではブックマークバーに名前を付けて”追加”をクリックします。
Firefoxのブックマークは 書き出すことができ、これを保存しておくと再度開くことができます。Safariでは「ファイル」メニューより「ブックマークを書き出す」を選択します。
(Firefoxが起動しなくなることがあります。エラーとしては「すでに起動しています」とでます。この場合、プロファイルを編集してからfirefoxを再度起動することが必要です。)

ブックマーク

ブックマーク

ブックマーク

ブックマーク-safari

8. webページの基本(htmlの初歩) トップへ

webページはOSによらずに同じように表示されるように約束を決めたhtml(HyperText Markup Language)で書かれています。html自体はテキストファイルで比較的軽いファイルでインターネットでデータ送信を軽くするために広く利用されています。その上で多くのタグと呼ばれる約束を利用して、文字の色、大きさ、デザイン、フォントなどを統一することができます。さらに画像の配置なども規定することができます。詳細は多くのwebページや出版されているテキストを参考に学習して下さい。
ここではごく初歩的なことを説明します。
以下に示す”初めてのHTML”を表示するためにはそれに続く以下のように書かれたテキストが必要です。

htmlの表示例

htmlの記述様式

これだけを表示するのにhtmlファイルは以下のような内容のhtmlファイルが必要です。

<html>
<p>初めてのHTML</p>
</html>

上のテキストをLibreOfficeの文書ドキュメントにコピー&ペーストし、ファイル名をtestとして”プレーンテキストとして保存”を選択し、保存します。word(アプリケーション)やその他のテキストエディタの場合は、コピー&ペーストし後、ファイル名をtest.htmlとしてプレーンテキスト形式で保存してみましょう。拡張子が.htmlであることが必要です。

保存したファイルをSafariなどのwebページにドラック&ドロップしみてください。同じように表示されましたか?
さらに
<p>初めてのHTML</p> → <strong>初めてのHTML</strong>
と変更して保存し直し、再度ドラック&ドロップで開いてみて下さい。

さらに
<strong><font size=”5″>初めてのHTML</font></strong>
と修正して保存し、同様にsafariで開いて見ましょう。いかのように表示されますか?

初めてのHTM

またフォントに色をつけたり、背景に色を付けたりできるオプションが用意されています。
<html>
<strong><font size =”5″ color=”#ff0000″>初めてのHTML</font></strong>
</html>

と入力すれば以下のように文字が赤になります。
初めてのHTML

htmlで利用されるコマンドはこのほかにいろいろあります。次のようなサイトを参考にして下さい。

9. webページの作成  トップへ

上で述べたようにwebページはhtml言語で記述して作成することができます。これを助けるためにいろいろなソフトがhtmlコマンドの埋め込み機能を持っています。Microsoft WordやLibreOfficeなどもこの機能をもっており、フォーマットされた文章をhtmlで書き出すことが可能です。ただし、この場合は余分なコマンドがたくさんつくため基本的にはお勧めできません。
また、最近ではgoogleやwordpress、その他のブログサービスなど無料でホームページをサービスしています。こうしたサービスを利用してホームページを作成することをお勧めします。1からhtmlで記述するよりも制限はあるものの、スピーディーな作成・編集が可能です。
これらの中でもhtmlコマンドを利用したテキストエディタを利用して編集することで写真や表をいれたレイアウトなどを整えることできます。wordpressについてはここを参考にして初めて下さい。

トップへ