HTMLを書いてみよう
ここではHTMLファイルを実際に作成にチャレンジします。
HTMLとは
HTML(えいち・てぃー・えむ・える)とは、
Hyper ハイパー
Text テキスト
Markup マークアップ
Language ランゲージ
の略で、マークアップ言語の1つです。
HTMLの特徴はハイパーテキストとマークアップになります。
ハイパーテキスト
ハイパーテキストとは、意味を持ったテキスト(文字)のことです。画像や動画を表示したり、別ページや別の場所にジャンプしたり、ホームページに当たり前にある機能のことです。
マークアップ
マークアップとは 文字色、文字背景、太さ、サイズなどの変化をつける、文字の装飾のことです。文字を囲むように記載することからマークアップといいます。
HTML作成に必要なもの
HTMLの作成には、書くソフトウェアと、読むソフトウェアの２つが必要になります。
テキストエディター
書くためのソフトウェアのことを「テキストエディター」といいます。文字を編集するためのソフトウェアです。既定では、Windowsに最初から入っているメモ帳(notepad.exe)です。
ブラウザ
読むためのソフトウェアのことを「ブラウザ」といいます。HTMLを表示するためのソフトウェアのことです。既定では、Windowsに最初から入っているMicrosoftEdgeです。GoogleChromeやFirefoxなども有名なブラウザです。
事前設定-拡張子の表示
デジタルデータの編集をする際に、拡張子の変更をすることが多くあります。ここでは普段隠されている拡張子を表示する設定を行います。
拡張子とは
「このファイルは、このソフトウェアで開く」という目印を「拡張子」といいます。拡張子は、ファイル名の最後に3文字or4文字の英数字で設定されていることが多いです。初期設定では「拡張子」は表示されません。表示するよう設定します。
拡張子の設定 Windows11版
フォルダの赤丸あたりにある、表示メニューを選択し、
さらに下のほうにある「表示」を選び、
「ファイル名拡張子」を選択します。
拡張子の設定 Windows10版
フォルダのメニューにて「表示」を選択し、「ファイル名拡張子」のチェックボックスにチェックを入れます。
拡張子の確認
以下の画像のように、
「ネタ帳」は、「ネタ帳.txt」と拡張子が表示され、
「家計簿」は、「家計簿.xlsx」と拡張子が表示されています。
HTMLの作成
準備が終わりましたので、いよいよHTMLの作成を行います。
この章では、HTMLファイルを作成しますが、インターネットには公開しません。あなたのパソコンの中にだけファイルがある状態なので安心してください。
はじめてのHTML
では、実際にHTMLファイルを作って、ブラウザで表示してみましょう！
デスクトップなどで右クリックして「新規作成(W)」を選択し「テキストドキュメント」を選択します。作成された「新しいテキスト ドキュメント.txt」などの名前のファイルをダブルクリックします。
以下の3行を、直接打ち込むか、コピー＆ペーストして、内容を保存して閉じてください。
編集したテキストファイルを選択し、右クリックして「名前の変更(M)」を選択します。
ファイル名を変更できるので「はじめてのHTML.html」に名前を変更します。
「はじめてのHTML.html」をダブルクリックすると、既定のブラウザでHTMLファイルが開きます。
以下の画像のように、1行目が普通の文字、2行目が太字、3行目が赤字で表示されていれば大成功です。
解説-マークアップについて
さきほどのHTMLの内容について、解説をします。
１行目の文字はタグで囲んでいません。
最後に書いてある「<br />」は「ここで改行する」という意味のタグです。基本的にマークアップは文字をタグで囲むものなのですが、一部の特殊なタグは文字を囲まずにこのように使用するものもあります。
２行目は太字になっています。これは文字を「<b>」と「</b>」で囲んでいることで、太字になっています。マークアップ言語とは、このように特定のコードで囲んだ中身に変化をつけることです。これは「bタグ」といい、「びーたぐ」と発音します。
３行目は表示したい文字を「<font color="red">」と「</font>」で囲んでおり、囲んだ文字が赤色で表示されてます。fontとは、文字デザインのことで「ふぉんとたぐ」と発音します。ここではfontタグでcolorという属性をredに指定しています。他にはsizeと、faceの属性があります。sizeは文字の大きさを変更でき、faceは文字の形を変更できます。
このようにHTMLでは、特定のタグで囲むことで、わかりやすくしたり、おしゃれをしたりする、グラフィカルな言語になります。
まとめ
この章では、HTML言語というプログラム言語を書いて、動作確認をしました！
はじめてプログラム言語を書いた人もいたかもしれませんが、思ったより難しくなかったと感じたのではないでしょうか。
前章「ホームページに必要なもの」で、
・記事
・WEBサービス
・ドメイン
このうちの「記事」の作成に必要なHTMLを使うことができました！
次章では、「WEBサービス」と「ドメイン」を進めていきます。