html

役割を指定するタグ

<h1>が開始タグ、</h1>が終了タグで、挟まれた部分が h1 という役割を持っていることを示します。h1は一番大きな見出しという意味です。

エディタで以下のような内容のファイルを作ってindex.htmlなどの名前で保存すると、ブラウザで見ることができます。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>このページのタイトル</title>
</head>
<body>
<h1>私の ウェブページ</h1>
<p>はじめてのウェブページです。</p>
<p>見出し、段落、重要点などの役割を<strong>タグ</strong>で指定します。</p>
</body>
</html>

課題:kadaiフォルダ内にindex.htmlという名前で保存する

見栄えを指定するスタイルシート

スタイルシートを使って、タグごとに文字の色や背景の色を指定できます。

s1style.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>スタイルシート</title>
<style>
h1 {
  color:green;
  background-color:#ffffee;
}
strong {
  color:red;
}
</style>
</head>
<body>
<h1>スタイルシート</h1>
<p>はじめてのウェブページです。</p>
<p>見出し、段落、重要点などの役割を<strong>タグ</strong>で指定します。</p>
</body>
</html>

この他にも、文字の大きさや書体、余白、囲み枠などもスタイルシートで指定します。

課題:kadaiフォルダ内にs1style.htmlという名前で保存する

リンク

他のウェブページに移動するための仕組みをリンクといいます。閲覧者を関連する文書に誘導します。

s2link.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>リンク</title>
<style>
h1 {
  color:green;
  background-color:#ffffee;
}
strong {
  color:red;
}
</style>
</head>
<body>
<h1>リンク</h1>
<p>はじめてのウェブページです。</p>
<p>見出し、段落、重要点などの役割を<strong>タグ</strong>で指定します。</p>
<p>詳しくは<a href="abc.html">abcについて</a><a href="def.html">defについて</a>を参照してください。</p>
</body>
</html>

上の例ではリンク先はファイル名だけですが、URLにすれば他のサーバー上のファイルを指定できます。

課題:kadaiフォルダ内にs2link.htmlという名前で保存する

課題:href="abc.html" などを href="index.html" とか、href="s1style.html" などと変更して、本当にページを移動できるようにする。

画像

画像を入れる方法です。画像は別に用意する必要があります。

s3img.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像</title>
<style>
h1 {
  color:green;
  background-color:#ffffee;
}
strong {
  color:red;
}
</style>
</head>
<body>
<h1>画像</h1>
<p>はじめてのウェブページです。</p>
<p>見出し、段落、重要点などの役割を<strong>タグ</strong>で指定します。</p>
<p><img src="hana.jpg" alt="薄桃色の花"></p>
</body>
</html>

画像の保存形式は、jpg,png,gifのどれかです。

課題:kadaiフォルダ内にs3img.htmlという名前で保存する

課題:hana.xcfをhana.jpgとして保存し直すか、src="hana.jpg" を src="anime2.gif" などkadaiフォルダ内にあるファイル名に変える

スクリプト

閲覧者が操作できる部分をつくります。

s4script.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>スクリプト</title>
<style>
h1 {
  color:green;
  background-color:#ffffee;
}
strong {
  color:red;
}
</style>
<script type="text/javascript">
var ct = 0;
function addline(){
  ct=ct+1;
  var pelem = document.createElement("p");
  var text = document.createTextNode("追加 " + ct + "行目");
  pelem.appendChild(text);
  var target = document.getElementById("koko");
  target.appendChild(pelem);
}
</script>
</head>
<body>
<h1>スクリプト</h1>
<p>はじめてのウェブページです。</p>
<p>見出し、段落、重要点などの役割を<strong>タグ</strong>で指定します。</p>

<div id="koko">
<p>元からあるテキスト</p>
</div>
<p><button onclick="addline()"行追加</button></p>

</body>
</html>

課題:kadaiフォルダ内にs4script.htmlという名前で保存する

スクリプトのサンプルページ

行の追加ができるページを試す