情報発信早い話が Web ページ作成実習

情報発信早い話がWebページ作成実習

WWW:World Wide Web:インターネット上にシームレスに張り巡らされたハイパーテキストのネットワーク • ハイパーリンク：ハイパーテキストを結びつけるリンクインターネットブラウザ画面

ハイパーテキスト：他のページへのリンクを含む文書。HTML (Hypertext Markup Language) という言語で書かれる。 • 今見えているWebページがどのようなHTMLで書かれているかは、表示でソースをクリックして表示させる。 • 自分でWebページを書くときに注意すべきことはここ。 • Web上の画像などを不注意に使うと著作権や肖像権を侵害で訴えられる可能性あり。 • WWWの動きの模擬

教育用計算機システム上でのWebサイト（ひとまとまりのWebページ群）の開設方法はここ教育用計算機システム上でのWebサイト（ひとまとまりのWebページ群）の開設方法はここ • ここで開設したら全世界から見えているのだ • 自分のWebサイトの入り口のファイル index.htmlを作る。 • ｈｔｍｌファイルの書き方はここ

おなじサーバの中ならここは省略化 同じフォルダの中ならここも省略化あの<a href=“http://www.host.ac.jp/g001/hp1.html”>ページ</a>の<a href=“www.host.ac.jp/g001/hp1.html/#koko”>あそこ</a>は重要とは思えない。絶対URL URL:www.host.ac.jp/g001/hp1.html 相対URL あいうえお <a name=koko>ここは重要</a> ですよね。絶対URL、相対URL、文書内リンク

WORDでもｈｔｍｌファイルを作れる WORDで文書を作り、ここをクリックして保存。ただし、複雑なｈｔｍｌファイルが作られる。また、お思ったように出来ないかも。

スタイルシート • ここから先は難しいので、根性のない人は引き返してください。 • Ｗｅｂページのレイアウトを定義する技術 • ＨＴＭＬは論理構造を記述 • スタイルシートは表示構造を記述という立場 • 現在良く使われている CSSについて説明

スタイルシートの設定方法 • 外部スタイルシートを読み込む • ＨＴＭＬ文書にまとめて設定 • タグに直接スタイルを設定 • スタイルシートはボックス（領域）に対して指定する。背景色指定のおよぶ領域となる

外部スタイルシートを読み込む <title>外部スタイルシート</title> <link rel=“stylesheet” href=“h1design.css” type=“text/css”> </head> <body> <h1>スタイルシート</h1> </body> h1design.css h1 { background-color:#cfc; color:rgb(0,128,0) }

ＨＴＭＬ文書にまとめて設定 <title>ＨＴＭＬ文書にまとめて設定 </title> <style type=“text/css”>  </style> </head> <body> <h1>スタイルシート</h1> </body>

タグに直接スタイルを設定 <title>タグに直接スタイルを設定 </title> </head> <body> <h1 style=“background-color:#cfc; color:rgb(0,128,0)” > スタイルシート</h1> </body>

クラスとＩＤ • #名前　　 id=“名前” • 要素に名前をつける。同一文書中で1回だけしか使えない • .クラス名  class=“クラス名” • 要素にクラス名をつける。同一文書の中で複数の要素に対して同じ名前を繰り返して使える

Class . ID # span strong  <span class=“sample3”>東京大学</span> <strong class=“sample4”>入学</strong> <span class=“sample3”>おめでとう</span> 東京大学入学おめでとう span インラインレベル（文字列に対する）範囲指定 div ブロックレベル（段落、見出しなど）範囲指定 strong em より強い強調

span strong という指定されたタグの前でだけClass . ID #が有効  <span class=“sample1”>東京大学<strong id=“sample2”>入学</strong>おめでとう</span> 東京大学入学おめでとう span インラインレベル（文字列に対する）範囲指定 div ブロックレベル（段落、見出しなど）範囲指定

Aタグの属性を色分けする • :link　まだ見ていないリンク • :visited 既に見たリンク • :hover マウスが要素と重なり、まだactiveではないとき • :active リンク部分を選択した瞬間 a:link {color: #0000ff} a:visited {color: #00ee00}

文字装飾：text-decoration • text-decoration:none  装飾なし • text-decoration:overline  上線 • text-decoration:underline:  下線 • text-decoration:line-through  取り消し線 • text-decoration:blink  点滅

表示形式の指定 • display:block  ブロック（行末まで範囲になる）で表示 • display:inline 文字列単位で表示 • display:list-itme  項目のリストとして表示  <span class=“sample”>windows</span><span class = “sample> unix</span> • windows • unix

配置する位置の指定 • <!— .sample { position: static( or relative or absolute or fixed); top: 200px; left: 300px; background-color:#ff9933 } • static 配置方法指定なし • relative 通常の配置位置からの相対位置指定 • absolute 親要素からの絶対位置 (親の例： <body>…) • fixed 親要素からの絶対位置でスクロールしても移動せず

レポート課題 • ＷＷＷとブラウザのところで出した課題（次のページに再掲）を解き、その答えと解き方をＨＴＭＬファイルにして、自分のホームページで発信する。 • 解き方、ホームページ作成の技術、説明の仕方の工夫の度合い、で評価します。 • 締め切りは。。。

日本で1番目から5番目までの高い山は？ • 世界で1番目から5番目までの高い山は？ • 計算機をフランス語、中国語で何というか？ • ミシシッピー川のスペルを調べよ。（Kiwiを使う手もあり） • アーカンソウ州のスペルを調べよ。 • アーノルドシュワルツネガーのスペルは？ • 最近、社長が交代した企業名と新旧の社長名をリストアップせよ。

情報発信 早い話が Web ページ作成実習