超初心者向けHTML講座その2:ページタイトルや文章をいれてブラウザ上で見てみよう

HTML

よっす!へこすです!

前回はHTML文書の基本タグを学習し、枠組みを作成しましたね!

超初心者向けHTML講座その1:HTMLの基本タグとその書き方

今回のHTML講座その2ではタグを使ってページタイトルや文章を書き、ブラウザ上に表示させます。

それではいきましょう。

<title>タグを使ってページタイトルを入れよう

<title>タグは囲んだ文章をページタイトルにするタグです。

この部分を作ります↓

前回の記事でも説明しましたが、ページタイトルなどの補足情報は<head>タグの中に書きます。

なので<title>タグは<head>タグの中に書きます。

中身は何でもいいですよ!ここでは「へこすのHTML講座」とします。

終了タグの「/」を忘れないように注意してください!

<body>タグを使って文章を書こう

<body>タグは、文章や画像を表示させる役割を持っているんでしたね!

では<body>タグの中に文章を書いてみましょう。

HTMLファイル形式で保存しよう

さあそれではブラウザ上で見てみましょう!といいたいところですが、このままでは見ることができません。

タグを使って書いても、HTMLファイル形式で保存しなければただのメモ帳です。

HTMLファイル形式で保存する手順は

  1. デスクトップにフォルダを作る
  2. メモ帳を開いて「名前を付けて保存」する
  3. ファイル名を「〇〇.html」にする(〇〇の中はなんでもよし)
  4. 手順1で作ったフォルダを選んで「保存」する

 

以上の4ステップです。画像付きで説明しますね!

 

手順1:デスクトップにフォルダを作る

デスクトップ画面で右クリック「新規作成」→「フォルダー」の順番でクリック

「hekosukouza」というフォルダ名を付ける

 

手順2:メモ帳を開いて「名前を付けて保存」する

HTML文書を書いたメモ帳を開いて「ファイル」→「名前を付けて保存」の順番でクリック

 

手順3:ファイル名を「〇〇.html」にする(〇〇の中はなんでもよし)

「htmlkouza.html」というファイル名にする

 

手順4:手順1で作ったフォルダを選んで「保存」する

手順1で作った「hekosukouza」フォルダの中に保存する

 

以上の4ステップでHTMLファイル形式にする作業は完了です!

ブラウザ上で見てみよう

では実際にブラウザではどのように表示されるのか見てみましょう。

先ほど保存したファイルをダブルクリック!

 

<title>タグで囲んだ「へこすのHTML講座」はページタイトルに、<body>タグで囲んだ
「らっしゃいらっしゃい!へこすまとめへようこそー!」は文章として表示されていますね!

もしうまく表示されていなかったら、タグの位置はあっているか、終了タグに「/」がついているか、などを確認してみてください。

 

ちなみに、Google chromeやIE、Microsoft Edgeなど様々なブラウザで表示を確認したければ以下の画像を参照してください。

HTMLファイルを右クリック→「プラグラムから開く」をクリックするとこのようにブラウザを選べます。

 

まとめ

HTMLがどのようなものか、なんとなく分かっていただけたでしょうか?

 

今回登場したタグ

<title>タグ

 

これはページタイトルを作る役割を持っています。覚えておきましょう!

また、ブラウザ上で表示させるにはHTMLファイル形式で保存しなければなりません。

 

次回のHTML講座では、見出し・箇条書き・段落・改行の4つのタグと画像を挿入する方法を紹介します!

それでは!!