講義の概要
目的
- HTML、CSSを復習し、Webページの構造やデザインの基本を学ぶ
- JavaScriptを学習し動きのあるWebページを可能にしている技術について知る。
- ライブラリやAPI活用して、より簡単に、より洗練されたWebページの作成が可能なことを理解する。
- 上記の実習を通して自分を取り巻くIT環境について理解を深める
詳細は→シラバス
JavaScriptでどんなことができるか JavaScript Introduction by w3cschools
ウェブ情報処理実習Ⅰからの接続について
(授業と関係なく、講義中盤までに、自習しておくこと)
ウェブ情報処理実習Ⅱ では、すべての人にとってあたらしい学習事項である、JavaScript について学習するところから始めます。
授業の後半では、ウェブ情報処理実習Ⅰで学習済みのCSSの知識をベースとして、CSSによるページレイアウトやCSS3で新しく追加された表現などを見ていく予定です。
ウェブ情報処理実習Ⅰの講義の範囲の内容について、なるべく早い時期に、以下の資料を参考に復習しておきましょう。
内容と予定
- JavaScript の学習
- JQuery, Canvas + JavaScript, API
- HTML及びCSSの復習
- CSSによるレイアウトやCSS3で追加された表現について, Bootstrap
- スキルチェック, 制作実習
実習の準備
エディタの設定
秀丸の設定 1 編集時の文字コードの設定
- 秀丸を起動し、メニューバーの[その他]から動作環境を選択する。
-
左下の、上級者向け設定にチェックを入れ、[設定の対象]のファイルから、エンコード1を選択し、標準のエンコード と書かれているボタンを押す
- エンコードの種類を、unicode(UTF-8)としておく
- 自動判定で開くときのエンコードの判定の優先順位もUTF-8が上に来るように順序を変えておく
秀丸の設定 2 保存時の文字コードの設定
- メニューバーの[その他]からファイルタイプ別の設定を選択
- 設定の対象のその他から保存・読込みを選択し、エンコードの種類の指定をUnicode(UTF-8)とする
全角スペースの表示・フォントやタブの間隔の指定
- 設定の対象の体裁→デザイン→表示で、全角スペースを記号で表示するよう設定しておくと、不具合を見つけやすい。
- (設定任意) メニューバーの[その他]からファイルタイプ別の設定を選択、設定の対象のフォントから読みやすいフォントとサイズを選択(デフォルトの表示に慣れている場合は、変更しなくてもよい)
- (設定任意) 設定の対象の体裁→タブで、字下げのタブを何文字分にするか設定できる。
実習1 実習用フォルダとひな形ファイルの準備
実習用フォルダの作成
- デスクトップにweb2という名前のフォルダを作成
- web2のフォルダ内部にhtmlという名前のフォルダを作成
ひな形ファイルの作成
- 秀丸を起動
- 以下のようなファイルを作成
- hinagata.htmlという名前で、フォルダhtml 内部に保存する
注意点
- ファイル名、フォルダ名は、半角、英数、小文字のみを使用
- ソースを記述する際に全角スペースを使わない(日本語入力モードの状態でスペースキーを押さない)
- ソースの中に記述されている文字コード、エディタで編集中の文字コード、保存するときの文字コードを一致させておく。
ブラウザの設定
.html と ブラウザの関連付けを変更
- 拡張子が、.html であるファイルの上で右クリック、プロパティを選択
- 変更をクリック
- Google Chrome を選択
実習2 メモの作成
講義で覚えたことをメモしていくファイルを作成
- word を起動
- メモのタイトル・学生番号氏名などを記入し、今日覚えたことがあればメモしておく
- web2フォルダ内部に、memo というファイル名で保存
宿題
次回までに、次の文言を、大文字小文字間違えずに、できれば、キーボードを見ないで、速やかに打てるように練習しておきましょう!
document.getElementById('demo').innerHTML
タッチタイピングの練習方法は、こちら
キーボードの配列表は、こちら
今日の授業内容に関連する資料
授業全体の参考となる資料
この回の成果物
- web2/html/html_hinagata.html