前期講座02

 HTML/CSS/JS を書くために必要なもの
 新しい知識を習得する方法
 HTML がブラウザで表示される仕組み
 HTML を書いてみる
 HTML の基礎
 学習時の注意点
 課題
 参考

 HTML/CSS/JS を書くために必要なモノ。
 プログラマにとって重要な道具。
 書道をする人にとっては、硯や筆、炭のようなもの。
 エディタに必要な機能
 Syntax Highlight (コードに色付けされて可読性が向上)
 補完 (変数名、関数名を途中まで打つと自動入力する)
 文字コード対応 (UTF-8 を選択できる)
 改行コード対応 (CR, LF, CRLF の相互変換)
 空白文字の表示機能 (スペースとタブの区別ができる)
 文字列検索・置換
 行番号表示

 Vim
 Emacs
 Sublime Text
 Eclipse
 NetBeans
 Notepad++
 Komodo Edit
 StyleNote
この他以外に好きなエディタがあり、 1 つ前のスライ
ドの条件を満たすものであれば、何でも構いません。

 必要な３つの力
 調べる力
 自分の求めている情報を探し出すために、適切な検索キー
ワードを入力して、正しい情報を見つけ出す力。
 訊く力
 調べても分からない事は、コミュニティで質問するか、詳
しい人に直接尋ねる。
 努力
 どんな事にもトラップは存在する。
 一度嵌ったら、二度目は嵌らないようにする努力。
 何度トラップに嵌っても挫けずに解決させる力。

前回、 HTML はブラウザの HTML レンダリングエ
ンジンで解釈されて表示、実行されると説明した。
下の図のようにネイティブアプリに比べてブラウザ
の層が増える分、実行速度が遅くなる。
マシン (コンピュータ)
OS
ブラウザ
Web サイト Web アプリ
マシン
(コンピュータ)
OS
ネイティブ
アプリケーション

 まずは、次の HTML を index.html として作成する。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<h1>HTML5</h1>
<p>初めての HTML5</p>
</body>
</html>

 マークアップとは
 文章に構造を持たせること
こんにちは！
↓
<p>こんにちは！</p>
単なる一文に対して、段落という構造が付加された。
HTML では、文字列をタグで囲んで構造を持たせる。
タグ

 要素と属性
 要素
 HTML タグで表される、 HTML を構成する部品
 属性
 HTML 要素に対して情報を付加することができるデータ
<p id="paragraph-1" class="red-pattern">段落</p>
p – タグ
id – id 属性
class – class 属性
属性は属性名="属性値" で表す。
('属性値' のようにシングルクオートで囲んでも良い)
タグによって付加できる属性が異なる。

 HTML には例外として囲まないタグもある。
 <br> - 改行
 <hr> - 水平罫線
 インライン要素とブロックレベル要素
 ブロックレベル要素は文書を構成する基本的な要素
 インライン要素はブロックレベル要素の中の特定の範
囲に対して何らかの構造を持たせる要素
※インライン要素の中にはブロックレベル要素を含め
ることはできない

 HTML でマークアップする際の注意点
 タグの意味を考える
 一番適したタグを使う
 インライン要素とブロックレベル要素に気を付ける
 初心者がやりがちな過ち
 <br> の連続使用
 インライン要素の中にブロック要素を含める

 <!DOCTYPE html>
 HTML5 の文書であるという宣言
 <html>
 HTML 文書の一番外側の要素
 <head>
 HTML 文書についての付加的な情報が記述される要素
 <meta charset="utf-8">
 HTML 文書の文字コードが UTF-8 であることを明示
する
 <title>
 HTML 文書のタイトルを設定する

 <body>
 HTML 文書の内容が記述される要素
 <h1> ~ <h6>
 見出しを記述するための要素 (1 ~ 6 のレベルから選ぶ)
 <p>
 文字列を段落としてまとめる
 <br>
 改行を示す

 自分で学習する際の注意点
 HTML には複数の種類がある
 HTML 4.01 (より古いもの)
 XHTML
 HTML5
 自分で勉強する際には、混乱しないように注意。
 それぞれ、何が違うのか理解する必要がある。

 下記の URL からアンケートに答える。
 URL:
https://docs.google.com/a/stumail.hit.ac.jp/spreadsheet/vie
wform?formkey=dG90WEdSYWxLY3hWNGpLeTlaRDE0M1E
6MQ
 次の語句の意味を調べ、理解する。
 文字コード
 MIME Type
 HTTP と HTTPS
 課題を下記の URL からダウンロードして編集し、
Google Drive から提出する。
 URL: https://github.com/ww24/densan.info-network-course

前期講座02

Recommended

Recommended

More Related Content

Similar to 前期講座02

Similar to 前期講座02 (7)

More from Takenori Nakagawa

More from Takenori Nakagawa (20)

Recently uploaded

Recently uploaded (20)

前期講座02