[戻る]
科目名Web制作
担当者黒田　涼
開講期2024年度秋学期
科目区分週間授業
履修開始年次1年
単位数1単位
授業の方法演習
授業題目Webページ作成の基礎(html, css, javascript)の学習
授業の達成目標Webページの作成方法の基礎である「Hyper Text Markup Language: HTML」について学習し、実際にホームページ作成を行います。また、動的なWebページの作成のために、CSSやjavascriptの基礎を習得し、一歩進んだWebページ作成スキルを身につけることを目的とします。
講義の到達目標は、以下の内容の理解・実践を設定しています。
・htmlタグの利用
・cssの利用と効果の理解
・javascriptの利用と動作の理解
今年度の授業内容Webページ作成のための基本技術である「HTML言語」を活用し、Webページの基礎的な表示方法について学習を行います。
さらに、Webページの表示を「デザイン・レイアウト」と「文章」に分離して、一括してデザインやレイアウトを設定できる「スタイルシート(CSS)」や動的表現を行えるプログラミング言語「javascript」を学習します。
ホームページの作成の基礎を中心に、HTML5の内容や、近年のホームページトレンドなども触れながら、気軽に受けられる授業を心がけています。ぜひ参加してください。
準備学修予習・復習等の具体的な内容及びそれに必要な時間について本講義は演習の側面が強く、利用する「テキストエディタ」について慣れておく必要があります。授業中にテキストエディタについては説明いたします。事前に好きなテキストエディタを一つ用意しておくとよいかと存じます。
テキストエディタは、文字入力するといった、すべてのアプリの基礎部分です。たくさんの種類が出ていますので、生徒さんの使いやすいものを一つ選んでおきましょう！
■よく使われているテキストエディタ
・メモ帳（大学PCに付属）
・Sublime Text
・サクラエディタ
お勧めは、Sublime Textです。海外のアプリですが日本語化することができます。私の講義もこのSublime Textを利用して進めます。
※シェアウェアですが、無料で使える範囲で十分問題ありません。		 合計15時間
自習に関する一般的な指示事項たくさんのWebページを見て、参考になる表現方法を吸収してください。
特に、html構文やcssの使い方に興味を持ってもらえると、講義内容が入りやすいと思います。
また、フォルダ構成についても理解があるとなおよいです。
これらの内容は講義内で説明いたしますので、わからなくても気軽に参加してください。
第1回授業の説明、HTMLの概要、メモ帳・Sumlime textの利用によるタグの入力とHTMLファイル形式での保存、基本的なタグの説明 (､）画面への文字の表示。
第2回htmlタグによる文書構造の表現、文字サイズの変更。html5から追加されたタグやなどの目的や用途について解説。
第3回段落タグ(
,
,
,

)による段落の操作、style属性による文字の色の変更、背景色の設定。
第4回イメージタグによる画像の表示とwidth、height、alt属性、アンカータグによるハイパーリンクの設定とtarget属性。
第5回テーブルタグの利用方法、cellpadding、cellspacing、width、height、background属性、セルの結合
第6回スタイルシートの設定:  スタイルシートの基礎、簡単な利用方法とcss文法についての説明
第7回スタイルシートの設定: セレクタ、クラスセレクタ、継承の利用方法
第8回スタイルシートの設定: スタイルシートの外部ファイル定義方法
javascript演習: javascriptとは。documentオブジェクト, windowオブジェクトの使い方
第9回javascript演習: javascriptの基礎およびイベントハンドラの使い方。
マウスイベントなどについての解説と実践
  • html要素にマウスを合わせると表示が変える方法
  • マウスクリックによる動的コンテンツの実装
第10回javascript演習: 関数の使い方
第11回javascript演習
javascriptの制御構文の学習，条件分岐や反復処理の実現方法
第12回javascript演習:
document.getElementsByNameやdocument.getElementByIdなどによる要素指定の挙動制御
第13回Webページ作成演習(1)
自身のホームページを作成・ひな型によるページ作成演習
第14回Webページ作成演習(2)
自身のホームページを作成・自由記述ページの作成演習
授業の運営方法コンピュータ教室において、実際にコンピュータを操作しながら学習を行います。
また、Microsoft teamsを利用します。
課題試験やレポート等に対するフィードバックの方法Microsoft teamsで行います。
評価の種類 割合(%) 評価方法・評価基準
定期試験 0% テストは行いません。
小論文・レポート 30% ホームページ作品の提出
授業参加 50% 授業毎の理解度調査、授業中の作業内容提出
その他 20% 授業中の課題提出
テキスト テキストは授業中に配りますので、用意していただく必要はありません。
その他、履修生への注意事項 毎回teamsで出席を取ります。積極的に参加してください。
卒業認定・学位授与の方針と当該授業科目の関連 カリキュラムマップ【全学共通科目】
実務経験の概要 ソフトウェア開発業務に携わり、多種多様なアプリケーションの提案・設計・開発を担当
実務経験と授業科目との関連性 近年のアプリケーションは、スマホなどのIoT機器を介して提供することが非常に多いです。これらのシステムを構築するためには、htmlやjavascript技術の利用を前提とした実現方法を選択することがあります。htmlやjavascriptの基礎的技術の垣根を広げるため、Webページの作成を行うための基本技術の講義を行います。