Download to read offline
HTML/CSS
- 1. HTML / CSS 医療×IT講座vol.3 2012/10/14 12年10月14日日曜日
- 2. お問い合せフォーム <meta charset=”UTF-8”> <h1>お問合せフォーム</h1> <form action="" method="post"> <p>お名前: <input type="text" name="name" size="20" maxlength="5" value="たなか"></p> <p>メモ: <textarea name="memo" rows="5" cols="40">メモ</ textarea></p> <p><input type="submit" value="送信！"></p> </form> 12年10月14日日曜日
- 3.
- 4. プログラミングとは？」 • コンピューターの上で、決められた指令を 実行するために使う言葉を書くこと • プログラミング言語：コンピュータに対する 一連の動作の指示を記述するための人工言語。機 械ごとに適した言葉があるので、プログラミング 言語を使い分けます 12年10月14日日曜日
- 5. HTMLとは？ • HTML：Webページを作成するための言語 • ブラウザ：インターネットをするためのソフト • テキストエディタ：文字のみのファイルを作成す るためのソフト（Windows：メモ帳。「スタート →すべてのプログラム→アクセサリ→メモ帳」） 12年10月14日日曜日
- 6. タグとは？ • ＜タグ名＞の記号で囲まれた半角英数字。 文書構造を指定 • 記入方法：＜開始タグ＞と＜/終了タグ＞ の２つを1セットとして使用。終了タグに はタグ名も前に/（スラッシュ）をつける。 12年10月14日日曜日
- 7. リンク生成・画像挿入 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML</title> </head> <body> <h1>大見出し</h1> <p>こんにちは！</p> <p>Google検索は<a href="http://google.com" target="_blank">こちら</a>から！</p> <a href="http://google.com" target="_blank"><img src="omlet.jpeg" width="180" height="240" alt="オムレツの画像です。"></a> <p>別のページは<a href="other.html">こちら</a>！</p> </body> </html> 12年10月14日日曜日
- 8. CSSとは？ • Cascading Style Sheetsの略。ウェブページの スタイルを指定するための言語 • スタイル：文字の色や大きさ、形式など 12年10月14日日曜日
- 9. HTMLとCSSの関係 HTML CSS <!DOCTYPE html> <html lang="ja"> /* <head> セレクタ <meta charset="UTF-8"> プロパティ <title>CSSのお勉強</title> 値 <link rel="stylesheet" */ href="mycss.css"> </head> h1 { <body> color: red; <h1>大見出し</h1> } <p>こんにちは！</p> </body> </html> 12年10月14日日曜日
- 10. 応用 HTML CSS <!DOCTYPE html> <html lang="ja"> /* セレクタ */ <head> h1 { <meta charset="UTF-8"> color: red; } <title>CSSのお勉強</title> /* ID要素 */ <link rel="stylesheet" href="mycss.css"> #main { </head> font-size:36px; <body> } <h1>大見出し</h1> /* class要素 */ .test { <p>こんにちは<span class="test">！</ font-size: 9px; span></p> } /* 複数の要素 */ <div id="main">メインです！</div> #main, .test { border: 1px solid #ccc; </body> } </html> 12年10月14日日曜日