kyoto IT
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
718
On Slideshare
718
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. IT研修講座 NPO 法人全国女性シェルターネット企画講座 WEB サイト作成
  • 2. ホームページの構成要素
    • HTML 
      • .html .htm (.cgi .php .jsp)
    • CSS
      • .css
    • 画像ファイル
      • .jpg .gif .png
    • javascript
      • .js
    css img js index.html layout.css side.css image01.gif image02.gif rollover.js iepngfix.js / inquiry about index.html index.html root
  • 3. URLと絶対パスと相対パス
    • URL
      • http://annulus.jp/temp/index.html
    • 絶対パス
      • /var/www/vhosts/greenapple.jp/httpdocs/
    • 相対パス
      • ./index.html ../temp/index.html
  • 4. HTML の基本構成要素
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
    HTML HTML で記述されたドキュメントであることを宣言 head HTML ファイルの情報を記述 body ブラウザに表示する内容
  • 5. タグの基本ルール
    • <p class=“velue”> 内容がここに入ります </p>
    要素名 属性名 値 属性 開始タグ 終了タグ 要素
  • 6. タグの基本ルール 2
    • 開始タグと終了タグ  <p>~</p> <br /> <img src=“~” />
    • 属性と値
    • 値は「“」で囲む
    • ファイル名は半角英数で。記号は「 - 」か「 _ 」が使えます
    • ソースは小文字で記述する
    • タグはまたがない  × <p> 今日は <b> いい </p></b> てんきです。
    • コメントは <!-- このように書く -->
    • ブロック要素とインライン要素
  • 7. DOCTYPE 宣言
    • DOCTYPE宣言
    • <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;jp&quot; lang=&quot;jp&quot;>
    • バージョン
    • HTML4.01 Strict/HTML4.01 Transitional/HTML4.01 Frameset
    • XHTML1.0 Strict/XHTML1.0 Transitional/XHTML1.0 Frameset/
    • XHTML1.1
    • 標準準拠モードと過去互換(後方互換)モード
    • http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3
    • タイトル
    • <title> ~ </title>
    • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
    • キーワード
    • <meta name=“keywords” content=“ ー , ー , ー” />
    • <meta name=“description” content=“ ~ &quot; />
  • 8. W3C
    • World Wide Web Consortium (ワールド・ワイド・ウェブ・コンソーシアムは World Wide Web で使用される各種技術の標準化を推進する為に設立された 標準化団体 、 非営利団体 。略称は W3C (ダブリュースリーシー)。 MIT や CERN が中心となって 1994年 10月1日 発足。 2007 年現在、 MIT/LCS 、 ERCIM 、 慶應義塾大学 が中心となって活動している。
  • 9. XHTML とは
    • 2000 年 1 月 26 日に W3C の勧告となった XHTML ( Extensible HyperText Markup Language ) [XHTML10] は、素朴な文書構造記述言語として発展してきた(あるいは混乱してきた) HTML に、 XML[XML1] の持つ柔軟性、拡張性を取り入れたものです。 HTML は SGML の実装の一つで、書式にそれなりに自由度がありましたが、 XHTML は XML の実装であるため、書式が厳密になっています( XML は、 SGML の書法をシンプルで厳密なものにすることで、アプリケーションの開発や互換性をとりやすくした)。
  • 10. 文章を構成する基本のタグ
    • 見出し
    • <h1>~</h1>
    • <h2>~</h2>
    • <h3>~</h3>
    • <h4>~</h4>
    • <h5>~</h5>
    • <h6>~</h6>
  • 11. 文章を構成する基本のタグ 3
    • リスト
      • <ul><li>~</li> <li>~</li> </ul>
    • 定義リスト
      • <dl><dt> ~ </dt><dd> ~ </dd></dl>
      • <table><tr><th></th><td></td></tr></table>
  • 12. 文章を構成する基本のタグ 2
    • 段落
      • <p>~</p>
    • 改行
      • <br />
    • ブロック
      • <div>~</div>
  • 13. 課題 1
    • 次の文章を以下の DOCTYPE と、 meta タグ、基本のタグを使用して HTML にしてください。
    •  
    • 鎌倉の隠れカフェ 大佛次郎茶亭 
    • 大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。
    • 作家、大佛次郎氏の書斎兼茶亭、大正 9 年に建てられた茅葺きの木造平屋建で昭和 27 年に大佛氏が購入。通常は土日・祝日だけカフェとして営業。
    • メニュー
    • コーヒー
    • 紅茶
    • チーズケーキ
    • あんみつ
    • インフォメーション
    • 住所 鎌倉市雪ノ下 1-11-22 アクセス 鎌倉駅から徒歩 10 分
    • copy right(c)2008 osaragi café. All Rights Reserved.
  • 14. CSS  カスケーディングスタイルシート
    • CSS を HTML ファイルに組み込む方法は 3 種類
    • 1.Style 要素を使って head 内に指定する
    • 2.Style 属性を使って要素に直接指定する
    • 3.Link 要素で外部の css ファイルをリンクさせる
  • 15. 1.Style 要素を使って head 内に指定する
    • HTMLファイル内の head 内のソース
    • <head>
    • <style type=“text/css”>
    • <!--
    • h1{
    • color:#66cc66;
    • }
    • -->
    • </style>
    • </head>
  • 16. 2.Style 属性を使って要素に直接指定する
    • HTML ファイル内の body 内のソース
    • <body>
    • <h1 style=“color:#ff0000”> 見出し </h1>
    • <p> このように <span style=“color:#ffff00”> HTML要素に直接スタイルを定義 </span> します。 </p>
    • </body>
  • 17. 3.Link 要素で外部の css ファイルをリンクさせる
    • HTML
    • <head>
    • <link href=“style.css” rel=“stylesheet” type=“text/css” />
    • </head>
    • CSS
    • h1{ color:#ff0000;}
  • 18. CSSの基本
    • 要素名{プロパティ:値;}
      • h1{
        • color:blue;
        • }
    • コメント
      •    /* コメント */
      • ※ ソースを記述する際、スペースはいれないように
      • ( css html とも)
    セレクタ
  • 19. 複数のプロパティをまとめる定義方法
    • h1{
    • color:blue;
    • font-size:14px;
    • }
    • h1,h2{
    • margin-bottom:30px;
    • }
  • 20. セレクタの種類
    • 基本セレクタ ( div や p などの HTML 要素に)
      • p{font-size:14px;}
    • クラスセレクタ ( 複数要素に )
      • CSS
      • p.blue{color:blue;} .red{color:red;}
      • HTML
      • <p class=“blue”> 青 </p>
      • <p class=“red”> 赤 </p>
  • 21. セレクタの種類 2
    • IDセレクタ(一つの要素だけに)
      • CSS
    • #main{
    • width:300px;border:1px solid #ccc;
    • }
      • HTML
    • <div id=“main”>
    • グレーの枠がついた 300 pxの箱です。
    • </div>
  • 22. セレクタの種類 3
    • 擬似クラス
      • クラスやIDでは表現できない性質について設定できるセレクタ
      • 擬似クラスは「 : 」にあらかじめ決められた予約語を組み合わせて定義します。
    • -CSS
    • a:link{color:red;}
    • a:visited{color:green;}
    • a:hover{color:yellow;}
    • a:active{color:blue;}
    • -HTML
    • <a href=“#”> リンク </a>
  • 23. セレクタの種類 4
    • 子孫セレクタ
      • 特定の要素の子要素、または子孫の要素にスタイルを適用させます。要素との間には半角スペースで区切って指定する。
      • CSS
      • p span{color:#fff0000;}
      • p .red{color:#ff0000;}
      • HTML
      • <p> 入れ子になった <span> ところが </span> 子孫です </p>
      • <p> 重なっているところが <strong class=“red”> 子孫 </strong> なわけです。 </p>
  • 24. 課題 2
    • テキストを装飾しましょう。
    • CSS ファイルを作成して、さきほど作成した HTML ファイルからリンクをはってください。
    • CSS は以下を参考にして記述してみましょう。
    • 見出しを工夫して目立たせてください。
    • メニューとインフォメーションには別々のクラスセレクタを設定してください。
    • ページ全体の背景にも色をつけてください。
  • 25. 余白
    • margin( マージン)
      • マージンとは、要素を囲む領域(ボックス)の外側の余白のことをいいます。
    • padding( パディング)
      • パディングは、要素を囲む領域(ボックス)の内側の余白のことで、その要素の内容とボーダーとの余白のことをいいます。
  • 26. マージン
    • margin:0 10px 0 20px;
    • margin:0 auto;
    • margin:15px;
    • margin-top:10px;
    • margin-bottom:0;
    • margin-left:20px;
    • margin-right:5px;
  • 27. パディング
    • padding:0 10px 0 20px;
    • padding :0 auto;
    • padding :15px;
    • padding -top:10px;
    • padding -bottom:0;
    • padding -left:20px;
    • padding -right:5px;
  • 28. 課題 3
    • テキストの余白を調整してみましょう。
    • さきほどの HTML を使用して、ページ全体と見出しとフッター(コピーライト)に余白をいれてみましょう。
    • パディングとマージンの違いに注意してください。
  • 29. ボックスの構造
    • ボックスモデル
    高さ height 幅 width 内容を表示する領域 padding border margin
  • 30. 課題 4
    • 「大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。~アクセス鎌倉駅から徒歩 10 分」までを大きな ひとつのボックスで囲って、背景色を入れて、余白をいれてみましょう。 ボックスの設定は ID セレクタ で cont という名称にしてください。ボックスは margin を使用して中央寄せにしてください。
    • また、「メニュー コーヒー 紅茶 チーズケーキ あんみつ」と「インフォメーション 住所 鎌倉市雪ノ下 1-11-22  アクセス 鎌倉駅から徒歩 10 分」もそれぞれボックスで囲って、それぞれ背景色をいれて、余白をつけましょう。ボックスの設定は ID セレクタでメニューは menu 、インフォメーションは info としてください。
  • 31. 課題 5
    • 画像を加工してみましょう
    • http://www. picnik .com/
    • image.jpg を 幅 327px  高さ 327px にトリミング(カット)して、 image02.jpg で保存してください。
    • 画像は img フォルダを作成して、そこに入れてください。
  • 32. 画像について
    • jpg
    • gif
    • png
  • 33. 画像の張り込み
    • <img src=“URL” width=“—px” height=“—px” alt=“ 画像の説明” />
  • 34. 回り込み
    • 回り込みを指定
      • float:left;
      • float:right;
    • 回り込みを解除
      • clear:left;
      • clear:right;
      • clear:both;
  • 35. 課題 6
    • 画像を貼り付けて、文字を回り込みさせましょう。
    • メニューより下は回りこみを解除させましょう。
    • 画像には border をつけてください。色は白で、幅は 10px です。
    • 背景に画像をいれてみましょう。
    • 「インフォメーション」から class=”type02” をはずして、「インフォメーション」のみに css を反映させる仕方を考えましょう。( 子孫セレクタ を利用しましょう)
  • 36. リンクをはる
    • リンクをはる
    • < a href=“URL”> テキスト </a>
    • メーラーを起動するリンク
    • <a href=“mailto: メールアドレス” >address</a>
    • サイト内リンク
    • <a name=“ ~ &quot; id=“ ~ &quot;></a>
    • <a href=“# ~” > テキスト </a>
  • 37. 課題 7
    • ページ内リンクをはってみましょう。
    • コピーライトの上、 #cont ボックス内に「▲ページトップに戻る」というテキストをいれて、ページ上部に移動するようにリンクをつけてください。
    • リンク名は「 top 」としてください。
  • 38. 2 段組レイアウト
    • div (ボックス)を float で並べる
    float:left; width:400px; margin:0 10px 0 0; float:right; width:200px; width:630px; padding:10px;
  • 39. 課題 8
    • 課題 7 で使用した
    • 最終デザイン .jpg のようなページを作成しましょう。