¥È¥Ã¥× ¿·µ¬ ÊÔ½¸ º¹Ê¬ °ìÍ÷ ¥½¡¼¥¹ ¸¡º÷ ¥Ø¥ë¥× PDF RSS ¥í¥°¥¤¥ó

HTML¤Î´ðËÜ

HTML¤Î´ðËÜ

 HTML¤È¤Ï

  • HTML(¤¨¤¤¤Á¤Æ¤£¡¼¤¨¤à¤¨¤ë)¤È¤Ï¡¢Hyper Text Markup Language¤Îά¤Ç¡¢Web¥Ú¡¼¥¸¤ËÍѤ¤¤é¤ì¤ë¸À¸ì¡£
    • ¥¿¥°¤È¸Æ¤Ð¤ì¤ë"<>"¤Ç°Ï¤ï¤ì¤¿Ê¸»úÎ󤫤鹽À®¤µ¤ì¤ë¡£
  • HTML¥¨¥Ç¥£¥¿¤¬Åо줷¡¢¤µ¤é¤Ë¤Ï¡¢¥Ö¥í¥°¤Ê¤É¤ÎCMS¤ÎÅоì¤Ë¤è¤ê¡¢HTML¤òľÀÜÆþÎϤ¹¤ë¤³¤È¤Ï¾¯¤Ê¤¯¤Ê¤Ã¤¿
    • ¤·¤«¤·¡¢¥¦¥§¥Ö¥Ú¡¼¥¸¤¬HTML¤Ç½ñ¤«¤ì¤Æ¤¤¤ë¤³¤È¤Ë¤ÏÊѤï¤ê¤Ï¤Ê¤¤¡£
  • HTML¤Î´ðËܤò¸«¤ë°ÕÌ£¤Ç¤â¡¢HTML¤òľÀÜÆþÎϤ¹¤ë¤³¤È¤«¤é³Ø½¬¤·¤Æ¤¤¤¯¡£

 ´ðËÜŪ¤ÊHTMLʸ½ñ

  1. ¤¹¤Ù¤Æ¤Î¥¿¥°¤Ï<tag>¤«¤é»Ï¤Þ¤ê¡¢</tag>¤Ç½ª¤ï¤ë¡£
  2. HTMLʸ½ñ¤Ï<HTML>¤Ç»Ï¤Þ¤ê¡¢</HTML>¤Ç½ª¤ï¤ë¡£
  3. ¥Ø¥Ã¥ÀÉô¡¢¥Ü¥Ç¥£Éô¤«¤é¹½À®¤µ¤ì¤ë
  4. ¥Ø¥Ã¥ÀÉô¤Ï<HEAD>¤«¤é</HEAD>¤Ç¹½À®¤µ¤ì¡¢¥¿¥¤¥È¥ë¤Ê¤É¤Î¾ðÊó¤òµ­Æþ¤¹¤ë
  5. ¥Ü¥Ç¥£Éô¤Ï<BODY>¤«¤é</BODY>¤Ç¹½À®¤µ¤ì¡¢ËÜʸ¤òµ­Æþ¤¹¤ë
  6. ÃÊÍ¥°<P>¤ä²þ¹Ô¥¿¥°<BR>¤òÁÞÆþ¤·¤Ê¤¤¸Â¤ê¡¢¥Ö¥é¥¦¥¶¤Ç¤Ï²þ¹Ô¤Ïɽ¼¨¤µ¤ì¤Ê¤¤
1
2
3
4
5
6
7
8
<HTML>
  <HEAD>
    <TITLE>ºÇ½é¤Î¥Ú¡¼¥¸</TITLE>
  </HEAD>
  <BODY>
    ¥Ú¡¼¥¸¤ÎÆâÍÆ¤Ï¤Ê¤¤¤è¤¦¡Á
  </BODY>
</HTML>

 ¥¦¥§¥Ö¥Õ¥©¡¼¥à

  • FORM¥¿¥°¤Ç¤Ç°Ï¤ó¤ÀÉôʬ(<form>¡Á</form>)¤ÎÆâ¦¤ËÆþÎϤΤ¿¤á¤Î¥¿¥°¤òµ­½Ò¤¹¤ë

form¥¿¥°¤Î½ñ¼°

    • Method¤Ë¤ÏGET¤¢¤ë¤¤¤ÏPOST
    • Action¤Ë¤ÏÈô¤ÓÀè
<form method="[GET¤¢¤ë¤¤¤ÏPOST]" ACTION="[¥¦¥§¥Ö¥Õ¥©¡¼¥à¤òÅê¹Æ¤¹¤ëÀè¡ÝÎ㤨¤ÐCGI¤ä¥µ¡¼¥Ö¥ì¥Ã¥È]">

 ÆþÎϤΤ¿¤á¤Î¥¿¥°

INPUT¥¿¥°[TEXT]

  • ¥Æ¥­¥¹¥È¥Õ¥£¡¼¥ë¥É¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òtext¤È¤¹¤ë
  • ½ñ¼°
