HTMLを書いてみよう。初心者でも分かるソースとタグ

HTMLを書いてみよう。初心者でも分かるソースとタグ

HTMLについては以前、ブログに説明しました。
”HTMLとは何か。初心者サイト制作入門講座を参照。
今回はHTMLをはじめるにはどうのようにすれば良いのか説明します。

HTMLを書く前準備

お持ちのPCであれば基本、誰でもHTMLをはじめることができます。
まずは前準備でメモ帳をデスクトップ上に作成しておきましょう。

メモ帳を開く

デスクトップ上で右クリックをして、新規作成メニュー内にあるテキストドキュメントを開きます。

するとデスクトップ上に新規テキストドキュメントファイルが作成されます。

ファイル名を変更する。

作成した新規テキストドキュメントファイルの名前をindexに変更します。
※特にファイル名の指定は無いのですが、ここではindexとファイル名を変更します。

この時ファイル名の後の部分「.txt」が表示されていない場合は、以下の記事を参照して「拡張子」を表示させて下さい。

拡張子が表示されない場合の対処方法

HTMLを書いてみよう

早速HTMLを書いて、感覚をつかんでみましょう。

メモ帳を開く

先程作成したindex.txtファイルを開きましょう。

真っ白な画面ですね。ここに“はじめてのHTML”と入力してみましょう。

ここまで出来たら、一旦保存して閉じましょう。

TXTからHTMLに拡張子を変更する。

ndex.txtのtxt部分をhtmlに変更します。
※注意のポップアップが表示されますが、“はい”をクリックして続行して下さい。

すると先程までメモ帳だったアイコンがWEBファイルのアイコンに変わりました。
※PCはファイルをどのソフトで立ち上げるか拡張子を認識して開いています。

HTMLファイルを開く

拡張子を変更した先程のファイルをダブルクリックして開いてみましょう。

どうですか?先程メモ帳で入力した文字がブラウザで表示されました。
もう少し文字に変化を与えてみましょう。

タグを入れてみよう

タグを入れることで、文字に変化を与えることができます。
まずはタグを入れてみて感覚を身につけてみましょう。

HTMLからTXTに拡張子を変更する。

文字に変化を与える為、先程変更したHTMLファイルをテキストドキュメントファイルに戻しましょう。
戻し方は先程の手順の逆です。index.htmlのhtml部分をtxtに変更します。

どうですか?txtファイルに戻りましたか?

タグを挿入する。

index.txtをダブルクリックしてテキストドキュメントファイルを開きます。

ここにタグ、いわゆる文字に意味をもたせる為のHTMLソースを加えてみます。
“はじめてのHTML”の前に<H1>後ろに</H1>を入力してみて下さい。

こんな感じです。これはH1(エイチワン)タグと言います。

TXTからHTMLに拡張子を変更する。

作成したHTMLの内容がどのように表示されるか確認する為に、先程と同様にindex.txtのtxt部分をhtmlに変更します。

HTMLファイルを開く

いかがでしょうか。文字が大きく、太く表示されたことがわかります。
これはH1タグが大見出しという意味を持っている為、このように表示されるわけです。

ソースとタグについて

HTMLを書くというとこはソースを作っていく作業のことです。
また、タグとは文字に意味を持たせ、表示を変化させることが可能です。
さらには文字の色を変えたり、画像を挿入したりとタグには沢山の種類が存在します。
このようにHTMLはタグを駆使して、サイトの骨格を作成するプログラムということになります。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事