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