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日日曜日
- 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日日曜日
