HP

htmlのよく使う基本的なもの

投稿日:2019年11月21日 更新日:

ブログ立ち上げ時によく使うものを集めてみました。

HTMLの基本色見本

HTMLの基本的な色見本です。

コード 基本色見本
<font color="red">赤</font>
<font color="blue">青</font>
<font color="Orangered">オレンジ</font> オレンジ
<font color="yellow">黄</font>
<font color="green">緑</font>
<font color="black">黒</font>
<font color="white">白</font>
<font color="silver">灰</font>

HTMLタグ

サイト立ち上げ時に、よく使うタグです。



コード 意味
<br> 改行
<a href="kanedaraku.html" target="_blank">リンク</a> 新しいタブでリンクを開く
<img src="./image/kanedaraku.jpg" border="0"> 画像表示
<font size="5">font size5</font> 文字サイズは1~7で指定

特殊文字コード



コード 文字 読み方
&lt; < 小なり
&gt; > 大なり
&amp; & アンド
&emsp; 全角スペース

テーブルの基本的なカタチ

シンプルなテーブルの例です。

<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>1</th>
<td>2</td>
</tr>
<tr>
<th>3</th>
<td>4</td>
</tr>
</tbody>
</table>

ちなみに、
セル2つを縦に結合したいときは「<td rowspan=2>」を使います。

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>

コメントアウト

コメントアウトは意外とわからなくなりますので、まとめてみました。

スポンサーリンク

HTMLの場合

<!-- ここにHTMLのコメントを書きます -->

cssの場合

/*  ここにCSSの複数行コメントを書きます */

JavaScirptの場合

// ここにPHPの1行コメントを書きます

/*  ここにPHPの複数行コメントを書きます */

PHPの場合

// ここにPHPの1行コメントを書きます

/*  ここにPHPの複数行コメントを書きます */

Pythonの場合

# ここにPythonの1行コメントを書きます

基本的なフォームのコード

スポンサーリンク

テキストボックスの例

<input style="width: 100px;" name="textbox" type="text" />

 ↓ 
実行例:

テキストエリアの例

<textarea name="textarea" rows="3" cols="10"> テキストエリア
</textarea>

 ↓ 
実行例:

PHPの計算プログラム例

PHPの掛け算プログラムです。ワードプレスでは投稿記事でPHPを使用できませんのでショートコードで読み込んで使います。

<?php

$siki1 = $_REQUEST['name1'];
$siki2 = $_REQUEST['name2'];
$kotae = $siki1 * $siki2;

?>
<html>
<form action="https://kanedaraku.net/・・・・・・・・・・.php" method="post">
<br>
<br>
<input pattern="^[0-9]+$" placeholder='半角数字で入力' type="text" name="name1" value="<?php echo $siki1; ?>"> ×
<input pattern="^[0-9]+$" placeholder='半角数字で入力' type="text" name="name2" value="<?php echo $siki2; ?>"> =
<?php echo $kotae; ?><br>
<br>
&emsp;<input type="submit" name="keisan" value="計算">
<br>
</form>

 ↓
実行例

javascript の計算プログラム例

<script type="text/javascript">
<!-- 
function keisan() {
  var a = parseFloat(document.form1.a1.value);
  var b = parseFloat(document.form1.b1.value);
  var c=a*b;
  document.form1.c1.value =c;}
// -->
</script>

<form name="form1">
<input style="width: 80px;" name="a1" type="text" /> × <input style="width: 80px;" name="b1" type="text" />
<input style="width: 50px;" type="button" value="=" onclick="keisan()"/><output style="width: 50px;" name="c1">0</output>
</form>

 ↓
実行例(半角数字でないと動作しません。)

×
0

-HP

Copyright© 画楽 , 2021 All Rights Reserved Powered by STINGER.