HTMLファイルを作成してみよう
1.はじめに
1.HTMLファイルとは
「HTMLファイル」とは、ハイパーテキストマークアップ言語の略称でこれらのファイルは主にWebサイトの静的なページで実装しています。
HTMLは、これらのWebページのコンテンツに適したフォーマット属性および、レイアウト使用を統合するために使用することが可能です。ファイルの作成と編集で使用できるアプリケーションは多く存在します。
2.HTMLの書き方
1.基本となる記述
以下はHTMLの基本、「土台」となる記述です。どんなホームページを書く時でも使用します。
- 1.<!DOCTYPE html > <!-- このファイルはHTMLという宣言 -->
- 2.<html><!-- ここからHTMLが始まるというタグ -->
- 3.<head><!-- ここから裏の設定という宣言 -->
- 4.<meta charset="UTF-8"> <!-- 文字化け防止の記述 -->
- 5.
- 6.<title> !-- ページのタイトルを入れます -- </title>
- 7.</head> <!-- ここまでがうらの設定という宣言 -->
- 8.<body> <!-- ここからページに表示される内容という宣言 -->
- 9.<h1>大見出し</h1>
- 10.<p>文章</p>
- 11.</body> <>
- 12.<> <>
基本となるタグの解説
| ・タグ | ・解説 |
| <html> | <html>タグは、最初と終わりに記述することでその文章がHTMLの文章であることを示すタグになります。 |
| <head> | <head>タグは文章の情報を表に表示するものであり、ユーザーサイドからは見ることができません。 |
| <meta> | <meta>タグは、キーワードやメタディスクリプション等の関連情報を意味するタグになります |
| <title> | <title>タグはページのタイトルを意味しています。 |
| <link> | <linkl>タグは関連するファイルの読み込みを行うタグになります。 |
| <body> | <body>タグはユーザーサイドから見られる記事を作成するときに使用するタグになります。 |
| <div> | <div>タグは特定のグループをまとめるときに使用するタグになります。 |
| <h1~h6> | <h1~h6>タグは文章の見出しを表現するタグになります。数字が大きくなるにつれ、見出しの文字は小さくなります。 |
2.HTMLタグを記述するときの注意点
- 1.構造を理解しておく
- 2.第三者から見ても分かりやすく記述する
HTMLのタグの記述をする場合、その構造を理解しておかないと、正しく表示されない場合があります。
もっとも分かりやすいもので終了タグの「記述漏れ」です。終了タグはスラッシュ(/)が入ったタグを指します。これが無ければ記述した開始タグがどこまでを指定しているのかパソコン側が理解せず、正しく表示されません。
HTMLタグは、第三者が見ても分かるように、分かりやすく記述する必要があります。
記述したHTMLが自分が見て分かるものなら問題はありませんが、これが仕事としてHTMLを作成する場合、第三者目線で作成したHTMLを見ますので、誰が見ても分かりやすく記述する必要があります。仮に自分にしか分からないようなHTMLを記述してしまった場合、後の作業者の作業遅延の支障をきたす恐れがあります。そのような事態にならないためにも、誰が見ても分かりやすくタグを整理して記述する必要があります。もしくは「//コメント」を記述しておくことも1つの手段です。
3.HTMLファイルの作成
「HTMLファイル」を作成するには、テキストエディタの拡張子を「..html」に書き換えて保存すれば完了です。たとえば、WindowsPCを使用している場合、多くの方が「メモ帳」あるいは「サクラエディタ」などのテキストエディタを使用します。HTMLの型に沿って記述したファイルを[保存][名前を付けて保存]を選択し、[sample.txt]の拡張[.txt]を[sample.html]に変更して保存すれば、ファイルをブラウザで読み込んだ時に、HTMLドキュメントとして認識してくれます。
また、Webサイトとなるファイルの名前は必ず「index.html」にする必要があります。理由とはブラウザがアドレス欄にURLを入力した時にサーバーが以下の動作を行うためです。
- 1.index.htmlを見つける。
- 2.index.htmlが見つからない場合、index.htmlを探す
- 3.index.htmlが見つからない場合、welcome.html(top.html)を探す
- 4.どのファイルも見つからなかった場合、ディレクトリの一覧を表示します。
サーバーの種類や設定によっては、違う動作を行いますが、基本的には上記の動作に従って「index.htmlファイル」を探し出します。
URLを入力してディレクトリ一覧を出さないためにも、必ずトップページを飾るファイル名は「index」にしましょう。
4.まとめ
今回は「HTML」の基本中の基本とHTMLファイルの作成のやり方についてご紹介致しました。「HTML」のタグの数は100種類以上存在します。入門したての方は覚える段階で挫折してしまうかもしれません。しかし、基本となる土台とタグの意味をしっかりと理解していけば、オリジナルのWebサイトを作成することができます。まずは基本から忠実にしていき、徐々に応用を重ねていきましょう。