|
|
|
|
|
|
|
|
| |
|
|
皆さんもホームページを作り、自分から世間に情報を発信したいと思いませんか？
|
|
|
（１）ホームページを作成に必要なもの □ テキストエディタ （windows付属のメモ帳で充分です。windowsソフトのアクセサリの中に入っている。探すには、） （スタート→すべてのプログラム→アクセサリー→メモ帳で探しデスクトップに貼り付ける） □ 画像ソフト （jpeg対応のもので、有料のもの・無料のもの等沢山有りますが使い易いものを選んでください。） （中にはウィルスの仕込まれたものも有るので注意） □ FTP （作成したファイルや画像をプロバイダのサーバに転送するためのもの。無料でも大変優れたものも あります。） □ プロバイダのwebサーバのレンタル契約 （プロバイダによっては条件が付きますが、無料もあります。） （２）記述タグの基本原則 ・ タグは必ず半角英数で記述する。（このﾍﾟｰｼﾞに書いているタグ文字がＰＣにテキスト文字と解釈されないため に一部全角文字を使用してますが、記述の際は全て半角英数で記述すること） ・ 基本的に開始タグと終了タグで成立する（例：＜b＞～＜/b＞） 例外あり（例：＜br＞など数種類有ります） ・ 順番は守ること：１つの対象に対し２つ以上指定する場合入れ子構造になる（例：＜b＞＜font color="red"＞ ～＜/font＞＜/b＞） ・ タグとタグ及び属性の間は半角１文字開ける（例：＜font color="red"＞） （３）ファイル（ホームページを作成）の作り方(超簡単なHTMLの作成例) windows付属のメモ帳に次のようにタグを記述 ③ 出来た超簡単なHTMLのファイル例 ① 超簡単なtxtファイルの記述例 (②の保存作業後.htmlﾌｧｲﾙを開く) 
② 出来たファイルを ．html及び ．txtで 保存する 
|
|
④｢①」の簡単なtxtファイルの記述について説明します。 ・ ＜html＞～＜/html＞ でこのﾍﾟｰｼﾞがHTMLで有る事を宣言 ・ ＜head＞～ 検索ロボットにﾍﾟｰｼﾞ内の情報伝える等のための情報を記述 ・ ＜titl＞～＜/titl＞＜/head＞ ﾍﾟｰｼﾞのタイトルを記述（タイトルは＜head＞＜/head＞の中に記載） ・ ＜body＞～＜/body＞ この間に自分の書きたいことがらを記述する この＜body＞～＜/body＞のなかに色々なタグの記述が出来る。 例えば ○テーブル（表）の指定＜teble＞～＜/teble＞.＜tr＞.＜td＞ （詳しくは、別途テーブルの作り方で説明しています。） ○文字の指定＜font＞～＜/font＞で文字の大きさ(size)、色(color)、太さ(b)、字の種類(face)、空き （＆ｎｂｓｐ；）等（詳しくは、次の（４）文字の指定（フォント）の記述例から（６）で説明。） ○画像を入れる＜img＞などさまざまできます。 文字は、指定しないとサイズ３の黒色で表示されます。ためしに一度、、何か記述して出来たファイルを .html及び.txtで保存し、そのファイルダブルクリックして開いてみましょう。 ③のような簡単なホームページとして出てきますが、これは自分のパソコンだけで見れるものです。 これを世界中の皆が見れるようにするには、ヘッド部分を書き、プロバイダとwebサーバのレンタル 契約をし、webサーバにアップロードし、検索サイトに申込み登録しててもらい、ロボット検索に認識してもらい、検索の上位に乗せてもらう 必要（この箇所は、頼んでも出来るものでは無く、自分で工夫するしか有りません）があります。 |
|
|
（４）文字の指定（フォント）の記述例 比較的に多く使われるものについてのみ例記します。（[注意]この記述式は、コピーして貼り付けても作動しません。作動させるには、半角英数字文字で書き直してください。） ①フォントサイズ１～７まであり、標準は３です（１～６を例記します） 記述例 ＜font size="1"＞フォントサイズ1＜/font＞ 実際の文字 フォントサイズ1 記述例 ＜font size="2"＞フォントサイズ2＜/font＞ 実際の文字 フォントサイズ2 記述例 ＜font size="3"＞フォントサイズ3＜/font＞ 実際の文字 フォントサイズ3 記述例 ＜font size="4"＞フォントサイズ4＜/font＞ 実際の文字 フォントサイズ4 記述例 ＜font size="5"＞フォントサイズ5＜/font＞ 実際の文字 フォントサイズ5 記述例 ＜font size="6"＞フォントサイズ6＜/font＞ 実際の文字 フォントサイズ6 ②フォントの種類 記述例 ＜font face="MS P明朝" size="5"＞明朝体＜/font＞ 実際の文字 明朝体 記述例 ＜font face="HG 創英角ポップ体"＞ポップ体＜/font＞ 実際の文字 ポップ体 ③フォントの色 記述例 ＜font color="#00ccff"＞あお色＜/font＞ 実際の色 あお色 記述例 ＜font color="yellow"＞黄色＜/font＞ 実際の色 黄色 記述例 ＜font color="#660000"＞茶色＜/font＞ 実際の色 茶色 ④フォントスタイル 記述例 ＜b＞太字＜/b＞ 太字の実例 太字 記述例 ＜i＞斜体＜/i＞ 斜体の実例 斜体 記述例 ＜strike＞抹消線＜/strike＞ 抹消線の実例 記述例 ＜s＞抹消線＜/s＞ 抹消線の実例 記述例 ＜tt＞等幅＜/tt＞ 等幅の実例 等幅 記述例 ＜u＞下線＜/u＞ 下線の実例 下線 記述例 ＜big＞太きめの文字＜/big＞ 文字の実例 太きめの文字 記述例 ＜small＞小さめの文字＜/small＞ 文字の実例 小さめの文字 |
|
|
（５）テキストの記述例 比較的に多く使われるものについてのみ例記します ①見出し：サイズは１～６まであります（２・６を例記します） 記述例 ＜h2＞見出し＜/h2＞ 見出しの実例 見出し記述例 ＜h6＞見出し＜/h6＞ 見出しの実例 見出し②段落 記述例 ＜p＞段落の設定＜/p＞ 段落の設定の実例 省略(1つの文章の区切り、文章の最初に＜p＞文章の最後に＜/p＞を付けると1行あく) ③改行 記述例 ＜br＞ 改行の設定の実例 省略 (1行あける)＜br＞のみ単独使用可能 ④強調 記述例 ＜em＞強調＜/em＞ 強調の実例強調 記述例 ＜strong＞より強い強調＜/strong＞ 強調の実例 より強い強調 ⑤上付き文字・下付き文字 記述例 ＜sup＞上付き文字＜/sup＞ 上付き文字の実例 上付き文字 記述例 ＜suv＞下付き文字＜/suv＞ 下付き文字の実例 ⑥ふりがな 記述例 ＜ruby＞鳥海山＜rｔ＞ちょうかいさん＜/ruby＞ ふり がなの実例鳥海山 ⑦テキストの表記法 記述例 ＜bdo diir="ltr"＞左から右＜/bdo＞ 左から右の実例 左から右 記述例 ＜bdo diir="rtl"＞右から左＜/bdo＞ 右から左の実例 右から左 |
|
|
（６）画像・その他の記述例 比較的に多く使われるものについてのみ例記します ①センタリング 記述例 ＜center＞センタリング＜/center＞ センタリングの 実例 ②罫線 記述例 ＜p＞罫線＜/p＞＜hr size="10" color="#ff00ff"＞ 罫線の実例 罫線 ③画像の挿入 記述例 ＜img src="ah0014.jpg" alt="例の画像" width="220" heigth="115"＞ 画像の実例 
画像の記述例の説明しますａｈ００１４．ｊｐｇ は図面の番号任意と、この図面がｊｐｇであると宣言 ｗｉｄｔｈ＝”２２０”は図面の幅のサイズ ｈｅｉｇｔｈ＝”１１５”は 図面の高さのサイズ |
|
|
（７）ＭＡＴＡタグの記述例（＜head＞～＜/head＞部分） ＭＡＴＡタグは、出来たホームページをweb上にUPする場合、＜head＞～＜/head＞部分にコンピュータ認識してもらえるよう文書 の情報を記述する。 記述方法は以下の通り。 (9)で参考のため記載例を示します。 ○文字コードの指定 ①＜meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"＞ ②＜meta http-equiv="Content-Type" content="text/html; charset=euc-jp"＞ ③＜meta http-equiv="Content-Type" content="text/html; charset=2022-jp"＞ 上記の中から一つ選ぶ。メモ帳を利用してホームページを作る場合は、①を使用する ○キーワード ＜meta name="Keywords" content="この中にキーワードを記載する"＞ ○ページ内の説明 ＜meta name="Description"content="この中にホームページの記載内容の説明を記入する"＞ ○検索ロボットの収集対策 ＜meta name="robots" content="index,follow"＞ index:ロボットの収集可 noindex:ロボットの収集禁止 follow:リンク先たどる事可 nofollow:リンク先たどる事禁止 （８）文章型宣言（＜DOCTYPE＞） ＨＴＭＬのバージョンを＜DOCTYPE＞で文章の冒頭で文章型宣言をする。（ＨＴＭＬの前の冒頭に記述する） (9)で参考のため記載例を示します。 ①＜!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"＞ ②＜!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd"＞ ③＜!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"＞ 上記の中から一つ選び文章の冒頭で文章型宣言をする。また、その宣言に従ってＨＴＭＬの文章を作成する事。途中変更不可。 |
|
|
（９）web上にUPする場合のHTML（ホームページ作成）の記述例 出来たホームページをweb上にUPする場合、下図の＜head＞部分より上の部分をロボット検索に認識してもらえるよう工夫して、 しっかり記載しなければなりません。ロボット検索の巡回は２週間に一回位巡回していると言われていますので、運が大変良かったら、 その頃（それ以降）にネット検索が可能に成ります。下図の色つきの文字は、夫々の項目について説明を加えたものです。 
|
|
|
（１０）web上にUPする場合のHTML（ホームページ作成）の検索結果の表示順序 web上にUPする場合のホームページの検索結果の表示順序を、出来る限り前になるような工夫が必要です。検索の結果、数万、数十万、 数百万件にのぼる場合がよくあります。こんな時でも２～３ページ以降になると、有名人でない限り中々見てもらえません。大変難しい 事ですが、人気のあるHPは、内容は勿論の事、皆の目に留まる位置に表示されるよう色々ど工夫しているはずです。 例えば、キーワードを複数にし、特殊なものにすると比較的検索しやすいが、有名人でない限り、多くの人がそのキーワードで検索 することはないので、皆の目留らないなどの問題があります。皆の目に留まるためには、HPの内容は勿論の事 、＜！DOCTYPE＞文書型宣言及び、＜head＞部分の記載方法の工夫が必要ですが、一定のルール が有りますので、それらに従う事も大切です。 ○選択基準は解りませんが、独創性、斬新性などHPの内容は大変に重要な要素の一つと思います。 ○記載方法の工夫について参考までにそのごく一部を載せます。 キーワードの配置等について ・ﾍﾟｰｼﾞタイトルにキーワードを含むこと。 ・メタ（meta）タグにキーワードを含むこと。 ﾍﾟｰｼﾞ情報を定義するタグをメタ（meta）タグと言いdescriptionとkeywordsとあるます。 descriptionタグは、 サイトの紹介文をユーザや検索ロボットに伝えるタグです。 keywordsは、キーワードを検索ロボットに伝えるタグです。 ・ﾍﾟｰｼﾞ全体にキーワードを自然に配置する キーワードを強引に羅列しない事。強引な羅列は印象悪く検索順位がさがる。 ・オリジナル性 ﾍﾟｰｼﾞの内容が独創性、斬新性などオリジナルな事 ・リンク数他のサイトからのリンク数(他のサイトとのリンクあまり多くない方が良いとの意見も あり、どう関係する か不明です。) ・タグが正しく記載されている事 |
|