初めてのHTML入門⑨
今回は、コード・改行・プリフォーマットについて勉強していきましょう。
コード
プログラム用語・コンピュータ用語を表すタグとして<code>というものがあります。
改行
HTMLとして、「ここに改行がある」ということを伝えるために<br>というタグを利用します。（”line break”の”break”を略して”br”です）このタグは単独で使うことができ、「ここから」「ここまで」というような表記の仕方はしません。
プリフォーマット
これは、入力したとおりに表示させるタグで、<pre>と表記します。
HTMLを書いてみる
今回は下記のようなファイルを用意します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the drive() function on the vehicle object, it goes </p>
<p>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログ記事だと、なお読みづらくなるでしょう。
</p>
</body>
</html>
表記してある内容については意味を考える必要はありません。
最初のパラグラフの中には、コンピュータ用語が２つ出てきます。"function"には”関数”という意味合いがあり、”drive()”は”関数”の名前です。そして、”vehicle”はオブジェクトの名前です。
では、コンピュータ用語である２つの単語を<code>タグで囲んでみましょう。
<p>
If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
</p>
すると、<code>タグで囲った部分の表記が少し変わっているのがわかると思います。これによって、この部分がコンピュータ用語であるということがわかりやすくなりました。
では次に改行についてやっていきましょう。
ファイル上では改行していますが、ブラウザで表示すると改行されておらず、長い文章になればなるほど読みづらくなってしまいますので、開業したい位置に<br>タグを入れていきます。
<p>
思った通りに改行されないと、非常に読みづらくなります。<br>
特に長い文章や、ニュース・ブログ記事だと、なお読みづらくなるでしょう。
</p>
保存して、ブラウザを更新すると、改行がしっかりと表現されています。随分と見やすくなったと思いませんか？
では、パラグラフを複製して、プリフォーマットも確認していきましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。<br>
特に長い文章や、ニュース・ブログ記事だと、なお読みづらくなるでしょう。
</p>
<pre>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログ記事だと、なお読みづらくなるでしょう。
</pre>
</body>
</html>
３段落目の<p></p>タグを<pre></pre>に置き換えて保存し、ブラウザを更新してみると、、、
プリフォーマットタグの内側は、入力したとおりに表示されます。ですので、改行タグがないところにも改行が入っていますし、インデントも反映されています。
このように、入力したとおりに表示したい文章がある場合には、プリフォーマットタグを使うと非常に便利です。
終わりに
今回は、コード・改行・プリフォーマットについて勉強していきました。
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/gAQ3DQRXjhM
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。
この記事が気に入ったらサポートをしてみませんか？