準備
単純にHTMLを用いてページを表示するだけなら、パソコンだけあれば問題ありません。特別な設定も必要なく、強いて言えばHTMLのコードを書くソフトをパソコンの中に用意します。それはメモ帳でも構いませんが、機能的にもっと書きやすいソフトを入れれば作業も捗ります。私はAtomというテキストエディタをオススメします。無料ですがプラグインも豊富で書いたコードが読みやすいといった利点もあります。もし何もエディタを特に入れてない場合は私のおすすめのatomをインストールしましょう。
簡単なHTML文書を作成
文章ばかり読んで概要を理解したところで何も面白くありません。実際に作成して理解を深めていきましょう。その１歩目として概要で学んだことも含めて簡単にページを作りましょう。もう既にHTML文書として最低限必要な要素がわかっていると思いますのでまず下記のようにコードを書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>何も中身の無い、ただHTML5を使用しますと宣言した文書が出来上がりました。前記事の復習です。
DOCTYPE宣言でHTML5を宣言し、html要素で日本語を指定いている以外、head要素もbody要素も空の状態ですね。
絶対書かなければならない要素を含め、少し中身を付け加えましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>初めてのHTML</title>
<meta charaset="utf-8">
<meta name="description" content="これは初めてのHTMLです">
</head>
<body>
<p>表示されましたか？</p>
</body>
</html>新しい要素が増えましたね。これらが記述できたら名前を付けて保存します。拡張子を.htmlとするのを忘れずに。
それでは上から見ていきます。
<title>
このtitle要素は、文書のタイトルになります。Googleで検索した時に表示されるページのタイトルや、ブラウザのタブに表示されているタイトルになります。HTMLやwebページを学んでいくに連れて出てくるSEO対策にもなるので、適切なタイトルを指定しましょう。
<meta>
meta要素は文字コードやページの概要、検索のためのキーワードなどの情報を記述する要素です。３行追加したのでそれぞれ見ましょう。
<meta charaset="utf-8">utf-8と書いてあるのでお気づきの方もいると思いますが、これは文字コードを指定するmeta情報です。メモ帳などで名前を付けて保存する時文字コードを指定する場所をご存知ですか？その文字コードをこのmeta要素で指定しています。
<meta name="description" content="これは初めてのHTMLです">文字コードと違ってnameやらcontentが出てきましたね。nameで何のmeta情報か、contentでその内容を記述しています。
この行はname=”description”でページの概要ですよと指定しています。
表示してみる
では作成した文書を開いてみましょう。保存してあるフォルダを開き、ダブルクリックなどで開いてみてください。
表示されましたか？という文章だけ表示されましたでしょうか。他に文字が表示されている場合は要素の記述ミスなどがあるので探して修正してください。
文章が素っ気なく表示されましたね。表示する内容については<p></p>で囲んだだけですので文字が単に表示されるだけです。
あなたがいつも見ているwebページは中身を充実させるために様々な要素や画像、CSSという見た目を指定するための言語、javascriptなどのプログラミングを使用しているのです。
一歩一歩HTMLから学んでいき、あなたの想い描くオリジナルのwebページを作っていきましょう。
この章のまとめ
- 自分にあったテキストエディタをインストールして作業を捗らせよう
- テキストエディタでHTMLを記述し、保存する時も拡張子をhtmlにしよう
- head要素の中に必要なmeta要素を記述して、文書情報を設定しよう
- ただhtml文書をフォルダから開けばブラウザに表示される
コメント