東放学園2012後期スライド
- 1. HTMLを書いてみよう！ 基本的な記述方法をマスターする Friday, October 5, 12
- 4. 今日の内容 HTMLページのつくりかた基礎 - HTMLとは何かを理解する - 基本的なツールの紹介 - 基本的なHTMLタグを理解する Friday, October 5, 12
- 5. 3人以上のグループ （バンドなど）を決める Friday, October 5, 12
- 6. 画像の準備 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
- 12. メンバーそれぞれのページを つくる Friday, October 5, 12
- 13. トップを作りながら学ぶ 戻るリンクをつくる あとは同じ 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
- 16. 今回のまとめ 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
- 20. マークアップ Friday, October 5, 12
- 21. その1 ｈタグ（見出しタグ） <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