コンピュータ基礎実習(上級) 第 2 週「コンピュータ基礎実習(上級)」第 2 週ページの作成京都産業大学の学生の皆さんは、自分のウェブページを持つことができます。作成したページはインターネット上に公開でき誰からでもアクセスできます。 1. ウェブページ公開の基礎 1.1. 公開の仕組みウェブページ公開用フォルダ [public_html] の中に HTML ファイルを配置(アップロード)すると、産業大学のウェブサーバーがファイルをインターネット上に公開してくれます。 1.2. ページの確認 Internet Explorer (IE) など、インターネット上のサイトを見るためのアプリケーションを、[ブラウザ]と言います。IE などのブラウザで見たいウェブページの[URL]を入力すると、画面に表示できます。 URL はウェブページの場所を示す文字です。京都産業大学では個人ウェブページの URL は以下のようになります。 http://www.cc.kyoto-su.ac.jp/~[ユーザーID]/[ファイル名.html] (ユーザーID は g123456 など。)  ファイル名を省略してアクセスすると、自動的に index-j.html (または index.html)という名前のファイルが読み込まれます。 index.html が存在しないと、エラー画面が表示されます。 2. 基本操作 2.1. 準備しておくことウェブページ公開用フォルダ [public_html] は頻繁にアクセスします。 HTML ファイルを編集するために[メモ帳]や[サクラエディタ]などのテキストエディタにもよくアクセスします。 [サクラエディタ] と [public_html] のショートカットを作っておきましょう。  [右クリック]→[送る]→[デスクトップ(ショートカット作成)]でデスクトップにショートカットを作れます。  Windows Vista 以降なら画面下部の[タスクバー]にアイコンをドラッグするとタスクバー上にも作れます。  public_html フォルダの場所は以下のとおり。 [デスクトップ] →[コンピュータ] → [gXXXXXX(ユーザーの名前がついているフォルダ)] → [unix_home] → [public_html] 2.2. 作業手順 (1) HTML ファイルの編集 [サクラエディタ]などテキスト編集アプリケーションで HTML ファイルを読み込んで編集します。 HTML ファイルをサクラエディタのアイコンやウィンドウにドラッグすると、 HTML ファイルの内容を編集できます。 HTML ファイルを編集 (2) HTML ファイルの保存 [名前をつけて保存]や[上書き保存]で編集内容を保存します。保存場所を public_html にするとアップロードしたことになります。  ファイル名には半角英数文字だけが使用できます。 (例) ×マイページ.html → ○ mypage.html  拡張子は.html (または.htm)とする必要があります。ショートカットアイコンにドラッグしてもよい。 (3) アップロード public_html フォルダの中にあるファイルやフォルダが、自動的にインターネット上に公開されます。公開したいファイルやフォルダは、public_html にドラッグして移動させれば公開できます。 (4) 表示確認  Internet Explorer などのブラウザでサイトの URL にアクセスしてください。 http://www.cc.kyoto-su.ac.jp/~g123456/(ファイル名)  HTML ファイルを修正した場合は画面を更新してください。 [右クリック]→[最新の情報で更新] またはキーボードの[F5]キーで画面が書き直されて修正内容が反映されます。 -1- 表示確認 HTML 編集アップロード保存作業の流れコンピュータ基礎実習(上級) 第 2 週 3. HTML の書き方 (教科書第 2 章 page16) ウェブページは原則 HTML (Hyper Text Markup Language) 形式で記述する必要があります。ここでは HTML の詳しい書き方について解説します。 3.1. HTML の基本 HTML では、[タグ] と呼ばれる命令を使います。タグを文中に書くことで様々な機能が働きます。  タグの書き方タグは、< と > で要素名を囲んで <xyz> のように表記します。要素名(xyz 部分)は半角英数字で記入します。大文字小文字どちらも使えますが、小文字が推奨されています。タグの例 <body> <br> <p> <table> など。 <BODY> ○ 大文字でも正しく動作します。 <ＢＯＤＹ> × 全角文字が混じると正しく動作しません！  属性タグにはオプションとして[属性]が付く場合があります。属性が付く場合は、<要素名属性="値" 属性="値" .... > のように書きます。要素名や属性の間には、半角スペースを 1 つ以上入れてください。属性がつく例 <hr size="3"> hr タグに size 属性が付いている。size 属性には 3 という値がセットされている。属性をつけることで、タグの動作を変化させることが出来ます。  有効範囲のあるタグ一部のタグは範囲に効果を及ぼすために、[開始タグ]、[内容]、[終了タグ] の 3 つから構成されます。開始タグと終了タグに囲まれた範囲に、指定した効果が及びます。 <要素名>～～～～</要素名> のように書きます。効果範囲のあるタグの例ここが<b>強調範囲</b>です。 [強調範囲] という文字が太字になります。別途、属性が付く場合もあります。 3.2. ウェブページの基本構成正しいウェブページの作法として、以下の 4 種類のタグが最低限必要です。 html タグ <html>～</html> HTML 全体を囲う。 head タグ <head>～</head> ページ関する各種情報を記入する。 title タグ <title>～</title> ページのタイトルを記入する。 body タグ <body>～</body> 画面に表示される本文を記入する。新しいウェブページを作る際は、以下のように書きます。 <html> <head> <title>ここにページのタイトルを記入する。</title> </head> <body> ここにページの本文を記入する。 </body> </html> それぞれのタグは、以下のような位置関係にあります。 html タグ head タグ body タグ title タグページ本文の内容  ページ本文の内容はすべて body タグの範囲内に書いてください。  title タグで指定するページタイトルは、ブラウザのタイトルバー (ウィンドウ上端) に表示されるほか、 -2- コンピュータ基礎実習(上級) 第 2 週ページ閲覧者があなたのページを [お気に入り] に保存した時の名前になるため重要です。ページの内容をよく表すタイトルが良いでしょう。  新しいウェブページを作る際は、上記のようなファイルをあらかじめ作成しておき、コピーして使うと手間がかからず良いでしょう。 4. HTML タグ解説 (教科書第 2 章 4 page27) HTML で使用できるタグには様々なものがあります。そのうち代表的なタグの使い方を紹介します。例を参考にページを作成し、実際に動作する様子を確認してみて下さい。 4.1. 文字表示に関するタグ (1) 改行 br タグ HTML では改行(line BReak)を行うために専用のタグを利用する必要があります。改行を行うには、<br>タグを使います。 HTML ブラウザ画面出力改行してみた<br>うまくいったかな改行してみたうまくいったかな HTML 編集中に Enter キーで改行をしても、br タグを使わないとブラウザの画面では一行で表示されます。 (2) 段落 p タグウェブページでは上下に空行を開けることで文章のまとまりを作ります。これを[段落] (Paragraph)といいます。段落を使えば適度に空行が開くため、文章全体が見やすくなります。段落を作成するには <p> と</p> タグを使います。 HTML ブラウザ画面出力 <p>これから段落をつくってみます</p> これから段落をつくってみます <p>これが二つ目の段落です。</p> これが二つ目の段落です。 (3) 区切り線 hr タグ画面に水平線(Horizontal Rule)を表示することができます。ページの仕切りやデザイン用途に使えます。水平線を入れたい場所で、<hr> タグを使います。 HTML ブラウザ画面出力区切り線を引いてみた。 <hr> このように引けました。 size 属性を追加すると、線の太さを変えられます。 (例) <hr size="5" > (4) 見出し h1 ～ h6 タグタグで囲った範囲が[見出し] (Heading) に指定され、大きく太い文字で表示されます。見出しにはさまざまな大きさのものが用意されています。 <h1>～</h1> が最も大きな見出しで、<h2> <h3> … <h6> の順に小さな文字の見出しになります。 HTML ブラウザ画面出力 <h1>第一章</h1> 第一章はじめに<br> はじめに本レポートでは近郊の水質検査について・・・本レポートでは近郊の水質検査について・・・ (5) 行揃え align="～"属性見出し<h1> や段落<p> などのタグに、属性として align="～" を書き加えると、左揃え中央揃え右揃えの指定ができます。 "～" 部分の値は、左揃えの場合 "left" 中央揃えの場合 "center" 右揃えの場合 "right" を指定します。 -3- コンピュータ基礎実習(上級) 第 2 週 HTML <h1 align="center">自己紹介</h1> ブラウザ画面出力自己紹介 <p align="right">学生番号：123456</p> 学生番号：123456 (6) 太字 b タグ <b>～</b>タグで囲った範囲の文字列は、太字(Bold)になります。 HTML ブラウザ画面出力この内容は<b>重要</b>です。この内容は重要です。 (7) 斜体 i タグ <i>～</i>タグで囲った範囲の文字列は、斜体(Italic)になります。b タグと似た使い方をします。 (8) 下線 u タグ <u>～</u>タグで囲った範囲の文字列には、下線(Under line)が引かれます。 (9) 字下げ blockquote タグ <blockquote>～</blockquote>タグで囲った範囲の文字列は、右方向に少しずれて字下げが起こります。文章を見やすくするために使います。 (10) 箇条書き ul タグ + li タグ項目を列挙する際などに便利な箇条書き(Unordered List)です。 <ul>～</ul> で囲った範囲の中に <li>で箇条書きの各項目を記入します。 HTML ブラウザ画面出力 <ul> <li>序章  序章 <li>本題  本題 <li>まとめ  まとめ </ul> (11) 数字付き箇条書き ol タグ + li タグ行頭に数字が振られるタイプの箇条書き(Ordered List)です。 <ol>～</ol> で囲った範囲の中に <li>で箇条書きの各項目を記入します。 HTML ブラウザ画面出力 <ol> <li>序章 1. 序章 <li>本題 2. 本題 <li>まとめ 3. まとめ </ol> 5. 課題自己紹介ページの作成先週作成した自己紹介文を HTML に作り替えてアップロードしてください。文面をコピーして使ってかまいません。 5.1. 作成する場所 public_html フォルダ内に profile (プロフィール) フォルダを作成し、自己紹介文を記入した index.html を profile フォルダ内に配置して下さい。ブラウザからアクセスする際は、http://www.cc.kyoto-su.ac.jp/~gXXXXXX/profile/ でアクセスできるはずです。 5.2. 次回の授業に向けて自己紹介ページは最終的に、次回以降に説明するタグを追加して、完成させ課題提出することになります。そのつもりでページを作成して下さい。参考：ここで紹介する HTML タグ以外にもたくさんのタグが存在します。より詳しく知りたい方は、教科書やネット上の HTML - 4 解説サイトなどを参考にしてください。 (例) HTML クイックリファレンス http://www.htmq.com/ とほほの HTML 入門 http://www.tohoho-web.com/