初心者からのweb勉強

2012-07-09 HTML5 まとめ01/【HTML5課題01~06】

HTML5 まとめ01/【HTML5課題01~06】


HTML5課題01】


ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
	
</body>
</html>


HTML5課題02】

「ソファーがあって」の部分を強調して記述しなさい。

f:id:ponkan7:20120709194534j:image

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題02</title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>重要なフレーズを強調</h1>
<p>好きなカフェの条件は、<em>ソファーがあって、</em>コーヒーが美味しいことです。</p>
</body>
</html>


HTML5課題03】

「注意事項」の部分を、相対的に重要性な高いレベルとして記述しなさい。
f:id:ponkan7:20120709200559j:image

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題03</title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>注意、Attentionを表示調</h1>
<p><strong>注意事項</strong><br>
誤って飲み込むおそれがありますので、<strong>お子様の手の届かない所で保管</strong>してください。</p>
</body>
</html>



HTML5課題04】

「ロールケーキ」の部分を、他との違いを表して記述しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題04</title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>重要性ではなく違いを表示</h1>
<p>最近コンビにで売っているケーキ類が美味しい。特に<b>ロールケーキ</b>が美味しい。</p>
</body>
</html>


HTML5課題05】

TPOを定義語として表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題05</title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>TPOを定義語として記述</h1>
<p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場所と場合にあった服装やふるまいをすることであると定義されています。</p>
</body>
</html>



HTML5課題06】

USAを略語として表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題06</title>
<link rel="stylesheet" href="">
<script src=""></script>


<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<h1>USAを略語として記述</h1>
<p><abbr title="United States of America">USA</abbr>はアメリカ合衆国の略称です。</p>
</body>
</html>

2012-06-23

JavaScript練習課題(7)

【J03】
「h1要素」と「p要素」を、下記のように表示するJavaScriptを記述しなさい。
f:id:ponkan7:20120705192804j:image


2012-06-14 JavaScript練習課題(2)〜(6)

JavaScript練習課題(2)

【J02】
マウスオーバーでアラートを表示するJavaScriptを記述しなさい。(写真は自由。)

f:id:ponkan7:20120619161225j:image

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>J02 マウスオーバーでアラート</title>
<style type="text/css">
p img {
	cursor: pointer;
}
</style>
</head>
<body>
<p><img src="images/amalfitana.jpg" width="550" height="400" alt="アマルフィの写真" onMouseOver="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>

JavaScript練習課題(3)

【J03】
マウスアウトでアラートを表示するJavaScriptを記述しなさい。(写真は自由。)

f:id:ponkan7:20120619162303j:image

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>J03 マウスアウトでアラート</title>
<style type="text/css">
p img {
	cursor: pointer;
}
</style>
</head>
<body>
<p><img src="images/amalfitana.jpg" width="550" height="400" alt="アマルフィの写真" onMouseOut="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>

JavaScript練習課題(4)

【J04】
ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。(写真は自由。)

f:id:ponkan7:20120619163618j:image

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>J04 ページを開いた瞬間にアラート</title>
<style type="text/css">
p img {
	cursor: pointer;
}
</style>
</head>
<body>
<p><img src="images/amalfitana.jpg" width="550" height="400" alt="アマルフィの写真" onLoad="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>

JavaScript練習課題(5)

【J05】
クリックでアラートを表示するJavaScriptを記述しなさい。J01と同じ結果です。「function」を使用しなさい。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>J05 クリックでアラートfunction</title>
<style type="text/css">
p img {
	cursor: pointer;
}
</style>
<script>
function Photoinfo(){
	alert('アマルフィの写真です!')
}
</script>
</head>
<body>
<p><img src="images/amalfitana.jpg" width="550" height="400" alt="アマルフィの写真" onClick="alert( 'アマルフィの写真です!' )"></p>
</body>
</html>

JavaScript練習課題(6)

【J06】
ボタンをクリックしたらアラートで答えを表示するJavaScriptを記述しなさい。「function」を使用します。(質問と答えは自由。)

