Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

東放学園2012後期スライド

538 views

Published on

  • Be the first to comment

  • Be the first to like this

東放学園2012後期スライド

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

×