初級者が超初心者にHTMLを教えることに・・・

Question

私、HTMLはホンのちょっとかじる程度です。
普段はエディタを使用して大まかにページを作り、細部をタグで調整するやり方で作っています。

ところが今度、超～初心者、しかもおじちゃま、おばちゃま（中にはおばあちゃまも？）複数名にHTMLを説明しなければならないことになりました。他にいなかったんです。
入力はまあなんとかできるようですけど、普段はWordもやっとやっとの皆さまだとか・・・。しかも私も習いたいぐらいなのに・・。

自分のことは何とか自分で勉強するとして、質問は超～初心者にHTMLを説明するにあたって、適切な順序のことです。

何事にも基礎が大事とあるように、やはり教えてもらう側から見たときに覚えやすい順番ってあると思うんですね。
まずはブラウザやインターネットなどの用語の説明、HTML概念から入りタグに移るつもりですが、付け加えたほうがいいことなどありますか？

またタグは何から順番にどのぐらい教えていけばいいでしょう？
期間は１週間、時間にして３０時間程度あります（長い・・・）

choco_monaka · Accepted Answer

以前人に教えていたときの私なりの進めかたですが、ご参考になりましたら。

Win98,IE環境を前提に指導するとして。

*初日午前中*
・文字入力の方法
（できるだけローマ字入力をしましょうとか、小さい"ぃ"はLとIと入力しますとか。テキストエディタの起動方法なども）
・フォルダの作り方
（webというフォルダの中にimgというフォルダを作りましょう）
・ショートカットの作り方、拡張子の変更の仕方
（アイコンをクリックしたらメモ帳、画像エディタが開きます。拡張子を表示しましょう。.txtを.htmlに変えてみましょう）

*午後*
用語の解説

はじめから用語を聞くと「難しい感」を与えるかなーと思い、まずちょっと楽しんでもらうようにします。その際、どの人がどれくらいのPCスキルがあるか、あとクセのありそうな人はいないか、理解力の個人差など見当をつける。