f:id:ponkan7:20120620160729j:image

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>J06 ボタンをクリックしたらアラートで答えを表示</title>
<style type="text/css">

</script>
</head>
<body>
<p>問題</p>
<p>インターネット動画サービスでもっとも有名なものは?<br>
<button onClick="ans()">答えを見る</button></p>
</body>
</html>

2012-05-25 EXERCISE /CSS01-04

EXERCISE /CSS01-04

●CSSの記述例(こう書かないとダメという絶対的な値ではありません)
●0は、単位を記述しない

EXERCISE /CSS01

f:id:ponkan7:20120526223058j:image

<?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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構造化されたHTMLの例(CSSが適用されている場合)</title>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構造化されたHTMLの例(CSSが適用されている場合)</title>
<style type="text/css">

</style>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

exercise CSS02

HTMLの入力に不安がある人は入力から
●CSSはエンベッド

f:id:ponkan7:20120526231700j:image

<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>エコロジー&環境問題</title>
</head>
<body>
<h1>エコロジーへの取り組み</h1>
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br />
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。<br />
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
<p>
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br />
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>
</body>

>|html|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構造化されたHTMLの例(CSSが適用されている場合)</title>
<style type="text/css">

</style>
</head>
<body>
<h1>エコロジーへの取り組み</h1>
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。<br>
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
<p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br>
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>
</body>
</html>

exercise CSS03

●空きはリセットをせず、個別に指定する
●XHTML 1.0 Transitional
●リストマークは、作成すること


f:id:ponkan7:20120526231849j:image

構造主義の四銃士

言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の4人です。

    ミシェル・フーコー
    ロラン・バルト
    クロード・レヴィ=ストロース
    ジャック・ラカン

生まれた順番は、次の通りです。

    ジャック・ラカン
    クロード・レヴィ=ストロース
    ロラン・バルト
    ミシェル・フーコー

それぞれの功績

ミシェル・フーコー
    構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした
ロラン・バルト
    言語=文化が社会の中で「制度」として人々に及ぼす影響を分析した
クロード・レヴィ=ストロース
    構造言語学の考え方を人類学の中に導入して構造主義の方法を確立
ジャック・ラカン
    「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開


exercise CSS04

●空きはリセットをせず、個別に指定する
f:id:ponkan7:20120525170304j:image


2012-05-24 EXERCISE CSS11-15 /ボックスモデル

EXERCISE CSS11-15 /ボックスモデル

●画像のような表示になるよう指定しなさい
●色・文字サイズは自由設定(バランスは考慮すること)
●解答は、エンベッド
●DTDは各自選択

EXERSICE CSS11/ボックスモデル

○この場合、リセットはしない

f:id:ponkan7:20120524204346j:image

<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS11】</title>
<style type="text/css">

</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</body>
</html>

EXERCISE CSS12 /ボックスモデル

○この場合、リセットはしない
○左右均等空き(上下空きは指定しない)

f:id:ponkan7:20120524204531j:image

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS11】</title>
<style type="text/css">

</style>
</head>
<body>
<p>BOX and MARGIN<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

margin-left:auto; 
margin-right:auto;

左右のマージンに「auto」を指定するとセンタリング

border:solid;
上下左右を1本の線
参考→ CSSまとめ 01
border:solid #000000 5px;(上下左右を1本の線、黒、5pxの太さ)

exercise CSS13 /ボックスモデル

○この場合、リセットはしない

f:id:ponkan7:20120524204941j:image

<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS11】</title>
<style type="text/css">

</style>
</head>
<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

exercise CSS14 /ボックスモデル

○この場合、リセットはしない

f:id:ponkan7:20120526214925j:image

<h2>BOX and PADDING</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS14】</title>
<style type="text/css">

</style>
</head>
<body>
<h2>BOX and PADDING</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>

exercise CSS15 /ボックスモデル

○この場合、リセットはしない
○空きは、すべて50px

f:id:ponkan7:20120526214924j:image

<p>BOX and PADDING<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS15】</title>
<style type="text/css">

</style>
</head>
<body>
<p>BOX and PADDING<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>
リンク集