Webアプリケーション作成のためのHTMLの基礎

Perl
Mojolicious

PerlでWebアプリケーションを作成するための前提知識としてHTMLの基本を解説します。これだけ知っていれば、HTMLを自由に記述することができる程度のものを目指しました。タグの役割を中心に解説します。通常のタグ、フォームタグ、ヘッダ部で利用するタグなどを解説しています。日本語などの扱い方、CSSやJavaScriptの利用の仕方などにも触れています。画面のレイアウトや色については、CSSを解説するときに解説します。

基礎の基礎

HTMLのフォーマットです。

<!DOCTYPE html>
<html>

 <head>
  <title>タイトル</title>
 </head>

 <body>
  内容
 </body>

</html>

HTMLでは「<」と「>」で囲まれたタグというものを使って文書を記述します。HTML文書は「」で始まって「」で終わります。「」と「」の間には、HTML文書のタイトルなどのメタ情報を記述します。「」と「」の間には、画面に表示される文書の内容を記述します。

はドキュメントタイプと呼ばれ、とりあえず先頭に記述するものだと覚えて起きましょう。

文字参照

「<」や「>」といった文字は、そのままではHTMLの中で利用することができません。文字参照という方法を使ってこれらの文字を記述することができます。

"	"
&	&
<	<
>	>
	スペース

HTMLの中ではスペースはいくつ記述してもひとつのスペースに切り詰められるので「」を使用します。

body部で利用されるタグ

<!-- コメント -->

「」までがコメントになります。

ブロック要素 div

<div>なにか</div>

ブロック要素を記述します。ブロック要素の特徴は、前後に改行が行われることと、幅と高さを持つことです。デフォルトで画面の左右いっぱいまで領域を広げます。また内部にある文字の位置をCSSを使って制御することもできます。

# ブロック要素のイメージ
+----------------------------------------------------------------+
|                                                                |
|なにか                                                          |
|                                                                |
+----------------------------------------------------------------+
+----------------------------------------------------------------+
|                                                                |
|                           なにか                               |
|                                                                |
+----------------------------------------------------------------+

インライン要素 span

<span>なにか</span>

インライン要素を記述します。インライン要素の特徴は、画面の右端に到達するまでは、改行が行われずに左に流れるようにつめられることです。

# インライン要素のイメージ
+------+ +------+
|なにか| |なにか|
+------+ +------+

見出し1 h1

<h1>見出し1</h1>

見出しです。タグの使い方は自由ですが、一般的には、ページのタイトルを記述するために利用されます。大きく表示されます。h1はブロック要素です。

見出し2 h2

<h2>見出し2</h2>

見出しです。h1よりは小さく表示されます。一般的には、個別の記事があった場合のタイトルなどに利用されます。h2はブロック要素です。

見出し3 h3

<h3>見出し3</h3>

見出しです。h2よりは小さく表示されます。h3はブロック要素です。

見出し4 h4

<h4>見出し4</h4>

見出しです。h3よりは小さく表示されます。h4はブロック要素です。

見出し5 h5

<h5>見出し5</h5>

見出しです。h4よりは小さく表示されます。h5はブロック要素です。

見出し6 h6

<h6>見出し6</h6>

見出しです。h5よりは小さく表示されます。h6はブロック要素です。

段落 p

<p>段落</p>

段落を作成するにはpタグを使用します。pはブロック要素です。

水平線 hr

<hr>

水平線を描画するにはhrタグを使用します。hrはブロック要素です。

ハイパーリンク a

<a href="/other.html">ハイパーリンク</a>

ハイパーリンクです。リンク先の文書をhrefに指定します。aはインライン要素です。

クリックした場合は同じ画面でハイパーリンク先のページへ移動します。新しい画面でリンクを開きたい場合はtargetに「_blank」を指定します。

<a href="/other.html" target="_blank">ハイパーリンク</a>

強調 strong

<strong>強調表示</strong>

ページの中で強調したい言葉に利用します。strongはインライン要素です。

画像 img

<img border="0" src="/images/img001.gif" width="128" height="128" alt="説明">

