サイトを表示してみよう

前の記事で必要なツールは揃えましたか？
揃ったら、まずは簡単な文章をブラウザに表示してみましょう。

サクラエディタでコードを書こう

まずはサクラエディタを開いて、文章を入力します。この元になる文章のことをコードと呼びます。
今回はサンプルとしてコードをコピーするだけなので、気構えせず気軽に試してみてください。
次の記事で一つ一つ丁寧に説明します。

それでは、以下の文章をすべてコピーしてサクラエディタに貼り付けてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>サイトのタイトルです。</title>
 <meta name="description" content="サイトの概要説明です。" />
 <meta name="keywords" content="サンプル,sample,サンプルサイト" />
 <meta name="author" content="ぶーにゃん" />
 <meta name="copyright" content="copyright &copy; サイト名" />
 <link rel="stylesheet" type="text/css" href="css/import.css" media="screen,projection,tv" />
 <link rel="contents" href="index.html" title="ホーム" />
 <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="header">
  <h1>大見出し</h1>
</div>
<div id="container">
  <h2>中見出し</h2>
  <p>中見出しの中の解説です。</p>
</div><!--container [end] -->
</body>
</html>

ここまで貼り付けたら、これをファイルとして保存します。

「ファイル」から「名前を付けて保存」を選択し、「ファイルの種類」を「すべてのファイル」にしてください。
「文字コードセット」を「UTF-8」にして、ファイル名を「test.html」として保存してください。