ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが 数 字 の 羅 列 でわかりにくいの で sharp-syc.kita-9.com といれるとわかりやすい DNSサーバー 一 般 にホームページのアドレスをURLで 示 しますが 実 際 にデータを 取 りに 行 くコンピュータのアドレスは 上 の4 組 の 数 字 です このURL を 数 字 に 変 換 する 必 要 があるので この 変 換 をしてくれるのはDNS サーバーといわれるコンピュータです DNSサーバーはデータベース のようなもので URLからIPアドレスを 検 索 してくれます
ドメイン 名 からIPアドレスの 取 得 www.yahoo.co.j は 182.22.59.229 というyahoo のホームページのアドレスを 取 得 しないとつながりませんが そのドレスを 探 して 返 してくれるのがDNSサーバーと 呼 ばれる インターネット 上 に 複 数 存 在 するコンピュータです 引 用 :http://www5e.biglobe.ne.jp/~aji/3min/46.html
ホームページの 構 成 ホームページはワープロと 同 じようなものです ワープロと 違 うのは 表 示 される 文 字 画 像 動 画 なのが 一 つの 部 品 として データがネットワーク 上 にいろいろなところに 存 在 し 集 めて 一 つのドキュメントにするしくことで 表 示 する 仕 組 みで 出 来 上 がって います これのいいところは 表 示 する 道 具 がパソコン(もちろん 機 種 やOSの 違 い 関 係 なく 携 帯 電 話 やテレビも 含 め) 操 作 できるところにあります ホームページはhtmlファイルを ブラウザーソフトで 開 く HTMLとは HTMLは(Hyper Text Markup Language)の 頭 文 字 ホームページを 記 述 するための 言 語 HTLMのルールに 従 えば 機 種 OSに 依 存 することなく 情 報 を 表 示 することができます Htmlファイルとは Html 言 語 で 記 述 されたファイル 中 身 は 普 通 のテキスト 文 字 タグとは タグは 荷 札 を 意 味 します 開 始 タグと 終 了 タグに 挟 まれた 内 容 は 特 別 な 意 味 として 解 釈 されます ホームページは 複 数 のhtmlファイルをリンク( 連 結 )して 構 成 されています Htmlファイルはタグと 呼 ばれる 専 用 の 標 識 を 使 って 記 述 されており 文 章 から 画 像 音 声 などを 自 由 に レイアウトして 表 示 します
ホームページの 構 成 Htmlファイル Htmlファイルはブラウザーが 翻 訳 する 前 の 原 稿 のようなもの です 正 しく 翻 訳 してもらうためのルールがタグです Html の 形 式 で 記 述 されたhtmlファイルの 内 容 を 翻 訳 して 表 示 する のがwebブラウザー ホームページはhtmlのルールに 沿 ってテキスト 形 式 で きじゅつされたファイルです 画 像 や 音 声 は 別 ファイルにして 用 意 しておきます ホームページを 構 成 する htmlのファイルやが そうは 必 要 に 応 じてそれ ぞれのホルダーに 分 けて 保 存 します Index.html NO1.html No2.html Photp.jpg Sound.mp3
ホームページが 見 れる 訳 URL インターネット 上 に 存 在 するホーム ページや 画 像 その 他 などの 場 所 WWW(web) ホームページの 仕 組 みを 利 用 したイ ンターネットサービス サイト ホームページ 置 かれているインター ネット 上 の 場 所 ホームページを 作 るhtml 文 というのは 文 字 の 大 きさや 色 変 えたり 画 像 音 声 動 画 を 見 た り 他 のhtml 文 書 を 参 照 するための 文 書 の 書 き 方 ホームページ htmlの 規 約 で 書 かれた 文 書 html 文 字 に 加 え 画 像 音 声 動 画 を 表 示 させ 別 の 文 書 も 参 照 可 能 な 文 書 の 書 き 方 リンク 他 のコンピュータ( 自 分 も 含 め) の 文 書 や 亜 像 などへの 場 所 情 報 JavaScript ホームページに 動 きを 加 えるソフト
Htmlの 中 身 の 基 本 タグ 名 は < と > で 囲 む <h1> 要 素 <>で 囲 まなければタグとして 機 能 しません 開 始 タグと 終 了 タグで 囲 まれた 内 容 は 特 別 な 意 味 をもちます 終 了 タグは / が 加 わる </h1> <h1>ここに 見 出 しを 記 述 します </h1> h1は 見 出 し 用 のタグで 大 きさで1~6まであります h1が 一 番 大 きいサイズ タグ 内 には 属 性 を 記 述 することがある <img src= photo001.jpg > img src は 画 像 ファイルを 表 示 させるというタグ( 荷 札 の 意 味 コンピュータの 世 界 ではテキストに 埋 め 込 む 特 殊 な 文 字 または 記 号 のこと) タグにはたくさんの 種 類 があります このタグを 全 部 える のは 大 変 です そこで 便 利 なソフトウエアがホームページ 作 成 ソフトで ホームページの 画 面 を 作 り それをHtm lファイルに 変 換 してくれます 有 名 なのはホームページ ビルダーですが これは 有 償 (2 万 円 前 後 )そのほかサ ポートなしの 無 償 ソフトがいろいろあります 社 友 会 で 使 用 しているソフトはフリーソフトのkompozer というソフトで ( 右 図 参 照 ) 使 い 方 は 非 常 にシンプルで すが 機 能 的 には 限 界 があります そのほかエクセル ワードのファイルをhtmlファイル に 変 換 することもできます パワーポイントもできていま したが 2010 版 からは 削 除 されています Konpozerの 編 集 画 面
htmlの 基 本 例 <html> <head> <title> ここにタイトルが 入 ります </title> </head> <head>と</head>に 囲 まれた 部 分 はブラウザ 上 には 表 示 されない 中 身 の 説 明 などに 使 う <head>と</head>に 囲 まれた 部 分 にはアドレスバーに 表 示 される タイトルや 初 期 設 定 などを 記 述 <body> <h1> ここに 見 出 しが 入 ります </h1> <p> ここから 本 文 が 入 ります </p> <img src= photo sample1.ipg> <br/> <a href= photo sample2.jpg > リンク 先 の 説 明 </a> </body> </html> 段 落 の 指 定 <body>と</body>の 間 に 記 述 された 内 容 がブラウザ 上 で 表 示 されます sample1.jpgは 同 じこのファイルと 同 じフォルダーに 存 在 別 のホルダーでは =フォルダー 名 /sanple1.jpg と 表 記 改 行 の 指 定 リンク 指 定 段 落 の 指 定 他 のホームページへのリンク 指 定 の 場 合 <a href=http://www.aaa.co.jp/> htmlファイルは 基 本 的 にはテキスト(ワープロと 同 じもの)です ただ<>で 囲 まれた 部 分 は 文 字 ではなく 表 示 をつかさどる 命 令 とブラウザは 解 釈 します ワープロでも 改 行 のところは が 付 きますが これは 改 行 マークといわ れるもので 文 書 のなかで 開 業 します これは 画 面 に1 行 分 進 めて 頭 を 文 頭 にもってくるというめいれいで コント ロール 文 字 といわれるものです
htmlファイルの 内 容 と 表 示 の 対 比 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja"> <head> <meta content="text/html; charset=shift_jis" http-equiv="content-type"><title>ギャラリー</title> <meta content="デジカメで 撮 った 写 真 を 公 開 しています" name="description"> </head> <body background="file:///c:/users/shoichi/desktop/allfree/myhomepage/image/back.jpg"> <div style= text-align: center; > <big style="color: rgb(51, 51, 255);"> <big><big><big> <big style="text-decoration: underline;"> <span style="font-weight: bold;"> </span> </big></big></big></big></big><big><big><big><big> <span style="color: red;"> <span style="color: rgb(0, 0, 153); font-weight: bold;"> <span style="text-decoration: underline; color: rgb(51,51);"> </span></span></span></big></big></big></big> <img style="width: 263px; height: 70px;" alt="" src="../image2013/image52/madai-ika00.gif"> </div> <table style="text-align: left; width: 1024px; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: middle; text-align: center; font-weight: bold;"> <img style="width: 1024px; height: 767px;" alt="" src="../image2014/image03turi/main.jpg"> background div style span style img style table style td style tr 横 行 の 指 定 a href リンク 指 定 </tr><tr> <td style="vertical-align: middle; text-align: center;"> <img style="width: 1024px; height: 768px;" alt=""src="../image2014/image03turi/img_0718.jpg"> </tr> <tr> <td style="vertical-align: top;"><img style="width: 1024px; height: 768px; " alt="" src="../image2014/image03turi/img_0721.jpg"> </tr> <tr> <td style="vertical-align: top;"> <img style="width: 1024px; height: 768px; " alt="" src="../image2014/image03turi/img_0723.jpg"> </tr> <tr> <td style="vertical-align: top;"> <img style="width: 1024px; height: 768px; " alt="" src="../image2014/image03turi/img_0725.jpg"> </tr> </tbody> </table> <div style="text-align: center;"><a href="../heisei25nen-itiran.html"> <img style="border: 0px solid ; width: 49px; height: 34px;" alt="" src="../../get%20image/t_b_back.gif"></a><span style="text-decoration: underline;"> </span> <a href="../../index.html"><img style="border: 0px solid ; width: 60px; height: 60px;" alt="" src="../../img/return.gif"> </a> </div> </body></html>
出 来 上 がった 一 組 のファイル 群 をhtmlサーバーに 送 る 方 法 作 り 上 げた 一 連 のファイ ル 群 はサーバー 上 に 転 送 します 転 送 ソフトは ffftpというソフトで 皆 さ んにお 渡 ししたものです 自 分 の 中 に 出 来 上 がった データをそのまま 全 部 転 送 します こ の ま ま で サ ー バ ー に 転 送 社 友 会 のホームページのデータ 概 要 です