ホームページ制作〔HTMLの基礎〕勉強会報告
第１５回 勉強会
|
日 時：９月１０日 午前９時３０分〜１２時分 場 所：青葉区役所別館 点字作成室 参加者：４名（内講師：１名、） 内 容：成果物のチェックとアップロード 各自が制作した成果物を持参し、チェックとアップロードなど行う。。 ｓｋさんはワードで制作されたチラシの画像部分をコピーし htmlファイルに挿入し、２頁目を制作しました。 ｍｋさんはプロバイダーにホームページのエリアを登録し アップロードが可能となりました。 ｋｍさんはffftpを使ってアップロードを行いました。 一部調整した上で近々URLが公開されます。 本年一月より行いましたhtmlの勉強会は今回をもって、一応 終了します。 長期間にわたりご参加有難うございました。（m.y） |
第１４回 勉強会
|
日 時：９月３日 午前９時３０分〜午前１１時４５分 場 所：青葉区役所別館 点字作成室 参加者：４名（内講師：１名、） 内 容：成果物のチェック 各自が制作した成果物を持参し、チェックを行う。 １．フレームの設定に不具合のものがあった。 ２．画像ファイルに空きスペースがあるものがあった。 ３．画像ファイルにbmpファイルを使用してるものがあった。 ４．表形式で空欄への全角スペースが入力されていないため、罫線の 消えているものがあった。 ５．ＨＰＢを使って制作した場合ファイル名を指定して保存しないと、 newpage1.htm、newpage2.htm、・・・ となり、管理しづらくなるので、適切なファイル名を指定した方が良い。 などなど。 |
第１３回 勉強会
|
日 時：７月９日 午前９時３０分〜午後０時１５分 場 所：青葉区役所別館 相談室 参加者：３名（内講師：１名、） 内 容：７月は個別相談会： １．html作成ソフトを使用した場合に保存する際の手違いによって、よく起き ることですが、画像ファイルなどののLINK先が正しく設定されていなかった。 この場合、自分のパソコンでは表示され、異常に気付かないことがある。LINK先 を正しく設定し直したところ、正常になった。 ２．表形式を使用する場合、セルに文字などが全く記入されていないと、罫線 が表示されない。この場合はセル内で全角のスペースを１字入れると罫線は表 示される。 |
第１２回 勉強会
|
日 時：６月１１日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：6名（内講師：１名、） 内 容：最終的整理とFTPソフトのダウンロード 内容： 今までに作成したhtmlファイルの最終的整理を行う。即ち、 <html></html>タグで全体を囲む。 <head></head>タグの間に<title>・・・</title> を入れ、・・・の部分にファイルの表題を入れる。 <head></head>タグの間にはこのほか <META ・・・・>文を入れ、言語の指定や 使用した作成ソフトなどを書くことができる。 |
 |
