課題5-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作第1回の資料を参照)。
  3. デスクトップに「課題5」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題5」の中の「1」フォルダーの中に「index.html」という名前で保存する。


  5. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>いろいろな表示の練習</title>
    </head>
    <body>
    いろいろな表示の練習<br>
    <font size="7">大きい文字</font> と 
    <font size="1">小さい文字</font> と 
    <font size="3">デフォルトサイズの文字</font>
    </body>
    </html>
    


  6. 「課題5」の「1」フォルダーにある「index.html」をブラウザで開く。すると、このようなものが表示される。
    <font>と</font>で囲むと、その間の文字の表示を変えられる。
    sizeを指定すると文字の大きさが変わる。
    sizeで指定できるのは1~7の値。3がデフォルトの大きさ。


  7. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    <font face="MS ゴシック">ゴシック体</font> と 
    <font face="MS 明朝">明朝体</font>
    

    faceを指定すると書体が変わる。


  8. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    <font color="red">赤い文字</font> と 
    <font color="#0000ff">青い文字</font>
    

    colorを指定すると文字の色が変わる。
    colorに入れられるのは色の英語名かRGB値 (前回の表の背景色と同様)。


  9. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    1234abcdあいう (ここから斜字体) <i>5678efghえおか</i> (斜字体おわり)
    

    <i>と</i>で囲んだ部分は斜字体になる。ただし、全角文字に対しては無効。


  10. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    文章のなかで<u>大事なところ</u>にはアンダーラインをいれる
    

    <u>と</u>で囲んだ部分にアンダーラインが入る。


  11. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    <strike>間違い</strike> → 修正版
    

    <strike>と</strike>で囲んだ部分に打消し線が入る。


  12. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    y = x<sup>2</sup>, x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub>
    

    <sup>と</sup>で囲んだ部分は上付き文字になる。
    <sub>と</sub>で囲んだ部分は下付き文字になる。
  13. 下から2行目の</body>の上に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。
    <br><br>
    細字と<b>太字</b>
    

    <b>と</b>で囲んだ部分は太字になる。


課題2
inserted by FC2 system