ホームページを作ってみよう！

○×小学校　６年１組　りょうちゃん

①研究をしようと思ったきっかけ

お父さんのパソコンや学校のタブレットで、いろいろなホームページを見ます。写真がのっていたり、ボタンで別のページにいけたりします。

でも、これがどうやって作られているのかは、まったく知りませんでした。

近所でホームページを作っている「よんにゅ」のこもりんに聞いてみたら、「しくみが分かれば自分でも作れるよ」と言われました。

それで、夏休みの自由研究でためしてみることにしました。

こもりんに教えてもらうまえに、どうやって作っているかを自分なりに予想してみました。

ホームページは文字や写真でできているから、その文字や写真を、どこかに書いていくんだと思いました。

でも、色をつけたり、大きさを変えたりもしているので、それをどうやるのかは分かりませんでした。そこを調べてみたいです。

・Macbook Air（お父さんのパソコン）

用意したものは、これだけです。

あとはインターネットを見るソフト（ブラウザ）とパソコンにもともと入っている「テキストエディット」という文字を書くソフトを使いました。

じっさいに作ってみるまえに、こもりんに、ホームページのしくみを教えてもらいました。

最初は、「HTML」と「CSS」という２つのものを教えてもらいました。

HTMLは、ホームページに「なにを置くか」を決めるものです。

「ここにタイトル」「ここにふつうの文」「ここに写真」と、置くものを1つずつ決めていきます。

CSSは、その置いたものの「見え方・見せ方」を決めるものです。

「この文字は赤にして」「もっと大きく」「まん中によせて」と、あとからかざりつけていきます。

HTMLでなにを置くかを決めて、CSSでそれをどう見せるか決める。役わりが2つに分かれていることが分かりました。

教わったHTMLで、本当に文字が出せるかをためしてみました。

テキストエディットに「こんにちは」と書いて、「jibun.html」という名まえで保存。ダブルクリックすると、ブラウザに「こんにちは」と出ました。

文字を書いただけなのに、ホームページに出せました。

つぎに、その文字を「タイトルにするタグ（h1タグ）」ではさんでみました。はさんだら文字が大きく太くなりました。

このタグで「ここがタイトルだよ」とパソコンに伝えているそうです。

つぎに、「写真を出すタグ（imgタグ）で、ぼくのお家のネコの写真を出してみました。

imgというタグの中に、写真のデータ名を入力すると、ブラウザにちゃんと写真が出ました。

こんどはCSSで見た目をかえます。

まずは、HTMLに「h1」「img」「p（段らくのタグ）」を新しく書いて、そのあとにCSSを書きました。

CSSは「settei.css」というべつのファイルを作りました。最初のむずかしい設定は、こもりんにやってもらいました。

そこに、タイトルの文字を大きくしたり、青色にしたり、全体をまん中によせるように書いていくと、書いたとおりにかわりました。

一番おどろいたのは、はいけいの色をかえたときです。ページ全体の色が、がらっとかわりました。

HTMLは何も変えてないのに、CSSを書いただけで見た目がかわるのが、面白かったです。

ホームページは、「HTML」と「CSS」でできていました。

HTMLで「なにを置くか」を決めて、CSSで「どう見せるか」を決める、というふうに、やることが分かれていました。

今は、データをブラウザで見ているだけですが、このデータをサーバにアップロードすると、実さいにホープページとして、インターネットで見れるようになるそうです。

こもりんによると、今回やったのはいちばん基本のところで、もっと勉強すると、ボタンで動いたり絵がふわっと出たり、ホームページを「動かす」こともできるそうです。

つぎはもっと勉強して、じぶんだけの動くホームページを作れるようになりたいです。