HTML
bタグは、囲んだ文字列を太字にする。<b> - 太字 - とほほのWWW入門 文字の表示Normalという文字列の後のBoldのところだけbタグで囲むと、 Boldだけ太字になっている。Boldだけ太字になっている。Sample/html/b/b/src/b at master · bg1bgst333/Sample · GitHub</b>
enctype属性を指定しない場合は、デフォルトで"application/x-www-form-urlencoded"になる。HTMLタグ/フォームタグ/送信時のデータ形式を指定する - TAG indexform.htmlで、 <html> <head> <title>form#enctype#application/x-www-form-urlencoded</title> </head> <body> <script type="text/javascript"> <!-- // --> </script> </body></html>
multipart/form-dataは、その名の通り、複数のパートに分けられているので、ファイル以外にテキストなどのデータも送れる。<form> - フォーム - とほほのWWW入門form.htmlで、前後にテキスト入力フォームを挟むと、 こうなる。そして既にファイルも選択しておく。</form>…
ファイルを送信する場合は、enctype属性で"multipart/form-data"を指定しないといけない。HTMLタグ/フォームタグ/送信時のデータ形式を指定する - TAG indexform.htmlで、として、 最初はこの状態最初はこの状態。 "ファイルを選択"ボタンをクリックし、 前…
inputタグのtype属性に"file"を指定すると、ファイルを選択できる。<input> - フォーム部品：入力欄 - とほほのWWW入門input.htmlで、このように"type=file"と"type=submit"を組み合わせると、ファイルをアップロードできるらしい。 「ファイルを選択」を押すと「フ…
method属性がPOSTだと、URLにクエリ文字列は付かず、リクエストボディにクエリ文字列が書き込まれる。<form> - フォーム - とほほのWWW入門form.htmlで、とすると、 最初この状態でsubmitを押すと最初この状態でsubmitを押すと、 query_stringのほうが空なのに対し</form>…
method属性でGETの時には、inputタグのname属性がキー、value属性が値となり、クエリ文字列として渡される。<form> - フォーム - とほほのWWW入門form.htmlで、こう書く。 action.cは、クエリ文字列は環境変数で取得、リクエストボディは標準入力で読み込む。 この</form>…
method属性でリクエストメソッドを変えられる。<form> - フォーム - とほほのWWW入門form.htmlで、 <html> <head> <title>form#method</title> </head> <body> <script type="text/javascript"> <!-- // --> </script> <form action="/cgi-bin/action.cgi"> <input type="submit" value="submit"> </form> </body> </html> 何も指定してないと、 submitボタンを押した時submit…</form>
前回CGIのURLと書いてしまったが、action属性は、正確にはリクエストの送り先ページのURLなので、PHPでも可能。<form> - フォーム - とほほのWWW入門form.htmlを、こうして、action.phpを、こうすると、 この状態でsubmitを押すとこの状態でsubmitを押すと、 actio</form>…
inputタグのtype属性で"submit"にした場合、formタグで囲み、action属性にCGIのURLを指定することで、CGIを実行できる。<form> - フォーム - とほほのWWW入門form.htmlは、formのactionに実行するCGIのURLを指定。 このaction.cgiは、こういう内容。 最初こうだけ</form>…
type属性で"submit"を選んだ場合は、『実行ボタン』という特殊なボタンになる。<input> - フォーム部品：入力欄 - とほほのWWW入門とはいっても、このボタンだけでは、 この状態からsubmitを押してもこの状態からsubmitを押しても、 何も起きない何も起きない。Samp…
type属性で"button"を選んだ場合は、ボタンになる。 この時、valueはボタンのラベルテキストになる。<input> - フォーム部品：入力欄 - とほほのWWW入門ON/OFFを切り替えるトグルボタンを作ってみる。こうすると、 最初この状態最初この"OFF"の状態。 ボタンを押す…
type属性で"text"を選んだ場合は、テキスト入力が出来る。<input> - フォーム部品：入力欄 - とほほのWWW入門JavaScriptでvalueの取得はやったけど、valueの代入はしてないからしてみる。 <html> <head> <title>input#type#text</title> </head> <body> <script type="text/javascript"> </body></html>
name属性はid属性と違い、重複しても大丈夫。name=name - 名前指定 - とほほのWWW入門idをnameにしてみる。こうすると、 デベロッパーツールでも警告は出ないデベロッパーツールでも警告は出ない。Sample/html/input/name/src/input at master · bg1bgst333/…
id属性は一意に識別すると書いたが、もし異なるタグでidが同じならエラーになるのか。試してみる。id=id - IDの割り当て - とほほのWWW入門2つのinputタグでidを同じにする。これでアクセスすると、 普通に表示される普通に表示される。 button1を押しても、…
inputタグでtypeをbuttonにした場合、onclickでJavaScriptの1行スクリプトや関数を指定すると、それをクリック時に実行する。グローバル属性 - とほほのWWW入門グローバル属性なので、inputのtypeがbuttonでなくても出来る場合もあるが、まあinputのtypeがbu…
value属性で初期値を設定できる。<input> - フォーム部品：入力欄 - とほほのWWW入門このようにvalueに"abcde"を指定すれば、 初めからセットされてる初めからセットされてる。Sample/html/input/value/src/input at master · bg1bgst333/Sample · GitHub
type属性で入力の種類を変えられる。<input> - フォーム部品：入力欄 - とほほのWWW入門typeをbuttonにすれば、ボタン形式になる。 ボタンも入力と言えば入力だ。とすると、 エディットコントロールの下にボタンが表示される。エディットコントロールの下にボタンが…
入力フォームにはinputタグを使う。<input> - フォーム部品：入力欄 - とほほのWWW入門エディットコントロール形式にするなら、typeにはtextを指定。 これだけで、 エディットコントロールが表示されてエディットコントロールが表示されて、 文字列を入力できる文字…
これまで、コンテンツのメニューとか、ulタグとliタグでやっていたけど、もともとmenuタグというのがあるらしい。<menu> - メニュー - とほほのWWW入門ulじゃなくてmenuでliを囲む。こうする。 見た目は変わってないように見える見た目は変わってないように見える</menu>…
テキストに色を付けたいが、body#textだと全体的に同じ色になるので、divごとに細かなスタイル指定をする。<div> - ブロック要素 - とほほのWWW入門スタイル指定はいろいろ方法があるけど、divタグなどのタグに直接書く場合はstyle属性。divごとにstyle="color:～</div>…
align属性でブロックを右に寄せたり中央に寄せたり左に寄せたりする。<div> - ブロック要素 - とほほのWWW入門div.htmlを、こう書く。 1つ目は右寄せ、2つ目は中央寄せ、3つ目は左寄せ。 こうなるこうなる。Sample/div.html at master · bg1bgst333/Sample · GitH</div>…
箇条書きのアイテムはliタグで囲む。<li> - リストアイテム - とほほのWWW入門前回のulのアイテムを3つに増やす。と書くと、 アイテムが3つになる。アイテムが3つになる。Sample/html/li/li/src/li at master · bg1bgst333/Sample · GitHub</li>
ulタグは順序の無いリストを表現する。<ul> - 順序無しリスト - とほほのWWW入門中黒点みたいなので箇条書きの形式。と書くと、 こうなるこうなる。Sample/html/ul/ul/src/ul at master · bg1bgst333/Sample · GitHub</ul>
metaタグは、いろいろなメタ情報を付加する。<meta> - メタ - とほほのWWW入門よく見かけるのは、Content-typeとcharsetの部分。 <html> <head> <title>meta</title> </head> <body> あいうえお </body> </html> まず、これを、 UTF-8で保存UTF-8で保存。 当然、文字化けはせず、表示できる。当然、文字化けはせず、表示で</meta>…
divタグは、文章をブロック要素としてまとめる。<div> - ブロック要素 - とほほのWWW入門 <DIV>^OÆ<P>^Opタグとの違いがちょっと難しい。こう書いた時、 1行分空かない表面的には、1行分空かないぐらいの違いしかない。 他にも違いはいろいろあるのだが、なんともわかりに</p></div></div>…
pタグは段落を表す。<p> - 段落 - とほほのWWW入門1つの<p>～</p>で1行を表すような感じ。とすると、 こうなるこうなる。 <p>～</p>と<p>～</p>の間は1行分空いている。 基本的に改行だけなら空白に置き換わるので、表示時には改行されずに半角1文字空く。 (ただ、1行で表示しきれな</p>…
imgタグで画像を表示する。<img> - イメージ - とほほのWWW入門あらかじめ画像image1.pngを用意しておいて、こう書いて、 $ vi img.html $ cat img.html <html> <head> <title>img</title> </head> <body> <img src="image1.png" /> </body> </html> $ ls image1.png img.html $ cp img.html image1.png /var/www/html/ $/var/www/htmlに配置。 表…
aタグでハイパーリンクを張る。<a> - リンクする - とほほのWWW入門href属性にURL、タグの中の値はリンクとなるテキスト。こう書くと、 このように表示されて、マウスオーバーでリンク先もわかる。このように表示されて、マウスオーバーでリンク先もわかる。 リ</a>…
は、正式にはHTMLタグではないらしい。 ドキュメントタイプ宣言というもので、HTMLのバージョンを表している。 - ドキュメントタイプ - とほほのWWW入門まず、 $ vi DOCTYPE.html $ cat DOCTYPE.html <html> <head> <title>!DOCTYPE</title> </head> <body> !DOCTYPE </body> </html> $ 何も付けない。 IE11の開発者…
