HTMLとは

HTML(エイチティーエムエル)とは、ホームページをつくるために開発された言語です。

1993年にはじめてのバージョンが公開されて、定期的にバージョンが新しくなっている、世界共通の規格です。

Hyper Text Markup Launguage(ハイパー・テキスト・マークアップ・ランゲッジ)のスペルの頭文字をとって、HTMLと呼ばれています。

2023年現在でも、ホームページをつくる時には、HTMLは必要不可欠であり、代替がきかない言語です。

エンジニアフォーラムによる2022年による、最も使用されている言語ランキングでも、2位となっており、まだまだ実用性が高いマークアップ言語です。

https://survey.stackoverflow.co/2022/

学習難易度も高くないので、これからホームページ制作をしてみたい、初学者の方にとっては、最初のステップとしておすすめです。

HTMLの役割

HTMLの役割は、ホームページの骨格をつくることです。

ホームページ制作の現場では、用意された文章をベースにして、HTMLのルールに従って、文章にタグ付けしていきます。

タグ付けをしていないプレーンテキスト(原稿)のままだと、コンピュータにとっては、どの文章がタイトルで、どの文章が本文かということが全く理解できません。

そこで、タグを使って、文章をはさみこんでいくことで、段落や文章の意味、どの部分が重要かをコンピュータに正しく伝えることができるようになります。

HTML、最初の一歩はメモ帳から

HTMLファイルを試してみるには、メモ帳がおすすめです。

Windowsであれば、左下のWindowsマークをタップした後、表示された検索窓にメモ帳と入力して起動ができます。

Macであれば、メモ帳を起動するとiPhone・iCloudと連携した普通のメモ帳アプリになってしまうので、アプリのメモ帳ではなく「テキストエディタ」というアプリを利用しましょう。

標準のメモ帳であれば、新しいエディタをインストールする必要はないので、手軽に始められます。

記述に失敗してもなにも問題ないですし、好きなように試して、すぐに削除することができるので、気兼ねなくHTMLコード記述の練習ができます。

練習1、メモ帳の1行目に<!Doctype html>と記述してみよう

メモ帳を起動したら、まずは最初の1行目に<!Doctype html>と記載してみましょう。

<!Doctype html>

もし、記載するのが面倒な場合は、上記コードをコピーして、ペーストして頂いても問題ありません。

これは、コンピューターに対して、「このファイル(ドキュメント)はHTMLで書かれています」ということを伝える文言です。

この宣言がないと、HTMLファイルにはなりませんので、必ず記述するようにしましょう。

練習2、<html></html>と記述しよう

ドキュメントタイプの宣言が終わったら、次の行に<html></html>と記述してみましょう。

<html></html>

最初の<html>のことを開始タグ、最後の</html>の事を終了タグと言います。

開始タグと終了タグの間には、画像や文章などの、ホームページの内容が入っていきます。

こちらも、記載が面倒な場合は、下記のコードをコピーペーストして頂いても構いません。

この、開始タグと終了タグの間に、様々なデータを入力していくことで、ホームページが作られていきます。

練習3、<bead></head>と記述しよう

次に、先ほどの<html></html>タグの間に、<head></head>タグを書いていきます。

<head></head>

<head>タグの中には、コンピューターに文字情報をなどを、伝える情報が入ります。

例えば、使用する文字言語の情報、検索エンジンへの伝達情報、使用するファイルの記載など、ユーザーが見える部分ではありません。

練習4、<meta charset>で文字コードを指定して、文字化けを防ごう

実際に、headタグの中に文字化けを防ぐための、文字コードを記載していきます。

<meta charset="utf-8">

これで、文字コードが正しく指定されて、文字化けの心配がなくなりました。

以前の文字コードはShift-Jisなどもありましたが、現在は、utf-8が主流です。

次に、文章を書いたり、写真を掲載していく、実際にユーザーが閲覧する部分を記述していきましょう。

練習5、<body></body>と記述しよう

ユーザーが閲覧する部分は<body></body>で記載していきます。

このbody内に、文章・画像情報などを入力していくことで、ホームページの制作を進めていきます。

すでにお気づきだと思いますが、headは頭、bodyは身体という、意味から派生しています。また、ホームページの下部の事は、足を示すfooterと言います。

ホームページプログラム全体を、ひとつの身体に見立てていくと、理解が早まるかもしれませんので、雑学程度に覚えておくとよいかもしれません。

HTMLファイルとして保存しよう

HTMLとして書いたメモ帳ファイルは、「名前を付けて保存」>ファイル名の末尾に「.html」とつけて保存することで、HTMLファイルとして認識されます。

ここまで骨格を作ったら、index.htmlとしてデスクトップに保存しておきましょう。

HTMLに大見出しを記述しよう

いよいよ、目に見えるコンテンツをつくっていきます。ホームページの見出しと文章を書いていきます。

まず一番最初に書いていきたいのが<h1>タグです。

<h1>タグは見出しを示す単語である、ヘッドライン(ヘディング)の頭文字です。

Hタグは、<h1>タグは、ドキュメントの中でもっとも重要で強調したい部分を<h1>タグで囲う事になります。

SEOでヒットさせたいキーワードをH1タグに入力することで、検索ヒット効率を高めることも可能です。

タグの使い方は以下の通りです。

  • H1・・・大見出し
  • H2・・・中見出し
  • H3・・・小見出し

ちなみに、H6タグまで使うことができますが、現場で実際に使用されるのはH3タグまでと言うケースが多いです。

しかし、環境によっては、H6タグまでしっかり使うというケースもあるかと思いますので、念のため覚えておきましょう。

pタグで文章を記述しよう

次に、pタグを使って、本文を記述していきます。

<p>とはParagraphパラグラフという段落を示す単語の先頭文字です。

上記のコードが書き終わったら、もう一度ファイルを保存しましょう。

画面上部メニューの「ファイル」>「保存」をクリックすると、保存ができます。

index.htmlのアイコンをブラウザで開いてみよう

保存したら、デスクトップ上にあるファイルを、インターネットブラウザに重ねてみましょう。

以下のような表記になれば、HTMLファイルの記述に成功しています。

れで、ホームページ制作の第一歩は成功しました。

まとめ

  • HTMLファイルは、Hyper Text Markup Launguageの略称、ホームページをつくるために生まれた言語です。
  • 開始タグ/終了タグではさんで、骨格をつくっていく特徴があり、メモ帳でも簡単につくることができます。
  • ファイルを保存する際の末尾は.htmlとして保存しましょう。

次は、画像をつけたり、リンクを付ける方法についてご紹介していきたいと思います。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です