HTMLファイルを実際に作ってみる

実際にテキストエディタのアトムを使用して、HTMLファイルを作成してみる。

アトムの新しいファイルを作成を選択。

<!DOCTYPE html>
<html lang=”ja”>
<head>
</head>
<body>
</body>
</html>

以上のように入力をする。

HTMLでは上のように、入れ子構造にすることが多くある。

この構造をわかりやすくするために、字下げをすることが多くある。

字下げのことを「インデント」と呼ぶこともある。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf8″>
<title>はじめてのHTML</title>
</head>
<body>
<p>こんにちは!</p>
</body>
</html>

ここまでを入力して保存する。

保存する際のファイル名は、半角英数字で、書くことが好ましい。

一般的にホームページで最初に表示されるファイル名がindex.htmlなので、「index.html」と入力して保存。

デスクトップの保存したファイルをブラウザにドラッグ&ドロップする。

するとブラウザに「こんにちは!」と表示され、サイトタイトルが「はじめてのHTML」になっていることを確認する。

そのページでソースを表示を右クリックから選択しソースを見ると、先ほど入力したHTMLが確認できる。

※safariではデフォルト状態だとソースの表示ボタンがないので注意、クロームで見ると確認できる。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする