Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html:css

718 views

Published on

  • Be the first to comment

  • Be the first to like this

Html:css

  1. 1. HTML / CSS 医療×IT講座vol.3 2012/10/1412年10月14日日曜日
  2. 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. 3. 12年10月14日日曜日
  4. 4. プログラミングとは?」 • コンピューターの上で、決められた指令を 実行するために使う言葉を書くこと • プログラミング言語:コンピュータに対する 一連の動作の指示を記述するための人工言語。機 械ごとに適した言葉があるので、プログラミング 言語を使い分けます12年10月14日日曜日
  5. 5. HTMLとは? • HTML:Webページを作成するための言語 • ブラウザ:インターネットをするためのソフト • テキストエディタ:文字のみのファイルを作成す るためのソフト(Windows:メモ帳。「スタート →すべてのプログラム→アクセサリ→メモ帳」)12年10月14日日曜日
  6. 6. タグとは? • <タグ名>の記号で囲まれた半角英数字。 文書構造を指定 • 記入方法:<開始タグ>と</終了タグ> の2つを1セットとして使用。終了タグに はタグ名も前に/(スラッシュ)をつける。12年10月14日日曜日
  7. 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. 8. CSSとは? • Cascading Style Sheetsの略。ウェブページの スタイルを指定するための言語 • スタイル:文字の色や大きさ、形式など12年10月14日日曜日
  9. 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. 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日日曜日

×