主なHTML

1. 見出し
<h1>∼</h1>
<h2>∼</h2>
<h3>∼</h3>
<h4>∼</h4>
<h5>∼</h5>
<h6>∼</h6>

2. 段落
<p>∼</p>

3. 改行
<br>

4. 箇条書きリスト
<ul>
<li>∼</li>
<li>∼</li>
<li>∼</li>
</ul>

5. 番号リスト
<ol>
<li>∼</li>
<li>∼</li>
<li>∼</li>
</ol>

6. 画像
<img src= ① △alt= ② △width= ③ △height= ④ >
①ファイル名（画像ファイルのパス）
②代替文字列（画像が表示されなかった時に表示されるテキスト）
③幅・・・単位は無し
④高さ・・・単位は無し
△・・・半角の空白
<img src=“images/cat.jpg” alt=“写真：猫” widch=“250” height=“100”>
△
属性

7. 画像
<img src= ① △alt= ② △width= ③ △height= ④ >
①ファイル名（画像ファイルのパス）
②代替文字列（画像が表示されなかった時に表示されるテキスト）
③幅・・・単位は無し
④高さ・・・単位は無し
△・・・半角の空白
<img src=“images/cat.jpg” alt=“写真：猫” widch=“250” height=“100”>
△

8. リンク
<a href= ① >∼</a>
①・ファイル名
・URL
<a href=“index.html”>トップページ</a>
<a href=“h?p://www.oic-ok.ac.jp/”>OICへのリンク</a>
属性

9. bloom
index.htmlで
<img src=“???????”>
CSS
style.css
index.html
img2.jpg
相対パス

10. index.htmlで
<img src=“img2.jpg”>
相対パス
bloom
CSS
style.css
index.html
img2.jpg

11. CSS
style.css
images
img1.jpg
index.html
index.htmlで
<img src=“???????”>
相対パス
bloom

12. index.htmlで
<img src=“images/img1.jpg”>
相対パス
CSS
style.css
images
img1.jpg
index.html
bloom

13. index.htmlで
<img src=“??????”>
相対パス
CSS
style.css
images
img1.jpg
aaa
index.html
bloom

14. index.htmlで
CSS
style.css
images
img1.jpg
aaa
index.html
<img src=“../images/img1.jpg”>
相対パス
1つ上のフォルダ
bloom

15. <img src=“../images/img1.jpg”>
相対パス
1つ上のフォルダへは../で
２つ上のフォルダへは../../で
下のフォルダへは/で

16. <header>∼</header> ヘッダー
<footer>∼</footer> フッター
<nav>∼</nav> ナビゲーション
<section>∼</section> 意味のある区切り
<article>∼</article> 独立した記事
<aside>∼</aside> 補足的な情報
<div>∼</div> 特に意味のない区切り

17. 特定の文字範囲
<span>∼</span>

18. table（表）
<table>∼</table> 表の範囲
<tr>∼</tr> 表内の行（横）
<td>∼</td> 各行のセル（一つ一つ）
<td> <td> <td> <td>
<td> <td> <td> <td>
<td> <td> <td> <td>
<table>
</table>
<tr>
<tr>
<tr>

19. お問い合わせフォーム
<form>∼</form>

20. お問い合わせフォーム
<form>∼</form>
<form>
<input type= text name= name >
</form>
<form>
<textarea name= comment >∼</textarea>
</form>
長い文章
1行

21. お問い合わせフォーム
<form>∼</form>
<form>
<input type= text name= name >
</form>
1行
<form>
<input type= email name= email >
</form>
1行

22. お問い合わせフォーム
<form>∼</form>
<form>
<input type= text name= name >
</form>
1行
<form>
<input type= submit value= 送信する >
</form>
1行