Html:css

HTML / CSS
医療×IT講座vol.3

2012/10/14
12年10月14日日曜日

お問い合せフォーム
<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>


プログラミングとは？」
• コンピューターの上で、決められた指令を
実行するために使う言葉を書くこと

• プログラミング言語：コンピュータに対する
一連の動作の指示を記述するための人工言語。機
械ごとに適した言葉があるので、プログラミング
言語を使い分けます


HTMLとは？

• HTML：Webページを作成するための言語

• ブラウザ：インターネットをするためのソフト

• テキストエディタ：文字のみのファイルを作成す
るためのソフト（Windows：メモ帳。「スタート
→すべてのプログラム→アクセサリ→メモ帳」）


タグとは？

• ＜タグ名＞の記号で囲まれた半角英数字。
文書構造を指定

• 記入方法：＜開始タグ＞と＜/終了タグ＞
の２つを1セットとして使用。終了タグに
はタグ名も前に/（スラッシュ）をつける。


リンク生成・画像挿入
<!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>


CSSとは？

• Cascading Style Sheetsの略。ウェブページの
スタイルを指定するための言語

• スタイル：文字の色や大きさ、形式など


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>


応用
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>

Html:css

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (8)

Similaire à Html:css

Similaire à Html:css (20)

Plus de Yuuki Tazawa

Plus de Yuuki Tazawa (7)

Html:css