画像を表示するにはimgタグを使用します。デフォルトでボーダーがついてしまうので、borderには0を指定します。scrに画像へのリンクを指定します。widthには画像の幅、heightには画像の高さを指定します。altには画像の説明を記述します。imgはインライン要素です。

整形済みテキスト pre

use strict;
use warnings;

print "Hello World!";

整形済みテキストを記述したい場合はpreタグを使用します。改行やスペースなどがそのまま表示されますが、「<」と「>」は特殊文字として解釈されるので「<」と「>」に置き換える必要があることに注意してください。

テーブル table, tr, th, td

<table border="1" cellspacing="0">
  <tr>
    <th>1列目のヘッダ</th>
    <th>2列目のヘッダ</th>
    <th>3列目のヘッダ</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table>

テーブル(表)を作成するには、上記のタグを組み合わせて使用します。tableタグが一番外側にきます。列のヘッダはthタグを使って記述します。列はtrタグを使って記述します。列の中の各行はtdタグを使って記述します。

tableタグのborderはボーダーの太さです。celspacingはtd間の幅の指定です。borderを1にしてcellspacingを0にすると一般的な見栄えのテーブルになります。

太字 b

<b>太字</b>

文字を太字にするにはbタグを使用します。bはインライン要素です。

改行 br

<br>

改行を行うにはbrタグを使用します。一般的には、brを使うよりも、divやpを使って改行を行うのがよいとされています。

順序付きリスト ol, li

<ol>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

順序付きリストを作成するには上記のタグを使用します。olタグの中に、liタグを並べます。以下のように順序がつきます。

1. 項目1
2. 項目2
3. 項目3

順序なしリスト ul, li

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

順序なしリストを作成するには上記のタグを使用します。ulタグの中に、liタグを並べます。以下のように順序がつきません。

・項目1
・項目2
・項目3

フォームで利用するタグ

フォーム form

<form action="/register" method="post">
  <div>年：<input type="text" name="age"></div>
  <div><input type="submit" value="送信する"></div>
</form>

フォームを送信するにはformタグの中に、inputタグなどのフォームの要素を記述する必要があります。actionには、データーの送信先のURLを指定します。methodにはHTTPメソッドを指定しますが、フォームからの送信の場合はpostを利用するのが一般的です。

テキストボックス <input type="text">

<input type="text" name="age">

テキストボックスは1行のテキスト入力エリアです。typeに「text」を指定します。送信されたデータの名前になるのでnameは必ず指定します。inputタグはインライン要素です。

次のような属性を指定することができます。

value - 値
size - 横のサイズ
maxlength - 最大文字数

パスワード入力ボックス <input type="password">

<input type="password" name="pass">

パスワード入力ボックスです。nameに名前を指定します。

以下の属性が指定できます。

value - 値
size - 横のサイズ
maxlength - 最大文字数

ボタン <input type="button">

<input type="button" value="押す" name="send">

ボタンです。inputタグのtypeに「button」を指定します。ボタンを識別するときに利用するのでnameを指定しておきましょう。valueはボタンに表示されるテキストになります。

送信ボタン <input type="submit">

<input type="submit" value="送信">

送信ボタンです。フォームの値を送信するのに利用されます。valueは送信ボタンに表示されるテキストになります。

次のような属性を指定することができます。

name - 名前

リセットボタン <input type="reset">

<input type="reset" value="リセット">

リセットボタンです。フォームの値をリセットするのに利用されます。valueはリセットボタンに表示されるテキストになります。

次のような属性を指定することができます。

name - 名前

画像ボタン <input type="image">

<input type="image" src="/image/dog.png" alt="犬">

画像ボタンです。srcは画像のURLになります。altは画像の説明です。

次のような属性を指定することができます。

name - 名前

ラジオボタン <input type="radio">

<input type="radio" name="animal" value="犬" checked="checked">
<input type="radio" name="animal" value="猫">

ラジオボタンは複数の項目の中からひとつを選んでもらうときに使用します。nameに名前を指定します。同じグループに属するものは同じ名前にします。valueには値を指定します。checkedを「checked」にすると、その項目が選択されます。

