ページ選択　Page1／Page2／Page3

環境準備からHTML基礎


【準備】100MB程度以上の空きがあるUSBメモリを準備。新たに買う必要はないが内部に他の授業のファイルなどが保存されている場合バックアップをとっておくこと(大学PCのMyDocumentにコピーしておくとよい)。
USBメモリを開いて「webkiso」フォルダを作成。続いて、こちらのリンクをマウスの右ボタンでクリックし、表示されたメニューから「名前を付けて保存」といった項目を選択。途中で警告メッセージが出る場合があるが問題ないので実行する方向で進める。保存先が選べるならUSBメモリに作成した「webkiso」フォルダを選択する(保存先が選べず自動的にダウンロードされる場合はダウンロードフォルダなど各自のパソコンやブラウザの設定を確認し、保存先からダウンロードしたeditor.exeファイルを「webkiso」フォルダに移動する)。USBメモリ内のwebkisoフォルダに保存されたeditor.exeをダブルクリックすると、パスワードが確認されるため指示されたコードを入力。完了すると実行ファイルができるので、これをダブルクリックしてテキストエディタが起動すれば完成。
HTML5 & CSS3入門 開発環境準備編を参照して、環境設定について理解せよ。
作業フォルダを参照して、環境作業フォルダについて理解せよ。
テキストエディタを参照して、テキストエディタの必要性について理解せよ。
Terapadの設定を参照して、表示設定と文字コードの設定を実施せよ。
ひな形ファイルを参照して、ひな形ファイルを作成せよ。
完成したひな形ファイルをダブルクリック(またはブラウザにドラッグ＆ドロップ)して、何が表示されるか確認せよ。特にブラウザのタブやタイトルバーのところ(タイトル)と、ページ内容のところを確認し、ひな形ファイルの内容との対応を確認せよ。
便利な操作を参照して、開発作業を効率化するための方法について理解せよ。
ひな形ファイルをよく確かめ、<meta charset="utf-8">となっている行の次の行に、<meta name="author" content="学籍番号・氏名">を追加し、自分の学籍番号と氏名に変更。[Ctrl]＋[s]で上書き保存して、ブラウザを更新し、見た目に変化がないことを確かめよ。
ひな形ファイルを編集し、「ページのコンテンツはこちら」の次の行に学籍番号、次の行に氏名を記入。[Ctrl]＋[s]で上書き保存して、ブラウザを更新し、ブラウザの表示が変わったことを確かめよ。
HTMLとはを参照して、HTMLについて理解せよ。
基本タグを参照して、基本タグやその構造について理解せよ。
作業ファイルを参照して、作業ファイルren01.htmlファイルを作成し、タイトルや本文の文字が変わることを確認せよ。
2つの要素を参照して、HTMLの要素にインライン要素とブロック要素があることを確認せよ。
インライン要素を参照して、改行や文字装飾のタグの効果を確かめよ。
ren01.htmlファイルを編集し、「赤橙黄緑青藍紫」と入力した上で、fontタグを使ってそれぞれの色を指定せよ。回答例は以下。 <font color="red">赤</font><font color="orange">橙</font><font color="yellow">黄</font><font color="green">緑</font><font color="blue">青</font><font color="navy">藍</font><font color="purple">紫</font>
ren01.htmlファイルを編集し、受講日の日付、学籍番号、氏名を改行を入れて表示し、受講日の日付を小さい文字small、学籍番号を下線で小さい文字small、氏名を太字で下線で青色にせよ。その際、複数のタグの入れ子構造に注意せよ。回答例は以下。 <small>2021年5月3日</small><br> <u><small>99m999</small></u><br> <b><u><font color="blue">愛学太郎</font></u></b><br>
ren01.htmlファイルが完成したら、[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue4]-[report]に自分の姓のフォルダを作り(例：[アサト])、その中に提出して下さい。
画像表示を参照して、画像の表示方法について確認し、ren02.htmlファイルを作成せよ。
作成したren02.htmlファイルを編集し、p01.jpgを3回、同じ形式で並んで表示するようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> 夕方の景色
続けてren02.htmlファイルを編集し、p01.jpgの3回の表示が、改行されて表示されるようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> 夕方の景色
さらにren02.htmlファイルを編集し、p01.jpgの3回の表示が、150×200、100×133、50×67のサイズで表示されるようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="200" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="100" height="133" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="50" height="67" border="10"><br> 夕方の景色
リンクを参照して、リンクの意義や設定方法について確認し、ren03.htmlファイルを作成せよ。
作成したren03.htmlファイルを編集し、リンク切れのエラーを体験するために、「前回の成果」リンクの下に、リンクファイル名を「kakuu.html」、リンクの文字列を「架空のページ」としてリンクを設定し、リンク切れエラー起こることを確認せよ。必要なら改行を行う。回答例は以下。 <a href="kakuu.html">架空のページ</a>
さらにren03.htmlファイルを編集し、愛知学院大学のウェブサイトのURLを調べ、リンク文字列を「愛知学院大学HP」としてリンクを設定せよ。必要なら改行を行う。回答例は以下。 <a href="https://www.agu.ac.jp/">愛知学院大学HP</a>
最後にren03.htmlファイルを編集し、リンクを張った鳥の画像のサイズを100×50に変更し、リンク先をひな形ファイルに変更せよ。回答例は以下。 <a href="hina.html"><img src="gazo/p02.jpg" width="100" height="50"></a><br>
完了したら[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue4]-[report]の自分のフォルダに、作成したファイルを提出して下さい。

---

ページ選択　Page1／Page2／Page3