今回は、実際にHTMLを書いてみましょう。
簡単なWEBページを作る体験をしてみましょう。
エディターの操作確認も込めて、
HTMLでwebページを作る体験をする事が目的になります。
細かいことは、後々学ぶので安心してください。
webページを作ってみよう
↑↑上記のようなものを作って表示していきます。
すごくシンプルで簡単そうだけど、
HTMLで書くとこんな感じになります。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>これがWEBページを作るための、HTMLです。</p>
</body>
</html>意外と複雑に見えますよね。
でも、
すぐにこのコードがシンプルなものに感じるようになるので、安心してください。
手順の紹介
全体の流れはこんな感じになります。
- エディターを開く
- 新規ファイルを作る
- 名前を「index.html」にして保存する
- コードをコピーして貼り付ける
１、エディターを開こう
まずは、自分のエディターを開きましょう。
エディターをインストールしていない方は、上記の記事で紹介しているので
参考にしながらインストールしてください。
もし、ぼくの解説が分かりにくかったら
侍エンジニアブログでも詳しく解説してくれているので参考にしてみてください。
２、新規ファイルを作る
左上の「ファイル」から「新規ファイル」を作ります。
ファイルを作れたら、まず保存をしましょう。
3、名前を「index.html」にして保存する
「ファイル」から「名前を付けて保存」します。
ファイル名を「index.html」と変更して保存してください。
今回は、デスクトップに保存しました。
ファイル名が「index.html」に変わりました。
デスクトップに「index.html」が作られました。
試しに開いてみてください。
webとして開かれるけど
何も映らない状態だと思います。
これは、webページとして存在するけど、中身がない状態になっています。
４、コードをコピーして貼り付ける
エディターに戻って、HTMLコードをコピーしましょう。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>これがWEBページを作るための、HTMLです。</p>
</body>
</html>これをコピーして、エディターに貼り付けてください。
最後に「ファイル」から「保存」をしてください。
そして、もう1度デスクトップから「index.html」を開いてみてください。
上記のように表示されたら成功です。
まとめ
今回はエディターの操作確認も込めて
シンプルなwebページを作ってみました。
コードのことについて疑問だらけだと思いますが
その点は、次回から解説していきますので、安心してください。
今回のポイント
- エディターを開く
- 新規ファイルを作る
- 名前を「index.html」にして保存する
上記の３点で、webページを作る準備が整います。
このファイルに、HTMLを書くことで、webページを作ることができます。
ファイル名を「index.html」とするのは、
サイトのトップページの名前として一般的に使われるものだからです。
今は、「へ―そうなんだ」ってかんじでOKです。