ウェブページは HTML （HyperText Markup Language） というマーク付け言語で書かれています。 マーク付け言語 （マークアップ言語） というのは、テキストにマークを付けることで、 段落などの文章の構造や、文字の種類、リンク先などを指定する方式の言語です。 マーク付け言語には様々なものがあります。 SGMLとか XMLなど、 なんとかMLとつくのはたいていマーク付け言語の略で、 言語的にも親戚関係にあったりしますが、 やや毛色の違うマーク付け言語として、 数式の記述や組版などで威力を発揮する LaTeX（ラテフ） みたいなものも あります （私も文章を作成するときはLaTeXを 多用しています）。 HTML よりも更に拡張性のあるマーク付け言語として、 XML というのがあるんですが、 XML は、ネットワーク上でデータをやりとりする電子商取引などで普及していく ことが見込まれているようです。 例えば土木で関係のありそうなところだと、 建設CALSでは SGMLが 使われているようですが、これからは XML が使われるようになっていくかも知れません（私はこの辺の話題には疎いので、 「 What's 建設CALS/EC」とかをご参考に）。 ワードやエクセルなどの市販のワープロソフトや表計算ソフトを使えさえすれば、 他のことは何も分からなくていいという考え方もあるにはありますが、 マイクロソフトの Office 2003 だって XML に対応したし 、 一太郎だって XMLテンプレート みたいなのを用意したし、 これからはますます XML が様々な文書やデータの標準的なフォーマットとして 利用されるようになっていくことと思われます。 更に、最近の動向として、XMLをベースにしたOpenDocumentというファイル形式が XML関連の標準化団体OASISによって承認され、 更にISO(国際標準化機構)の標準に認められました。 これからは、オープンな標準ファイル形式として OpenDocumentが普及して一般化する可能性 もそれなりにあるかも知れません (MSオフィスとも互換性のあるフリーのオフィスソフトの OpenOffice もバージョン2.0.0からOpenDocumentを採用したし、 一太郎も 一太郎2006からOpenDocumentに対応する。 さて、 マイクロソフトだけはこの流れに逆らうのだろうか?。 ちなみに 次世代MSオフィスのファイル形式は、 Microsoft Office Open XML Formats という 独自の XML仕様で、拡張子が、docx, xlsx, pptxと なるようだけど、 XML仕様になることで、 OpenOffice とかXMLベースのオフィスソフトとの互換性はそれなりに高くなるんだろうか? 独自仕様じゃなくて、 オープン仕様のOpenDocumentを採用してくれればいいのに ( Microsoft Office Open XML を 標準化しようという動き もあるようだけど、すなおに OpenDocument を使ってくれればいいのに) 。 どうも、 MS-Office2007からは、アドインをインストールするならOpenDocumentに対応するみたいだ。 いちいちアドインをインストールしないといけないのでは、 MS文書を メール添付 してよこした人に「OpenDocumentで送り直してください」 とひとこと言うだけでは対応できないかも)。 勿論、OpenDocumentのように、 XMLをベースにした文書やデータを扱うようになるとしても、 ユーザーレベルでは実際にはワープロのような編集ツールを使うことになるので、 XML形式のテキストファイルを テキストエディターで直接 編集したりするようなことが必要になることは まずないでしょうが、 (今後、ますます標準的なデータ形式となる)「XMLとはどんなものか？」ということを、 少しは想像できるようになっていることは重要だと思います （ 車を運転するのに車の内部構造の知識も少しはあった方がいい場合があるのと同様に ）。 その意味でも、マーク付け言語の基礎として、HTML を （自分で簡単なソースくらいは書ける程度に）学んでおくことは、 これからはますます重要 （というか、いざという時に役に立つ技能？） になってくるような気がします。 というより、 ちょっとしたウェブページを HTML で書けるようになっておくことは、 様々な情報発信の場面でもとても有用だと思います （この授業用のページ程度のものなら、 テキストエディターしか使えない環境でも 気軽に用意したりとかもできるし。 HTML以外の各種のマークアップ言語も学びやすくなるし）。
HTML には様々なバージョンが存在しますが 、 ここでは、上に書いたようなことも念頭に置いて、 HTML を XML で再定義した XHTML （1.1）の書き方をやっていきたいと思います （課題を ページビルダーのような支援ソフトで書かせたり、 ワードで HTML 変換したりできないようにしておくためというのもやや ありますが）。
まず、 自分のユーザーディレクトリー(例えば /home/ufs/tauditor/s7501234/ )の中に、 html というディレクリーを作って下さい。 まず、 web1u.html, web2u.html, web3u.html, web4u.html, mokkyou.jpg, mihon.css を /home/ufs/tauditor/s7501234/html/ の中に保存して下さい。 これらのファイルを保存するには、マウスのポインターをこれらの リンク先（下線が引かれて青か紫の色がついている状態）の上に置いて、 右クリックを押し、「名前を付けてリンク先を保存」を 選んでください （リンク先をクリックしてファイルを開いてから保存すると、 htmlファイル内のリンク先のパスがすべて絶対パスに書き換えられてしまったり という不都合が起きる場合がありますので）。 web1u.html, web2u,html, web3u,html, web4u.html は HTML ファイルの見本です。 保存したこれらのファイルを gedit エディターで開いて、 色々と編集（改造）してみてください。 （文字コードは utf-8 のままにして下さい）。 gedit は、端末からgedit web1u.html& みたいに 末尾に&をつけて立ち上げると端末にコマンドが打ち込めるので、 編集保存後に、geditを開いたままで、 端末上で、firefox web1u.html& みたいにして 編集したファイルをFirefoxブラウザーで開けば、 編集内容がどのように反映されたかがわかります。 その状態でgeditで編集保存するたびに、 Firefoxの方の更新(リロード)ボタンをクリックすれば編集内容が 反映されます。 mihon.css はスタイルシートの見本です。 スタイルシート には、背景色とかマージンとか行間などの設定が書かれています。 mihon.css は、 HTML の構造が見えやすいように、 タグ ごとに背景色を変えてあります。 この授業では、スタイルシートの書き方はやりませんが、 興味のある人は mihon.css も gedit エディターで 色々と変更して実験してみて構いません。
XHTML の書き方の基礎は、 Let's begin XHTML などが参考になるかと思います。 自分の書いた HTML が文法的に間違っていないかどうか （といよりはどれくらい間違いを含んでいるか）を調べるには、 Another HTML-lint gateway が有用です（100点満点で採点してくれます。 が、レスポンスヘッダなど、サーバー側の問題もあるので、 100点満点を 取るのはほぼ無理でしょう。 ）。
/home/ufs/tauditor/s7501234/ に保存した web1u.html を gedit エディターで開いてみましょう。 まず、端末を開いて、gedit web1u.html & と打ち込むと、 geditが起動してweb1u.htmlを開いてくれます。 最後に&をつけておくと、 端末のコマンドラインが使える状態になるので便利です。 ファイルの上の方に、
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" version="-//W3C//DTD XHTML 1.1//EN"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="mihon.css" type="text/css" /> <title>ウェブページの練習１</title> </head>
みたいに書かれていますが、取り敢えずこの部分は、必要なおまじないだと 思っておいて下さい （この部分には HTML のバージョンは XHTML 1.1 を使うとか、 文字コードは utf-8 を使うとか、 スタイルシートは mihon.css を使うといった、文書の設定に関することが書かれています）。 作用機序の理解できない現象を神秘化して魔法や「おまじない」などと 名付けることで説明を放棄する非科学的な態度に堪えられないという人は、せめて
<html> <head> <title>ウェブページの練習１</title> </head>
とだけでも書いておいて下さい （これしか書かないとどのような問題が生じるのかということについては、 Another HTML-lint gateway の採点結果の解説などを参照しながら勉強して下さい）。 HTML の基本的な骨格は、
<html> <head> <title>ページのタイトル</title> </head> <body> 本文 </body> </html>
のようになっています。
<html>
と
</html>
で挟まれた部分に HTML 言語で記述したテキストを書きます。
<head>
と
</head>
で挟まれた部分に、文書の内容以外の基本的な設定に関する情報
（HTMLのバージョンや文字コードの宣言とか、どのスタイルシートを使うか、
文書のタイトルなど）を書きます。
<title>
と
</title>
で挟まれた部分に文書のタイトルを書きます。
<body>
と
</body>
で挟まれた部分に文書の本文を書きます。
このように HTML では、テキストに何らかの作用をさせるコマンドは、
<作用> と </作用> で囲まれた部分に作用するようになっています。
こうした HTML のコマンドのことを
タグ
と言います。
web1u.html の
<body>
と
</body>
で挟まれた部分（つまり本文）の中で使われているタグについて
説明していきます。
見出しの書き方：
<h2>題目（ウェブページの練習１）</h2> <h3>見出し１</h3>
h1, h2, h3, h4, h5, h6 などのタグは、見出しを書くためのタグで、 数字が大きいほど下位の見出しとなります。 一般的なブラウザでは、下位の見出しほど小さい文字で表示されます。 見え方：
題目（ウェブページの練習１）
見出し１
段落（というか文章のかたまり）の書き方：
<p> 段落１：ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 </p>
p は段落（の中身の文章）を書くためのタグです。見え方：
段落１：ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。
改行の書き方：
<p> 段落２：ここに色々と文章が書いてあるとする。 改行してみる。 <br /> ここに色々と文章が書いてあるとする。 </p>
br は改行するためのタグです。 これは空間要素タグというもので、 <作用> と </作用> で挟むものがありません。 このように挟むものがないタグは、<作用 /> みたいに右側の>を/>で閉じるように書きます 因みに、HTML4.01（以前の HTML）では空間要素タグも <作用>のように書かれます。 見え方：
段落２：ここに色々と文章が書いてあるとする。 改行してみる。
ここに色々と文章が書いてあるとする。
文字装飾のやり方：
<em>斜体文字</em>を書いてみる。<br /> <strong>強調文字</strong>を書いてみる。<br /> <small>小さめの文字</small>を書いてみる。<br /> <span style="color:#ff0000">赤い文字</span>を書いてみる。<br /> <span style="color:#cc0000">もう少し濃い赤い文字</span>を書いてみる。<br /> <span style="color:#0000ff">青い文字</span>を書いてみる。<br /> <span style="color:#0000cc">もう少し濃い青い文字</span>を書いてみる。<br />
文字を強調する時は、em を使います
（みなさんの環境ではたぶん斜体で表示されます）。
更に強調するときは、strong を使います
（みなさんの環境ではたぶん太文字で表示されます）。
小さめの文字にするときは small を使います。
文字に色を付けるときは、色を付けたいところを
<span style="color:#
rr
gg
bb">
と
</span>
で挟みます。但し、
rr
gg
bb
には、それぞれ R,G,B の階調値を
00〜ff までの二桁の16進数
で与えます。見え方：
斜体文字を書いてみる。
強調文字を書いてみる。
小さめの文字を書いてみる。
赤い文字を書いてみる。
もう少し濃い赤い文字を書いてみる。
青い文字を書いてみる。
もう少し濃い青い文字を書いてみる。
課題1： 見出しタグ（h）と 段落タグ（p）と 適当な文字装飾のタグ（em, strong, small）を 用いて、適当なウェブページを作りなさい。
提出先：メールの件名：html1 提出法：bodyタグの中身だけをメールに貼り付けて送る （添付ファイルやHTMLメールにしないこと） 提出期限：12/4(火) 提出例 ------------------------------------------ 学籍番号：7501234 氏名：後藤文彦 <body> <h2>ウェブページの練習その１</h2> <p> ここに何か適当なことが書いてある。 <strong> 特に強調したいこと </strong> とかも書いてあったりする。 </p> </body>
web2u.html は、リスト（箇条書き）や 表を書く見本です。番号付きリストを書くには、
<ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol>
と書くと
- 項目１
- 項目２
- 項目３
のようになります。ol の代わりに ul と書くと番号なしのリストになります。
番号有りリストの中に番号なしリストを入れ子で
<ol> <li>項目１</li> <li>項目２ <ul> <li>項目２−１</li> <li>項目２−２</li> <li>項目２−３</li> </ul> </li> <li>項目３</li> </ol>
のように書くと、
- 項目１
- 項目２
- 項目２−１
- 項目２−２
- 項目２−３
- 項目３
のようになります。
↑この区切り線は、<hr /> と書いています。 挟むもののない空間要素タグなので右側を /> で閉じています。 ↓にももう1本入れておきます。
表は、
<table border="1" style="text-align:center" summary="表の練習"> <tr> <td>１行目１列目</td> <td>１行目２列目</td> <td>１行目３列目</td> </tr> <tr> <td>２行目１列目</td> <td>２行目２列目</td> <td>２行目３列目</td> </tr> </table>
みたいに書きます。
table border="1" というのは 枠線の太さです。
1 の代わりに、2 とか 3 を入れると枠線が太くなります。
style="text-align:center" というのは、表の升目の中の文字列を、
中央寄せで書くということです。
summary="表の練習" というのは、この表の概要を書いておきます。
例えば、読み上げソフトで音声として閲覧される場合などに利用されます。
各行の成分は、
<tr>
と
</tr>
の間に１行ぶんずつ挟みます。
各行の中の各列の成分は、
<td>と</td>の間に挟みます。見え方：
１行目１列目 １行目２列目 １行目３列目 ２行目１列目 ２行目２列目 ２行目３列目
web3u.html はハイパーリンクの張り方の見本です (リンク用画像サンプル:mokkyou.jpg)。
<a href="http://www.ce.akita-u.ac.jp/">土木環境工学科のページ</a>
のように、 <a href="リンク先のURIアドレス">リンク先のページの名前</a> と書くと
みたいにインターネット上のウェブページにリンクが張れます。 因みに、ウェブページの中には、 「無断リンク禁止」とか「トップページ以外のリンク禁止」みたいなことを 書いているページもありますが、 インターネット上に公開されているページである以上、 どのページにも無断で自由にリンクを張ることができると私は考えています （参考： 奥村晴彦さんの 「リンクに許可は不要です」、 後藤 斉さん の 「リンクは自由!」#okamura, #sumwel ）。
同じページ内の文書の特定の箇所にリンクを張りたい場合は、
<p> ……については<a href="#tugi">次章</a>で述べる。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 </p> <h4><a id="tugi">次章</a></h4> <p> この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。 </p>
まず、リンクを張りたいリンク先の文字列に、
<a id="半角英数のラベル">リンク先の文字列</a>
みたいに書いてラベルを付けておいて、
リンク先へ飛ぶリンク元の文字列の方に、
<a href="#半角英数のラベル">リンク先の文字列</a>
のようにリンクを張る。見え方：
……については次章で述べる。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。
次章
この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。
ある HTML ファイルから、 その HTML ファイルが置かれているのと同じディレクトリー （みなさんの場合は例えば /home/ufs/tauditor/s7501234/html ）の中にある 他の HTML ファイルや画像ファイルにリンクを張る場合は、 href="ファイル名" と書くことでリンクを張れます。 例えば、今、 /home/ufs/tauditor/s7501234/html の中に、 web1u.html と mokkyou.jpg が 保存してあるなら、 /home/ufs/tauditor/s7501234/html の中の HTML ファイルに
<a href="web1u.html">web1u.html</a> <a href="mokkyou.jpg">mokkyou.jpg</a>
と書くことで、それらのファイルにリンクからアクセスすることができます。
引用した文章などを字下げして、更には字体を変えるなどして、 引用箇所であることを明示したいような場合：
<p> ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 以下の引用文を参照して下さい。 </p> <blockquote> <p> <em> 罫線を引き、レイアウトに凝り、社内ロゴなどを貼り込む。 そうした書類のテンプレートをWordで作ってしまうと、簡単なメモや伝達事項まで、 Wordを使ってそのフォーマットにしないといけなくなってしまう。 これは、せっかく文字をデジタル情報に変換してデータ化しやすくしたのに、 再び紙の上に印刷してアナログ情報に戻してしまうことを意味する。 </em> <br /> 鐸木能光『ワードを捨ててエディタを使おう』（SCC）, p.14 </p> </blockquote>
<blockquote> と </blockquote> に挟んだ部分が字下げ（インデント）されます。 但し、 <blockquote> と </blockquote> の中にいきなり文章を書くことはできないので、 段落タグ（<p>,</p>）などで挟んである文章を挿入する 必要があります。 em は強調文字を示すタグです。 <em> と </em> に挟まれた部分は、みなさんの環境ではたぶん斜体で表示されると思います。 見え方：
ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 以下の引用文を参照して下さい。
罫線を引き、レイアウトに凝り、社内ロゴなどを貼り込む。 そうした書類のテンプレートをWordで作ってしまうと、簡単なメモや伝達事項まで、 Wordを使ってそのフォーマットにしないといけなくなってしまう。 これは、せっかく文字をデジタル情報に変換してデータ化しやすくしたのに、 再び紙の上に印刷してアナログ情報に戻してしまうことを意味する。
鐸木能光『ワードを捨ててエディタを使おう』（SCC）, p.14
メールのテキストなどを、改行なども含めて テキストに書いてあるとおりに表示させたい場合
<pre> >ごぶさたしてます こちらこそごぶさたしてます >あしたの件は大丈夫ですか はい、勿論大丈夫です。 </pre>
のように、書いてあるとおりに表示させたいテキストの部分を <pre> と </pre> で挟む。 タグ自体を記述したりするのに使われる <や>や& などの特殊記号は、 <や>や& のように書かなければならない。見え方：
>ごぶさたしてます こちらこそごぶさたしてます >あしたの件は大丈夫ですか はい、勿論大丈夫です。
課題2： リストタグ（ol,ul,li）を使った箇条書きと テーブルタグ（table,tr,td）を使った表を 含み、３箇所以上にハイパーリンク（インターネット上でも同じページ上でも）を 張ってある適当なウェブページを作りなさい。
提出先：
web4u.html は画像貼り付けの見本です。 文章のないところに、 場所を指定して写真だけを貼り付ける場合：
<div style="text-align:center"> <img src="mokkyou.jpg" alt="木橋" /> <br /> 坊中橋の写真 </div>
<div style="text-align:center"> と </div> で挟んだ部分（画像に限らず文字列なども）は、中央寄せで配置されます。 style="text-align:center" のところを、 style="text-align:right" にすれば右寄せで配置されます。 HTML ファイルが置いてあるのと同じディレクトリー内にある mokkyou.jpg という画像ファイルを貼り付けるには、 <img src="mokkyou.jpg" alt="木橋" /> と書きます。alt="木橋" は、画像を表示できない場合に表示させる （音声読み上げも含む）テキストです。見え方：
まずは、この辺の写真資料とか
文章の中に写真を挿入する場合：
<p> 写真を文章の中に右寄せで挿入してみる。 <img src="mokkyou.jpg" alt="木橋" style="float:right" /> ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 </p>
例えば右寄せで挿入する場合は、 <img src="mokkyou.jpg" alt="木橋" style="float:right" /> のように、style="float:right" を書き加える。 style="float:left" とすれば左寄せになる。見え方：
写真を文章の中に右寄せで挿入してみる。
尚、高解像度のデジカメのバカでかいサイズの画像ファイルなどを そのまま貼り付けたりしないこと。 みなさんのディスプレーの解像度は、1024×768ピクセルなので、 仮に1024×768ピクセルの画像を貼り付けると画面いっぱいに表示されます。 画像ファイルはサイズが大きいので、 ネット上に置く場合は、必要最小限のサイズまで縮小してから置くこと。 ディスプレーの解像度を超える巨大な画像を、サイズ指定して小さく表示させる などという（サーバー容量の）無駄使いはしないように。 といっても、みなさんの端末に画像の切り取りや圧縮するのに適した ソフトが入ってるのかどうかまだ調べてません。 そのうち調べます。
写真の大きさを指定したり、縦横比を変える場合：
<p>
写真の大きさや縦横比を変えてみる。
< img src="mokkyou.jpg" alt="木橋"
height="200" width="100" style="float:right" />
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
</p>
height= で高さのピクセル値を、width= で横幅のピクセル値を指定する。 元画像の大きさを変化させない場合でも、 元画像の縦横のピクセル値を指定した方が画像の表示は速くなるみたいです。 この方法でサイズの変更ができるからといって、 デジカメなどで撮影した（ディスプレーの解像度を超える） 巨大なサイズの画像をサイズ指定して小さく表示させる などという（サーバー容量の）無駄使いはしないように （画像の表示も遅くなるし）。 見え方：
写真の大きさや縦横比を変えてみる。
課題3： XHTML1.1 （授業でやったHTML）を用いてウェブページを作りなさい。 テーマは自由 （自分の趣味とか主張とか旅行報告とか創作とか、なんでも）。 HTMLファイルは geditなどのテキストエディターを用いて 直接 書くこと。ワープロや ページビルダーなどの支援ソフトを用いたと分かるものは、加点しない。 くれぐれもインターネット上の他人のウェブページをコピーしないこと。 ウェブ検索すればコピーしたものは、 ほぼ分かるので、加点しない（悪質なものは減点対象とする）。 ウェブ上から画像などのフリー素材を入手して利用するのは構わないが、 アニメのキャラクターなど、 （コピーや改変を制限している）著作物を勝手に流用しないこと。 また、提出された課題は、 ここ(リンクは外しました)に置かれて 学内ネットワークからは閲覧できる 状態になるので、個人情報など(学内でネットワークを使うことのできる)他人に 公開すべきでない情報は書き込まないこと。
提出方法(手順)
提出期限：12/18(火)
提出先： 今までと違うので注意 メールの件名：html3 提出法： HTMLファイルや画像ファイルなど1式を添付ファイルとして 提出先に提出。
- まず、提出するHTMLファイル(複数ある場合はその表紙となるトップページ)の ファイル名は、学籍番号の下4桁の半角数字に.htmlの拡張子を付けたものとする。 例えば、学籍番号が7505699の場合は、 5699.htmlとする。
- 画像ファイルなどのファイル名は半角英数文字とし、漢字などは使わないこと
- htmlファイル、画像ファイルなどの合計サイズは2MBまでとする。
- htmlファイル、画像ファイルなどファイル個数は10個までとする。
- すべてのファイルは同じディレクトリに置かれるので、 他ファイルへのリンクや画像の読み込みなどは、 同じディレクトリ内で参照されるようにパスを記述すること (画像などをサブディレクトリの中に入れたりしないこと)。
- 下記の提出例のように、メール本文中に添付したファイル名を すべて書くこと。
- ウェブメールで添付ファイルを送るには、 「ファイル添付」の「参照」をクリックして添付するファイルを 選択した後に、「ファイル追加」をクリックして 空欄に添付するファイル名が表示されるのを確認してから送信すること。
- Linux端末にフラッシュメモリやデジカメなどの外部メディアをUSB端子で接続すると、 自動的に認識されて、デスクトップ上に外部メディアのアイコンが現れると思う。 画像ファイルなどのコピー作業などが終わってUSB端子を抜く場合は、 まず、この外部メディアのアイコン上で右クリックして、 「アンマウント」を選択し、外部メディアのアイコンが消えてから抜き取ること。 もし、「アンマウント」という選択肢がなくて「ボリュームのマウント」みたいな 選択肢しかなかったら、まず「ボリュームのマウント」を選択してから 右クリックすると、アンマウントが現れる。
提出例 ------------------------------------------ 学籍番号：7501234 氏名：後藤文彦 表紙ページのhtmlファイル:1234.html 表紙ページからリンクを張ったhtmlファイル:1234a.html, 1234b.html 表紙ページに読み込んでいる画像ファイル:1234a.jpg, 1234b.png を添付して送ります。