第 10 回 HTMLの の 基 礎 HTMLとは 作 成 手 順 基 本 形 改 行 と 段 落 整 形 済 みテキスト 横 線 見 出 し リスト1(UL,OL) リスト2(DL) インライン 画 像 リンク
HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:<...>で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd 他 に loose.dtd,frameset.dtd などで 定 義 WWW, http, htmlの 関 係 WWW:World wide web http:hyper text transfer protocol 注 意 HTMLをどう 表 示 するかはブラウザー 次 第 (I.E.とNetscapeで 異 なる) 規 格 は 改 定 されており 使 われなくなった 古 い 規 格 に 注 意 巷 の 解 説 には 間 違 いがよくある(この 資 料 も 含 めて!) HTMLはできるだけ 新 しい 規 格 に 基 づいて 書 くこと
作 成 手 順 端 末 エミュレータからwebブラウザー を 起 動 する 例 :c2ja0rat(109)% netscape & html 文 書 ファイルの 作 成 文 書 を 作 成 / 修 正 名 前 をつけてファイルに 保 存 または 上 書 き 保 存 2.ブラウザーでの 確 認 作 成 した 文 書 を 開 く(File, Open) ファイルをエディターで 修 正 後 は Reloadする
基 本 形 ようこそ 農 学 太 郎 のページへ ただいま 工 事 中 です ヘッダー 部 タイトルは 中 身 を 的 確 に 表 すものを 必 ずつける 本 体 ここが 実 際 に 表 示 される マークアップの 方 法 : マークアップは 必 ず 半 角 で 入 力 する < 要 素 > 内 容 </ 要 素 > なお 大 文 字 小 文 字 は 問 わない 開 始 タグ 終 了 タグ ( 一 部 省 略 可 ) 上 の 内 容 をエディターで 作 成 し index.htmlという 名 前 で 保 存 ブラウザーで 内 容 を 確 認 する
段 落 と 改 行 html 文 書 は テキスト 上 での 改 行 は 無 視 されます このように 改 行 してもだめです 半 角 空 白 やtab も 無 視 されます <p> 段 落 の 区 切 りを 意 図 する 時 は このようにして 下 さい 改 行 空 白 行 の 後 から 新 しい 段 落 が 始 まり ます </p> <p>なお 強 制 的 に 改 行 したい 場 合 は <br> この 様 にして 下 さい </p> 段 落 は <p>...</p> で 囲 む 強 制 改 行 は <br> を 入 れる 段 落 と 改 行 をエディターで 作 成 し 上 書 き 保 存 テキストは 適 当 にアレンジして 構 わない ブラウザーで 内 容 を 確 認 する
整 形 済 みテキスト 前 に 見 たように html 文 書 ではブラウザー 上 で 整 形 されます <pre> もし テキストで 見 たままのように 表 示 させる 場 合 は この 様 にします </pre> 段 落 は <pre>...</pre> で 囲 む 上 の 内 容 をエディターで 作 成 し 上 書 き 保 存 テキストは 適 当 に アレンジして 構 わない ブラウザーで 内 容 を 確 認 する
横 線 html 文 書 で 区 切 りの 横 線 を 入 れる 時 は 以 下 のように します <hr> 上 に 横 線 が 入 ったのをブラウザーで 確 認 して 下 さい 横 線 は <hr> を 入 れる 上 の 内 容 をエディターで 作 成 し 上 書 き 保 存 テキストは 適 当 に アレンジして 構 わない ブラウザーで 内 容 を 確 認 する
見 出 し 見 出 しは <hn>...</hn> n=1,2,3,4,5,6 <h1> 見 出 し</h1> で 囲 む <h2> 見 出 しとは</h1> 章 や 節 小 節 の 見 出 しに 相 当 するものである ただし 階 層 構 造 ははっきりしていない <h2> 見 出 しの 設 定 の 仕 方 </h2> このように 囲 んで 設 定 する <h3> 見 出 しの 種 類 </h3> h1からh6まである 実 際 は h3ぐらいまでしか 使 われていないようである <h2> 見 出 しの 表 示 のされ 方 </h2> 数 が 小 さいほど 大 きく 表 示 される
リスト1( 1(UL, OL) 農 学 太 郎 のホームページ 文 書 では リストを 三 つの 形 式 で 作 ることができる この 様 に リストの 種 類 を 示 すタグの 間 に リストの 項 目 を 表 すタグと 項 目 を 記 述 する なお 上 は の 例 である リストの 形 式 を 指 定 し <ul>...</ul> <ol>...</ol> で 囲 む 項 目 を <li>... と 記 述
リスト2( 2(DL) <dl> <dt> 見 出 し 付 きリスト <dd> 見 出 し 付 きリストは ULやOLと 違 って 任 意 の 見 出 しをつけること ができる そして その 説 明 (description)を 段 下 げで 書 くことができる </dl>
インライン 画 像 <p> 文 書 に 画 像 を 貼 り 込 むことができます 例 えば <img src="frontpanel.gif" alt="aix front panel"><br> src="": 画 像 ファイルを 指 定 この 場 合 は html 文 書 と 同 じ 場 所 にある <br> alt="": ブラウザーで 画 像 を 表 示 しない 場 合 に 表 示 されるテキスト </p> <p> <img src="http://www.tohoku.ac.jp/images/elogo.jpg" alt="ロゴ"><br> src=""にurlを 書 くことも 出 来 ます </p>
リンク <p> 文 書 中 で 他 の 場 所 へリンクを 張 ることも 出 来 ます <br> 例 えば <a href="http://www.tohoku.ac.jp"> 東 北 大 学 のトップページ</a> とします 東 北 大 学 のトップページ というのが 青 のアンダーライン 付 きで 表 示 され ここをクリックすると 後 は 分 りますね </p> <p> 文 書 中 の 特 定 の 場 所 へ 飛 ばすことも 出 来 ます 例 えば <a href= #epilogue >エピローグへ </a>とします クリックしてみましょう </p> <h2><a name="epilogue">エピローグ</a></h2> <p> 最 後 になります ここに 表 示 が 移 ることを 確 認 しましょう それでは また 来 週 </p>