HTML文を表示させてみよう

ブログが作りたい!HTML入門 > HTML文を表示させてみよう

HTML文を表示させてみよう

HTML文を表示させてみよう

HTML入門(2)

記事「HTML入門 はじめました」にて作成した HTML文(HTMLコード)を、ブラウザで表示させてみましょう。

お話は、次の順番で進みます。

▲ページの先頭に戻る

HTMLをパソコン上で表示してみる

テキストエディタと、ブラウザの準備はできているかしら?何の話だか分からない人は、記事「カスタマイズ前の準備」をご覧ください。

1:HTMLコードをコピーする

(01)

前回の記事「HTML入門 はじめました」で作成した、次のHTMLコードを、コピーしましょう。

▲ページの先頭に戻る

2:HTMLファイルを作成する

(02)

テキストエディタを起ち上げます。

デスクトップ上にショートカットがあれば、ダブルクリックしてテキストエディタを起ち上げてください。

テキストエディタを起ち上げる

起ち上げ方法は、ご自由にどうぞ。

(03)

前述(01)でコピーしたHTMLコードを、貼り付けます。

HTMLコードを貼り付け

(04)

「ファイル」をクリックし、「名前を付けて保存」を選びます。

ファイルをクリックし名前を付けて保存を選ぶ

(05)

デスクトップなどの分かり良い場所に保存しましょう。

「ファイル名」を入力し、[保存]ボタンをクリックします。

ファイル名を入力し保存をクリック

例えば、ファイル名は、「sample01.html」などにします。気を付けて欲しいのは、拡張子を「html」にすることです。

「拡張子って、何?」という人は、記事「拡張子を表示させる方法」が参考になります。

▲ページの先頭に戻る

3:ブラウザで表示する

(06)

前述(05)で作成したHTMLファイルを、ブラウザへ投げ込みます。(ドラッグ&ドロップします)

HTMLファイルを、ブラウザへ投げ込む

ブラウザを起ち上げて、「ファイル」から「ファイルを開く」を選んで、HTMLファイルを開いても良いですよ。

(07)

ブラウザにて表示されます。次の2つのことを確認しましょう。

  • <title>タグによって、「タイトル」と表示されている。
  • <body>タグによって、「(内容)」と表示されている。
ブラウザにて表示される

▲ページの先頭に戻る

4:遊ぶ

(08)

時間に余裕がある人は、好きなように「タイトル」や「(内容)」を変更して、遊んで見ましょう。

▲ページの先頭に戻る

次回予告

お疲れ様でした。やってみると、意外と簡単だったのではないでしょうか。今回はこれだけです。

物足りないと思うかもしれませんが、そのくらいが丁度良いんだなぁ。「もっと覚えたい!」くらいがね。

次回は、見出し(<h>タグ)について書く予定です。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/14 更新日:2008/03/14

« 「HTML入門 はじめました」|「見出しを付ける 【<h>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんばんは!

こんばんは!
初めて自分でこれを表示させた時、感動だったなあ!
拡張子変えるだけで普段ネットで見てるものになるのですから。

自分は最初の方、だいぶ好き勝手やってて、配布されてたテンプレート
いじったりしてhtmlに慣れていった人なのですが、
そのせいか、すごい大事なとこの知識が、ぽっかり抜け落ちてたりしてます。

見出しhのお話、楽しみにしています。
なんとなく役目はわかっているつもりですが、自信ない^^;

綺麗なコード

ひろこさん、こんばんは。

私もそうです。

ホームページはインターネットを通さないと、
表示されないのかと思っていたので、
びっくりしました。

「パソコン上で、見れるやーん!」

自分はどうやって覚えたんだろ?
けっこう前から、触れてはいたけれど、
取り組みはじめたのは、ここ1、2年くらいかな。

もっと綺麗なコードを書きたいなぁ。

「見出しタグ、お楽しみに!」
・・・というほどではないよぅ。かなり地味。(´Д`)

とても勉強になります!!

誠実な感じとまじめでわかりやすくて
大変面白く拝見させて頂きました!

と言っても私もまだ始めたばかりで
まだまだわからない事だらけで四苦八苦しております。

始めたばかりなのに(はじめてから10日目)
現在は友人のブログの編集を頼まれて
眠れない夜も続きます(笑)

こちらを発見できてよかったです。
これから勉強の為に参考にさせて頂きます。

頑張ってください!!

小悪魔

jilさん、こんばんは。
コメントありがとうございます。

誠実な感じ!(・∀・)ウヒャッ
うーん、はじめて言われたかもしれません・・・。

小悪魔なので、ご注意あそばせ。(´Д`;)

10日目にして、友人のブログを手伝っているだなんて、
すごいですね。

頼まれると「任しとき!」って、タイプですね。

参考になるかどうか、参考になると良いですけれど、
何か不明な点などあれば、お気軽にコメントくださいませ。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/240-d75cc8ac
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて