課題
【HTML5課題01】ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
【J03】 「h1要素」と「ｐ要素」を、下記のように表示するJavaScriptを記述しなさい。
【J05】 クリックでアラートを表示するJavaScriptを記述しなさい。J01と同じ結果です。「function」を使用しなさい。 <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> …</html>
【J04】 ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。（写真は自由。） <html lang="ja"> <head> <meta charset="UTF-8"> <title>J04 ページを開いた瞬間にアラート</title> <style type="text/css"> p img { cursor: pointer; } </style> </head> <body> <p></p></body></html>
【J03】 マウスアウトでアラートを表示するJavaScriptを記述しなさい。（写真は自由。） <html lang="ja"> <head> <meta charset="UTF-8"> <title>J03 マウスアウトでアラート</title> <style type="text/css"> p img { cursor: pointer; } </style> </head> <body> <p></p></body></html>
【J02】 マウスオーバーでアラートを表示するJavaScriptを記述しなさい。（写真は自由。） <html lang="ja"> <head> <meta charset="UTF-8"> <title>J02 マウスオーバーでアラート</title> <style type="text/css"> p img { cursor: pointer; } </style> </head> <body> <p></p></body></html>
【J06】 ボタンをクリックしたらアラートで答えを表示するJavaScriptを記述しなさい。「function」を使用します。（質問と答えは自由。） <html lang="ja"> <head> <meta charset="UTF-8"> <title>J06 ボタンをクリックしたらアラートで答えを表示</title> <style type="text/css"> <!-- p img { cursor: pointer; } </style> <script> function ans(){ var answ</meta></head></html>…
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
●空きはリセットをせず、個別に指定する
●空きはリセットをせず、個別に指定する ●XHTML 1.0 Transitional ●リストマークは、作成すること 構造主義の四銃士 言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。 ミシェル・フーコ…
●HTMLの入力に不安がある人は入力から ●CSSはエンベッド <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></head></html>
●CSSの記述例（こう書かないとダメという絶対的な値ではありません） ●0は、単位を記述しない
○この場合、リセットはしない ○空きは、すべて50px <p>BOX and PADDING<br> この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head>…</head></html>
○この場合、リセットはしない <h2>BOX and PADDING</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
○この場合、リセットはしない <body> <h2>BOX</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
○この場合、リセットはしない ○左右均等空き（上下空きは指定しない） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>
○この場合、リセットはしない <p>BOX and margin<br> この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
●画像のような表示になるよう指定しなさい ●色・文字サイズは自由設定（バランスは考慮すること） ●解答は、エンベッド ●DTDは各自選択
<body> <h2>background-colorの設定</h2> <p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p> </body>
<body> <ul> <li><a href="#">LINK-link-coral</a></li> <li><a href="#">LINK-visited-turquoise</a></li> <li><a href="#">LINK-hover-skyblue</a></li> <li><a href="#">LINK-active-lawngreen</a></li> </ul> </body>
<body> <ul> <li><a href="#">LINK-link-coral</a></li> <li><a href="#">LINK-visited-turquoise</a></li> <li><a href="#">LINK-hover-skyblue</a></li> <li><a href="#">LINK-active-lawngreen</a></li> </ul> </body>
<body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br> 15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であ</p></body>…
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>
<body> <h1>古池や蛙飛び込む水の音</h1> <p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br> 明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、</p></body>…
<body> <h1>Page Design</h1> <p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br> また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br> このように、やり方次第でデザインの幅が広がります。いろい</p></body>…
・画像のような表示になるよう指定しなさい ・色・文字サイズは自由設定（バランスは考慮すること） ・解答は、エンベッド ・DTDは各自選択 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の内容をHTML文章にしてブログに載せなさい サンプルなど見ないで入力すること（できるようになるまで繰り返す） DTDとmetaは不要 - 【HTML03】文書構造の練習 インテリアショップ a Interiorインフォメーション インテリアショップ「a Interior」での商…
以下の内容をHTML文章にしてブログに載せなさい サンプルなど見ないで入力すること（できるようになるまで繰り返す） DTDとmetaは不要 - 【HTML03】文書構造の練習 インテリアショップ a Interiorインフォメーション インテリアショップ「a Interior」での商…
