HTML・CSS講座

【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回目は「タグについてもうちょっと知ろう」です。お楽しみに!

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO対策・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:Webライティング実務士・ウェブ解析士・SEO検定1級・情報セキュリティスペシャリスト・FP2級・AFPなど。

POSTED COMMENT

  1. 【15分間講座】第1回 タグってなんだ?|HTMLてくてく道 より:

    […] 【15分間講座】第2回 なにはともかく作ってみよう!どどーん。15分間だけシリーズの第2回目の始まりです! 今回は第1回でちらっとお見せした「pタグ」を使ったホームページをちゃちゃ […]

COMMENT

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

CAPTCHA