演習

演習 1-1 (個人): 以下のテンプレートをWebブラウザで表示してみましょう。

<!DOCTYPE html>    <!-- ドキュメントタイプ宣言。無いと古いブラウザで表示が崩れる時がある  -->
<html lang="ja">   <!--  HTML文書である事を示すタグ。ja は日本語の意味 -->

<!-- ヘッダ部 -->
<head> 
<meta charset="UTF-8"> <!-- 文字コードは UTF-8 -->
<title>タイトル</title>
</head>

<!-- ボディ部 -->
<body>
 <h1>通常の h1</h1> 
 <div>
  <p>普通の p </p>
  <p class="hoge">クラス hoge の p </p>
  <p class="hoge">クラス hoge の p </p>
 </div>

 <h1 id="piyo">IDが piyo の h1</h1> 
 <div>
  <p>普通の p </p>
  <p class="fuga">クラス fuga の p </p>
  <p class="fuga">クラス fuga の p </p>
 </div>

</body>

</html>

フォルダ「SERV_1_1」を新規作成し、その中に移動します
フォルダ「SERV_1_1」の中で新規に 1 つHTMLファイルを作ります。ファイル名を「index.html」とします。
上のソースを index.html の中にコピーして保存します。なお文字コードは「UTF-8」にしてください。
ブラウザで index.html を表示して、ソースと表示内容を見比べて下さい。
提出物はありません。

演習 1-2 (個人): 以下のテンプレートを元に table タグで表を作ってみましょう。

  <table>
  <thead> <!-- ヘッダ部 -->
   <tr> <!-- table row -->
    <th>ヘッダ1</th> <!-- table header -->
    <th>ヘッダ2</th>
   </tr>
  </thead>
  <tbody> <!-- ボディ部 -->
   <tr>
    <td>セル1</td> <!-- table data -->
    <td>セル2</td>
   </tr>
  </tbody>
  </table>

演習 1-1 の続きから演習を行います。
index.html の body 内の適当な場所に上のテンプレートをコピーしてください。
表のセルの中身を適当に書き換えて保存して下さい。
ブラウザで index.html を再読み込みして、ソースと表示内容を見比べて下さい。
提出物はありません。

演習 1-3 (個人): 以下のテンプレートを元に a タグでリンクを張って下さい。

  <a href="アドレス">文章</a>

演習 1-2 の続きから演習を行います。
index.html の body 内の適当な場所に上のテンプレートをコピーしてください。
a タグで指定したアドレスと文章を適当に書き換えて保存して下さい。
ブラウザで index.html を再読み込みして、リンクが張られたか確認して下さい。
提出物はありません。

演習 1-4 (個人): 以下のテンプレートを元に img タグで画像を表示して下さい。

  <img src="./SERV_1_4.(拡張子)">

演習 1-3 の続きから演習を行います。
適当なフリー画像を用意し、「SERV_1_4.(拡張子)」の名前で保存して下さい (注) ファイル名は半角英数字にする、拡張子は png、jpeg, jpg、gif のいずれかにする
index.html の body 内の適当な場所に上のテンプレートをコピーしてください。
適切な画像ファイル名の拡張子を指定して保存して下さい。
ブラウザで index.html を再読み込みして、画像が表示されたか確認して下さい。
提出物はありません。

2. CSS

演習 1-5 (個人): 外部CSSファイルを使い、以下の仕様でスタイル指定をしてしましょう。

スタイル仕様:

・ h1 要素の背景色は赤

・ 通常の p の文字色は青

・ クラス名が hoge の p の文字サイズは 200%

・ クラス名が fuga の p の文字色は紫(purple)

・ IDが piyo の要素の文字色は白

・ 表の背景色は黄色

(ヒント) table タグに「background-color: 色」を指定する

・ 表の罫線は太さ 1px かつ赤色 

(ヒント) 
  table タグに「border-collapse: collapse;」を指定する
  th, td タグに「border: 太さ 色 solid;」を指定する

演習 1-4 の続きから演習を行います。
mycss.css を新規作成し、上の仕様に従って中身を書きます。
index.html 内で mycss.css を読み込みます。
ブラウザで index.html を再読み込みして、ソースと表示内容を見比べて下さい。
指定した場所に「index.html、mycss.css、画像ファイル」を提出して下さい。

3. JavaScript

演習 1-6 (個人): テキストのソース9、10の続きとして以下の動作をするページを作成しましょう。

ページ仕様:

・「text2」というテキストボックスを追加する (value は「ふが」)

・「button2」というボタンを追加する (value は「コピー」)

・ button2 を押すと text2 の value を text1 の value にコピーする

フォルダ「SERV_1_6」を新規作成し、その中に移動します
フォルダ「SERV_1_6」の中で新規に「index.html」を作成してソース10を貼り付けます
「myjs.js」も作成してソース9を貼り付けます
一旦実行確認します。
index.html に text2、button2 を追加します。
myjs.js を仕様に従って書き換えます。
ブラウザで index.html を再読み込みして実行確認します。
指定した場所に「index.html、myjs.js」を提出して下さい。

GetTitle()

1. HTML

2. CSS

3. JavaScript