RIGHT:[[授業のページへ戻る>Lecture/CompPracR2003]] *コンピュータ演習(再) 第13回 課題 [#t52f2d2a] **課題1 CSSを使ったWebページの作成 [#z66c621b] [[第12回>../12thExercise]]の課題をともに、エディタでWebページを作成しなさい。 CSSを使って、デザインを調整しなさい。 「マイドキュメント」の「public_html」フォルダにある、 「index.html」「profile.html」「town.html」「memory.html」の各ファイルについて、 次のような編集をしなさい。 ***HTMLに必要な情報の追加 [#d0782604] [[今回の内容>../13th]]で説明したように、必要な情報を追加します。 +次の行を各ファイルの最初にコピーして追加してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> +<title>要素の前に、次の行をコピーして追加してください。 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> +<address>要素の中の、更新日の日付を、今日の日付に変更してください。 ***CSSによるスタイルの設定 [#s46c83a0] +<title>要素の後に、次の行をコピーして追加してください。 <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body {} h1 {} h2 {} h3 {} p {} ul {} li {} dl {} dt {} dd {} body {color: black; background: white;} h1 { color: #000000; background: #FFFFFF; text-align: center; border: #FF0000 medium solid; padding: 0.2em; } h2 { color: #000000; border-left: #FF0000 medium solid; border-top: #FF0000 1px solid; border-bottom: #FF0000 1px solid; border-right: #FF0000 1px solid; padding: 0.2em; } h3 { color:#000000; border-bottom: #00FF00 1px dotted; padding: 0.2em; } p { margin-left: 1em; margin-right: 1em; } ul { } li { } dl { background: yellow; margin: 0.5em; padding: 0.5em } dt { color: #0000FF; padding:0.1em; } dd { padding:0.1em; } --> </style> +次の例を参考に、各ファイルにスタイルを設定してください。サンプルは、ブラウザからソースを見てください。 #ref(town.html,サンプル(town.html)) +設定するときには、少しずつ設定し、出来上がりをブラウザで確認するようにしてください。 |