Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTMLの書き方(入門編)                         HTML4を使ったページ制作Thursday, May 17, 12
アジェンダ                        HTMLページのつくりかた                       HTMLとは何か?                       ページに意味を与える「HTMLタグ」       ...
HTMLとは                       文書に意味付けをするための言語Thursday, May 17, 12
HTMLとは                       例えばビートルズを紹介するページの場合Thursday, May 17, 12
HTMLとは                       人間は見た目で文書の構造を理解します            大見出し            中見出し                                      文字の位置...
HTMLとは                       しかし機械は見た目で理解できません                   ?                   ?                   ?                ...
文書をマークアップする                       文書にタグをつけることをマークアップという            大見出し                       <h1></h1>            中見出し   ...
文書をマークアップする                       文書にタグをつけることをマークアップという                                       <h1></h1>                   ...
ふたたびHTMLとは                        HTMLとは機械でも判断できるように文書をマー                        クアップするためのもの                       機械が自動処理...
HTMLの基本構造                       HTMLの基本的な構造を理解しよう!Thursday, May 17, 12
HTMLの基本構造                         何はともあれ、HTMLは以下を必ず書く                       <html>                       ! <head>         ...
ヘッダ部分                         タイトルや概要などを記述する                       <html>                       ! <head>                  ...
ボディ部分                           本文を記述する                       <html>                       ! <head>                       ...
基本的なHTMLタグ                       基本的なタグの書き方と使い方Thursday, May 17, 12
ツールと記述のルールThursday, May 17, 12
ツールと記述のルール                         HTMLを記述するソフトウェア                       テキストエディタならなんでもよい。フリー(無料では、Windowsなら              ...
ツール                         HTMLを記述するソフトウェア                       テキストエディタならなんでもよい。フリー(無料では、Windowsなら                     ...
タイトルタグとメタタグThursday, May 17, 12
<title></title>タイトルタグ                           ページのタイトルを記述する                       ヘッダーの中に記述し、そのページを表すようなタイトル名にする。       ...
<meta></meta>メタタグ                           ページの情報を記述する                       ヘッダーの中に記述し、そのページの概要を記述する                    ...
タイトルタグとメタタグは重要                           検索結果に反映される                       クリックするかしないかはこの文言で決まるといっていい。                     ...
文書に意味付けするタグThursday, May 17, 12
その1                         hタグ(見出しタグ)                       <h1></h1>から<h6></h6>まである。h1が一番大きな見出し。                       <...
その2                         listタグ(リストタグ)                       箇条書きの時に使用する                       <ul>文章のかたまり             ...
その3                         brタグとhrタグ(改行タグ, 水平線タグ)                       改行したい場合は<br>を使用し、区切り線を入れたい場合には<hr>使用             ...
課題                       架空のヨーロッパ最大の動物園Zooroppa(ズーロッパ)のトップページ                       と動物ページを2ページ作りましょう。                    ...
Prochain SlideShare
Chargement dans…5
×

Htmlの書き方入門編

3 152 vues

Publié le

HTML4のチュートリアルです。

Publié dans : Développement personnel
  • Soyez le premier à commenter

Htmlの書き方入門編

  1. 1. HTMLの書き方(入門編) HTML4を使ったページ制作Thursday, May 17, 12
  2. 2. アジェンダ HTMLページのつくりかた HTMLとは何か? ページに意味を与える「HTMLタグ」 基本的なマークアップについて 実習:Webページをつくってみよう Webサイトのつくりかた WebサイトとはWebページがまとまったもの 基本的なWebサイト構造Thursday, May 17, 12
  3. 3. HTMLとは 文書に意味付けをするための言語Thursday, May 17, 12
  4. 4. HTMLとは 例えばビートルズを紹介するページの場合Thursday, May 17, 12
  5. 5. HTMLとは 人間は見た目で文書の構造を理解します 大見出し 中見出し 文字の位置や大きさ、レ 小見出し イアウトなどで文書の構 小見出し 造を把握し、内容を理解 する。 大見出し 中見出し 子見出し 子見出し2Thursday, May 17, 12
  6. 6. HTMLとは しかし機械は見た目で理解できません ? ? ? ? ? 例えばGoogleはページの ? 見た目だけでは何が書か れているのかを理解する ? ことができません ?Thursday, May 17, 12
  7. 7. 文書をマークアップする 文書にタグをつけることをマークアップという 大見出し <h1></h1> 中見出し <h2></h2> 小見出し <h3></h3> 小見出し <h3></h3> 大見出し <h2></h2> 中見出し <h3></h3> 子見出し <h3></h3> 子見出し2 <h4></h4>Thursday, May 17, 12
  8. 8. 文書をマークアップする 文書にタグをつけることをマークアップという <h1></h1> <h2></h2> <h3></h3> このようにマークアップさ <h3></h3> れているものであれば、 Googleも内容を理解し、 <h2></h2> 検索された時の表示を正 <h3></h3> しくすることができます。 <h3></h3> <h4></h4>Thursday, May 17, 12
  9. 9. ふたたびHTMLとは HTMLとは機械でも判断できるように文書をマー クアップするためのもの 機械が自動処理できるようにするためにHTMLはある Googleのような検索エンジンは内容をタグで理解する タグに気をつけてかかないと適切な検索結果として反映されない HTMLは見た目を整えるための言語ではなく「意味付け」のための言語Thursday, May 17, 12
  10. 10. HTMLの基本構造 HTMLの基本的な構造を理解しよう!Thursday, May 17, 12
  11. 11. HTMLの基本構造 何はともあれ、HTMLは以下を必ず書く <html> ! <head> ! ! ヘッダ ! </head> HTML文書 ! <body> ! ! ボディー ! </body> </html>Thursday, May 17, 12
  12. 12. ヘッダ部分 タイトルや概要などを記述する <html> ! <head> ! ! <title></title>    <meta name=”description” content=”ページの概要”> ヘッダ ! </head> ! <body> ! ! ブラウザでは見えない部分。ペー ! </body> ジのタイトルや概要などを記述す </html> る。Googleなど検索エンジンはこ の部分を重要視する。Thursday, May 17, 12
  13. 13. ボディ部分 本文を記述する <html> ! <head> ! ! <title></title>    <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ボディ ! </body> </html> ブラウザで見える部分。 ここに本文を記述し、それをマー クアップする。Thursday, May 17, 12
  14. 14. 基本的なHTMLタグ 基本的なタグの書き方と使い方Thursday, May 17, 12
  15. 15. ツールと記述のルールThursday, May 17, 12
  16. 16. ツールと記述のルール HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー(無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 記述方法 HTMLタグはすべて小文字… <title></title><head></head> 保存ファイル名の拡張子はhtml… index.html, shop.html この.htmlが拡張子Thursday, May 17, 12
  17. 17. ツール HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー(無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 有料なら選択肢はたくさん WebデザイナーならAdobeから販売されているDreamweaverがスタン ダート。Thursday, May 17, 12
  18. 18. タイトルタグとメタタグThursday, May 17, 12
  19. 19. <title></title>タイトルタグ ページのタイトルを記述する ヘッダーの中に記述し、そのページを表すようなタイトル名にする。 <html> ! <head> ! ! <title>ページのタイトル</title>    <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html>Thursday, May 17, 12
  20. 20. <meta></meta>メタタグ ページの情報を記述する ヘッダーの中に記述し、そのページの概要を記述する <html> ! <head> ! ! <title>ページのタイトル</title>    <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html>Thursday, May 17, 12
  21. 21. タイトルタグとメタタグは重要 検索結果に反映される クリックするかしないかはこの文言で決まるといっていい。 <html> ! <head> ! <title>人気の商品から選ぶ - 母の日2012 - Yahoo!ショッピング</title>    <meta name=”description” content=”ショッピングの「母の日2012」…”> ! </head> ! <body> ! ! ページ内容 ! </body> </html>Thursday, May 17, 12
  22. 22. 文書に意味付けするタグThursday, May 17, 12
  23. 23. その1 hタグ(見出しタグ) <h1></h1>から<h6></h6>まである。h1が一番大きな見出し。 <h1>大見出しにする文字</h1> pタグ(段落タグ) 文章のかたまり=段落を囲む時に使用する <p>文章のかたまり</p> strongタグ(強調タグ) 協調したい部分を囲むタグ <strong>強調したい文字</strong>Thursday, May 17, 12
  24. 24. その2 listタグ(リストタグ) 箇条書きの時に使用する <ul>文章のかたまり <li>箇条書きの項目1</li> <li>箇条書きの項目2</li> </ul> imgタグ(画像タグ) HTML文書内に画像を挿入するときに使用する。 <img src=”ファイル名” alt=”画像を表す言葉”> aタグ(リンクタグ) 文書同士をリンクでつなぐ場合に使用される <a href=”リンクさせたいファイル名”>クリックする文字</a>Thursday, May 17, 12
  25. 25. その3 brタグとhrタグ(改行タグ, 水平線タグ) 改行したい場合は<br>を使用し、区切り線を入れたい場合には<hr>使用 する もじもじ<br>もじもじ もじもじ<hr>もじもじ blockquoteタグ(引用タグ) 文章を引用する場合に使用する <blockquote> 引用したい文章</blockquote>Thursday, May 17, 12
  26. 26. 課題 架空のヨーロッパ最大の動物園Zooroppa(ズーロッパ)のトップページ と動物ページを2ページ作りましょう。 ZOOROPPA ライオン 大見出し 画像を挿入 ライオンの習性 ZOOROPPA □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ Welcome to ZOOROPPA ・トップ ・ぞう 中見出し 中見出し ZOOROPPA ZOOROPPA とは 各ページ相互にリンクする ぞう □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ リストとリンク □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・ライオン ・ぞう ぞうの習性 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・トップ ・ライオンThursday, May 17, 12

×