<h1>が開始タグ、</h1>が終了タグで、挟まれた部分が h1 という役割を持っていることを示します。h1は一番大きな見出しという意味です。
エディタで以下のような内容のファイルを作って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という名前で保存する
スタイルシートを使って、タグごとに文字の色や背景の色を指定できます。
<!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という名前で保存する
他のウェブページに移動するための仕組みをリンクといいます。閲覧者を関連する文書に誘導します。
<!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" などと変更して、本当にページを移動できるようにする。
画像を入れる方法です。画像は別に用意する必要があります。
<!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フォルダ内にあるファイル名に変える
閲覧者が操作できる部分をつくります。
<!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という名前で保存する