HTMLの作り方


HTMLエディタ

 HTMLを作成するための専用ツールもありますが、ワープロソフトでも作れますし、Google Docs などでも作れます。因みにこのHTMLは秀丸で作っています。秀丸は汎用のテキストエディタなので、HTML専用ツールのようにHTML作成に向いているわけではありませんが、HTMLの学習やタグやスタイルシートを使いこなすためにはテキストエディタがいいですね。

 秀丸は有料なので無料のテキストエディタだったら、サクラエディタがお勧めです。無料でも秀丸並みに高機能です。

 秀丸だと長文のHTMLを作るとき、HTML注釈をツリー表示してくれるので便利です。Windows付属のメモ帳もテキストエディタの一種ですが、文字コードがシフトJISだけしか対応していないので、お勧めできません。

秀丸
秀丸のHTML注釈ツリー表示例

HTMLの書き方

 HTMLはテキストファイルなのでテキストエディタで作れます。その場合、下の図のような形式になります。1行目のDOCTYPEは、HTML5のものです。他の形式(HTML 4.01 や XHTML 1.0など) で作る場合は、変更します。

HTML5
HTML 5.0 の骨格

下に具体的なHTML 5.0 のテンプレートを示します。<-- .... -->HTMLのコメントです。これは画面には表示されず無視されます。

<!DOCTYPE html>
<html>

<!-- HTMLメタ情報、スクリプト、スタイルなど -->
<head>
 <meta charset="utf-8" />
 <title>表題</title>
 <link rel="stylesheet" href="../../default.css" />
 <style>

 </style>
</head>



<!-- HTML本体 -->
<body>
<!-- 表題 -->
<header>
<h1>表題</h1>
<div class="menu"><img src="../../img/cabin.png"> <a href="../../index.html">ホーム</a></div>
</header>
<br />

<!-- 内容 -->
<article>

</article>
<p style="clear:both;"> </p>

<!-- 脚注 -->
<footer>
<div style="padding: 5px;text-align: center;">
投稿日 20xx/mm/dd  投稿者 軟学
</div>
</footer>

<!-- HTML本体終わり -->
<!-- 最下行がウィンドウの近くに表示されると見づらいので、空行を入れておく。-->
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

 

ページの先頭へ戻る