情報発信
早い話がWebページ作成実習
WWW:World Wide Web:インターネット上に
シームレスに張り巡らされたハイパーテキスト
のネットワーク
ハイパーリンク： ハイパーテキストを結びつけ
るリンク
インターネット
ブラウザ画面
ハイパーテキスト：他のページへのリンクを含
む文書。HTML (Hypertext Markup
Language) という言語で書かれる。
今見えているWebページがどのようなHTMLで書かれて
いるかは、表示でソースをクリックして表示させる。
自分でWebページを書くときに注意すべきこ
とはここ。
Web上の画像などを不注意に使うと著作権や肖
像権を侵害で訴えられる可能性あり。
WWWの動きの模擬
教育用計算機システム上でのWebサイト（ひとまと
まりのWebページ群）の開設方法はここ
ここで開設したら全世界から見えているのだ
自分のWebサイトの入り口 のファイル index.htmlを
作る。
ｈｔｍｌファイルの書き方はここ
おなじサーバの中ならここは省
略化
同じフォルダの中ならここも省略
化
あの<a href=“http://
www.host.ac.jp/g001/hp1.html”>ページ</a>
絶対URL
の<a
href=“www.host.ac.jp/g001/hp1.html/#koko”>
あそこ</a>は重要とは思えない。
URL:www.host.ac.jp/g001/h
p1.html
相対URL
あいうえお
<a name=koko>ここは
重要</a>
ですよね。
絶対URL、相対URL、文書内リンク
WORDでもｈｔｍｌファイルを作れる
WORDで文書を
作り、ここをク
リックして保存。
ただし、複雑なｈ
ｔｍｌファイルが作
られる。また、お
思ったように出
来ないかも。
スタイルシート
ここから先は難しいので、根性のない人は引
き返してください。
Ｗｅｂページのレイアウトを定義する技術
ＨＴＭＬは論理構造を記述
スタイルシートは表示構造を記述
という立場
現在良く使われている CSSについて説明
スタイルシートの設定方法
1. 外部スタイルシートを読み込む
2. ＨＴＭＬ文書にまとめて設定
3. タグに直接スタイルを設定
スタイルシートはボックス（領域）に対して指
定する。背景色指定のおよぶ領域となる
外部スタイルシートを読み込む
<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”>
<!-h1 {
background-color:#cfc;
color:rgb(0,128,0)
}
-->
</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
<!-.sample3
#sample4
{color*blue}
{color:white;
background-color:#ff0099
}
-->
<span class=“sample3”>東京大学</span>
<strong class=“sample4”>入学</strong>
<span class=“sample3”>おめでとう</span>
東京大学入学おめでとう
span
インラインレベル（文字列に対する）範囲指定
div
ブロックレベル（段落、見出しなど）範囲指定
strong em より強い強調
span strong という指定されたタグの前でだ
けClass . ID #が有効
<!-span.sample1 {color*blue}
strong#sample2
{color:white;
background-color:#ff0099 }
-->
<span class=“sample1”>東京大学<strong id=“sample2”>入
学</strong>おめでとう</span>
東京大学入学おめでとう
span
インラインレベル（文字列に対する）範囲指定
div
ブロックレベル（段落、見出しなど）範囲指定
Aタグの属性を色分けする
• :link まだ見ていないリンク
• :visited 既に見たリンク
• :hover マウスが要素と重なり、まだactiveではない
とき
• :active リンク部分を選択した瞬間
a:link
a:visited
{color: #0000ff}
{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
.sample
{display:list-item} -->
<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を使う
手もあり）
V. アーカンソウ州のスペルを調べよ。
VI. アーノルドシュワルツネガーのスペルは？
VII. 最近、社長が交代した企業名と新旧の社長名
をリストアップせよ。
I.
II.
III.
IV.
© Copyright 2024 ExpyDoc