<input type="text" value="[½é´ü¤ÎÃÍ]">

INPUT¥¿¥°[PASSWORD]

  • ¥Ñ¥¹¥ï¡¼¥É¥Õ¥£¡¼¥ë¥É¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òpassword¤È¤¹¤ë
  • ½ñ¼°
<input type="password" value="[½é´ü¥Ñ¥¹¥ï¡¼¥É]">

INPUT¥¿¥°[SUBMIT]

  • ÆþÎϥܥ¿¥ó(Åê¹Æ)¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òsubumit¤È¤¹¤ë
  • ½ñ¼°
<input type="submit" value="[¥Ü¥¿¥ó¤Ëɽ¼¨¤µ¤ì¤ë̾Á°]">

INPUT¥¿¥°[RESET]

  • ÆþÎϥܥ¿¥ó(Åê¹Æ)¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òreset¤È¤¹¤ë
    • ¥Õ¥©¡¼¥à¤ÎÆþÎÏÆâÍÆ¤ò¥¯¥ê¥¢¤·¡¢½é´ü¾õÂÖ¤ËÌ᤹
  • ½ñ¼°
<input type="reset" value="[¥Ü¥¿¥ó¤Ëɽ¼¨¤µ¤ì¤ë̾Á°]">

INPUT¥¿¥°[BUTTON]

  • ¥Ü¥¿¥ó¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òbutton¤È¤¹¤ë
    • Åê¹Æ¤¹¤ë¤ï¤±¤Ç¤Ï¤Ê¤¯JavaScript¤Î´Ø¿ô¤ò¸Æ¤Ö¾ì¹ç¤Ë»È¤¦

INPUT¥¿¥°[CHECKBOX]

  • ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òcheckbox¤È¤¹¤ë
    • ON/OFF¡¢True/False¤Ê¤É¤ÎÆóÂò¤òÁªÂò¤µ¤»¤ë¾ì¹ç¤Ë»È¤¦
  • ½ñ¼°
<input type="checkbox" name="[¥Ñ¥é¥á¡¼¥¿Ì¾]" value="[ÆþÎϤµ¤ì¤ëÃÍ]">
    • ²¿¤âvalue¤Ë»ØÄꤷ¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤¬¥Á¥§¥Ã¥¯¤µ¤ì¤¿ºÝ¤Ë¤Ï"on"¤¬Æþ¤ê¡¢¥Á¥§¥Ã¥¯¤µ¤ì¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ë¤ÏnullÃͤȤʤë

INPUT¥¿¥°[RADIO]

  • ¥é¥¸¥ª¥Ü¥¿¥ó¤Î¥¿¥°
    • input¥¿¥°¤Î¥¿¥¤¥×¤òradio¤È¤¹¤ë
    • Ê£¿ô¤ÎÁªÂò»è¤«¤é°ì¤Ä¤òÁªÂò¤µ¤»¤ë¾ì¹ç¤Ë»È¤¦
  • ½ñ¼°
<input type="radio" name="[¥Ñ¥é¥á¡¼¥¿Ì¾]" value="[ÆþÎϤµ¤ì¤ëÃÍ]">
    • ¥°¥ë¡¼¥×²½¤¹¤ëÊ£¿ô¤Î¥é¥¸¥ª¥Ü¥¿¥ó¤Î¥¿¥°¤ò½ñ¤¯¤µ¤¤¤Ëname°À­¤ÏƱ¤¸Ì¾Á°¤È¤¹¤ë

select-option¥¿¥°

  • ¥É¥í¥Ã¥×¥ê¥¹¥È¡¢Ê£¿ô¹Ô¥ê¥¹¥È¤«¤é¤ÎÁªÂò¤Î¤¿¤á¤Î¥¿¥°
    • Ê£¿ô¤ÎÁªÂò»è¤«¤é°ì¤Ä¤¢¤ë¤¤¤ÏÊ£¿ô¤òÁªÂò¤µ¤»¤ë¾ì¹ç¤ËÍѤ¤¤ë
  • ½ñ¼°
<select name="[¥Ñ¥é¥á¡¼¥¿Ì¾]" size="[¹Ô¿ô]">
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>
    • size°À­¤Ï¹Ô¿ô¤ò¼¨¤·¡¢¥Ç¥Õ¥©¥ë¥È¤Ï£±¤Ç¥É¥í¥Ã¥×¥ê¥¹¥È¡¢2°Ê¾å¤ò»ØÄꤹ¤ë¤ÈÊ£¿ô¹Ô¥ê¥¹¥È¤È¤Ê¤ë

textarea¥¿¥°

  • ¥Æ¥­¥¹¥È¥¨¥ê¥¢¥¿¥°
    • Ê£¿ô¹Ô¤Î¥Æ¥­¥¹¥È¤òÆþÎϤµ¤»¤ë¾ì¹ç¤ËÍѤ¤¤ë
  • ½ñ¼°
