ホームページの作り方

ホームページはHTMLでできている

ホームページは基本的にHTML(エイチティーエムエル)というマークアップ言語と呼ばれるもので作られています。

HTMLにはHTMLタグという識別タグがあり、これによってホームページのタイトルや文章・画像の配置場所、どのURLにリンクするかなど細かに設定することができます。

このHTMLタグを使ってHTMLファイルを作成し、インターネット上で見られるようにしたものが、皆さんがご存知のホームページ(Webサイト)になります。

HTMLファイルはHTMLエディタで作成しよう

HTMLファイルはWindowsやMacにもともと入っているメモ帳などのテキストエディタで作ることができます。

より便利に使いやすく作られたのが『HTMLエディタ』と言われるHTMLファイル作成専用のソフトです。

HTMLエディタはフリーソフトが多く配布されているので、ホームページをできるだけお金をかけずに作りたいという方におすすめです。

HeTeMuLu CreatoralphaEDIT が無料のものの中では多機能で使いやすいと思います。

また、初めてHTMLエディタを使うのは難しい部分もあるので、最初はホームページビルダーの体験版を使うのがいいと思います。

体験版なので無料で利用することができ、操作方法の説明がわかりやすくされていますし、使い方を説明したサイトも多数あります。

まずはホームページビルダーの体験版でホームページ作成の感覚を掴み、体験期間終了後は気に入れば購入してもいいですし(販売価格は1万5千円前後です)、上記の無料HTMLエディタを使用してもいいと思います。

基本になる必須HTMLタグ

HTMLタグはすべて半角で記述し、『<>』でくくられていなければいけないようになっています。

また、基本的にタグは
開始タグ『<タグ名>』 と 終了タグ『</タグ名>』 が一対になっていなければなりません。
(一部ひとつのタグで完結するものもあります)
この開始タグと終了タグの間にテキストを入力します。

ホームページを構成するのにかかせない基本タグがあるので、覚えておきましょう。
以下の6つのタグはよく使うタグになります。

■<html></html> 【タイトルタグ】

ページのタイトルを設定するタグ

■<h1></h1> 【見出しタグ】

文章の見出しに設定するタグ
h1~h6まで種類があり、数字の若いものほど重要な見出しということを表します

■<p></p> 【文章タグ】

文章部分に設定するタグ

■<br> 【改行タグ】

文章を改行させるタグ

■<img> 【画像タグ】

画像を表示させるタグ

■<a></a> 【アンカーリンクタグ】

URLリンクを設定するタグ

よく使うその他のHTMLタグ

その他、よく使うタグを紹介します。

■<table></table> 【テーブルタグ】

表を作るタグ

■<strong></strong> 【強調タグ】

文章で重要な箇所を太字で強調するタグ

サンプルページを保存してみよう

上記のタグのみを使ったサンプルページを実際に保存してみましょう。

下記のHTMLコードをコピーしてHTMLファイルに貼り付けて『index.html』というファイル名で保存します。

※index.htmlとはトップページのファイルであることを表し、トップページは基本的にindex.html(もしくはindex.htm)でなくてはいけません。

トップページ以下のサブページについては、半角英数字を使って自由にファイル名をつけることができます。

タイトルタグ部分に自分がこれから作るホームページのタイトルを記入して、保存してみましょう。

サンプルページで確認してみるとわかりますが、簡単なホームページですが、これが基本となります。

保存ができたら、つぎのページに進み実際にインターネット上で表示させてみましょう。

サンプルページ
▼サンプルページのHTMLタグ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>(自分のホームページタイトルを記入)</title>
</head>

<body>
<h1>見出し1</h1>
<p>文章1</p>
<h2>見出し2</h2>
<p>文章1</p>
<h3>見出し3</h3>
<p>文章1</p>
<a href="(リンク先のURLを記入)">アンカーリンク</a>
<br>
<br>
<img src="(画像のURLを記入)" width="100" height="50"><br>
▲画像
</body>
</html>

このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録
Clip to Evernote

メールを送る

ご質問やご意見ご感想はこちらのフォームをお使いください。

SEO [PR] !uO z[y[WJ Cu