ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


htmlの基本構造 書き方 ファイルの作り方 拡張子表示方法について

前回、htmlについて簡単に触れていきましたが、実践あるのみということで
本日はさっそくhtmlを書いていきます。

1、メモ帳を使う

「書くってどうするの?」
全く初めての方にとっては疑問に思われますよね。
htmlを書くときには、さまざまな方法がありますが今回は初めてがテーマですので、
パソコンの中に予め入っているメモ帳を使っていきます。

 

■メモ帳の起動の仕方

左下Windowsマーク(スタートメニュー)クリック→すべてのプログラム一覧表示→アクセサリをクリック→メモ帳クリック
(順序はパソコンの種類によって異なります)

 

2、文書型宣言を記述する

まず、htmlを書くときには「文書型宣言」(DOCTYPE宣言)というものが必要となります。
今回は、「HTML4.01 Transitional」を利用していきますので以下のような宣言を冒頭で行います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

文書型宣言を記述する

簡単に例えるとすれば、このhtml(HTML4.01 Transitional)の形を使いますよと宣言します。
ここではあまり深く考えなくても構いませんので、冒頭でとりあえず書きましょう。

 

3、htmlの基本構造

次に基本的な形についてふれていきます。
以下は記述例となります。同じようにメモ帳を使い書いてみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head></head>

<body>
ここに書いた内容が反映されます。
</body>

</html>

※画像では空白や改行がありますが見やすくするためです。特になくても問題ありません。

書けましたら、ひとまず保存していきます。
(説明については後ほど行います)

保存先については任意で構いません。

 

■ファイル名は、index.htmlとします。
(動画ではフォルダ内に保存しています)

indexと名前を付けたhtmlファイルが、ホームページのトップページになります。

保存先に、htmlファイルがしっかり保存されているか確認しましょう!
 

4、拡張子について(補足)

ファイル名の末尾についている「.○○○」の部分を拡張子といいます。
htmlファイルの拡張子は「.html」となります。

パソコン環境によって、この拡張子が表示されていない場合があります。
その場合は、以下のような手順で表示しておきましょう。

 

左下Windowsマーク(スタートメニュー)クリック→コントロールパネルをクリック→デスクトップのカスタマイズをクリック→フォルダーオプションをクリック→表示タブクリック
→「登録されている拡張子は表示しない」にチェックをはすず。

※Windows7の場合です。パソコンやOSによって異なります。
 

5、事項について

次回は、作ったhtmlファイルの解説をしていきます。
良ければご参考までにして頂ければと思います。