<textarea name="[¥Ñ¥é¥á¡¼¥¿Ì¾]" cols="[1¹Ô¤Îʸ»ú¿ô]" rows="[¹Ô¿ô]"></textarea>

 ¥¦¥§¥Ö¥Õ¥©¡¼¥à¤ÎÎã

¥½¡¼¥¹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>¥æ¡¼¥¶¾ðÊó¤ÎÆþÎÏ</title>
</head>
<body>
    <form action="dispParams.jsp" method="POST">
        ¥æ¡¼¥¶¡¼Ì¾¡§
        <!-- ¥Æ¥­¥¹¥È¥Ü¥Ã¥¯¥¹¡§°ìÈÌŪ¤Ê¥Æ¥­¥¹¥ÈÆþÎÏ -->
        <input type="text" name="¥æ¡¼¥¶Ì¾" value="" />
        <br />
        ¥Ñ¥¹¥ï¡¼¥É¡§
        <!-- ¥Ñ¥¹¥ï¡¼¥ÉÍѥƥ­¥¹¥È¥Ü¥Ã¥¯¥¹¡§¥Ñ¥¹¥ï¡¼¥É¤Ê¤ÉÆâÍÆ¤ò¸«¤»¤¿¤¯¤Ê¤¤¤â¤Î¤ÎÆþÎÏ¤Ë -->
        <input type="password" name="¥Ñ¥¹¥ï¡¼¥É"/>
        <br />
        À­ÊÌ¡§
        <!-- ¥é¥¸¥ª¥Ü¥¿¥ó¡§Ê£¿ôÁªÂò»è¤ÎÃæ¤Ç°ì¤Ä -->
        <input type="radio" name="À­ÊÌ" value="ÃË" />ÃË
        <input type="radio" name="À­ÊÌ" value="½÷" />½÷
        <br />
        ǯÂå¡§
        <select name="ǯÂå">
            <option value="20Âå" selected="selected">20Â夫¤½¤ì°Ê²¼</option>
            <option value="30Âå">30Âå¡¢40Âå</option>
            <option value="50Âå">50Âå¡¢60Âå</option>
            <option value="60Âå">70Â夫¤½¤ì°Ê¾å</option>
        </select>
        <br />
        ´ã¶À¤ò¤«¤±¤Æ¤¤¤ë¡©¡§
        <!-- ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¡§true¤«false¤« -->
        <input type="checkbox" name="´ã¶À" />
        <br />
        ´é¼Ì¿¿¡§
        <!-- ¥Õ¥¡¥¤¥ë¤ÎÆþÎÏ¡§¥Ç¡¼¥¿¤ò¥Õ¥¡¥¤¥ë¤Î·Á¤ÇÁ÷¿®¤µ¤»¤¿¤¤¾ì¹ç¤Ë -->
        <input type="file" name="´é¼Ì¿¿" />
        <br />
        ¤½¤Î¾¡§<br />
        <!-- ¥Æ¥­¥¹¥È¥¨¥ê¥¢¡§Ê£¿ô¹Ô¤Ë¤ï¤¿¤ë¥Ç¡¼¥¿¤ÎÆþÎÏ¤Ë -->
        <textarea rows="20" cols="80" name="¤½¤Î¾"></textarea>
        <br />
        <!-- Åê¹Æ¥Ü¥¿¥ó¡§¥Õ¥©¡¼¥à¤ÎÆâÍÆ¤òÅê¹Æ¤¹¤ë¥Ü¥¿¥ó -->
        <input type="submit" value="ÅÐÏ¿" />
        <!-- ñ¤Ê¤ë¥Ü¥¿¥ó¡§²¿¤é¤«¤Îµ¡Ç½¤ò»ý¤¿¤»¤¿¥Ü¥¿¥ó -->
        <input type="button" value="³Îǧ" />
        <!-- ¥ê¥»¥Ã¥È¥Ü¥¿¥ó¡§¥Õ¥©¡¼¥à¤ÎÆâÍÆ¤ò¥¯¥ê¥¢¤¹¤ë¥Ü¥¿¥ó -->
        <input type="reset" value="¥ê¥»¥Ã¥È"/>
        <!-- Èóɽ¼¨ÆþÎÏ¡§ÃͤòËä¤á¹þ¤ó¤ÇÁ÷¿®¤·¤¿¤¤¾ì¹ç¤Ë -->
        <input type="hidden" name="±£¤µ¤ì¤¿¥Ñ¥é¥á¡¼¥¿" value="±£¤µ¤ì¤¿ÃÍ"/>
    </form>
</body>
</html>

ɽ¼¨Îã

¥Õ¥¡¥¤¥ë¤¬Â¸ºß¤·¤Þ¤»¤ó¡£


 HTML¤ò½ñ¤¯¾å¤Ç¤Î¥¤¥ó¥¿¡¼¥Í¥Ã¥È¾å¤Î¾ðÊó¸»

ºÇ½ª¹¹¿·»þ´Ö¡§2007ǯ11·î15Æü 00»þ06ʬ32ÉÃ