HTMLでウェブサイトを作ろう！第一回　基本を覚えよう - ITゲームインフォ過去記事アーカイブ【アカウント移動しました】

ウェブサイトを1から作るときに必要になるのがHTMLのプログラミングの知識です。

今回はHTMLで何ができるのかと基本の書き方を教えます。

HTMLとは何か

HTMLという言葉を聞いたことがある人もいるかもしれませんがこのページを見ているほとんどの人は知らないと思うので説明します。

ウェブサイトを作る要素は3つあります。

1つ目が文字や写真などの内容。2つ目が文字の色や大きさ、フォント等のデザイン。3つ目がクリック時のアニメーション等の特殊な動作です。

HTMLは1つ目の文字や写真等の内容を決めるプログラミング言語です。

HTMLはウェブサイトを作る上で欠かせないものです。

準備

基本的な書き方を知る前にプログラミングの準備が必要です。HTMLエディターを探してダウンロードするかWindowsのメモ帳を起動してください。

HTMLの基本

まず以下のコードをコピー＆貼り付けしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>各ページタイトル</title>
<meta name="description" content="ページ概要文">

</head>

<body>

</body>

</html>

この上のコードは何かというとHTMLを使う上での基本の文です。今のところは意味を理解していなくてもいいです。

次にコードを書いていきますがどこに何を書けば良いのか分かりませんよね？

まず最初はコードを書く場所について解説します。

コードを書く場所について

コードを書く場所は基本的に上で打ったコードの<body>と</body>の間です。このbodyというところに書くコードは目に見える物（写真や文字等）のコードを書きます。

それ以外の場所に書くと何も起きません。

基本的な書き方

まずはこれらのコードを見てください。

これは文字です。

<h1>見出しです。</h1>

これらのコードに共通することがわかりますか？

山括弧の間に文字があって反対側に同じものにスラッシュがついたものがあります。

HTMLでは基本的に

<要素>内容</要素>

という書き方になります。要素とは先程のPやh1のことです。

pで文字を表示するという意味。

h1は見出し（大きい文字）を表示する意味です。

文字を表示しよう

今学んだことを使って文字を表示してみましょう。

先程コピー＆貼り付けしたコードの<body>と</body>の間に1つ前で書いた文字を表示するコードを使って文字を書いてみます。

今回はあいうえおと表示させます。

まずはを<body>と</body>の間に入力します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>各ページタイトル</title>
<meta name=”description” content=”ページ概要文”>

</head>

<body>

</body>

</html>

次にとの間にあいうえおと入力します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>各ページタイトル</title>
<meta name=”description” content=”ページ概要文”>

</head>

<body>

あいうえお

</body>

</html>

保存したら実行してみます。HTMLエディターなら実行ボタンを押せば実行できますがWindowsのメモ帳の場合は一度HTMLファイルとして保存する必要があります。

名前をつけて保存を押したあとファイル名の.txtを消して.htmlに変えて保存してください。エクスプローラーからファイルを開けば実行できます。

今回のウェブサイト作成講座は終わりです。わかりにくいところがあればコメント欄で質問してください。