HTML構造とHEAD内の設定

HTML 基礎

HTMLバージョンのDOCTYPE(DTD)宣言 HTMLの一行目には、HTMLバージョンのDOCTYPE(DTD)宣言を記述しHTMLのバージョンを宣言し、その仕様でのHTML文法を利用する。 HTML構造とHEAD内の設定 - ホームページの作り方【書式】《 HTMLバージョン別のDTD 》 HTML…

2013-04-09

HTML5とは０２

HTML5 HTML 授業

HTML5で追加される予定の要素（タグ）【参考サイト】 HTMLクイックリファレンス HTML5で追加される予定 article 記事であることを示す aside 余談であることを示す audio 音声を再生する canvas 図形を描く command 操作メニューの各コマンドを指定する dat…

2013-04-09

HTML5とは０３

HTML5 HTML SEO対策授業

HTML5の実例無印良品 HTM5 Outlinerでチェック article内に、sectionを設定している article内に、header→hgroupを設定している articleにidでブロックを繰り返す sectionごとにh1を設定している HTML5での検索エンジン対策 HTML5で記述してもXHTML1.0で記…

2013-04-09

HTML5とは０３

HTML5 HTML 授業

基本構造 DOCTYPE宣言ソースコード【 HTML 】基本情報の記述場所ソースコード【 HTML 】 <head>〜</head> ルート要素ソースコード【 HTML 】 <html lang="ja"> エンコードの種類の指定ソースコード【 HTML 】 <meta charset="UTF-8"> ページのタイトルソースコード【 HTML 】 <title></title> スタイルシートの設定ソー</meta></html>…

2013-04-08

HTML5とは

HTML5 HTML 授業

HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 HTML5ならではの機能 Canvas：JavaScriptを使ってグラフィックを描く機能 CSS3：CSS3 Animation 対象ブラウザ HTML5 & CSS3 Support Win Chrome20 Fire…

2013-03-23

フォームをデザインする

HTML JavaScript CSS

フォームの基本形基準となる基本をつくりカスタマイズしていくソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームとテーブルでマークアップする</title> <style type="text/css"> body { font-size: 75%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-ser</meta></head></html>…

2013-03-23

フォームをデザインする０２

HTML JavaScript CSS

必須項目にフォーカス送信した後の記入された項目を自動で削除するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーカス時のスタイルを指定する</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <form action="#" method="POST" id="inquiry"> </form></body></html>

2012-12-19

フォームの基本構造０９

HTML 授業

基本形（1）ソースコード【 HTML[ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(1)</title> <style> #myform label { font-size: 0.875em; margin-bottom: 3px; display: block;/* 改行せずに次の行に移る */ } </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>

2012-12-19

フォームの基本構造１０

HTML 授業

フォームの練習(2) ソースコード【 HTML [ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習(2)</title> <style> #myform label { font-size: 0.875em; width: 100px; display: block; float: left; } </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>

2012-12-19

フォームの基本構造１１

HTML 授業

table 表示の崩れがなくなる色が付けやすくなるソースコード【 HTML [ Embed ] 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>テーブルで組むフォーム</title> <style> #myform { font-size: 0.875em; width: 500px; } #myform label { font-size: 0.875em; } #myform table { width: 100%; border-collapse: co</meta></head></html>…

2012-12-18

フォームの基本構造０２

HTML 授業

☆★データーでの確認★☆チェックボックスソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>チェックボックス</title> </head> <body> <h1>チェックボックス</h1> <form action="#" method="post"> <p>ス…</p></form></body></html>

2012-12-18

フォームの基本構造０３

HTML 授業

☆★データーでの確認★☆ラジオボタンソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラジオボタン</title> </head> <body> <h1>ラジオボタン</h1> <form action="#" method="post"> <p>性別: <input type="radio" name="sex" value="male" checked>男性 <input type="radio" name="sex" value="female">女性 </p> <p></p></form></body></html>

2012-12-18

フォームの基本構造０４

HTML 授業

☆★データーでの確認★☆リストソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>リスト</title> </head> <body> <h1>リスト</h1> <form action="#" method="post"> </form></body></html>

2012-12-18

フォームの基本構造０５

HTML 授業

☆★データーでの確認★☆ラベルを付けるソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラベルを付ける</title> </head> <body> <h1>ラベルを付ける</h1> </body></html>

2012-12-18

フォームの基本構造０６

HTML 授業

☆★データーでの確認★☆ パスワードソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスワード</title> </head> <body> <h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5"> </p> <p></p></form></body></html>

2012-12-18

フォームの基本構造０８

HTML 授業

☆★データーでの確認★☆ 隠しデータの送信ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>隠しデータの送信</title> </head> <body> <h1>隠しデータの送信</h1> <form action="#" method="post"> <p><input type="hidden" name="user_id" value="012345"></p> <p><input type="submit" value="送信"></p> </form> </body> </html>

2012-12-17

フォームの基本構造

HTML 授業

☆★データーでの確認★☆お問い合せフォームソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> </body></html>

2012-12-05

HTML5

reference HTML

HTML記述参照ソースコード <html lang="ja"> <head> <mata charset="UTF-8"> <meta name="description" content=""> <title></title> <link rel="stylesheet" href="" media="screen,print"> <link rel="shortcut.icon" href="favicon.icon"> <script src=""></script> <style></style> </head> <body> <h1>本文（改行）</h1></body></html>

2012-12-04

XML

HTML 授業

xmlのときのmeta要素ソースコード <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-11-27

枠線を作る

授業 HTML

枠線の基本（３×３）ソースコード <table border="1" width="500"> <tr> <td>１</td><td>２</td><td>３</td> </tr> <tr> <td>４</td><td>５</td><td>６</td> </tr> <tr> <td>７</td><td>８</td><td>９</td> </tr> </table> 枠線表示１２３４５６７８９ rowspan を使うソースコード <table border="1" width="500"> <tr> </tr></table>

2012-11-27

ハイパーリンクと画像

授業 HTML

[ index.html ]データーソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>私の好きな漫画</title> </head> <body> <h1>コミック・ラノベ・BL</h1> <p>レーベル別で探せるライトノベルストア、円高還元洋書 Comics & Graphic Novels もチェック。</p> <p><a href="sample/sample.html">sampleページへ移動</a></p></body></html>

2012-11-20

HTML5

HTML

HTML5の基本となる骨組み <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> 本文（ほんもん） </body> </html> タグの説明 <html lang="ja"> <meta charset="UTF-8"> <title>タイトル</title> </meta></html>

2012-11-20

【2012.11.16】☆☆☆☆開講式課題

課題 HTML

経験者用課題 HTML5で記述 time要素を記述 datetime属性ブラウザでの表示ソースコード <html lang="ja"> <head> <meta charset="ja"> <title>【HTML5_A01】<title> </head> <body> <section> <h1>日記</h1> <time date="2012-11-16" pubdate="pubdate">2012年11月16日</time> <p>今日は、連休に行きたい旅行先をピックアップした。</p> <ul> <li>別府温泉</li> <li>大分県別府市</li></ul></section></body></html>

2012-11-18

HTMLの基本

HTML

HTMLの基本構造〜 HTMLを記述する「箱」〜ルールを伝える（ブラウザ上では不可視化）〜内容を表示（ブラウザ上では可視化） <html> <head> </head> <body> </body> </html>保存方法拡張子：[ .html ] 場所：Cドライブ直下に管理フォルダーを作成する保存名：日付名のフォルダー管理がわかりや…