お待たせしました。
完全にプログラミングがわからない、「htmlってなに？美味しいの？」って人のためのページです。
「html？知ってるよ、美味しいよね」って人は見る必要ないので飛ばしてください。
今回からサンプルゲーム作りをほんのり始めます。
最終目的として、1対1でじゃんけんをするゲームを目指しましょう。
メモ帳でhtml作成
まず、メモ帳を開きます。
hello world
と書きます。（内容はなんでもいいです）
ファイル名をhelloworld.htmlとして保存します。
ダブルクリックもしくはブラウザへドラッグアンドドロップでメモ帳に書いた文字が表示されるはずです。
これがhtml、ブラウザに表示させるためのファイルです。
htmlにタイトルを付ける
先ほどのhello world の文字の前に以下の行を追記します。
<title></title>
これがhtmlタグです。
スラッシュが付いてない方がはじまり、付いている方が終わりを表します。
この二つの間に入れた文字が、このhtmlファイルのタイトルになります。
試しに以下のように入れてみましょう。
<title>new html</title>
この状態で保存しブラウザで開くと、タブのところに表示されている（ブラウザによります）文字がnew htmlになっているはずです。
ここまでで日本語を入力していた人もいるかと思います。
その場合文字化けしていたかもしれません。
タイトルの下に以下の行を入れてみましょう。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
とりあえず意味はわからなくていいですが、説明します。
文字はPC上でそのまま認識しているわけではなく、文字コードというもので定義されています。
その際、htmlが思っている文字コードとPCの思っている文字コードが違っている場合文字化けします。
なので上記の一文で、文字コードはUTF-8を使用しますと双方に宣言することで認識のズレがなくなります。
コミュニケーションですね。
仮に自分の環境で文字化けしていなくても、他の人は文字化けしてる可能性が高いので必ず入れます。
リンク、テキストボックス、ドロップダウンリスト
そんな感じでまずはhtmlタグを使って宣言画面を作っていきます。
新しいファイルを作成します。
名前はmain.htmlにでもしておきましょう。
宣言画面に必要なのは入力用の項目。
内容はID、パスワード、じゃんけんの手の選択、です。
最終的にこれらの情報をデータベースに送るようにします。
「html タグ テキストボックス」「html タグ ドロップダウンリスト」
でググって使い方を調べましょう。（丸投げ）（わからなかったら下に回答例があります）
目標はこんな感じです。
ちなみに改行は
<br>
コメントは
<!-- この部分がコメントになる -->
です。
コメントとは、プログラム内に書き込むメモです。
コードの説明を書いたり、要らないけど消したくはないコードをコメントアウトしたりします。
説明は、ググって書いたとことは後で見たら分からなくなるので入れておきましょう。
できましたか？
先程の目標として出した部分はこんな感じになっています。
<html> <head> <title>宣言画面</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> ID：<input type="number"> <br> <br> Pass：<input type="password"> <br> <br> 次に出す手<br> <select> <option value="rock">グー</option> <option value="scissors">チョキ</option> <option value="paper">パー</option> </select> </html>
<input>でテキストボックス
<select>でドロップダウンリスト
<option>でドロップダウンリストの内容です
<option value=”実際に送信される内容”>表示される文字</option>
ここで例えばグーを選択した時、value=”rock”のrockの部分が実際には送信されます（グーはあくまで表示されるだけ）
ついでに先行して結果画面へのリンクも作っておきます。
リンク先は result.html にしておきましょう。
やり方は「html リンク」でググってください。
できたものがこちら
コードはこれ
<a href="result.html">更新結果へ</a>
<a href=”リンク先のURL”>表示される文字</a>
はい、見た目が完成しました。
名前をつける
IDなどの入力フォームを他のところでも使うために、名前をつけてあげます。
タグの中に name=”ここが名前” を入れるだけです。
今回は指定の名前をつけてみましょう。
ID：<input type="number"> ↓ ID：<input type="number" name="id">
Pass：<input type="password"> ↓ Pass：<input type="password" name="pass">
<select> ↓ <select id="hand" name="hand">
selectのところにはなんかよくわからないけどidも入れておきました。
送信
ここからここまでの内容を送信しますと宣言する必要があります。
また、送ったら受け取るページが必要なので、どのページに送るかも宣言します。
今回の宛先はこのmain.htmlにします。自分で送って自分で受け取ります。
コードはこんな感じ。
<form action="main.html" method="POST" name="form"> <!-- ここに送信したい内容 --> </form>
formタグで送信したい内容、今回はプレイヤーID、パスワード、次に出す手を挟みます。
methodはPOSTとGETがあり、GETは送信する情報をURL上に出し、POSTは出しません。
とりあえず最初は無視していいです。どっち選んでもいいです。
最後に、</form>の前に送信ボタンを追加します。
<input type="submit" value="送信">
submitがボタンの意味、valueの中身が表示される文字です。
まだクリックしてもmain.htmlに移動するだけで何も起きませんが、これでhtmlの準備は完了です。
できたものはこちら。
<html> <head> <title>宣言画面</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <form action="main.html" method="POST" name="form"> <a href="result.html">更新結果へ</a> <br> <br> ID：<input type="number" name="id"> <br> <br> Pass：<input type="password" name="pass"> <br> <br> 次に出す手<br> <select id="hand" name="hand"> <option value="rock">グー</option> <option value="scissors">チョキ</option> <option value="paper">パー</option> </select> <br> <br> <input type="submit" value="送信"> <br> <br> </form> </html>
テキストエディタ
今回はとりあえずメモ帳を使いましたが、本当はプログラミング用のテキストエディタを使うのがいいです。
自動で色分けや段落分けをしてくれて見やすかったり、途中まで打つと候補を出してくれたりします。
続きをやるにあたりメモ帳で続けるのはちょっと無謀なので適当なものを用意しておくとよいです。
ちなみに私はAtomとかいうソフトを使ってます。
では、せっかくここまで出来たのでインターネット上に公開してみましょう。
レンタルサーバー編へ