Webページで学ぶ
JavaScript 2013 第3回
tyage@KMC
6/4
せんしゅうのわんこ
● for
● while
● HTML
○ いろんな要素が出てきた
きょうのわんこ
● もっとHTML
● ローカルでHTMLを書こう
● CSSでページをデザインする
きょうのわんこ
● もっとHTML
● ローカルでHTMLを書こう
● CSSでページをデザインする
補足説明
● HTML要素は入れ子にできますが、ある要素A
が内包している要素Bとの関係を「AはBの親」「B
はAの親」とか呼びます。
<div>
<img>
</div>
div要素:親
img要素:子
補足説明
<section>
<h1>タイトル</h1>
<div>
<p>文章</p>
</div>
</section>
divとh1は兄弟
pはsectionの孫
前回でてきた要素
● html
● head
● title
● body
● p
● br
● img
● h1, h2, h3, h4, h5, h6
● div
● a
あとこれくらいは
覚えておいて欲しい要素
● リスト
○ ul, li
● テーブル
○ table, tr, th, td
● フォーム
○ form, input, textarea, select, option
● DOCTYPE宣言
● コメント
リスト
リスト全体はul(unorderd list)要素
リストの項目はli(list item)要素
<ul>
<li>あれ</li>
<li>これ</li>
<li>それ</li>
<li>どれ</li>
</ul>
リスト
ulの代わりにol(orderd list)を使ってみる
<ol>
<li>あれ</li>
<li>これ</li>
<li>それ</li>
<li>どれ</li>
</ol>
テーブル
tableでテーブル全体
tr(table row)で行、
th(table header cell)やtd(table data cell)で各
セルを埋める
時間割とか作ってみよう
テーブル
時間割とか作ってみよう
<table>
<tr><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>
<tr><td>月1</td><td>火1</td><td>水1</td><td>木1</td><td>金1</td></tr>
<tr><td>月2</td><td>火2</td><td>水2</td><td>木2</td><td>金2</td></tr>
<tr><td>月3</td><td>火3</td><td>水3</td><td>木3</td><td>金3</td></tr>
<tr><td>月4</td><td>火4</td><td>水4</td><td>木4</td><td>金4</td></tr>
<tr><td>月5</td><td>火5</td><td>水5</td><td>木5</td><td>金5</td></tr>
</table>
フォーム
ログイン時のID・パスワードの入力欄とかそういうや
つ
form要素がフォーム全体
<input type="text">が一行テキスト入力欄
<input type="submit">で送信ボタン
<textarea>で複数行入力欄
<select>で選択肢から選択するやつ
etc...
フォーム
例えばログイン画面とか
<form>
ID: <input type='text'><br>
Pass: <input type='password'><br>
<input type='submit' value='ログイン'>
</form>
フォーム
セレクトボックスはこんな感じ
<form>
出身地:
<select>
<option>北海道</option>
<option>東北</option>
<option>関東</option>
<option>北陸</option>
<option>中部</option>
<option>...</option>
</select>
</form>
フォーム
種類が多すぎて全部は説明しきれないので、出て
くる都度覚えて行きましょう
(HTML5になってdateとかcolorとかemailとか色々
と増えたし)
DOCTYPE宣言
使用するHTMLのバージョンや文書型の宣言
歴史的経緯でつけるようになった
昔(HTML4)は
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
とか(XHTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
今(HTML5)は
<!DOCTYPE html>
でいい
コメント
ブラウザに描画されないコメントを書けます
編集する時に便利だったり
https://www.tumblr.com/
<!-- ここにコメント内容を書きます -->
きょうのわんこ
● もっとHTML
● ローカルでHTMLを書こう
● CSSでページをデザインする
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカ
ル環境で書いてみましょう
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカ
ル環境で書いてみましょう
● お好きなテキストエディタをご用意ください
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカ
ル環境で書いてみましょう
● お好きなテキストエディタをご用意ください
● 適当な場所に、sample.htmlというファイルを作
り、編集しましょう
○ ※末尾が.htmlならなんでもいいです
ローカルでHTMLを書く
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>こんにちはこんにちは!</title>
</head>
<body>
<p>もふもふ</p>
</body>
</html>
ローカルでHTMLを書く
UTF-8で保存するように心がけましょう
head要素内に
<meta charset='UTF-8'>
を入れるとUTF-8で表示してくれて文字化けしない
です
ローカルでHTMLを書く
● KMCサーバーにこのファイルをアップロードす
れば、みんなアクセスできます
● さっきアップローダー作りました
● https://www.kmc.gr.jp/~tyage/uploader/
● 作ったページをアップロードしよう〜〜
● (複数ファイルアップロード可)
きょうのわんこ
● もっとHTML
● ローカルでHTMLを書こう
● CSSでページをデザインする
CSS
● HTMLだけだと素っ気ないままだと思います
● そこで、Webページのデザイン部分を担当する
「CSS」の出番です
● いろんなページのCSSを見ていこう〜〜〜
CSS
● 参考ページ:
● https://developer.mozilla.
org/ja/docs/Web/CSS
投げやりですがここを読み進めます!!!
お疲れ様でした
● 次回は来週です

Webページで学ぶJavaScript2013 第3回