Image WELCOME TO MY HOMEPAGE
ホームページ作成

ホームページの作成


ホームページの作成

HTMLとは

  • ホームぺージはHTML(Hyper Text Markup Language)と呼ばれる言語で記述される。
  • 文書のレイアウトをタグと呼ばれる命令語で指定する。    例)文字列をセンタリングする場合      Wardでは…文字列を入力してからセンタリングする      HTMLでは…<center>文字列</center>
  •  
  • 命令語は<>で囲み,</>で囲まれたタグは終了を意味する
  • <>内の命令語は大文字でも小文字でも良い(今後の規格では小文字になる予定)

HTMLドキュメントの構造

ヘッダ    タイトル 本文   見出し   本文   画像   リンク − クリックすると他のページへ移る


HTMLの例

------------------------------------------------------
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>
<html lang="ja">
<head>
<title>はじめてのホームページ</title>
</head>
<body>
<p>こんにちは....</p>
<!-- コメントは表示されない -->
</body>
</html>
------------------------------------------------------

  1. DOCTYPE宣言では使用するHTMLのバージョンを指定する
  2. html要素はHTML文書を表し、<html>で始めて</html>で終わる
  3. head要素はヘッダとも呼ばれ、<head>と</head>で囲む
  4. body要素はWebページの中身を表し、<body>と</body>で囲む
  5. title要素(タイトルバーに表示される)はヘッダの一部で、<title>と</title>で囲む
  6. p要素は1つの段落を表し、<p>と</p>で囲む
  7. コメントは<!--と-->で囲む(ホームページでは表示されない

見出しと整形済みテキスト

ここまでの例では、ページの中身は段落だけなので、おもしろみのないページしかできないが、 「見出し」と「整形済みテキスト」を使うと、表現力の豊かなページを作成することができる.

<h1>〜</h1> h1要素はもっとも上位レベルの見出し(大見出し)を表す 見出しを表す要素はh1からh6の6種類ある

<pre>〜</pre> pre要素は整形済みテキストを表し、このタグで囲まれた内容の空白や改行は(他の要素と 違って)そのまま表示される

使用例

    <h1>役に立つタグ</h1> <h2>見出しタグ</h2> <p>見出しタグを使うと,見出しを作ることができます。見出しには次のような役割があります。</p> <pre> 1. 文章を項目に整理する機能を提供してくれる。 2. 段落ばかりの文章にくらべて見出しを適宜はさむことによって めりはりがつけられる。 </pre> <h2>整形済みテキスト</h2> <p>整形済みテキストは,改行や空白をそのまま保存して 表示したい箇所に使用します。</p>


箇条書き

<ul>〜</ul> ul要素は番号なし箇条書き(unordered list)を表す <ol>〜</ol> ol要素は番号付き箇条書き(ordered list)を表す <li>〜</li> li要素は箇条書きの1つの項目(list item)を表す <dl>〜</dl> dl要素は定義型箇条書き(definition list)を表す <dt>〜</dt> dt要素は箇条書きの中の見出し語を表す <dd>〜</dd> dd要素は箇条書きの中の説明本体を表す

使用例(ul要素)

    <h1>箇条書きのタグ</h1> <ul> <li>さんまは秋にあぶらの乗ったところを食べるとおいしいです。</li> <li>あじは、干物でだべるのもいいですし、たたきもいけます。</li> <li>さばは、魚へんに青と書きます。</li> </ui>

使用例(dl要素)

    <dl> <dt>dl要素,</dt><dd>「用語とその説明」のような箇条書きになります. ちょうど、この箇条書きがそうなっています。</dd> <dt>ul要素とol要素</dt> <dd>l各項目に番号のつかない箇条書きと番号のつく箇条書きになります.</dd> <ul><li>さんま</li><li>あじ</li><li>さば</li></ul> <ol><li>さんま</li><li>あじ</li><li>さば</li></ol> </dl>

単独―改行,横線,画像

単独タグとは開始タグだけで終了タグのないものを指す. <hr> hr要素は区切りのための横線(horezontal rule)を指す. <br> br要素はその箇所で改行を行うことを表す <img> img要素は画像の埋め込み(inline image)を表す   <img src=URI[width=幅][height=高さ]atl=説明>

使用例

<p>画像は色々な飾りにくい<img src="test.jpg"width="75" height="90" alt="テスト画像"> 使えます.とくに工夫しないとこのように1つの文字と同様に使われますが, 行に単独で現れて欲しければ     <br> <p><>img src="test.jpg"width="75" height="90" alt="テスト画像"> <br> このように改行しておけばよいのです.     <br>


リンクの作成

<a href="リンク先のURL">表示するリンク名</a> 他のWebサーバーへリンクする場合 "http://www.tamagawa.ac.jp/xxx.html" (ファイル名を省略すると,index.htmlが選択される) 同じディレクトリ(フォルダ)内のファイルへリンクする場合 "xxx.html"または"/xxx.html" リンクのもう一つの用途 <a name="名前">アンカー名</a> name属性を指定した場合は,ページの特定位置にその名前がつけられ,外部からその箇 所が参照できる.

使用例

<h1><a name="top">Favorite Pages</a></hl> <ul> <li>宇宙ものが好きなら<a href="http://www.nasa.gov/">NASA</a> のページがおすすめです。 </li> <li>美術がお好きなら<a href="http://www.louvre.or.jp">ルーブル美術館のページ</a> へどうぞ</li> </ul> <hr> <p><a href="#top"先頭へもどる></a></p>
 

Icon 氏名/ニックネーム
little_waltz 
Icon 職業/会社名/学校名
 
Icon 役職/学年
 
Icon 誕生日
 
Icon 性別
 
Icon 出身地/出身校
 
Icon 住まい
 
Icon 趣味
 
Icon 特技
 
Icon 好きなもの、嫌いなもの
 
ゲストブックを読む ゲストブックに書く 日記帳 ランキング

Mail
メールお待ちしてます

お気に入りのサイト
Icon
Icon
Icon
Icon
Icon



2002年11月18日 17時28分41秒


GeoCities Japan

メイン / コミュニティ / アベニュー / E-List / 街角広場
インフォメーションセンター / 検索 / ヘルプ / ガイドライン