HTMLを書けるようになっておいて損はないので、学んでみます。
目次
基本構造
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<p>text</p>
</body>
</html>代表的なパーツ
WordPress上でhtmlブロックを利用できるようなので、実際に結果を反映させてみます。
見出し
見出しは構造がおかしくなるので、htmlブロックは使用しません。
<!--header-->
<h1>Header1</h1>
<!--text-->
<p>Sample text 1</p>
<h2>Header2</h2>
<p>Sample text 2</p>リスト
<!--ordered list-->
<ol>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ol>
<!--unordered list-->
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>- content1
- content2
- content3
- content1
- content2
- content3
div
<!--division-->
<div class = "group1">
<h1>Group1</h1>
<p>G1 content</p>
<p>this is <span>the maint content </span>of Group 1.</p>
</div>Group1
G1 content
this is the maint content of Group 1.
画像
<!--Image-->
<img src="sample.png" alt="png not found.">リンク
<!--link-->
<a href="samplelink.html">link to sample html </a>テーブル
<!--table-->
<table border="1">
<thread>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thread>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
| col1 | col2 | col3 |
|---|---|---|
| one | two | three |
| 1 | 2 | 3 |
フォーム
<!--Form-->
<form>
<h1>Log In</h1>
<h2>Input data.</h2>
<p>enter text</p>
<input type="text" name ="" value="default">
<p>enter email</p>
<input type="email" name ="" value="a@gmail.com">
<p>submit button</p>
<input type="submit" name ="" value="Submit">
<p>enter password</p>
<input type="password" name ="" value="">
</form>
<!--Form + action-->
<form action="https://japbros-poco.main.jp/" method="get">
<p>Enter text:</p>
<input type="text" name ="" value="">
<input type="submit" name ="" value="Submit">
</form>選択ボタン
<p>Form</p>
<p><b>Is it true?</b></p>
<form method="get">
<label for="true">True</label>
<input id = "true" type="radio" name = "loc">
<label for="false">False</label>
<input id = "false" type="radio" name = "loc">
</form>Form
Is it true?
プルダウン
<p>Pulldown menu</p>
<select name="nums" id="">
<option value="value1">a</option>
<option value="value2">b</option>
<option value="value3">c</option>
</select>
<input type="submit" value="Submit">Pulldown menu
入力エリア
<p>Text area</p>
<textarea name="mytext" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit">Text area
