inputタグ
さまざまなinputタグの使い方
前回はinput type="text"を使いました。
これはテキストボックスを表示するものでした。
このほかにも、
・パスワード
・隠しデータ送信
・日付
・URL
・email
を入力することができます。
パスワード入力欄
<p>パスワード<input type="password" name="password"></p>
パスワード
隠しデータを送信
"hidden"を使います。
<p><input type="hidden" name="user_id" value="50"></p>
"name"を付けて識別できるようにします。
"value"nameとセットで送信される、文字列データ。
日付入力欄
<p>日付<input type="date" name="date"></p>
日付
URL入力欄
<p>URL<input type="url" name="url"></p>
URL
email入力欄
<p>email<input type="email" name="email"></p>
上記の通り表示することができます。
補足ですが、
今回の場合だと
name属性の後ろに"required"というものを
追加すると何も入力せずに送信した際に、
エラーを表示することができます。
ウェブサービスを作る上では必要な知識らしいので
よく覚えておきたいですね。
以上です。
フォームを作る
formタグ使う
アンケートページ等で送信ボタンや、
テキストを入力するものを
挿入したいときは"form"タグを使います。
送信した際の動作は
PHP、Ruby等の言語を使って決めます。
<form action="test.php" method="post"> </form>
今回はPHPを使うと想定します。
この部分はHTMLの知識ではないので
説明を省略します。
テキストボックス、送信ボタンを作る
テキストボックスの作り方は
<form action="" method=""> <p>名前：<input type="text" name="name"></p> </form>
このように書きます。
"input type"でテキストを入力するボックスを作ります。
"name"をつける意味は、
多言語で使うときに、その言語が何を使うか分かるように宣言するためです。
実際に表示するとこのようになります。
size、maxlengthでテキストボックスのサイズや、最大入力数を指定できます。
<form action="" method=""> <p>名前：<input type="text" name="name" size="30" maxlength="10"> </form></p>
ほかにも"textarea"いうものもあります。
送信ボタン
<form action="" method=""> <p><input type="submit" value="送信"> </form></p>
"submit"はボタンを作成するものです。
"value"属性はsubmitのテキストを指定することができます。
送信ボタンが表示されました。
意外と簡単にできました。
実際に使うとなれば、
もうすこし手間がかかりそうです。
以上です。
画像を表示させる
imgタグを使う
画像を表示させるには、
"img"タグを使います。
サンプルのページを作ってみました。
このページのソースは
<DOCTYPE html> <html lang="ja"> <head> <meta charset-"utf-8"> <title>画像の貼り付け練習</title> </head> <body> <img src="sample.jpg" width="600" height="600" alt="サンプル" title="練習"> </body> </html>
画像の表示に関するコードは
<img src="sample.jpg" width="600" height="600" alt="サンプル" title="練習">
"img"を使用します。
"src"は画像のパスや名前を指定します。
ソースことですね。
"widht"は幅、
"height"は高さです。
幅と高さを指定することで
画像の読み込みを早くすることができるそうです。
"alt"は画像が表示できないブラウザのときに
テキストとして表示されたり、
音声ブラウザで読み上げられたりします。
"title"は画像にカーソルを合わせたときに
表示されるテキスト（文字）のことです。
src="" で指定した値が合ってないと表示されないので注意しましょう。
URLのパラメータが
個人的なファイルのパスなので隠しましたw
練習で表示させるときはHTMLファイルを同じ階層に置いときましょう。
画像ファイルの階層がひとつ上なら
src="../sample.jpeg"
２つ上なら../../です。
以上です。
■
リンクの貼り方
サイトのリンクを貼るときは"a"タグを使います。
<body> <p><a href="http://www.google.com">Google</a></p> </body>
グーグル先生のリンクを貼るときはこのように書きます。
また、"body"タグの中に書きます。
このようにリンクが貼れました。
別のタブで表示したい場合
target="_blank"を追加します。
同じサイトの違うページを指定するリンク
"href"で指定する値を
任意のページの名前に変えます。
<p><a href="hello.html">hello</a></p>
ページ内リンク
<p><a href="#pagebottom1">pagebottom</a></p>
上のリンクはこのように書きます。
指定したい場所には
<p id="pagebottom1">ページ内リンクの例です。</p>
id=""で先ほどの#pagebottom1の
pagebottom1を指定します。
リンク先等の文は適当でお好きに書きましょう。
下まで長いページはこれが欲しいですね。
以上です。
教材:
ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
ページ内リンクの例です
tableタグ
表組みを作る
"table"タグは表を作成するときに使います。
<table> </table>
表の見出し
今回は例として
テストの成績の表を作ります。
まず、表の見出しとして科目を作ります。
<table> <thead> 見出し </thead> <table>
"thead"タグの間に内容を書いていきます。
<tr><th>名前</th><th>英語</th><th>国語</th></tr>
"tr"はtable rowの略で行を意味します。
"th"はtable headerの略です。
見出しをつけるときはこの書き方を使います。
これらを合わせると
| 名前 | 英語 | 国語 |
|---|
表の中身
表の内容を書くときは"tbody"タグを使います。
<table> <tbody> 中身 </tbody> </table>
このタグの中に
<tr><td>太郎</td><td>50</td><td>80</td></tr> <tr><td>花子</td><td>60</td><td>90</td></tr>
"td"タグはtable dataの略です
これを入れると
| 太郎 | 50 | 80 |
| 花子 | 60 | 90 |
HTML リストの書き方
ulタグ
unorderedlistの略
・パソコン
・テレビ
などと箇条書きにしたいときにこのulタグを使います。
使い方は、
bodyタグの中に
<ul> <li>パソコン</li> <li>テレビ</li> </ul>
と記入します。
olタグ
orderedlistの略
1.HTML
2.CSS
と数字付のリストを表示したい場合に使います。
<ol> <li>HTML</li> <li>CSS</li> </ol>
このように記入します。
これは覚えておくと便利かもしれませんね。
以上です。
CentOS起動
起動後すること
設定したマシンを再生すると
OSが起動します。
※次の手順は特に注意して行う画面
記載していない部分は基本OKで。
setupを選択できる画面にきたら
Escキー
CD Found
Skip
黒い画面で
Linux Text
Language Selection
Japanese
Time Zone Selection
Asia/Tokyo
Keyboard Selection
Jp106
Warning
Re-initialize all
Root Password
ここは、同じパスワードを二回入力します。
パスワードが脆弱なとき次の画面で、
確認を取られますが先に進みます。
Portitioning Type
デフォルトのままでOK
Writing strage configration to disc
write change to disc
パッケージのインストールが開始されます。
５分ほどで終了します。
Rebootが表示されたら
選択します。
その後初回起動が成功すれば
導入終わりです。
お疲れ様です。
備忘録あり
