(株)東大能力研修舎

「ネットごっこ」でインターネットプログラミングを学ぼう。 ウェブサイト制作に必要なhtml, CSS, javascriptなどの基礎が学習できます。

サンプルページを見てみましょう

ノート型サーバー net.gok を教室に置けば、ネットショップをつくったりインターネットのしくみについて、さらに学べます。

「ネットごっこの使い方」8回講座ビデオ

• サーバーのスイッチを入れる
• パソコンをつなげる
• タブレットをつなげる

• ネットごっこサーバーの中身
• 中学の教科書英単語を練習

• 色とIDで登録　パスワード不要
• ウェブーページの裏側を見る
• タイトルをつける

• 本文を入れる
• リストを作る
• 表を作る

• img タグ
• パソコン、タブレットからjpgファイルをサーバーに

• タイトルの位置を中央に
• 本文の背景色をピンクに

• pタグにIDをつける
• buttonタグにもIDをつける
• function で動作を指示する

• htmlタグの打ち込み
• javascriptの打ち込み

ネットごっこ　サンプル画面

ウェブサイトのプログラムを練習できる画面

• 画面右上の「プログラムを見る」をクリックすると表示しているプログラムが見られる。
• プログラムの画面がには、タグといわれる<>で囲まれた命令が書かれている。
• 画面右上の 「おもて面をみる」 をクリックすると、実際の見え方がチェックできる

Gooで調べる

どんなウェブサイトがあるのかな

Gooをクリックすればみんなの作ったウェブサイトの ID と、内容が一覧でみられる。

• 一覧表で見たいページの ID をタップして、友だちのページを見てみよう。

ユーザー登録

新しいウェブサイトを開設する

• ネットごっこサーバーに自分のウェブサイトを作ってみよう。
• ネットごっこサーバーは外のネット空間にはつながっていないから、安心して使える


• いろいろやって、インターネットについて理解を深めプログラミングの腕を磨こう。
• 「ネットごっこサーバー」は、企業やプロバイダが使っているのと全く同じリナックスサーバーだ。
• プロのSE(システムエンジニア)と同じことができる

• ネットごっこサーバーに自分のウェブサイトを作ってみよう。


• 上の「ユーザー登録」をクリック。好きな色を選び、好きな ID を入力して、「新しい色とIDを登録」ボタンを押す。
• 1秒後に新しいホームページが表示される。

登録したホームページに変更を加えてみる

ホームページの上方の「うら面のプログラムを見る」ボタン

ボタンを押すと、表示を裏でコントロールしている htm, css, javascript プログラムが見られる。プログラムのどの部分がどの表示を担っているかみてみよう。

プログラム画面で「更新しておもて面を見る」を押す

最初のおもて面の表示にもどる。プログラム変更をくわえていれば、おもて面に反映される

自分のウェブサイトに手を加えよう

プログラム面の------編集-------の範囲に、画面の右がわにあるサンプルをコピー、ペーストして「更新しておもて面を見る」ボタンを押す。 ホーページ制作でいちばん使う html, CSS, javascript のサンプルをコピー・ペーストしながら、それらがどんなはたらきをしているのか学べる。