前の記事で必要なツールは揃えましたか?
揃ったら、まずは簡単な文章をブラウザに表示してみましょう。
サクラエディタでコードを書こう
まずはサクラエディタを開いて、文章を入力します。この元になる文章のことをコードと呼びます。
今回はサンプルとしてコードをコピーするだけなので、気構えせず気軽に試してみてください。
次の記事で一つ一つ丁寧に説明します。
それでは、以下の文章をすべてコピーしてサクラエディタに貼り付けてください。
<!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 © サイト名" />
<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」として保存してください。
さっそくサイトを表示してみよう
これでサイトを表示するためのソースは完成です。
できた「test.html」をダブルクリックして開いてみてください。
簡素ですが、ちゃんとページが表示できることが確認できると思います。
HTMLってなに?
さて、サイトを作りたいと思ったときにHTMLという単語を聞いたことがあるかもしれません。
HTMLとは、サイトを表示するためにブラウザに対して「こういう風に表示してくださいね」と指示を出すファイルのことです。
この指示を出すファイル(HTML)の中身はメモ帳でも簡単に書けるものです。