HTML講座

【15分間講座】第2回 なにはともかく作ってみよう!

どどーん。15分間だけシリーズの第2回目の始まりです!
今回は第1回でちらっとお見せした「pタグ」を使ったホームページをちゃちゃっと作ってしまおうと思います。

それじゃ、まずメモ帳を立ち上げましょう。

メモ帳を立ち上げる

こんな感じかな?
それじゃ第1回で紹介した、
「<p>ここに文章</p>」
を書いてみてください。そのまま普通に書けばいいですよ。

メモ帳に「ここに文章」と入力

さて、できあがりました。何かわからない事はありませんか?大丈夫ですよね。

じゃあこれを「HTMLとして保存」します。
「HTMLとして」という部分がミソですよ。そうしないとブラウザでホームページのデータをして表示されなくなっちゃいます。

ファイルメニューから「名前を付けて保存」を選択してっと・・・・

ファイルに名前を付けて保存

名前を付けて保存するときに、拡張子「.html」まで書いてから保存ボタンを押しましょう。

さて、ここで突然ですが「HTMLのルールその2」です。

HTMLのルールその2

HTMLファイルの拡張子は「.html」にする

そして「HTMLのルールその3」

HTMLのルールその3

HTMLファイルの文字コードはUTF-8にする

この2つです。
さて、この2つのルールですが、実は絶対にこうしなくちゃならない!という物でもないんです。たぶんこれをルールにしちゃうと詳しい人から怒られちゃうかな~なんて思ったのですが、これはあくまでも「入門編」。なんでこれをルールにしたのかというと、これが事実上の業界標準だからです。

保存したhtmlファイルを開いてみましょう。ちなみに拡張子「.html」のより左側のファイル名の部分はなんでもいいですよ。今回は「test」と名前を付けました。それじゃこいつをダブルクリックして開いてみましょう!

ブラウザに「ここに文章」と表示される

はい!表示されましたね。
よく見てみると「<p>」と「</p>」の部分が表示されていません。
第1回の内容を思い出してください。「p」の部分はタグでした。タグは実際に表示される部分の「命令」でしたよね。だからブラウザで見たときに表示されないのです。

「あれ、それじゃpタグって何の意味があるの?」

そうですよね。そう思いますよね。はっきりいって今回の例ではpタグは本来の機能を果たしていません。

だから、メモ帳で

ブラウザに「ここに文章」と表示される

とpタグを抜きにして「ここに文章」とだけ書いて、このファイルをさきほどと同じようにブラウザで開くと

ブラウザに「ここに文章」と表示される

と、pタグを書いたときとほぼ同じような表示になると思います。これはこれでいいんです。今回はpタグは命令であって表示される内容ではないということを確認したかっただけなので。

というわけで第2回はここまで。ひょっとしたら今回は10分くらいかかっちゃった人もいるかもしれませんね。それじゃ15分間講座のラスト、第3回目は「タグについてもうちょっと知ろう」です。お楽しみに!

【15分間講座】第3回 タグについてもうちょっと知ろうHTMLの基本的な知識を1回5分で教える「15分間講座」の第3回目です。第3回は「タグについてもう少し詳しく」解説します。HTMLタグは開始タグと終了タグのセットで使います。...
ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA