改行タグ(<br>タグ)の使用方法を理解するためのページ(タグ利用編)

 
     
     
  改行タグ(<br>タグ)の使用方法
このページでは『Webページを作成するにあたって改行タグ(<br>タグ)の使用方法を理解してもらうことを目的として作成しました。
 
1. 基本的には<br>というタグを書くだけです。
  このタグは単独で使用できます(閉じるタグは不要です)。
 
    <<解説>>  
    HTMLの基本構造は、次のようになっています(別ページで解説したものを再掲)。
 
  HTMLの基本構造について
  <DOCTYPE html>
html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>ここにはページのタイトルを書きます</title>
</head>
<body>ここにはページの内容を書きます</body>
</html>

別ページで解説したHTMLのサンプルファイルを用いて、そこに水平線を引いてみましょう。

基本的な書式は以下の通りです。

  水平線を引くためのタグ
  <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  ;<title>ここにはページのタイトルを書きます</title>
</head>
<body>
ここにはページの内容を書きます<br>
</body>
</html
   
  以下はサンプルデータ(sample6_1.htm) に記述されたHTMLの内容です。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>
<body>
ここの行を一行目にして改行し、次の行にしたいとします。
ここにはページの内容を書きます。<br>
少し解説をココに書いてみます。
FrontPageを使う場合には、Shiftキー+Enterキー(Shiftキーを押しながらEnterキーを押す)という操作で、HTMLファイルに<br>タグを埋め込むことができます。
</body>

</html>
 
   
  次に、 『ここの行を一行目にして改行し、次の行にしたいとします。』という文の末尾に『<br>』と書いて下さい。
以下に、最終的なファイルの内容を示します。
実際にブラウザで表示して動作確認をして下さい。
1行目でも改行をしたかったのですが、<br>タグを1行目の末尾(または、その次)に書いていないために本来の2儀容目の内容(『ここにはページの内容を書きます 』)が1行目に繋がってしまったことを確認して下さい。
   
  <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>
<body>
ここの行を一行目にして改行し、次の行にしたいとします。<br>
ここにはページの内容を書きます。<br>
少し解説をココに書いてみます。
FrontPageを使う場合には、Shiftキー+Enterキー(Shiftキーを押しながらEnterキーを押す)という操作で、HTMLファイルに<br>タグを埋め込むことができます。</body>

</html>
   
  結果的に、このようになりました(但し、赤色や強調は便宜上付けただけです)。
このサンプルデータは(sample6_2.htm)です。

これを確認すると、今度は<br>タグを1行目の末尾(または、その次)に書いたので、希望通りに改行ができました。
 


   
  タグについて理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。
 
       
       
    課題16のページへ 課題36のページへ 課題40のページへ 最初のページへ