RIGHT:[[授業のページへ戻る>Lecture/CompPracR2003]] *コンピュータ演習(再) 第11回 [#va6ad841] **Webページの作成 [#n134a306] ***Webページを作成する道具 [#a402c5b4] -アプリケーションソフト~ ワープロソフトなど、本来は別の目的に使用するソフトの中には、簡単なWebページを作るための機能があるものがあります。 -ホームページ作成ソフト~ Webページを作成専用のソフトで、作成・編集するためのさまざまな機能をもっています。また、サーバへのデータの転送や画像データの作成・編集機能がある、高機能なものもあります。 -テキストエディタ~ Webページはテキストファイルですので、専用のソフトがなくても作成することができます。Windowsの「メモ帳」やMacintoshの「Simple Text」でも、十分作成することができます。 ***テキストエディタを使うメリット・デメリット [#q345b2df] -メリット --HTMLなどのWWWに関する技術の勉強になる --余計なデータが勝手に書き込まれない(見やすいファイル) --ブラウザによる表示の違いなどを意識して作成できる -デメリット --HTMLなどのWWWに関する技術をある程度理解する必要がある --作業に慣れるまで、作るのに時間がかかる --専用ソフトとは違い... ---HTMLを自分で入力しなければならない ---入力中に出来上がりを確認できない(ソフトの切り替えが必要) **HTML [#k8ac6aba] ***HTMLとは [#zcf77d4a] -Hyper Text Markup Languageの略で、Webページを作るためのコンピュータ言語 -文書にマーク(タグ)をつけて... --文章の意味(役割)を指定 「○○から××までを見出しにする」 --表示のしかたを指定 「○○から××までを太字にする」 --ハイパーリンクを設定「ほかのファイルへジャンプする」 -HTMLの例 --HTML(<b>や</b>は太字というタグ) これは<b>HTML</b>のサンプルです。 --ブラウザで表示 >>これは''HTML''のサンプルです。 << -ファイル名は必ず半角文字で、拡張子は「.html」か「.html」 ***HTMLの書き方 [#z7918129] -タグ(tag) --文章に意味や表示の仕方を指定するために使うマークを使う ---「<」と「>」で囲まれた文字列(タグ名) ---タグ名は半角文字で、大文字と小文字の区別なし --開始タグ(<...>)と終了タグ(</...>)で囲まれた部分が指定される <h1>今回の内容</h1> ---終了タグのないものもある <hr>, <br> --タグの入れ子ができる ---字下げを使って、タグの組み合わせがわかりやすく <body> <p> この中は<b>段落</b>です。 </p> </body> -属性(attribute) --タグの機能を細かく設定するもの(属性のないタグもある) ---文字の大きさや色、線の太さや色など --複数の属性を指定することができる(属性名="値") これは<font size="5" color="red">重要</font>です。 ***HTMLファイルの構造 [#l198a50c] HTMLファイルの構造は、たいてい次のようになっています。 <html> <head> <title>タイトル</title> </head> <body> コンテンツ </body> </html> -<html>...</html>(HTML要素) --そのファイルがHTML文書であることを示す -<head>...</head>(ヘッダ要素) --HTML文書の情報(本でいえば、題名や著者、発行日など) -<title>...</title> --Webページのタイトル名(タイトルバーに表示) -<body>...</body>(ボディ要素) --Webページとして表示される内容(コンテンツ) ***空白と改行の扱い [#sf722891] -空白 --半角スペースは、何文字入力しても、ブラウザでは一文字の空白文字として表示 --全角スペースは、入力した数だけの空白文字(全角)としてて表示 -改行 --<br>タグで改行する位置を指定する ---HTMLファイルの中で改行しても、ブラウザでは一文字の空白文字として表示 - ここで改行します<br>ここで改行します ***記号の入力 [#j8a530ad] 「<」は「>」などは、タグなどのHTMLが使用する記号とみなされてしまいます。 そこで、次のようにして、一部の記号を入力します。 |記号|HTMLでの入力|h |CENTER:<|CENTER:&lt;| |CENTER:>|CENTER:&gt;| |CENTER:&|CENTER:&amp;| |CENTER:”|CENTER:&quot;| |CENTER:(空白)|CENTER:&nbsp;| **タグの種類 [#xa4f359a] ***雛形の作成 [#lfe86442] -まず、Webページを保存するフォルダを作成しましょう。 --「マイドキュメント」の中に、「public_html」というフォルダを作成してください。 -メモ帳を使って、次のような雛形を作りましょう。 <html> <head> </head> <body> </body> </html> ***タイトル [#bfb66e29] -<title>...</title> ***見出し [#fb895c72] -<hn>...</hn>(nには1〜6の数字が入る) ***段落と改行 [#nd9b6d19] -<p>...</p> -<br> -<hr> ***文字の装飾 [#tfe8ff34] -<b>...</b> -<i>...</i> -<u>...</u> ***リンク [#s71479b1] -<a href="...">...</a> -<a name="...">...</a> ***箇条書き [#r3c5a18e] -<ul>...</ul> -<ol>...</ol> -<li>...</li> **属性の種類 [#s9bc50c4] ***背景や文字の色の設定 [#vba8d445] ***文字の大きさや色の設定 [#jb4069f2] **参考リンク [#pbee7144] -とほほの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/ |