パスワードを忘れた？
ワールドワイドウェブ(WWW)の基本
World-Wide Web (WWW)
- URL
- Uniform Resource Locator
- 情報のありかを記述
- <プロトコル>://<サーバ>/<ディレクトリ>/<ファイル>
- HTML
- HyperText Markup Language
- URL を文書に埋め込む
- HTTP
- HyperText Tranfser Protocol
- 情報やりとり方法の取り決め
WWW の仕組み
ブラウザの設定
- プロキシ（代理）サーバ
- インターネットに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を開く を使ってください
テスト
