Webページのしくみ | 情報の基礎: プログラミングとデータ

ページの裏側をのぞく

いつも見ているWebページは、どうやってできているのでしょう。

実は、ふつうの文字で書かれた、設計図のようなものから作られています。ブラウザが、その設計図を読んで、画面に絵を出します。

今日は、その設計図を書いてみます。

学生が入力するセルは、このプレビューでは空白です。

コード: web

<h1>わたしの自己紹介</h1>
<p>名前は、さくらです。</p>
<p>好きな教科は、体育です。</p>
<!-- 「さくら」を、自分の名前に変えて実行しましょう。 -->

タグは、<p> のように、小なり記号と大なり記号でかこみます。

多くのタグは、開始タグと終了タグで、中身をはさみます。終了タグには、/ がつきます。

<p>こんにちは</p> なら、「こんにちは」を、段落としてはさんでいます。

タグ	意味	例
h1	大きな見出し	<h1>自己紹介</h1>
h2	小さな見出し	<h2>好きなもの</h2>
p	文章のまとまり	<p>野球が好きです。</p>
ul と li	箇条書き	<ul><li>野球</li></ul>
a	リンク	<a href="https://example.com">例のページ</a>
img	画像。alt に説明を書く	<img src="cat.png" alt="ねこの写真">

学生が入力するセルは、このプレビューでは空白です。

やってみよう

4問

挑戦してみましょう。回答はここで採点され、その後は保存されません。点数を残したい場合や、続きから再開したい場合はログインしてください。ログインして点数を保存

答えはここで採点され、保存されません。アカウントがあれば、結果が残ります。

コード: web

<h1>好きなもの</h1>
<ul>
  <li>野球</li>
  <li>カレー</li>
</ul>
<p>くわしくは<a href="https://example.com">こちらのページ</a>です。</p>
<!-- li を一つ足して、好きなものを三つにしましょう。 -->

ヒント

h1は「大きい字にする」ではなく、「いちばん大事な見出し」という意味です。見た目は、次の授業のCSSで整えます。