WWWページに載せる内容(文章や写真など)は,その著作権に関して十分に理解し,他者の権利を侵害しないように努め(詳細はコンピュータガイド6.1節の6.3項と7項を熟読すること),他者の作成した著作物を模倣剽窃(盗作すること)することが絶対に無いようにすること.要点としては次のようにまとめられる.
その他の詳細はコンピュータガイドを十分に読んで理解しておかなければならないし,また,Webページを作成するにあたっては,各種法律はもとより,本学の規定する規定も了解しているものとして扱われる.従って,それらに抵触する行為があった場合は,退学を含む懲罰処置の対象になるから,くれぐれも注意されたい.著作権関連事項で何か疑問があれば,本学教員や情報センターに必ず問い合わせて合法性を確認すること.
また,各自のプライバシーに関わる内容(電話番号や住所など)は,第三者に悪用される危険性があるため,Webページに記載すべきではない.連絡先として電子メールアドレスを書く場合,迷惑メール配信業者に収集される可能性がある.これに対しては,メールアドレスの文字列を「画像データ」に変換することで,自動収集できなくする対策手段を情報センターにて提供している.学内Webサイトの「情報サービス」→「ネットワークサービス」→「メールアドレスの画像化ツール」のページにて,各自のメールアドレスを表示できる画像データを作成できる.
メールアドレスを掲載する場合には,このツールを用いて画像データ化したものを掲載するようにしよう.
Macbookに標準装備のカメラを使って写真を撮るにはアプリケーションフォルダの中にあるPhoto Boothというアプリケーションを使うとよい.使い方は簡単なのでここでの説明は省略する.ヘルプを読むなり試行錯誤して使ってみるとよい.Photo Boothを使って撮影された写真は「ファイル」メニューの「書き出す...」を使って保存できる.Webページで使用するためにファイル名には「安全な文字」のみを使うこと.
また,最近の携帯電話の多くはカメラ機能を有しているし,デジタルカメラも普及しているので,そういった機器を使って撮影した画像をコンピュータに転送して使ってもよい.転送の仕方は機器のマニュアルを参照のこと.メモリカードを使っている機器ならばUSBアダプタを使ってファイルコピーすることができる.
紙などの印刷物の画像を取り込むにはイメージスキャナを使う.オープンパソコンルームなどに設置されたイメージスキャナ装置の使い方は情報センターのスキャナ利用マニュアルを参照のこと.
index-j.htmlに自分の顔写真画像を貼り付けてブラウザ画面上に表示されるようにしてみよ.画像の張り込みにはimgタグを用いればよい(ヒント:下記の画像素材例のページのソースを見よ).尚,写真に限らず,Webページに載せる素材は著作権に十分に留意すること.自由に利用してよい素材として,例えば画像素材例のページを用意してあるので利用してよい.またインターネット上には好意に基づいて各種の素材を提供していただいているWebサイトも存在する.例えば,こちらのサイト(写真素材 足成)など.但し,「必ず利用条件などを良く読み,その条件に従った上」で,著作権者の権利を侵害しない範囲において利用させてもらうこと.そのようなサービスを行っているページはGoogle等のサーチエンジンで検索すれば色々と探しだせる.但し,あくまでも著作権者による好意による提供に過ぎないから,その好意を裏切らないよう感謝と敬意を忘れないこと.他者の権利を尊重する事と自分の権利を守る事は表裏一体であり,即ち,他者の権利を大事にすることは自分の権利を大事にすることに繋がるのである.
注:最近ではクリエイティブ・コモンズという利用ルールに基づくコンテンツの提供形態が広まりつつある.提供する側と利用する側の双方で,ライセンス形態が明確で簡便となる.
尚,Safariで画面表示されている画像をファイルとして保存するには,画像の上にマウスポインタを合わせ,右クリックで表示されるメニューから「イメージを別名で保存…」を選択する.保存のためのダイアログが表示されるから,保存したいディレクトリを選択してから保存ボタンをクリックすると,そのディレクトリに画像ファイルとして保存される.
Webページの任意の部分には,マウスクリックすると他のページを開く部分(アンカー, Anchorと呼ぶ)を設定することが出来る.このアンカーを設定するには<a>・・・</a> という具合にaタグで囲む.このaタグにより,ブラウザの画面上でクリックすると指示されたページが表示される.このページ間の結びつきを「ハイパーリンク」又は単に「リンク」と呼ぶ.
aタグの簡単な書式は次の通り:
<a href="URI">......</a>
HTMLファイル中に上記のタグを書き込んでやると,ブラウザでHTMLページを表示させて当該箇所をクリックした時にURIで示されたWebページがブラウザに読み込まれて表示される.
このURIの書き方には,色々な省略記法が使える(ファイルシステムにおける絶対パスと相対パスの概念を思い出してみよう).URIはスキーム部分(プロトコルを表す.例:http)とドメイン名部分(サーバを表す.例:www.kyoto-su.ac.jp)とパス名部分(サーバ上に保存されているファイルを表す)とに別れているが,これらを適当に省略することも可能である.
例えば,自分のホームディレクトリに存在するpublic_htmlディレクトリにあるsampleディレクトリにhello.htmlからハイパーリンクを設定したい場合を仮定する.このページのURIは
となる.このページから別のページへリンクを設定する(ページからハイパーリンクを設定することを「リンクを張る」などと呼ぶ.)場合,aタグ中のhref属性に指示するURIの部分は次のように書ける.
www.cse.kyoto-su.ac.jp
サーバとは全く異なるサーバ上に配置されているページへリンクhttp://www.yahoo.co.jp/index.html
http://www.ntt-west.co.jp/product/index.html
www.cse.kyoto-su.ac.jp
サーバ上にあるページへリンク/index.html
といったように書くことができる.public_htmlディレクトリにあるreportディレクトリのexample.html
というHTMLファイルで作られるページに対しては,
という具合に書ける.˜ユーザ名
の部分がUNIXファイルシステムでは各自のホームディレクトリを表すのに対して,URI表現ではホームディレクトリにあるpublic_html
ディレクトリを表す点が違っているので,注意すること../another.html
または
another.html
とも書ける.その他の例として例えば,リンク元ページの一つ上のディレクトリにあるreportディレクトリにあるexample.html
へリンクを張りたい場合は,../report/example.html
という具合に書くことが出来る.practiceディレクトリにあるtest.html
へリンクを張りたい場合は./practice/test.html
又は
practice/test.html
と書くことが出来る.尚,これらのリンク設定の方法は何れを用いても効果は同じだが,可能なかぎり相対パスを用いた表現にしておくことが良い.その理由は次の通りである.例えば,後日,ディレクトリ名やファイル名を付け替えたり,HTMLファイルのディレクトリ配置を変更する場合,相対パスを用いてあればURI部分を書き直す作業が確実に少なくて済む.これにより,例えば,卒業時に自分の作成したページ群を商用プロバイダに移転する場合にも変更が少なくて済む(完全URIを使っているとサーバ名部分を全部書き換える必要がある!).
URI表現において,幾つかの特別な名前のHTMLファイルを指すURIはファイル名部分を省略することができる場合がある(これは,そのファイルが置かれたWebサーバの設定によって異なる).例えば,コンピュータ理工学部のWebサーバの場合,index-j.html及びindex.htmlは,その特別な名前として扱われる.
例えば,各個人用ホームページを表すURI
は
と省略することが許されている.但し,index.htmlとindex-j.htmlという名前のHTMLファイルが両方とも同じディレクトリに存在した場合,コンピュータ理工学部のサーバ www.cse.kyoto-su.ac.jp ではindex-j.htmlが優先される.index.htmlファイルは,世界的に読める人がより多い英文で作成し,index-j.htmlは日本語で作成するようにすると良い.
ファイルを作成せよ.内容は適当に書き込んだ上でindex-j.htmlからハイパーリンクを張って辿れるようにせよ.また,sample.htmlファイルからindex-j.htmlファイルへ戻れるリンクも設定すること.
ファイルを作成せよ.内容は適当に書き込んだ上で
ファイルとの間で相互にリンクされるようにしてみよ.
簡単なWebページを作成するだけならテキストエディタでもよいが,凝ったWebページを作成したり,沢山のページから構成されるWebサイトを構築するならば専用のアプリケーションを使うと便利である.
例えば,MacにはiWebというアプリケーションが付属している.奇麗なデザインテンプレートが用意されており,文章や写真を入れ替えるだけでよい.但し,iWebを使った他のサイトと似たようになってしまいがちなので,本格的に作るならそれなりに手を入れていった方がよいかもしれない.詳しい使い方はヘルプに書いてある(Macはとにかく印刷物のマニュアルが少なく,ヘルプやオンラインマニュアルを読む必要がある)が,使い方を紹介しているWebサイトもあるので参照するとよい(例えば「lbl everyのiWebの使い方」).
注: iWebは廃版になりましたので,もはや入手不可能です.
LibreOfficeを使ってもWebページを作ることができる.LibreOffice Writerのメニューで,ファイル → 新規作成 → HTML形式ドキュメント を選ぶと新しいWebページの編集ウィンドウが表示される.編集のやり方はWriterと似ているので取り付きやすいと思う.
他にも市販のものや無料で使えるものもあるので探してみるとよいだろう.
なお,Webページ作成アプリケーションを使うと複雑なレイアウトや背景画像をふんだんに使った,凝ったページを作ってしまいがちだが,閲覧環境によっては非常に重かったり(表示が遅い),正常に表示されなかったりすることもあることに留意すべきである.
追記:CSE環境のEmacsにはyahtmlというHTMLの作成支援機能が設定されている.ソースを自分で書く際に入力を簡便化してくれる.詳しい使い方はhttp://www.yatex.org/を参照のこと.
各自,自分のページを自由に作成して公開すること.その際,以下のような事項に留意すること.
提出要領:
各自の「ホームページ」を作成し,URI
閲覧できるようにせよ. を用いてWebブラウザで
提出期限:
教員の指示する〆切日までに,それなりに中身のあるページ群を作成せよ(作成練習1〜5で作成した内容より充実させること).もちろん,それ以降も継続して変更や修正を行うことは差し支えない.
注意!!:ちゃんと上記URI,およびそこから設定されているリンク先が参照できることを確認すること.ファイル名誤りやリンクミスによってたどれないページは無いものと同じである.
自宅等,ローカル環境で作成したWebページをCSE環境に転送するには次のようにする.
「ソフトウェアのインストール,ソフトウェアアップデートの適用,リムーバブルメディアの取り扱い」のページの「ローカルディスクへのアクセス」の項を参照.
「CSE環境上に保存されたファイルへの遠隔アクセス」のページを参照.
Webページに,タグが正しく書かれていないなどの文法エラーが含まれていても,ブラウザで表示させてみるとなんとか表示されてしまう.しかし,意図したとおりに表示されるとは限らないし,別のブラウザで表示させるとちゃんと表示されないことも多い.
そこで,HTMLの文法が正しく守られているかチェックしてくれるサイト(例えばAnother HTML-lint 5)を利用するとよい.チェック結果をすべて理解するにはHTMLに関する高度な知識が要求されるが,タグの閉じ忘れなどの簡単なエラーを見つけるだけでも役に立つので使ってみてほしい.