専門講座として「HTML講座（Ⅲ）を6月から開設しました。この講座に応募された人数は14名です。この講座の第1回は、6月24日（木）の13:00～17:00、14名の参加で、日立市施設の「らぽーるひたち」の「講習室」で開催しました。今回は初回であることから参加者のご挨拶、講座資料の引き渡し、ソフトのインストールする上の注意事項、ホームページの着せ替え法の実演、さらには、テキスト本の「Webサイト制作の基礎知識」の解説を実施しました。採用したテキスト本のHTMLのバージョンが古いのですが、基本的な部分が変わりないので採用しています。講座の中で、記述の変更点を説明を行います。HTML5ベースの参考本として「HTML5&CSS3 コーディングとサイト制作の教科書」を推奨します。本講座の講師は安田出世話人が担当しました。
講座の内容梗概は下記のとおりです。
支部ホームページの同好会Webページを着せ替える方法
１）同好会グループのWebページのHTMLファイル、CSSファイル、画像をダウンロードする方法
ルダーを、例えば、パソコンのデスクトップに作成する。
◆次に、ブラウザがChromeの場合、同好会グループのWebページの何も書いていないところを右クリックして「検証」を選択、
上部にある「sources」を選択すると、HTMLファイル、CSSファイル、使用されている画像が表示される。
◆表示されたファイルを同じファイル名で、デスクトップに作成したフォルダーに保存する。たとえば、Dreamweaverの場合は
HTML文書としてコピーして保存する。
◆CSSファイルも同様にして保存する。画像もHTMLファイルを見て、同じように保存する。画像は別のフォルダーになってい
る場合は、それに合わせて保存する。
◆デスクトップに保存したHTMLファイルをブラウザーで表示すれば、同好会グループのWebページと同じものが表示される。
2）新しいWebページにする方法（着せ替える方法）
変更する。CSSファイルは変更しない。
◆新しい画像は、保存した画像と同じサイズに変更して追加保存する。不要となった画像は削除する。
◆HTML編集エディター（たとえば、Dreamweaverなど）でHTMLファイルを開き、テキスト文を書き換える。
◆画像もHTML編集エディターでフォルダーから取り込む。この場合は、サイズが同じでなくても良い。
◆書き換えたHTMLファイルをHTML編集エディターからブラウザで確認すれば、新しいWebページができていることが分かる
Ready Webサイト制作の基礎知識
Lesson-1 Weページは何からできている？
タイムで伝達される。この中でwww（World Wide Web）が標準的に使われており、wwwの中には無数のWebサイトが存在し
、それらのサイトを構成しているのがWebページである。
◆HTML（Hyper Text Markup Language）はタグを使って文字の書式や画像の表示の表示方法、「リンク」の設定を行う。
ブラウザの余白をクリックして「ソースの表示」を選択すると、使用されているHTML文書を確認することができる
◆HTMLはWebページの構成を示し、スタイルシート（SCC）はWebページの見栄や細かなデザインを設定する。W3C(世界標
準化委員会）はWebページ内容とデザインを分離することを推奨している。
◆画像とテキストを表示できるブラウザとしてGoogle Chrome、Edge、Internet Explorer、Safariがあり、ブラウザによって見え
方が異なる。事前にブラウザで確認する必要がある。
Lesson-2 Webページを制作するには
Web制作ソフトのDreamweaverやホームページビルダーでも良い。
◆画像の作成や編集をするグラフィックソフトが必要。「Photoshop」「Illustrator」「Fireworks」があるが、Windowsに付属の「
ペイント」でもよい。画像形式として写真はJPEG、ロゴや画像文字はGIF、PNG（Fireworks）が使用される。
◆作成したWebページをサーバーに送るソフトとしてFTPソフトが必要となるフリーソフトのFTPソフトも存在するが、Web制作
ソフトや主要なブラウザに付属している場合が多い。
Lesson-3 Webサイトのテーマを考えよう
◆また、頻繁に更新できるテーマを選ぶ。日々新しい情報を追加し、育てていくことは大変な作業と言える。
◆テーマが見えてきたらYahoo JAPANやGoogleで「競合サイト」を調査し、自分の特徴（色だけでも良い）を出す。
Lesson-4 Webサイトの構成を考えよう
貰いたいことを考える。
◆Webサイトの構成図を考える。トップページと関連ページはリンクで結ぶ。関連ページの数は多くて7つぐらいにする。
◆Webサイトのタイトルは、他のWebサイトと同じならないように、オリジナルなタイトルとすること。
◆Webサイトの構成とタイトルが決まったら、Webサイトのコンセプトにあったデザインをを考えること。
Lesson-5 Lessonを始める前にやっておこう
と復習用の練習問題で使用するファイルが含まれた「Ｌetstry_data」がある。Lessonを始める前に確認しておくこと。
◆テキストのDVD-ROMにある「Sokusyu_data」フォルダーをまるごとPCに保存しておくこと。「Sokusyu_data」の「プロパティ」
から「読み取り専用」のチェックマークを外しておくこと。
◆ファイルの種類を見るために拡張子は必ず表示する。「エクスプローラー」→「表示」タブの「ファイル名拡張子」および「隠し
ファイル」にチェックマークを付けること。
◆「TeraPad」、「DreamweaverCS5」、「FireworksCS5」および「ホームページビルダーv15」など、Editorをインストールする。
世話人・文責：安田 出
第1回HTML講座（Ⅲ）の参加者