コンテンツ作成 言語HTML5学習のための E

2013年度卒業研究
HTML&CSS学習のためのE-Learningシステムの構築
An E-Learning System for HTML&CSS
研究背景
システムの特徴
 ウェブサイトはインターネットとソフトウェアの普及に伴い,だれでも簡単に運用で
きるようになってきた.
 ウェブページ作成の中はHTMLとCSSを組み合わせることが主流になってきている.
マウスを図
の上におく
奥平研究室
1032241 楊 涛
ブラウザイ
メージが表
示さる
 しかし,HTMLとCSSを理解できるように学習することは容易とは言い難い.
研究目的
マウスをメ
ニュー
バーにおく
 ウェブページ作成に関する基礎知識を初心者がブラウザ上で簡単に学習できるシ
ステムを構築する.
 このE-Learningを学ぶことによって構築できる完成イメージを提示し,段階的に
HTMLとCSSを用いたウェブページ作成方法を身につけさせる.
学習項目
Part 1 Webページの制作
Part 2 HTMLの基礎知識
Part 3 要素の記述
Part 4 画像の挿入とリンクの設定
Part 5 表の作成
Part 6 HTMLファイルの編集
Part 7 HTMLをXHTMLに編集
Part 8 CSSの基礎知識
Part 9 CSSファイルの作成と関連付け
Part 11 特定の場所にスタイルを適用する
Part 12 事例と用語の一覧
メニューの
内容が全
体に表示
される
グリーンのトップに戻るボタンを
押すと,ページの途中から
トップに戻ることができる
 マウスを説明文中のソースリストにおくと,ブラウザイメージが表示される.
 マウスをブラウザの右側のメニューバーにおくと,メニューの内容が動的に表示さ
れる.
 説明文中にトップに戻るボタンを配置しており,ページの途中からトップに戻り,
別の学習項目を選択することができる.
実験と評価
 被験者5名を対象としてアンケート評価を行なった.
 「サイトデザイン」,「使いやすさ」,および「説明文の理解やすさ」は良い評価を
得ることができた.特に「文字の見やすさ」については概ね高評価を得ることがで
きた.また,総合的にも良い評価を得ることができた.
今後の課題
 実験結果をもとに理解度の向上のための学習内容を充実し,および機能の追
加と向上などのシステムを修正する必要がある.
本システムは右のURLから利用できる.http://vg.okd-lab.net/s/2013/e/HTMLCSS/