【初級トレ】簡単なHTMLページを作ってみよう

HTML

まずは簡単なHTMLページを作ってみましょう。準備するのはテキストエディタのみで大丈夫です。説明ではMACアプリのCotEditorを使用しています。ローカルサーバーアプリは使用してもしなくても大丈夫です。サーバーが無くても動くようにトレーニングを進めます。

HTMLとはなんぞ？という方は下記のページを一度読んでみてください。

HTMLとは

サイト制作を勉強する前に知ってほしいこと

HTMLファイルを作成

保存フォルダを作成

まずは作業用のフォルダを任意の場所に作ってください。ここではフォルダ名を「HTML」とします。今後はこのHTMLフォルダの中にあらゆるファイルを作っていきます。

テキストエディタで新規作成

ファイル名を「index.html」にして先程作ったフォルダの中に保存しましょう。文字コードはUTF-8（BOM無し）にします。UTF-8の横にBOMと書いてなければBOM無しです。また、改行コードはLFで書いていますが何でも良いです。MACなので初期がLFになっています。JAVAとか使ってると改行コードが問題になったりしますがHTMLは何でもいいです。

このindex.htmlはフォルダ内で最も優先的に表示されるファイルになります。サーバーへ実際にアップロードしhttps://examle.com/などドメインでアクセスするとこのindex.htmlファイルが表示されます。WEBサイトのトップページは必ずindex.拡張子になります。

HTMLの基礎組を記述しよう

先程作成したHTMLファイルにそのまま下記のタグを記述してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
  </head>
  <body>
    <!--  ▼ここからHTMLタグを記述▼ -->
     
    <!--  ▲HTMLタグはここまで▲ -->
  </body>
</html>

これがHTMLファイルの最低限の記述になります。と書いてある箇所はコメントアウトと言ってブラウザ上に表示されないメモ書きになります。そのコメントで指定している範囲にブラウザに表示させたいテキストを書いていきます。

HTMLファイルを編集してみよう

まずは<title>ページタイトル</title>と書かれている部分を編集して<title>練習用サイト</title>へ変更してください。

これでWEBサイトのタイトルを設定したことになります。この<title>タグに書かれた文字がブックマーク時の名前や検索結果に表示されるタイトルになります。

次はとコメントで指定している範囲にHTMLタグとテキストを記述してみましょう。今回は簡単な<h1>見出しタグと<p>文章タグの2つを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>練習用サイト</title>
  </head>
  <body>
    <!--  ▼ここからHTMLタグを記述▼ -->
	<h1>練習用サイトを作ります</h1>
	<p>このページは初めて作るシンプルなHTMLファイルです。</p>
    <!--  ▲HTMLタグはここまで▲ -->
  </body>
</html>

テキスト内容は好きに書いてもらって構いません。これで初めてのHTMLページの作成は終わりです。