【HTML】ページ作成
(HTMLページの基礎)
ここではHTMLを使ったページ作成に関する基礎をまとめます。
ページ作成をした経験がある方もそうでない方も、復習がてら一度目を通してみてはいかがでしょうか。
まず、HTMLではタグと呼ばれる命令文を記述することによって文字列や画像の表示方法を定義します。
タグは必ず半角英数字の「<」「>」で記述このタグで囲まれた部分の文字列がタグの命令に従って表示されます。
タグには様々な種類がありますが、基本となるタグを下記に記載しておきますのでおさらいしましょう。
(タグの基本構造)
<html></html>
→ページ全体を囲むドキュメントタグです。このタグがHTMLのはじまりと終わりを表します。
<head></head>
→ヘッダーと呼ばれる部分です。Java Scriptの定義やタイトル、
metaタグと呼ばれる特殊なタグを記述ウェブブラウザーに解釈されます。
<title></title>
→タイトル文を表示するタグで、<head></head>の間に入れます。ここで記述した文がブラウザのタイトル位置に表示されます。
<body></body>
→本文を表示するタグです。テキストの色やリンク色の指定、ページ背景色の指定などホームページとして表示される情報をこのタグに記述します。
<!–コメント–>
→表示させたくない文を記述するコメントタグです。<!–と–>の間にコメントを記入します。
上記タグを記述すると以下のような構造になります。
<html>
<head></head>
<title></title>
<body></body>
<!–
コメント文です。
–>
</html>
現在のページから他のページもしくは文章に遷移したい場合はリングタグを使用します。
<a href=”リンク先のURL”></a>
<html>
<head></head>
<title></title>
<body>
<a href=”リンク先のURL”></a>
</body>
<!–コメント文です。–>
</html>
最後にホームページでよく目にするテキスト入力欄やログインボタンなどの実行ボタンを作成するinputタグを見ていきましょう。
<input>タグのtype属性
①type=”text”
こちらは通常のテキストを入力できるテキストボックスを1行作ります。
2行以上の長い文を入力したい場合は<textarea>～</textarea>を使用します。
sample_text.html
<html>
<head></head>
<body>
<input name=”A1″ type=”text” value=”名前” size=”15″>
</body>
</html>
【実行結果】
②type=”password”
パスワードボックスを作ります。入力したテキストがパスワード設定者以外に読まれないようにする設定もできます。
sample_password.html
<html>
<head></head>
<body>
<input name=”A1″ type=”password”>
</body>
</html>
【実行結果】
typeで”password”を入力したことで、上記のように入力した文字をアスタリスク(*)などに置き換えて表示することができました。
このようにtypeの後ろで属性を指定することで、好みの入力フォームを作成することができます。
HTMLで使用する基本的なタグについて確認してきましたがいかがでしたでしょうか？
ご紹介したタグ以外にも使用頻度の高いタグがありますので、また今後ご紹介させていただきます。
それではまた次回お楽しみに！
