東放学園2012後期スライド
- 4. 今日の内容
HTMLページのつくりかた基礎
- HTMLとは何かを理解する
- 基本的なツールの紹介
- 基本的なHTMLタグを理解する
Friday, October 5, 12
- 5. 3人以上のグループ
(バンドなど)を決める
Friday, October 5, 12
- 7. 好きなバンドを検索する
Googleの画像検索で画像を保存する
2. 右クリックで保存
1. クリック
Friday, October 5, 12
- 9. おすすめのエディタ
HTMLを記述するソフトウェア(エディタ)
テキストエディタならなんでもよい。フリー(無料では、Windowsなら
サクラエディタ、MacならMiなどがある。
- サクラエディタ http://sakura-
editor.sourceforge.net/
- Mi http://www.mimikaki.net/
- Sublime Text 2
有料なら選択肢はたくさん
- WebデザイナーならAdobeから販売されている
Friday, October 5, 12
- 11. トップを作りながら学ぶ
HTMLの基本構造を書く
見出しタグ
画像を表示する
段落をつくる
リンクをはる
Friday, October 5, 12
- 14. 課題1
メンバーページをもう一つ作る
リンクができるようにする
Friday, October 5, 12
- 15. 課題2
架空のヨーロッパ最大の動物園Zooloppa(ズーロッパ)のトップページ
と動物ページを2ページ作りましょう。
ZOOROPPA
ライオン
大見出し 画像を挿入
ライオンの習性
ZOOROPPA □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□
Welcome to ZOOROPPA ・トップ
・ぞう
中見出し
中見出し
ZOOROPPA
ZOOROPPA とは
各ページ相互にリンクする
ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
リストとリンク □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□
・ライオン
・ぞう
ぞうの習性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□
・トップ
・ライオン
Friday, October 5, 12
- 17. HTMLの基本構造
何はともあれ、HTMLは以下を必ず書く
<html>
! <head>
! ! ヘッダ
! </head> HTML文書
! <body>
! ! ボディー
! </body>
</html>
Friday, October 5, 12
- 18. ヘッダ部分
タイトルや概要などを記述する
<html>
! <head>
! ! <title></title> ヘッダ
! </head>
! <body>
! !
! </body> ブラウザでは見えない部分。ペー
</html> ジのタイトルや概要などを記述す
る。Googleなど検索エンジンはこ
の部分を重要視する。
Friday, October 5, 12
- 19. ボディ部分
本文を記述する
<html>
! <head>
! ! <title></title>
! </head>
! <body>
! ! ページ内容 ボディ
! </body>
</html>
ブラウザで見える部分。
ここに本文を記述し、それをマー
クアップする。
Friday, October 5, 12
- 21. その1
hタグ(見出しタグ)
<h1></h1>から<h6></h6>まである。h1が一番大きな見出し。
<h1>大見出しにする文字</h1>
pタグ(段落タグ)
文章のかたまり=段落を囲む時に使用する
<p>文章のかたまり</p>
imgタグ(画像タグ)
HTML文書内に画像を挿入するときに使用する。
<img src=”ファイル名” alt=”画像を表す言葉”>
Friday, October 5, 12
- 22. その2
listタグ(リストタグ)
箇条書きの時に使用する
<ul>文章のかたまり
<li>箇条書きの項目1</li>
<li>箇条書きの項目2</li>
</ul>
aタグ(リンクタグ)
文書同士をリンクでつなぐ場合に使用される
<a href=”リンクさせたいファイル名”>クリックする文字</a>
Friday, October 5, 12