コーディング

ホームページはHTMLという言語で書かれています。HTMLを勉強することで、ホームページを作れる様になります。最近はWordPressでホームページを作るケースが多いですが、WordPressをカスタマイズする際にもHTMLの知識は必要になります。HTMLの知識はあって損はしないので、ぜひ覚えておきましょう。 HTMLファイルを作成する まずは「html」という名前のフォルダを作成します。 次にテキストエディタを開いて、「index.html」というファイル名でhtmlフォルダ保存する。 「.html」はファイルの拡張子です。もしファイル名に拡張子が表示されていない場合は、PCの設定で拡張子を表示してください。 HTMLの雛形を作成する HTMLファイルには必ず記述しないといけないコードがあります。index.htmlに以下のコードを記述して保存してください。 &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>トップページ&lt;/title> &lt;/head> &lt;body> &lt;p>ここはトップページです。&lt;/p> &lt;/body> &lt;/html> ホームページを表示してみる 保存した「index.html」をダブルクリックすると、ブラウザが立ち上がり「ここはトップページです。」という文字が表示されます。内容は文章1行しかないですが、これも立派なホームページです。 ホームページのタイトルを変更する &lt;title&gt;と&lt;/title&gt;の間に入力した文字がホームページのタイトルとなります。「トップページ」と書かれている部分を好きな名前に変えてみましょう。ブラウザのタブに自分のサイト名が表示されます。また、Googleなどの検索結果にも&lt;title&gt;タグの内容が表示されます。 ホームページの内容を変更する &lt;body&gt;と&lt;/body&gt;の間に入力した内容がブラウザに表示されます。&lt;p&gt;トップページです。&lt;/p&gt;というコードで文章を表示しています。&lt;p&gt;は段落を意味するタグで、文章を表示するときに使用します。とりあえず、「トップページです。」という部分を好きな文章に書き換えて保存してみましょう。ブラウザをリドードすると表示される文章が変わります。 ホームページに画像を表示してみる ホームページに画像を表示してみましょう。 まずは表示したい画像を「img.jpg」というファイル名でhtmlフォルダに保存します。 次にindex.htmlの&lt;body&gt;と&lt;/body&gt;の間に&lt;img src="img.jpg" alt="画像の説明"&gt;というコードを記述します。index.htmlの内容は以下の様になります。 &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>トップページ&lt;/title> &lt;/head> &lt;body> &lt;img src="img.jpg" alt="画像の説明"> &lt;/body> &lt;/html> ブラウザをリドーロすると画像が表示されます。 &lt;img&gt;は画像を表示する時に使うタグです。src="img.jpg"の部分で表示する画像の場所を指定しています。例えば画像のファイル名が「gazo.jpg」だった場合は、src="gazo.jpg"となります。 alt="画像の説明"には画像の説明を記述します。例えば、ワンちゃんが走っている画像だった場合、alt="ワンちゃんが走っている様子"のように記述します。 ホームページにリンクを貼ってみる ホームページにリンクを貼ってみましょう。 まずhtmlフォルダにpage.htmlというファイルを作成します。page.htmlに以下のコードを記述して保存します。 &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>別ページ&lt;/title> &lt;/head> &lt;body> &lt;p>別ページです。&lt;/p> &lt;/body> &lt;/html> 次にindex.htmlの&lt;body&gt;と&lt;/body&gt;の間に&lt;a href="page.html"&gt;別ページへのリンク&lt;/a&gt;を追加します。index.htmlの内容は以下の様になります。 &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>トップページ&lt;/title> &lt;/head> &lt;body> &lt;a href="page.html">別ページへのリンク&lt;/a> &lt;/body> &lt;/html> index.htmlをブラウザで表示すると青文字で「別ページへのリンク」と表示されます。「別ページへのリンク」をクリックするとpage.htmlに移動して「別ページです。」という文字が表示されます。 &lt;a&gt;はリンクを貼る時に使うタグで、href="page.html"でリンク先を指定します。今回は同じフォルダ内のhtmlファイルにリンクを貼りましたが、別サイトにリンクを貼ることもできます。 例えば以下の様に記述するとYahooのトップページにリンクを貼ることができます。 &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>トップページ&lt;/title> &lt;/head> &lt;body> &lt;a href="https://www.yahoo.co.jp/">Yahooへのリンク&lt;/a> &lt;/body> &lt;/html> 複数のhtmlファイルをリンクすることによって1つのWebサイトが出来上がります。 まとめ 今回はHTMLの超基本部分だけを解説しました。htmlファイルを作ってホームページを表示するだけだったら意外と簡単です。htmlにはまだまだいろんなタグがあるので順次解説していきたいと思います。 以上、HTMLファイルを作ってホームページを表示する方法でした。