*2日目*
・htmlの概念？の説明
・タグについて使用方法をざっと説明
(<>でくくります、<></>で必ず入れ子にします、など）
・実際に作成してもらう。html、bodyの中に文字を入れて表示してみる
（自己紹介を入力してもらう）
・文字色、背景色を変える
（色について説明。色の早見表を配り、好きな色を使って自由に色を変えてもらう）
・改行の仕方
・フォントの大きさを変える

ここまでの作品を一人ずつ発表してもらいつつ、自己紹介してもらいます。発表する楽しみを知ってもらったり、同じ趣味の人を見つけてそれをきっかけに仲良くなって貰えたらと期待しつつ。

*3日目*
・画像を挿入
(画像はすべてimgなどの決まったフォルダに入れましょう）
・壁紙の貼り方
・リンクの貼り方
・mailto:の貼り方
・画像にリンクを貼る
・画像、文字位置の修正

*4日目*
・テーブル操作
・テーブルの中に画像を挿入してアルバムのページを作ってもらう

結構理解度に差が出ます。できるだけお互いに教えあいしてもらいます。

*5日目*
・自己紹介、アルバムのページ、リンクのページを作り、それぞれリンクを貼る
・ブラウザで何度も表示して修正してもらう
・アップロードの仕方の説明
（IE6を使ったアップロードなど）

*6日目以降
・進み具合や理解度によってalt、meta、title、link、vlinkなど指導
・質疑応答など

yanmaa · Answer

タグを叩いてHTMLを作成するという事で５日間１日６時間コースという事ならばフォーム、スタイルシートとスクリプトは外しますね。時間割は大体１時間を目安にし、１０分程度の休憩をはさみ、午前３時間、午後３時間とします。また、午前、午後に最低１回ずつ、実技を入れる事をお勧めします。聞いているだけでは身につきません。(簡単な問題を用意) ＃本当は休憩前に課題を出し、出来た人から休憩に入るが良いと思います。１日目午前：HTML基本講座(講義のアジェンダ含む) 　　ここでは実技なし午後：HTML用語と基本タグ(

) 最初に今回の講義で最終的に目指すページを紹介して進めたら良いと思います。２日目午前：文字飾り(…) 午後：テーブル(

) ３日目午前：段落(

)、画像(SRC) 午後：リンク()、フレーム４日目午前：お決まりタグ(最初の行からの間含めるべきタグ) <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> 午後：その他(<HR><FORM>←参考) ５日目午前：サーバアップロード午後：総復習(ページサンプル通りに作らせる) なお、３０分～１時間程度の実技時間を含めるとこの程度が限界ではないですか？本当は最終日は総復習に当てたいところですね。実技に関しては解答はしておく必要があります。なお初日に簡単なタグ一覧とHTMLの作成方法を教えておいて、復習できるようにしておけば良いかなと思います。本当はこの程度は２日コースでもいいかもしれませんが、初心者相手ですからゆっくりとしたペースになりますので詰め込まないようにしましょう。

nico_chan · Answer

テキストは使われていますか？

私は、ナツメ社の「ＨＴＭＬタグリファレンス」を使ってます。
やりたいことをカテゴリごとに分類し、表示例やIEとNNでも違いも載せてあり便利です。
（ナツメ社の「HTMLハンドブック」もわかりやすいそうです）

生徒さんに買ってもらって、使ってもらったらどうでしょう。

kabaka99 · Answer

私もHTMLを勉強中で、neiさんと同じく、フリーのエディターで基本ページをつくり、対応していない部分にタグを書き加えています。
なので、お気持ちはよぉくわかります。同類のたわごととしてお聞き下さい。
相手が超初心者であれ、なんであれ、自分が経験していない事を教えるのは無理があると思います。ですから、neiさんがたどってきた道をそのまま相手に伝えれば良いのではないのでしょうか。詳細な状況が分からないので、もしかしたら不可能かもしれませんが、最初にどうどうと自分をさらけだして、「学校で勉強してきたわけじゃないけれども、皆さんよりは多少HTMLを知っているつもりなので、それをお伝えします。この１週間で私を追いぬく意気込みで頑張りましょう」とでも紹介したらいかがでしょ？

ちなみにもし、自分が同じ立場に置かれたとしたら、まず最初にHTMLとインターネットの基本を紹介します。以外とみなさん勘違いしていることが多いので、用語やそのなりたち、使われ方の実例などを示します。このときに実際にホームページを見たりして、どのようなイメージのページを作りたいか整理しておきます。

その次からは、いよいよHTML作成に入ります。ホームページつくりを商売とする人でもなければ、エディターで十分ですから、まずエディターから始めます。作りかたは他の方が言われているように、まず文章だけ。次にテーブル。次に画像貼り付け。最後にリンクでしょうか。
このエディターでつくり、ブラウザーで映し出した自分のHTMLファイルを「ソース」表示させて、タグがどのような役割を果たしているのかを順番に理解してもらいます。

同じことの繰り返しで、徐々にレベルアップさせていき、最終日にできる限りそれぞれのイメージに近いHTMLファイルができあがるように誘導します。

もし、それでは物足りない、という人が出れば、タグの一覧を渡しておいて、どんどん先に進んでもらえばよいと思います。

参考ページはご存知だと思いますが、下記のページをご紹介します。

参考URL：http://tohoho.wakusei.ne.jp/www.htm

D-onk · Answer

こんにちは！私自身も独学でHTML知識を取得しました。その時の考え方と教える時の考え方は同じで、言語と例えの、イメージ作りがわかりやすいかと・・・ =頭頭の下に =体があるイメージ　サーチ＝画像を探すなどなど英語、日本語をイメージ作りをしてみたらいかがでしょうか？

natural · Answer

以下は、私が初心者にプログラムを教えるときによく使っていた手ですが、タグの説明に置き換えてみました。

1.なるべくシンプルな、最小単位の、何も表示しないものを組んでみせる。

例えばHTMLなら、
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
といった感じです。
これを保存してブラウザで見ても何も出ませんよね。
それを確認した上で、BODYタグやHEADタグの役割だけを説明しておきます。

2.少しずつ内容を書き足していき、その変化の確認と共に、新しい部分の説明を行う。

例えば、上記にTITLEタグとタイトルを書き足してあげれば、ブラウザで確認したときにタイトルが現れますし、BODYタグ部分に文章を入れてあげれば本文が表示されますよね。
こんな風に少しずつ足していき、その都度目視確認と説明を入れてあげれば判りやすいと思います。

3.ページが完成したら、確認の意味を込めて生徒さんに各タグの機能を質問し、締めくくりに再度簡単な説明を行う。

尚、ここまでの過程で行う作業は、生徒さんにも実際にやってもらった方が身に付くはずです。（聞いてるのと実際に行うのでは理解度が違いますから）
それから、ポイントとして、完成イメージのページには全てのタグが含まれているか、または複数のページになったとしても併せて全てのタグを網羅していなければいけません。
また、これを考えながら進めていくと、混乱や抜けの元になりますから、最初にきちんと完成ページを設計しておかなければなりません。
でも、それさえきちんとしておけば、その後の進行は大分楽になるはずです。
これはあくまでも私のスタイルですので、お好みに合うかどうか判りませんが、もし興味を持たれたらご検討なさってみて下さい。(^_^)

＃ちょっと気になったのですが、30時間には生徒さん自身のホームページを
＃作成する時間は含まれているのでしょうか。
＃もしそうなら逆に足りない気がするのですが…。(^^;
＃それに、そもそも30時間って、意外と短いものですよ。
＃余程綿密に時間割を組み立てておかないと厳しいかもしれませんね。(^_^;
＃（不慣れな頃、私は時間配分を失敗して、講義時間が延びてしまったこと
＃があります）

nico_chan · Answer

初心者相手だったら、タグなど見せず（教えず）、すべてＨＰエディタでやっちゃうようにすればいいと思います。

たとえば、ＦｒｏｎｔＰａｇｅを使って、編集し、アップロードする。
ＦｒｏｎｔＰａｇｅだったら、ワープロ感覚で編集でき、ｆｔｐソフトを使わずアップロードできるんじゃないでしょうか。

あとは、アップロードしたＨＰ表示する方法を教えればＯＫじゃないかな。

初心者には難しいこと（タグとか）を教えちゃあいけないと思います。

noname#2072 · Answer

↓「タグ講座」を印刷して、見せるとか？

参考URL：http://www.tiara.cc/~kajiji/111.htm

ranran21 · Answer

タグは

文字の制御　（色、サイズの変更）
画像の貼り付け方
リンクの貼りかた
背景の設定
テーブルタグ

・・・くらいが妥当ではないでしょうか。
初心者向けのHTML本をみてみるのも順番を決めるのに
参考になると思いますよ(*^-^*)

初級者が超初心者にHTMLを教えることに・・・

以前人に教えていたときの私なりの進めかたですが、ご参考になりましたら。

タグを叩いてHTMLを作成するという事で５日間１日６時間コースという事ならばフォーム、スタイルシートとスクリプトは外しますね。

テキストは使われていますか？

私もHTMLを勉強中で、neiさんと同じく、フリーのエディターで基本ページをつくり、対応していない部分にタグを書き加えています。

この回答への補足

こんにちは！

以下は、私が初心者にプログラムを教えるときによく使っていた手ですが、タグの説明に置き換えてみました。

この回答への補足

初心者相手だったら、タグなど見せず（教えず）、すべてＨＰエディタでやっちゃうようにすればいいと思います。

この回答への補足

↓「タグ講座」を印刷して、見せるとか？

タグは

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング