World-Wide Web (WWW)

URL
- Uniform Resource Locator
- 情報のありかを記述
- <プロトコル>://<サーバ>/<ディレクトリ>/<ファイル>
HTML
- HyperText Markup Language
- URL を文書に埋め込む
HTTP
- HyperText Tranfser Protocol
- 情報やりとり方法の取り決め

ブラウザの設定

プロキシ（代理）サーバ
インターネットにPCを直接晒したくないところで利用

画像の入っているページ

元のページ URL = http://www.example.jp/
<IMG SRC="image.jpg">
http://www.example.jp/image.jpg を取ってきて一緒に表示

リンクをクリックしたら

元のページ URL = http://www.example.jp/
<A HREF="next.html">次のページ</A>
http://www.example.jp/next.html を取ってきて（新たに）表示

ついでに

タイトルに出てくる文字は
<TITLE>これがタイトル</TITLE>
だから、必ず URL （アドレス・場所）で確認する
- ちょっといたずら

ウェブページを作ってみよう

ログインして、ファインダー を開くと、public_html という名前のフォルダが用意してあります。
public_html の中には introduction.html というファイルがあります。
このファイルのアイコンを ドラッグ＆ドロップ で、下のドックにある テキストエディット に落としてください。
エディタが開いて、ファイルを編集できるようになります
編集の保存は上のメニューのファイルから保存を選びます

ファイルの内容

自己紹介のページ原稿(HTMLファイル):

   <html>
    <head>
     <title>△△△△の自己紹介</title>
    </head>
    <body>
     <h1>△△△△の自己紹介</h1>
     <h3>出身</h3>
      <p>
       □□県○○市で生まれて、ずっとそこで過ごしています。
      </p>
     <h3>趣味</h3>
      <ul>
       <li>××鑑賞</li>
       <li>▽▽観戦</li>
      </ul>
    </body>
   </html>

HTMLファイルの編集

'<' から　'>' までの中に書かれているものを HTMLタグ と呼びます
タグとその中身は 半角英数 で記入
<abc> で開いたタグは </abc> で閉じます
△や□になっているところを適当に変えて保存してください

ブラウザで見る

ファイアフォックス (Firefox) を起動して、
http://www.is.kochi-u.ac.jp/~uairNN

(NNは数字) を開く
又は
ファインダーから introduction.html をダブルクリックで開く

いろいろなタグ

<h1> <h2> <h3> 見出し(heading) 数字はレベル
<p> パラグラフ (文の段落)
<ul> 番号の無い列挙 (unnumberd list)
<ol> 番号付きの列挙 (ordered list)
<li> 列挙中の項目 (list item)
<strong> 強調 (太字) <em> 強調 (斜字体)

リンクと画像を追加

外部サーバにあるものは、http:// で始まる URL を全部書きます
内部サーバにあるものは、/ で始まる絶対パスまたは、相対パスで書きます

</body> の前に入れましょう:

   <h3>リンク</h3>
    <ol>
     <li><a href="http://www.kochi-u.ac.jp/">高知大学ホームページ</a></li>
     <li><a href="http://www.google.co.jp/">Google 検索</a></li>
    </ol>
   <h3>画像</h3>
    <img src="/images/JohoTo.jpg"
         alt="高知大学理学部"/>

リロード

追加（編集）ができたら、保存し、ブラウザで再表示（リロード）してみてください

画像が見えましたか？

画像の場所指定 (/images/JohoTo.jpg) は、実はサーバー経由で表示した時の場所です
www.is.kochi-u.ac.jp の http サーバには / (トップ) の下の images というディレクトリ (フォルダ) に JohoTo.jpg という画像ファイルが入っています。
一方、皆さんが今使っている iMac には、それがありません

なので

ファインダーからダブルクリックしたときには、画像が表示されません
画像を表示させるには、ブラウザの URLを開く を使ってください

ワールドワイドウェブ(WWW)の基本

Tokio Kikuchi

World-Wide Web (WWW)

WWW の仕組み

ブラウザの設定

画像の入っているページ

リンクをクリックしたら

ついでに

ウェブページを作ってみよう

ファイルの内容

HTMLファイルの編集

ブラウザで見る

いろいろなタグ

リンクと画像を追加

リロード

画像が見えましたか？

なので