HOME >HP基本と文章レイアウト


HPの基本の形と文章のレイアウトを覚えよう

前回の続きになります。前回を見てない方はHPを作る準備をしようをご覧ください。
では今回はHTMLの基本の形を覚えていきましょう。

HPの基本の形と文章のレイアウト

好きな名前.htmlをメモ帳で開いてください。
 <HTML>
  <HEAD>
   <TITLE>
    初めてのお小遣いサイト
   </TITLE>
  </HEAD>
  <BODY>
   初HP作成
  </BODY>
 </HTML>

左の記述をメモ帳に書いてみましょう。

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

説明
<HTML>〜</HTML> で全体を挟み込みました。
これは、「このファイルはHTMLですよ」とブラウザに伝えるために書きます。
この記述でブラウザがHPなんだと認識してくれるんです。
<HEAD>〜</HEAD> はヘッダと呼ばれている部分です。
この間にはページのタイトルやその他の情報を書くことができます。
(初めて作るHP支援なので詳細な説明を省かせていただきます)
<TITLE>〜</TITLE> で文字を挟みました。
ここに挟んだ文字(初めてのお小遣いサイト)はブラウザのタイトルバーに表示されます。
<BODY>〜</BODY> で文字を挟みました。
ここに挟んだ記述が、実際にブラウザに表示される部分になります。
これがHPなんです。どうですか?簡単でしょう?


次はHPに表示させる文章のレイアウトについてです。

 <BODY>
  ここでは
  「HPを作ったことが無い」
  「HP作ってみたい」
  「どうせならお小遣いサイトが良い」
  そんな貴方にHTMLで作る
  お小遣いサイトの作り方を教えます
 </BODY>

先ほどのファイルの<BODY>〜</BODY>の間に左のような文章を書いてみましょう。

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

どうですか?表示されましたか?でもENTERキーの改行は無効になってしまいましたね。


そこで改行したい個所に<BR>タグを書いてみましょう。

 <BODY>
  ここでは
  <BR>
  「HPを作ったことが無い」
  <BR>
  「HP作ってみたい」
  <BR>
  「どうせならお小遣いサイトが良い」
  <BR>
  そんな貴方にHTMLで作る
  <BR>
  お小遣いサイトの作り方を教えます
 </BODY>

左の文章のように<BR>タグを間に書いてみましょう。

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

どうですか?NTERキーの改行が反映されたようですね。<BR>タグを使うと改行が反映され、使わないとブラウザの幅に合わせて自動的に折り返されて表示することが理解出来た思います


次に文章に段落を設定してみましょう。段落の指定してあげたい場合は<P>タグを書くことで出来ます。

 <BODY>
  ここでは
  <BR>
  <P>
  「HPを作ったことが無い」
  <BR>
  「HP作ってみたい」
  <BR>
  「どうせならお小遣いサイトが良い」
  <BR>
  <P>
  そんな貴方にHTMLで作る
  <BR>
  お小遣いサイトの作り方を教えます
 </BODY>

左の文章のように<P>タグを間に書いてみましょう。

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

どうですか?<P>タグを指定した個所に1行分の空きが入りましたね。


結構簡単だったと思いますがココまでで何か解らないことはありましたか?
次回はもう少し文章のレイアウトと文字のレイアウトについて覚えていきましょう。

文章と文字のレイアウト

上に戻る      HOMEに戻る


HOME >HP基本と文章レイアウト


Member Of バナー広告.com
Member Of バナー広告.com
Member Of バナー広告.com
Member Of バナー広告.com

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送