| アップに使用するFTPソフトの「ffftp」のダウンロードの方法、インストールの方法、設定の方法について実習する。 〔勉強会ご参加の皆様へ〕 今日の勉強会でもって、講義は終了し、来月は各自が制作したホームページについて、制作上の問題点・疑問点などあれば補足説明します。 参加希望者は前日までに連絡をお願いします。また、成果物をＦＤ、ＣＤ−Ｒなどにコピーし持参願います。 |
|
第１１回 勉強会
| 日 時：６月４日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：４名（内講師：１名、） 内 容：フレームの設定 フレーム（Frame）について、 フレームとは２個ないしは４個のhtmlファイルを横または縦に或いはその組み 合わせで表示する方法です。視覚障害のかたにとっては読みにくい面があり、 ＡＢＳのホームページには使われていませんが、一般的に多くのホームページ で採用されております。 |
|
<frameset rows="30%,70%">・・・</frameset> ３対７の比率で横分割 <frameset cols="30%,70%">・・・</frameset> ３対７の比率で縦分割 前節の・・・の部分に挿入するファイル名を指定する。例えば スクロールバーを付ける場合は <frame src="contents.htm" scrolling="yes"> 強制的にスクロールバーを止める場合は"yes"を"no"とします。 横方向の余白指定する場合は <frame src="contents.htm" marginwidth="xx"> 縦方向の余白指定する場合は <frame src="contents.htm" marginheight="yy"> xxおよびyyにはピクセル単位で数字を入れます。 混同するのを避けるためフレームに名前を付けます。 <frame src="contents.htm" name="frame1" marginheight="yy"> <frame src="mama.htm" name="frame2"> 例えば、contents.htmでリンク先を指定する場合には <a href="papa.htm" target="frame2">お父さんのページ</a> ここで target="frame2"を設定しないと、contents.htmと同じフレーム、即ち 左側のフレームに表示されます。 ここにtargetを指定するのではなく、<head>文の中で指定すればそのファイル 全部に適用されます。 <head> <base target="frame2"> </head> フレームを解除してリンク先を表示させたい場合は、例えば <a href="index,htm" target="_top">入り口へ戻る</a> targetの後に_topを入れます。 |
第１０回 勉強会
| 日 時：５月１４日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：４名（内講師：１名、） 内 容：リンク（ＬＩＮＫ）の設定 リンクの確認：リンクが設定されているテキストは普通のテキストとは違った色で表示され、マウスのポインターを合わせると矢印が指型に変化する。 相対リンク：自分のホームページ内のファイルへのリンク。 <a href="image/hana.jpg">花の写真</a>：「花の写真」と言うテキストから同列のimageホルダーのhanaと言う画像ファイルへリンクする。 |
|
| 絶対リンク：他人のホームページへのリンク。 <a href="http://www.ran.sakura.ne.jp/~abs21/index.html">ＡＢＳ２１</a>： ＡＢＳ２１と言うテキストからＡＢＳ２１のホームページへリンクする。リンク先アドレスの右端のindex.htmlは省略しても良い。 メールへのリンク設定：自分のメールアドレスを設定しておくと、クリックにより自動的にメーラーが立ち上がり、宛先欄に自分のメールアドレスが挿入されます。 <a href="mailto:aoba@xx.sakura.ne.jp">メールはこちらまで</a> <body>タグのオプションでリンクの色を設定できます。 <body link="#ff0000" vlink="#808080">：linkは未アクセスのリンクの色指定、vlinkはアクセス済みLINKの色指定。 |
|
第９回 勉強会
| 日 時：５月７日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：６名（内講師：１名、） 内 容：サウンド（音）とムービー（動画）の挿入 サウンドファイルの形式（ ）内は拡張子： WAVE(.wav)、AIFF(.aif .aiff)、AU(.au)、MIDI(mid)、MP3(.mp3)、RealAudio(.ra .ram) <bgsound src="ファイル名">、繰り返す場合は<bgsound src="ファイル名" loop="x">：xの部分に回数を入れる、連続の場合はxに「infinite」を入れる。 |
|
| ムービーの形式（ ）内は拡張子： AVI(.avi)、QuickTime(.mov)、MPEG(.mpeg .mpg)、WMV(.wmv) <img dynsrc="ファイル名">：繰り返す場合は「bgsound」と同様に「loop="x"」を追加する。 マウスを合わせたら再生するようにするには「start="mouseover」を追加する。 「bgsound src」或いは「img dynsrc」の代わりに「embed src」も使用される。 |
|
第８回 勉強会
| 日 時：４月９日 午前９時３０分〜午後０時００分 場 所：青葉区役所別館 点字作成室 参加者：６名（内講師：１名、） 内 容：宿題の課題をチェックし、不足タグを追加し、完成させる。 制作した表組(table）は下記
| ||||||||||||||||||||||||||||||||||
第７回 勉強会
| 日 時：４月２日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：６名（内講師：１名、） 内 容：前回に引き続き、表組（table）の設定を学ぶ、 縦方向のセルの連結：<td rowspan="x"> xは連結するセルの数、 表組の横方向の位置の指定（左側）：<table align="left">：右側の場合は"right"、 表組への背景画像の設定：<table background="back.gif> back.gifは背景画像用ファイル名、 行に背景色を付ける：<tr bgcolor="#ffffcc"> #ffffccは色のコード番号、 セルに背景色を付ける：<td bgcolor="#ffcccc"> #ffccccは色のコード番号、 表組にタイトルを設定する：<caption>・・・・・・・・</caption>を<table>タグの次に挿入する。、今回で表組の勉強は終わり、次回までに課題を自習することとする。 |
第６回 勉強会
| 日 時：３月１２日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 市が尾プラザ会議室 参加者：８名（内講師：１名、） 内 容：表組（table）の設定を学ぶ、 <table>タグ、<tr>：行のタグ、<th>：見だしセルのタグ、<td>：セルのタグ に加え各タグのオプションとして、width="xx"、border="xx"、cellspacing="xx"、height="xx"、 align="center"、valign="top" などをメモ帳で作成しながら、IEで結果を確認する。 最後に横方向のセルの結合：<td colspan="xx">を確認し終了する。 |
|
第５回 勉強会
| 日 時：３月５日 午前９時３０分〜午後０時３０分 場 所：青葉区役所別館 点字作成室 参加者：７名（内講師：１名、） 内 容：勉強会に使用する画像ファイルなどをホームページ上より ダウンロードし、解凍する。その後、画像ファイルの貼り付け、背景色の設定、 背景への画像の設定などを行程順に、メモ帳を使って記述し、 ＩＥで確認しながら制作する。 画像貼付のタグ <img src="image/xxxx.jpg">：ホルダー〔image〕の中のxxxx.jpgファイルを 貼り付ける。同じ< >の中にwidth="xx"：画像の幅、height="yy"：画像の高さ、align="top" or "left" or "right" ：画像の位置指定、hspace="xx"：画像横の空白指定などのサフィックスのタグ。 次に、ページ全体の背景色の設定タグ：<body bgcolor ="#ffff55"> ・・・・・</body>、背景画像の設定タグ<body background="iamge/back.gif"> ・・・・・</body>を実習する。 |
|
|
第４回 勉強会
| 日 時：２月１２日 午前９時３０分〜午後０時 午後４時００分まで自由勉強（相談室使用） 場 所：青葉区役所別館 市が尾プラザ会議室 参加者：８名（内講師：１名、） 内 容：前回の制作分をＩＥを使って表示させた後、右クリックで プルダウンメニューから「ソースの表示」でメモ帳を開く。 メモ帳で随時タグを挿入しながら、ＩＥでその結果を確認する。 横線タグ <hr size="5" width="50%" color="#000080">, センタータグ<center>……</center> 新たにメモ帳を開き箇条書き（リスト）タグ <ul><li>……</li><li>……</li></ul>, <ol><li>……</li><li>……</li></ol>, <ol type="A"><li>……</li></ol>, <ul type="square"><li>……</li></ul>, の使用方を実習する。 |
第３回 勉強会
| 日 時：２月５日 午前９時３０分〜午後０時 午後３時３０分まで自由勉強（相談室使用） 場 所：青葉区役所別館 点字作成室 参加者：７名（内講師：１名、） 内 容：前回の制作分をＩＥを使って表示させた後、右クリックで プルダウンメニューから「ソースの表示」でメモ帳を開く。 メモ帳で随時タグを挿入しながら、ＩＥでその結果を確認する。 HTMLタグ<h1 align="right">,<h1 align="left">,<h1 align="center">, <p>,<p align="center">,<br>,<hr>.<hr noshade>,<hr size="3">, <hr width="50%">,<hr width="700"> を実習する。 お互いに助け合いながら、一歩後退二歩前進、結果を出せるように進んでおります。 |
|
|
第２回 勉強会
日 時：１月１５日 午前９時３０分〜午後０時
午後４時まで自由勉強（相談室使用）
場 所：青葉区役所別館 市が尾プラザ会議室
参加者：９名（内講師：１名、サポータ：１名、見学者：１名）
内 容：前回の制作分をＩＥを使って表示させた後、右クリックで
プルダウンメニューから「ソースの表示」でメモ帳を開く。
メモ帳で随時タグを挿入しながら、ＩＥでその結果を確認する。
HTMLタグ<h1>,<marquee>,<marquee loop=x>,<marquee
behavior="alternate">,<marquee behavior="slade">,
<font color=red>,<font color=#ff0000>,<acronym title="xxxx">,
<!--xxxxxxxxxxxxxx-->
を実習する。
時間の許せる方は午後からは相談室に戻り、
４時まで熱心に復習されました。
第１回 勉強会
日 時：１月８日 午前９時３０分〜午後０時
午後３時３０分まで自由勉強
場 所：青葉区役所別館 相談室
参加者：６名（内講師：１名）
内 容：ホルダーを設定後、メモ帳で随時テキスト文を制作しながら、
HTMLタグ<b>,<i>,<u>,<s>,<sup>,<sub>,<big>,<small>,<font size=x>
を使用し、
ホームページ上の表示がどうなるかをＩＥを立ち上げ確認する。
注）（株）秀和システム発行：はじめてのホームページ ＨＴＭＬ入門Windows XP対応
を教科書として使用してます。
