HTMLを書いてみよう
ここではHTMLファイルを実際に作成にチャレンジします。
HTMLについて
HTMLで記事を作るぞ！
ところでHTMLって、なぁに？
HTMLとは？
HTMLは、プログラム言語の一種です。WEBページの記述ルールとも言えます。
記事自体は、TXTファイルや、PDFファイルでも、WEBページとしてインターネット上に公開できますが、HTMLの特徴こそが、インターネット上で重要なのです。
HTMLの特徴？
HTMLは４つの単語の頭文字を並べた言葉なのですが、そこも説明しますね
HTMLの読み方は？
HTMLの読み方は「えいち・てぃー・えむ・える」と読みます。４つの単語の頭文字を並べた言葉です。
・Hyper ハイパー
・Text テキスト
・Markup マークアップ
・Language ランゲージ
なんかすごそう！
はいぱー てきすと まーく あっぷらんげーじ？
仰々しく英語が並んでますが、特徴はハイパーテキストとマークアップになります。最後のランゲージは、言語って意味ですね。
HTMLの特徴 1.ハイパーテキスト
ハイパーテキストとは インターネット上のファイル同士を相互に結びつける仕組みのことです。他のページに次々とジャンプして、インターネット上を次々に移動して、いろんなWEBサイトを回覧できるのも、ハイパーテキストの仕組みがあるからです。当たり前のように利用していますが、HTMLの特徴とされる仕組みだったのですね。
当たり前のように使ってたけど、ハイパーリンクが、HTMLの特徴なんだね
HTMLの特徴 2.マークアップ
マークアップとは 文字色、文字背景、太さ、サイズなどの変化をつける、文字の装飾のことです。文字を囲むように記載します。
同じ色、同じ文字サイズだと、つまらないかも
では、いよいよ、HTMLを作成していきましょう！
HTMLの作成に必要なもの
HTMLの作成には、書くためのソフトウェアと、読むソフトウェアが必要になりますが、どちらもパソコンに標準で備わっているので準備する必要はありません。
テキストエディター：書くためのソフトウェアのことを「テキストエディター」といいます。文字を編集するためのソフトウェアです。既定では、Windowsに最初から入っているメモ帳(notepad.exe)です。
ブラウザ：読むためのソフトウェアのことを「ブラウザ」といいます。HTMLを表示するためのソフトウェアのことです。既定では、Windowsに最初から入っているMicrosoftEdge(msedge.exe)です。GoogleChromeやFirefoxなど、他のブラウザを利用している場合はそちらを利用しても問題ありません。
HTMLのファイル作成
それでは、いよいよHTMLの作成を行っていきますが、この章では作ったファイルはインターネットには公開されません。あなたのパソコンの中にだけファイルがある状態になりますので、安心して作業をしてください。
※HTMLファイルを作る際に、拡張子を表示する設定が必要です。未設定の場合は「拡張子を表示しよう」を参照して、設定を変更してください。
①新規作成
デスクトップなどで、右クリックメニューから[新規作成]を選択し、[テキスト ドキュメント]を選択します。
②名前の変更
作成したファイルを右クリックして[名前の変更]を選択し、ファイル名を[index.html]へ変更します。その際に「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と聞かれたら「はい」を選択します。
③実行(ブラウザ表示)
この時点で、中身が何も書いていないHTMLファイルを作成できました。ダブルクリックすると、ブラウザでHTMLファイルが実行され、閲覧することができると思います。中身は何も書いていないので、真っ白な画面がブラウザに表示されます。
④メモ帳で開く
メモ帳(notepad.exe)を実行し、その上に[index.html]ファイルをドラッグします。メモ帳を実行するには、スタートメニューで「メモ帳」や「notepad」を検索すると表示されます。
⑤編集
以下の内容をコピー＆ペーストして、保存して閉じてください。
⑥確認(ブラウザ表示)
[index.html]をダブルクリックして、ブラウザで表示内容を確認してみましょう。うまくいけば、画面上に「はじめてのHTML作成」と1行目に文字が表示されるはずです。
⑦プロフィールページ
するどい人は察しているかもしれませんが、プロフィールページとして[profile.html]も作成していただきます。
さきほどの手順を、もう一度実行していきます。
①デスクトップなどで[新規作成]＞[テキスト ドキュメント]を選択
②作成したファイルで右クリックし[名前の変更]を選択し[profile.html]を入力
③拡張子変更の注記メッセージは「はい」を選択
④メモ帳を実行し、その上に[profile.html]ファイルをドラッグします
⑤内容は、以下をコピーしてください。
⑥[profile.html]をダブルクリックして、ブラウザ上で表示を確認してください。また[TOPへ]をクリックすると、index.htmlにジャンプします。
うまく、index.htmlと、profile.htmlが相互にジャンプできるようになったでしょうか？
解説
さきほどのHTMLの内容について、解説をします。
index.html の1行目は最後に書いてある「<br />」が「ここで改行する」という意味があります。メモ帳内の文章で改行しても、ブラウザ上で表示した際に改行されません。HTMLでは、<br />のような改行属性のあるタグを記述した場合に、改行されます。
2行目は太字になっています。「<b>」と「</b>」で文字を囲むことで、囲まれた文字が太字になっています。このように特定のタグで囲んだ文字に変化をつけることを「マークアップ」といいます。HTMLの特徴で出てきましたね。
3行目は表示したい文字を「<font color="red">」と「</font>」で囲んでおり、囲んだ文字が赤色で表示されてます。fontは文字デザインのことで、ここではfontタグでcolorという属性をredに指定しています。他にはsizeと、faceの属性があります。sizeは文字の大きさを変更でき、faceは文字の形を変更できます。
このようにHTMLでは、特定のタグで囲むことで、わかりやすくしたり、おしゃれをしたりする、グラフィカルな言語になります。
まとめ
HTMLファイル作れました！
良かったです。長々と説明しましたけど、実際に作業してみると手ごたえ無かったですかね？
でも、コピーして作っただけだから、これからコンピューター言語？を暗記しないといけないのは大変そう。
タグをすべて暗記する必要はないので大丈夫ですよ。良く使うタグは自然と覚えますし、最初に仕組みを覚えてほしいからタグやマークアップの説明をしていますが、CMSやブログを使う場合は、タグも自動生成されるので覚える必要ないですね。
なんか、できそうな気がしてきたー！
この章では、HTML言語というプログラム言語を書いて、動作確認をしました！
はじめてプログラム言語を書いた人もいたかもしれませんが、思ったより難しくなかったと感じたのではないでしょうか。
前章「ホームページに必要なもの」で、
・記事
・サーバー
・ドメイン
このうちの「記事」の作成に必要なHTMLを使うことができました！
次章では、「WEBサービス」と「ドメイン」について、説明します。