隠しフィールド <input type="hidden">

<input type="hidden" name="title" value="Perl">

見えないフィールドです。ブラウザ上でユーザーに見せないで送信したい値がある場合に利用します。nameには名前を指定します。valueには値を指定します。

チェックボックス <input type="checkbox">

<input type="checkbox" name="animal" value="犬" checked="checked">
<input type="checkbox" name="animal" value="猫">

チェックボックスは複数の項目を選択してもらう場合に使用します。nameには名前を指定します。同じグループに属するものは同じ名前にします。valueには値を指定します。checkedを「checked」にすると、その項目が選択されます。

ファイルのアップロード <input type="file">

<input type="file" name="datafile">

ファイルをアップロードしたい場合に利用します。nameに名前を指定します。これはファイル名ではなくて、単に識別するための名前です。

以下の属性が指定できます。

size - 横のサイズ

ファイルをアップロードする場合は、formタグのenctypeに「multipart/form-data」を指定しなければならないことに注意してください。

<form action="cgi-bin/abc.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="datafile">
<input type="submit" value="送信" >
</form>

プルダウンメニューあるいはリストボックス select

<select name="animal">
  <option value="犬">犬</option>
  <option value="猫">猫</option>
</select><

selectタグを使うとプルダウンメニューを作成することができます。nameに名前を指定します。optionタグが選択する要素になります。valueには値を指定します。optionタグのテキストの部分には表示される項目を記述します。

sizeを1より大きいものに指定するとリストボックスになります。

<select name="animal" size="4">
  <option value="1">猫</option>
  <option value="2">犬</option>
  <option value="3">亀</option>
  <option value="4">ライオン</option>
</select><

select要素については以下の解説も参考にしてください。

select要素の操作まとめ

ヘッダ部で利用するタグ

ヘッダ部で利用するタグを紹介します。

文字コードの指定

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTMLで利用する文字コードを指定するときはmetaタグを利用します。metaタグを利用するとhttp-equivに「Content-Type」を、contentに「text/html; charset=UTF-8」を指定します。この指定を行わないとブラウザで文字化けすることがある

ので、headタグの先頭で記述してください。http-equiv属性を利用するとHTTPレスポンスのヘッダにContent-Typeがない場合にブラウザはhttp-equivの情報を利用します。

CSS(スタイルシート)の記述

<style type="text/css">/*<![CDATA[*/

/* CSSの記述*/

/*]]>*/</style>

CSSを記述するにはstyleタグを使用します。typeには「text/css」を指定します。XHTMLという仕様でもちゃんと動くようにCSSのコードはCDATAと呼ばれるセクションに記述する必要があるそうです。反対にCSSからから見るとCDATAセクションはいらない子なので/* */でコメントアウトされています。

外部CSS(スタイルシート)の読み込み

<link href="/css/common.css" media="screen" rel="stylesheet" type="text/css" />

外部のCSSを読み込むにはlinkタグを使用します。mediaには「screen」を指定します。これは、コンピュータースクリーン用のCSSであることを指定するためにです。relには「stylesheet」を指定します。これは外部スタイルシート定義ファイルを示します。typeには「text/css」を指定します。

JavaScriptの記述

<script type="text/javascript">//<![CDATA[
 
// JavaScriptのソースコード
 
//]]</script>

JavaScriptを記述するにはscriptタグを利用します。typeに「text/javascript」を指定します。XHTMLという仕様でもちゃんと動くようにJavaScriptのコードはCDATAと呼ばれるセクションに記述する必要があるそうです。反対にJavaScriptから見るとCDATAセクションはいらない子なので//でコメントアウトされています。

外部JavaScriptの読み込み

<script src="/js/myapi.js" type="text/javascript"></script>

外部のJavaScriptを読み込むはscriptタグを利用します。srcにJavaScriptのソースのURLを指定し、typeに「text/javascript」を指定します。

終わりに

駆け足でしたが、HTMLの解説を終わります。

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

　ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。

システム開発のお問い合わせ

Perlで構築されたシステムの
調査・保守・開発などの
お問い合わせはこちら