1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

【HTML入門】HTMLファイルの作り方とタグの書き方

Pocket

Webサイトを作るには、HTMLファイルを作ります。ここでは、HTMLファイルの作り方をご紹介します。

HTMLとは

HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。一般的なWebサイトはHTMLで作られています。

ハイパーテキストとは、ハイパーリンクを含む文書です。Webサイトで、他のページやWebサイトに移動するリンク部分をハイパーリンクと言います。

マークアップとは、見出しや引用などの文書の要素にタグをつけて文書の構造を規定することです。HTMLでは通常のテキストファイルをマークアップして作成します。

HTMLファイルの作成には何が必要?

HTMLの作成には、特別なソフトウェアは要りません。
インターネットに接続した環境とIEやChromeなどのブラウザに、メモ帳などのテキストエディタがあれば作成できます。
Webサイトとして公開するのなら、レンタルサーバーなどが必要です。
必要な費用はインターネットに接続した環境とレンタルサーバー代だけです。

HTMLファイルはテキストエディタで作成する

HTMLファイルは、テキストエディタで作成します。テキストエディタでは通常テキスト形式(xxx.txt)でファイルを保存しますが、ファイルをHTML形式(xxx.html)で保存するとHTMLファイルになります。

このHTMLファイルをIEやChromeなどのブラウザで開くと、画像や見出しの入ったWebサイトとして表示されます。

サンプルのHTML

上のコードをブラウザで表示すると、下のWebサイトとして見えます。

タグの書き方

特定の部分をタグでマークアップすることで、タイトルや見出しなどの特別な意味を規定し、全体の構造を規定します。

タグは基本的に開始タグ< …>と終了タグ</…>をセットで使用し、2つのタグの間に挟まれた内容の要素を規定します。同時に属性を規定することもあります。
たとえば<h2>タグの書き方</h2>と書くと「タグの書き方」という文字が大見出しに規定されます。

タグそのものはブラウザでは表示されませんが、規定した内容の構造を規定することで、ブラウザ上での見え方も規定します。

タグは入れ子構造になっている

開始タグと終了タグの間には、別のタグを何段でも入れることができます。

例)

  

ハイパーリンクの内容

ハイパーリンクは、テキストの中にリンク先を指定します。リンク先は別のWebサイトだけでなく、同じWebサイト内の別なページや画像ファイル、音楽ファイルなどを指定することができます。

別なWebサイトを指定すればそこに飛ぶことができます。画像や音楽ファイルなどを指定すれば、自分のWebサイトの中で画像を表示したり音楽を再生したりすることができます。

注意点

HTMLファイルには書き方に細かい規定があります。これを守らないと正確にマークアップできず、ブラウザ上の表示も崩れます。

タグは半角で記述する

タグは半角英数字で正確に記述します。全角のスペースや記号は気づきにくいので注意してください。
タグは大文字でも小文字でもかまいません。ただしXHTMLでは大文字と小文字が区別されます。

ファイル名に使える文字

HTML文書のファイル名や格納するフォルダ名は半角英数字と-(ハイフン)と _(アンダーバー)で記述します。他の記号やスペース、全角文字は使えません。大文字と小文字も区別されます。

HTMLファイルには.htmまたは.htmlの拡張子をつけますが、Windowsでは初期設定では拡張子が表示されないので、注意してください。

トップページのファイル名は「index.html」に決まっています。Webサイトにはindex.html と言う名前のファイルが必ず1つ必要です。

日本語の使い方

日本語はタグには使えませんが、内容にはもちろん使えます。半角英数字も使えますが、半角カタカナは使えません。文字化けの原因になることがあります。

文字コードが選べる場合は、シフトJIS(Shift_JIS)かANSI を使用します。

タグの入れ子構造

タグは何重にも入れ子構造にすることができます。ただし入れ子構造をまたぐことはできません。

例)

更新とリロード

内容を更新したいときには、テキストエディタでHTMLファイルを修正したあと、保存してからブラウザをリロードします。保存前では修正の内容が反映されません。

テキストエディタについては無料で使える! 初心者にオススメのフリーテキストエディタ8選も参考にしてください。

【おすすめ記事】

【HTML入門】テーブルやセルの大きさを指定するには
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】余白の取り方(paddingとmargin)について

投稿者:プロスタ編集部

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

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る