無料MMORPG"RED STONE"
©2010 L&K Logic Korea Co., Ltd. All Rights Reserved.
©2010 GameOn Co., Ltd. All Rights Reserved.
当サイトで利用している画像及びデータは、株式会社ゲームオンに帰属します。
許可無くご利用又は転用になられる事は出来ませんので、予めご了承下さい。
真・女神転生IMAGIN＆アクセス解析
QRコード
HTML：課題もろもろ [勉強]
今夜もHTMLタグと格闘していた しゃくれアゴです。
右手の小指で"<"とか">"とか押すのがちょっと しんどく感じてきました。(^-^;
たぶん、Eclipseだと"<"を入力したら、自動的に">"でカッコを閉じてくれるんだろうなぁ～なんて思ったりしながらも、notepad++でシコシコとHTMLを書いています。
まぁ、notepad++に入力補完機能がありますが・・・ほとんど関数（もともとCとかC++のコーディング用に作られたエディタっぽいです。一応JavaとかHTMLでも使えます）の補完だし。
右手の小指がつらない程度にしておきます。
で、職業訓練から出されたHTMLの課題。っていっても、09/03（金）のうちに全部やっつけ終わったんですけど、家の環境でもやっておこうと思って再チャレンジしました。
課題の内容は・・・
（体裁については、HTMLタグ指定でもCSS使用でもかまわない。）
課題1：![20100905_HTML[00].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B005D.JPG)
・文字色は青とする
・サイズの指定は特になし
課題2：![20100905_HTML[01].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B015D-4bdc9.JPG)
・１行目は青
・２行目は赤
・３行目は黒
・サイズ指定は特になし
（右のように下にいくにつれ、大きくなるように）
課題3：![20100905_HTML[02].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B025D-d0adf.JPG)
・←のように外枠の太さが異なるテーブルを作成する。
・線の色は黒
課題4:![20100905_HTML[03].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B035D-c5a6c.JPG)
・テーブル背景色として左から白、青、ピンクとする。
・３つのテーブルともに、上詰めで配置する。
・２つ目のテーブルは縦と横の幅が等しいテーブル。
・３つ目のテーブルは横の幅が縦の幅よりも大きいテーブル。
・線の色は黒
課題5:![20100905_HTML[04].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B045D-1a09a.JPG)
・それぞれのリンクからそれぞれのページへジャンプする。
・ジャンプしたページにも元のページへ戻るためのリンクが存在する。
・リンクの色はオレンジ、すでに表示済みの場合は赤、リンク選択中の色も赤
課題6:![20100905_HTML[05].JPG](https://ago-waki.c.blog.ss-blog.jp/_images/blog/_877/ago-waki/20100905_HTML5B055D-4cd2a.JPG)
・ユーザIDは8桁以内の入力制限。
・性別はどちらかがチェックできること。
（逆にどちらかしかチェックできないようにすること）
・線の色はグレイ。
さてさて・・・これらの課題を実現するHTMLをシコシコ書きましたよー。
内容は、以下の通りです。
課題1のHTML
<html>
<head>
<title>HTML表示</title>
</head>
<body>
<font color=blue>Hello HTML!</font>
</body>
</html>
楽勝ですね。タイトルとフォントの色指定だけですので。
で、次。課題2のHTML
<html>
<head>
<title>HTML表示2</title>
</head>
<body>
<font color=blue>Hello HTML!</font><br>
<font size="+2" color=red>Hello HTML!</font><br>
<font size="+4">Hello HTML!</font>
</body>
</html>
改行の<br>を忘れずに、ということと、下の行になるほど文字サイズが大きくなるから、フォントサイズを+していけばイイかなぁ？って感じで。ほかにも<h1></h1>とか、<h2></<2>を使う方法で文字サイズを大きくしてくのもアリっちゃーアリだと思いますが、一応見本の通りに表示するのは、上記のような感じになりました。
で、課題3のHTML
<html>
<head>
<title>HTML表示3</title>
</head>
<body>
<table border=1 bordercolor=black>
<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>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<br>
<table border=2 bordercolor=black>
<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>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
特に難しくないですね。テーブルのborderで線の太さを指定して、bordercolorで線の色を指定するだけです。
で、次は課題4のHTML
<html>
<head>
<title>HTML表示4</title>
</head>
<body>
<table>
<tr>
<td valign=top>
<table border=1 bordercolor=black bgcolor=white>
<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>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</td>
<td valign=top>
<table border=1 bordercolor=black bgcolor=blue>
<tr><td width=100 height=100>1-1</td><td width=100 height=100>1-2</td><td width=100 height=100>1-3</td></tr>
<tr><td width=100 height=100>2-1</td><td width=100 height=100>2-2</td><td width=100 height=100>2-3</td></tr>
<tr><td width=100 height=100>3-1</td><td width=100 height=100>3-2</td><td width=100 height=100>3-3</td></tr>
</table>
</td>
<td valign=top>
<table border=1 bordercolor=black bgcolor=pink>
<tr><td width=100 align=right>1-1</td><td width=100 align=rigth>1-2</td><td width=100 align=right>1-3</td></tr>
<tr><td width=100 align=center>2-1</td><td width=100 align=center>2-2</td><td width=100 align=center>2-3</td></tr>
<tr><td width=100 align=left>3-1</td><td width=100 align=left>3-2</td><td width=100 align=left>3-3</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
だんだん面倒くさくなってきましたね。
3つのテーブル。上詰めで、2つ目はカラム？マス？で幅と高さのサイズ指定。3つ目はカラム？マス？で幅のサイズ指定＋中の表示位置を指定。
見本だと2つ目のテーブル、どう見ても青には見えず水色ですよね・・・。ま、いいか。
次、課題5のHTML。これはリンクの課題だからソースが合計4つあります。
1つ目
<html>
<head>
<title>HTML表示5</title>
</head>
<body link="orange" vlink="red" alink="red">
<dl>
<dt><p>リンク一覧</p></dt>
<dd><p><a href="mondai5A.html">Ａのページ</a></p></dd>
<dd><p><a href="mondai5B.html">Ｂのページ</a></p></dd>
<dd><p><a href="mondai5C.html">Ｃのページ</a></p></dd>
</dl>
</body>
</html>
2つ目
<html>
<head>
<title>HTML表示5A</title>
</head>
<body body link="orange" vlink="red" alink="red">
<dl>
<dt><p>Ａのページです。</p></dt>
<dd><p><a href="mondai5.html">リンク一覧ページへ戻る</a></p></dd>
</dl>
</body>
</html>
3つ目
<html>
<head>
<title>HTML表示5B</title>
</head>
<body body link="orange" vlink="red" alink="red">
<dl>
<dt><p>Ｂのページです。</p></dt>
<dd><p><a href="mondai5.html">リンク一覧ページへ戻る</a></p></dd>
</dl>
</body>
</html>
4つ目
<html>
<head>
<title>HTML表示5C</title>
</head>
<body body link="orange" vlink="red" alink="red">
<dl>
<dt><p>Ｃのページです。</p></dt>
<dd><p><a href="mondai5.html">リンク一覧ページへ戻る</a></p></dd>
</dl>
</body>
</html>
リンクの色指定って、<body>タグでするんですねぇ。
リンクに関連することはリンクタグ？<a></a>の中で完結するモノだと思っていました。(^-^;
あ、あと表示の体裁を整えるのに箇条書きをつかってます。
<dl>～</dl>が箇条書き範囲で、<dt></dt>が見出しっぽくて、<dd></dd>がちょっと表示がインデント？字下げ？しています。
最後、課題6のHTML。これ、けっこう時間かかりました。
<html>
<head>
<title>HTML表示6</title>
</head>
<body>
ユーザ登録情報入力<br>
<form>
<table border=1 bordercolor=gray>
<tr><td width=150 bgcolor=pink>ユーザID</td><td width=300><input type="text" name="UserID" size="50" style="ime-mode: disabled;" maxlength=8></td></tr>
<tr><td width=150 bgcolor=pink>ユーザ名</td><td width=300><input type="text" name="UserName" size="70"></td></tr>
<tr><td rowspan=2 width=150 bgcolor=pink>住所</td><td width=300><input type="text" name="Address1" size="70"></td></tr>
<tr><td width=300><input type="text" name="Address2" size="70"></td></tr>
<tr><td width=150 bgcolor=pink>性別</td></td><td><input type="radio" name="Sex">男性<input type="radio" name="Sex">女性</td></tr>
</table>
</form>
</body>
</html>
フォームタグを使うってことに頭が辿り着くのに時間がかかったけど、それさえ分かれば後はテーブルの応用と<input>タグの書き方だけです。おまけで、ユーザID入力欄は、漢字変換OFFにしました。
と、こんな感じでHTMLを覚えつつあります。
将来的には、課題6みたいな入力フォームから情報を吸い上げてDBに格納したりするんだろうなぁ。おそらく。きっと。たぶん。
ま、来月の今頃あたりには、そういことが出来ちゃう人になってるかな？？？
2010-09-05 00:35
nice!(0)
コメント(2)
トラックバック(0)
HTMLは多少わかるよ。
①fontsizeの＋は不要かな
入れなくてもいいような
②colorは#000000とかで入力の方が良いね。
基本色だけ使うならいいけどHP作ってると微妙な調整すると面倒になるよ。
なーんてね、気になったことでした。
by もきち (2010-09-05 01:12)
＞＞もきち
①fontosizeの+は不要？ だって、下の行にいくほど文字サイズ大きくするんだから、fontosizeを+にするか、直接サイズ指定するしか方法が・・・。
②colorの#ね・・・。何色が#～に対応しているとかWebで調べると分かるんだけど・・・面倒だから文字で指定できる範囲にしておいた。
Webで使える色ってすっごく細かいよねー。(^-^;
もきちの方がHTML詳しいねぇ。
今度、教わろうかな。ついでに古いけどドラクエIXで私が、もきちのDSにゲストで行きたいな。（なんとかの翼とかいうアイテム入手のため）
by しゃくれアゴ (2010-09-05 16:48)