Webページで学ぶJavaScript2013 第3回

Webページで学ぶ
JavaScript 2013 第3回
tyage@KMC
6/4

せんしゅうのわんこ
● for
● while
● HTML
○ いろんな要素が出てきた

きょうのわんこ
● もっと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>
</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を書く
● 今まではブラウザ上で書いていましたが、ローカ
ル環境で書いてみましょう

● お好きなテキストエディタをご用意ください

● お好きなテキストエディタをご用意ください
● 適当な場所に、sample.htmlというファイルを作
り、編集しましょう
○ ※末尾が.htmlならなんでもいいです

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>こんにちはこんにちは！</title>
</head>
<body>
<p>もふもふ</p>
</body>
</html>

UTF-8で保存するように心がけましょう
head要素内に
<meta charset='UTF-8'>
を入れるとUTF-8で表示してくれて文字化けしない
です

● KMCサーバーにこのファイルをアップロードす
れば、みんなアクセスできます
● さっきアップローダー作りました
● https://www.kmc.gr.jp/~tyage/uploader/
● 作ったページをアップロードしよう〜〜
● （複数ファイルアップロード可）

CSS
● HTMLだけだと素っ気ないままだと思います
● そこで、Webページのデザイン部分を担当する
「CSS」の出番です
● いろんなページのCSSを見ていこう〜〜〜

CSS
● 参考ページ：
● https://developer.mozilla.
org/ja/docs/Web/CSS
投げやりですがここを読み進めます！！！

お疲れ様でした
● 次回は来週です

Webページで学ぶJavaScript2013 第3回

Recommended

Recommended

More Related Content

Similar to Webページで学ぶJavaScript2013 第3回

Similar to Webページで学ぶJavaScript2013 第3回 (10)

More from 京大マイコンクラブ

More from 京大マイコンクラブ (20)