情報リテラシ

担当教員：Defago, Xavier

情報リテラシ第一

課題4：HTMLの作成

準備作業

  1. 環境の準備
    • テクストエディターを設定する（例：visual studio code, Notepad++, emacs, vim, CotEditorなど）
      タブレットやスマホでもエディターが存在します：
      • (Android): TurboEditor, QUoda, DroidEditなど
      • (iOS): Koder Code Editor, Textasticなど

      インストール方法はそれぞれ：

      • Appストアのインストール　オンラインストールのサービスを利用する：App InstallerやApp StoreやGoogle Playなどに似たシステムで見つかって，インストールの手続きを行う．
      • ウェブのダウンロード　信用ができるサイトからダウンロードをして，インストールの説明に従う．ダウンロードをする事で，情報セキュリティーのリスクがあるので，正常サイトの確認ができなければ，すぐ止めます．httpsのセキュリティのサイト以外は利用しない．参考書：Mac用の説明であっても，他のOSも同じ基準なので，参考になります．
      • パッケージマネージャー(上級者限定)　ターミナルでのインストール：例えば，MacではHomebrew (Mac)を使う事が多いです．
      • ウェッブのエディターを利用する（例：W3Schools Online Editor ）
    • エディターの設定にディフォルト文字コードをUTF-8（Unicode UTF8）に設定する．
  2. 最低限のHTMLファイルを作る
    • エディターで新ファイルの作成をして，空のまんま名前をつけて保存をする．ファイル名は例えば「hello.html」にする．特に，拡張子は「html」もしくは「htm」にする．
    • ファイルに「Hello」や他の英語の文書を書いて，保存する．
    • ブラウザから，作ったHTMLファイルを開く．
  3. 日本語で書く
    • ファイルhello.htmlに，「こんにちは」の様な日本語の文書を書く．
    • ブラウザで，リロードをする（Command-RやCtrl-R）．
    • 文字化けになる可能性があります（ならば後の「文字化けを直す」で続く）．
    • ブラウザの設定に，ディフォルト文字コードをShift-JISなどにする．
    • ブラウザで，リロードをする．
    • 文字化けなら，次へ．
  4. 文字化けを直す
    • ファイルhello.htmlに以下の様に書き直す：
     <meta charset='utf-8'>
 Hello.こんにちは
    • ブラウザで，リロードをする．
    • 文字化けが消える(meta charsetがブラウザーにファイルの文字コードを伝わる)．
    • 確認ができたら，ブラウザーのディフォルト文字コードを元の設定に戻す．
  5. HTMLらしく内容を書き直す
    • ファイルhello.htmlに以下の様に書き直す：
     <!DOCTYPE html>
 <html>
 <head>
     <meta charset='utf-8'>
     <title>Greetings</title>
 </head>
 <body>
 <h1>Greetings</h1>
 <p>Hello world. こんにちは</p>
 </body>
    • ブラウザで，リロードをする．
  6. 内容を多数の言語やリストを含む
    • ファイルhello.htmlに以下の様に書き直す：
     <!DOCTYPE html>
 <html>
 <head>
     <meta charset='utf-8'>
     <title>Greetings</title>
 </head>
 <body>
 <h1>Greetings</h1>
 <ul>
     <li>Hello everyone!</li>
     <li>皆さんこんにちは！</li>
     <li>안녕하세요</li>
     <li>大家好</li>
     <li>Bonjour à tous!</li>
     <li>viele Grüße</li>
 </ul>
 </body>
 </html>
    • ブラウザで，リロードをする．

宿題作業

テーマは自由ですが、自己紹介や趣味の紹介などをするテーマがやりやすいです。 長さに関しては特に要求などをしていませんが、工夫があれば採点が上がります。 提出方法はOCW-iのみ。 今から、提出は何度もできます（一番最新のものを採点するので、ファイル名で分かるようにお願いします） 締め切りがすぎたら、例外なし提出できません。 内容はHTMLファイルをそのマンマで提出してください。 もし複数のファイルがあれば（例：画像ファイルなど）、ファイルを１個ずつもしくはzipの圧縮ファイルに纏めて提出下さい。

条件：