0
HTMLを書いてみよう!                         基本的な記述方法をマスターするFriday, October 5, 12
今日やることFriday, October 5, 12
好きなグループのサイトをつくるFriday, October 5, 12
今日の内容                         HTMLページのつくりかた基礎                        - HTMLとは何かを理解する                        - 基本的なツールの紹介  ...
3人以上のグループ                        (バンドなど)を決めるFriday, October 5, 12
画像の準備Friday, October 5, 12
好きなバンドを検索する                        Googleの画像検索で画像を保存する                                     2. 右クリックで保存                    ...
HTMLエディタFriday, October 5, 12
おすすめのエディタ                          HTMLを記述するソフトウェア(エディタ)                        テキストエディタならなんでもよい。フリー(無料では、Windowsなら       ...
トップページをつくるFriday, October 5, 12
トップを作りながら学ぶ                             HTMLの基本構造を書く                             見出しタグ                             画像を表示する...
メンバーそれぞれのページを                         つくるFriday, October 5, 12
トップを作りながら学ぶ                             戻るリンクをつくる                             あとは同じFriday, October 5, 12
課題1                        メンバーページをもう一つ作る                        リンクができるようにするFriday, October 5, 12
課題2                        架空のヨーロッパ最大の動物園Zooloppa(ズーロッパ)のトップページ                        と動物ページを2ページ作りましょう。                 ...
今回のまとめFriday, October 5, 12
HTMLの基本構造                          何はともあれ、HTMLは以下を必ず書く                        <html>                        ! <head>      ...
ヘッダ部分                           タイトルや概要などを記述する                        <html>                        ! <head>              ...
ボディ部分                           本文を記述する                        <html>                        ! <head>                     ...
マークアップFriday, October 5, 12
その1                          hタグ(見出しタグ)                        <h1></h1>から<h6></h6>まである。h1が一番大きな見出し。                      ...
その2                          listタグ(リストタグ)                        箇条書きの時に使用する                        <ul>文章のかたまり          ...
Upcoming SlideShare
Loading in...5
×

東放学園2012後期スライド

341

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "東放学園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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×