Lecture/JouhouC2004/12th の変更点 - KAWANO's PukiWiki Plus!

追加された行はこの色です。
削除された行はこの色です。
Lecture/JouhouC2004/12th へ行く。
*情報教育演習II 第12回 [#v71dac6c]

**前回の復習：HTMLファイルの作成（１） [#nb82a8d3]
-HTML(Hyper Text Markup Language)
--Webページを作るためのコンピュータ言語
---文章の意味（役割）を指定 「○○から××までを見出しにする」
---表示のしかたを指定 「○○から××までを太字にする」
---ハイパーリンクを設定「ほかのファイルへジャンプする」
-タグ(tag)
--文章に意味や表示の仕方を指定するために使うマークを使う
---「<」と「>」で囲まれた文字列（タグ名）
---開始タグ（<...>）と終了タグ（</...>）で囲んで指定する（一部終了タグのないものもある）
-最低必要なタグ
--html -- HTMLファイルであること示す
--head -- HTMLファイルに関する情報
--title -- Webページのタイトル
--body -- Webページの中身（表示される部分）
#ref(tag.png,nolink);
-文書の構造をあらわすタグ
--h1, h2, ..., h6 -- 見出し（6段階）
--p -- 段落
--br -- 改行
--address -- 署名や連絡先
-文字の飾りをあらわすタグ
--b -- 太字
--i -- 斜体
--hr -- 水平線（区切り線）

**HTMLファイルの作成（２） [#aaf4277a]
前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。
タグを使って、構造や意味を意識しながら、文書（Web）ページを作成しました。

今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。

***箇条書き [#r3c5a18e]
-<ul>...</ul>、<ol>...</ol>
--箇条書きを設定します。
--ulタグは番号なし、olタグは番号つきの箇条書きに使います。
-<li>...</li>
--箇条書きの中の項目を設定します。
--liタグは、次のようにul、olのタグの中の項目に使います。
  <ol>
    <li>ひとつめ</li>
    <li>ふたつめ</li>
  </ol>
-<dl>...</dl>, <dt>...</dt>, <dd>...</dd>
--説明つき箇条書きを設定します。
--dlタグの中に、項目名（dtタグ）とその説明（ddタグ）を書きます。
  <dl>
    <dt>項目1</dt>
    <dd>項目1の説明</dd>
    <dt>項目2</dt>
    <dd>項目2の説明</dd>
  </dl>

「〜ついて紹介します。</p>」のあとに、次のように入力しましょう。
  <ul>
    <li>「わたし」について</li>
    <li>「街」について</li>
    <li>「わたし」と「街」</li>
  </ul>

***リンク [#s71479b1]
-<a href="...">...</a>
--他のWebページにジャンプするリンクを設定します。
--「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。
--次のようにすると、[[Yahoo! JAPAN:http://www.yahoo.co.jp/]]にジャンプします。
 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
--次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。
 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a>

「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。
  <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a>
箇条書きの項目に、次のようなリンクを設定してください。
-「わたし」について：prefile.htmlへのリンク
-「街」について：town.htmlへのリンク
-「わたし」と「街」：memory.htmlへのリンク

***画像の配置 [#vda46367]
画像データを配置するには、''<img>''要素を使います。
-<img src="画像データの位置" alt="代替テキスト">
--src属性には、画像の位置（ファイルの場所やURL）を指定します
--alt属性には、画像が表示できない場合に表示させる説明文を設定します~
何も説明がない場合は「alt=""」とします


***表によるレイアウト [#me7b5fd4]
-<table>...</table>
--テーブル（表）を設定します。
-<table border="外枠の太さ">
--border属性で表の外枠の太さを指定します（0にすると枠線が見えなくなる）
-<table width="幅">
--widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します
-<tr>...</tr>
--テーブルのひとつの行を設定します。
-<td>...</td>
--テーブルのひとつのマス目（セル）を設定します。
#ref(table_el.png,nolink);
  <table border="1">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
  <table>
|1|2|3|
|4|5|6|
-<table cellspacing="セルの間隔">
--セルとセルの間隔を設定します（セルと外枠の間隔も設定されます）
-<table cellpadding="セル枠と内容との間隔">
--セルの枠と内容の間隔を設定します
  <table border="2" cellspacing="1" cellpadding="5">


''<table>''要素は、本来、表を表示するためのものですが、
この機能を使って、Webページの内容をブロック状にレイアウトすることができます。
|>|CENTER:メインメニュー|
|CENTER:サブメニュー|CENTER:コンテンツ（内容）|
|>|CENTER:署名|



**色の指定 [#n3b34c14]
HTMLでは、文字や線の色などを指定できます。
指定するには、色の名前や色の値を使います。

:色の名前|
代表的な色（16色）には、名前がつけられています。
|COLOR(white):BGCOLOR(black):black|BGCOLOR(gray):gray      |BGCOLOR(silver):silver|BGCOLOR(white):white  |
|BGCOLOR(red):red    |BGCOLOR(yellow):yellow  |BGCOLOR(lime):lime    |BGCOLOR(aqua):aqua    |
|COLOR(white):BGCOLOR(blue):blue  |BGCOLOR(fuchsia):fuchsia|COLOR(white):BGCOLOR(maroon):maroon|COLOR(white):BGCOLOR(olive):olive  |
|COLOR(white):BGCOLOR(green):green|COLOR(white):BGCOLOR(teal):teal      |COLOR(white):BGCOLOR(navy):naby    |COLOR(white):BGCOLOR(purple):purple|
:色の値|
光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。
16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。~
blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。~
--参考：とほほの色入門：色見本
---http://tohoho.wakusei.ne.jp/wwwcolor.htm

***文字の色・大きさの設定 [#t00e8a2b]
文字の色や大きさを設定するには、<font>要素にcolor属性やsize属性を追加します。
-<font color="指定した文字色"> 〜 </font>
--文字色を設定します。
-<font size="指定した大きさ"> 〜 </size>
--文字の大きさを設定します。
--1〜7の数字を使って指定することができます
--big（大きく）やsmall（小さく）という指定もできます
---大きさの設定については、ブラウザによって実際に表示される大きさは異なります
 <font color="blue" size="6">
 <font color="#FFCC00" size="small">

***ページ全体の文字色・背景色の設定 [#s42bc8f9]
ページ全体の文字色や背景色を設定するには、<body>要素にtext属性やbgcolor属性を追加します。
-<body text="指定した文字色"> 〜 </body>
--ページ全体の文字色を設定します。
-<body bgcolor="指定した背景色"> 〜 </body>
--ページ全体の文字色を設定します。
-text属性とbgcolor属性を組み合わせて使うこともできます
 <body text="#000000" bgcolor="#FFFF00">


**Webページに必要な情報 [#q4b697cb]
***HTMLのバージョンの指定 [#kb607450]
HTMLにはいくつかのバージョンがあります。
現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。

HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

***文字コードの指定 [#z9d78161]
コンピュータは世界中の国々で使われています。
さまざまな国の言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。
日本語の文字コードには、おもに''シフトJIS''、''JIS''、''EUC''の３つがあり、Windowsで利用されているのは、シフトJIS、
電子メールで利用されているのは、JISコードです。((http://tohoho.wakusei.ne.jp/wwwkanji.htm))

もし、ブラウザが表示しようとする文字コードと、HTMLファイルで使用された文字コードが合わない場合、文字が正しく表示されない現象（''文字化け''）が起こります。

したがって、ブラウザが文字コードを正しく判断できるように、
HTMLファイルにどの文字コードを使用しているか書いておきます。
それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。
 <head>
   <meta http-equiv="content-type" content="text/html; charset=shift_jis">

また、HTMLファイルがどこの国の言葉で書かれているかも、設定することができます。
 <html lang="ja">

***著作権表示と署名の更新 [#zecd10dc]
~<address>タグなどを使って、署名や連絡先、更新日などは、
必要があれば変更しておきましょう。
とくに更新日は、Webページの鮮度をあらわすものなので、
少しでも更新したら、日付を変更しておきましょう。

また、自分が制作したものを示すために、「著作権」の表示をしておきましょう。
著作権の表示には規程はありませんが、
慣習で使われている「Copyright (C) 発行年 著作者名. All rights reserved.」でよいでしょう。

  <address>
  Copyright (C) 2004 Minoru Kawano. All rights reserved.<br>
  制作年月日: 2004-06-23; 更新年月日: 2004-07-07<br>
  <a href="mailto:自分のメールアドレス">自分の名前</a>
  </address>




**参考リンク [#f0ccd891]
-とほほのWWW入門
--http://tohoho.wakusei.ne.jp/
-Academic HTML
--http://www.tg.rim.or.jp/~hexane/ach/
-The Quick Color Table
--http://www.kanzaki.com/docs/colortable-t.html
-0からHTML
--http://www.zerokara.com/html/
KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/12th の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
