HTML 基礎講座 目次 1.HTML 紹介 1-1 HTMLとは 1-2 HTMLの基本的な構成 1-3 HTMLのソースの表示方法 2.HTMLタグ紹介 2-1 リンクする <a> 2-2 改行 水平罫線 <hr> 2-3 段落 2-4 見出し <h1>~<h1>, <h6>~</h6> 2-5 画像 <img> 2-6 テーブル <table> 2-7 フォーム <form> 2009.10.16 株式会社 EmEO 沖縄 1
1.HTML 紹介 1-1.HTML とは HTML とは HyperText Markup Language の略で マークアップ言語の一種です HTML は文書の論理構造や見栄えなどを記述するために使用され 文書の中に画像や音声 動画 他の文書へのハイパーリンクなどを埋め込むこともできる マークアップ言語とは 文書の一部を タグ で囲うことで 文章の構造や 修飾情報を 記述していく記述言語 HTML では < と > で囲まれたものをタグといいます HTML で書かれたファイルは拡張子を.html または.htm とし Internet Explorer 等のブラウザで表示できる ファイル自体の編集はテキストエディタなどで行う 1-2.HTML の基本的基本的な構成 HTML の構成を理解するために以下のようなファイルを作成し ファイルを html_sample というディレクトリに格納しましょう 例 ) index.html <head> <title>html 基礎講座 </title> </head> head 部 <h1>html 基礎講座作成物リンク一覧 </h1> body 部 多くのタグには開始タグと終了タグがあり その間に書かれた内容にタグの要素が反映されます 以下は上記で使用したタグの解説です ~ このファイルが HTML ファイルであることを表しています <head>~</head> ヘッダ部になります ヘッダ部には この文書全体に関する指定などを書きます ~ ボディ部になります HTML で表示の対象となる本文を表します <title>~</title> title タグで囲まれた部分にタイトルを指定します <h1>~</h1> 見出しにする ファイルが完成したら ダブルクリックして実行してみましょう Internet Explorer( 以降 IE) が立ち上がり HTML ページが表示されたと思います IE 上のタイトルと表示内容を確認して ソースと見比べてください 今後 この index.html ファイルに 新しく作ったページのリンクを追加していきます 2
背景色の変更ページに背景色を付けていきます 背景色を付けるには タグに bgcolor 属性を追加します index.html で作成した タグを以下のように書きかえて見ましょう <body bgcolor="pink"> <body bgcolor="#66cc66"> 背景色をピンクにする 色をRGB( 赤 緑 青 ) で指定する 1-3.HTML のソースソースの表示 Internet Explorerを起動し メニューの [ 表示 ] - [ ソースの表示 ] でWeb 画面のソースを表示できる 参考とほほのWWW 入門 http://www.tohoho-web.com/www.htm 3
2.HTML タグ紹介 HTML ファイルノ作成で使用するタグを紹介していきます 2-1. リンクする <a> タグ <a> は他のファイル またはページの特定の場所とリンクするためのタグです a は Anchor の略です 書き方 <a href=" "> </a> はリンク先 はリンクする要素 ( 文字列 画像 ) を表す 以下のようなファイルを html_sample の直下に sample フォルダを作成して格納する 以降 作成するファイルはすべて sample フォルダ下に格納する 例 ) anchor.html <head><title>html 基礎講座 Anchor</title></head> <a href="http://www.yahoo.co.jp/">yahoo にジャンプ </a> ファイルが完成したら ダブルクリックして実行してみましょう Yahoo にジャンプ という単語をクリックすると yahoo のサイトが表示されることを確認してください 次に 最初に作った index.html に今作った anchor.html へのリンクを追加します 以下の 1 行を <h1>html 基礎講座作成物リンク一覧 </h1> の下に追加してみましょう <a href="./sample/anchor.html" target="_blank">anchor へのリンク </a> target="_blank" をつけることにより リンクを新しいウィンドウで開くようになります 2-2. 改行 <br br> 水平罫線 <hr hr> 改行は で表します 水平罫線は <hr> で表します 例 ) br_hr.html <head><title>html 基礎講座 br hr</title></head> 8 月 9 月 10 月 11 月 12 月 <hr>1 月 <a href="./sample/br_hr.html" target="_blank">br hr へのリンク </a> 4
2-3. 段落 p は Paragraph( 段落 ) の頭文字です ~ でひとつの段落を示します 以下の例で確認してみましょう 例 ) paragraph.html <head><title>html 基礎講座 Paragraph</title></head> 祇園精舎の鐘の声諸行無常の響きあり 沙羅双樹の花の色盛者必衰の理をあらわす おごれる人も久しからずただ春の世の夢のごとし たけき者も遂には滅びぬ偏に風の前の塵に同じ <a href="./sample/paragraph.html" target="_blank">paragraph へのリンク </a> 2-4. 見出し <h1>~<h1>, >, <h6>~</h6> < <h*>(* は 1~6) で見出しを表示します h は heading の頭文字です 以下の例で確認してみましょう 例 ) heading.html <head><title>html 基礎講座 Heading</title></head> <h1> 見出し 1</h1> <h2> 見出し 2</h2> <h3> 見出し 3</h3> <h4> 見出し 4</h4> <h5> 見出し 5</h5> <h6> 見出し 6</h6> <a href="./sample/heading.html" target="_blank">heading へのリンク </a> 5
2-5. 画像 <img img> 書き方 <img src=" "> は画像のファイル名を表す 画像を表示します ペイントなどで適当な画像 paint.jpg を作成し 保存してみましょう 例 ) image.html <head><title>html 基礎講座 Image</title></head> <img src="paint.jpg"> <a href="./sample/image.html" target="_blank">image へのリンク </a> 2-6. テーブル <table table> <table> はテーブルを表します テーブルは表です <th> は Table Header の略でテーブルのヘッダ部分のセルの内容を表します <tr> は Table Row の略でテーブルの行を表します <td> は Table Data の略でテーブルのセルの内容を表します 例 ) table.html <head><title>html 基礎講座 table</title></head> <table border=1> <tr> <th> カラム 1</th> <th> カラム 2</th> <th> カラム 3</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> border=1 はテーブルの枠線の太さ <a href="./sample/table.html" target="_blank">table へのリンク </a> 6
2-7. フォーム <form form> 入力フォームなどを表示します 実際に使う際は サーバー側で入力されたデータを受け取る処理が必要となりますが ここではまず 入力するためのフォームを作成するところを学びます 書き方 <form method="post" action="xxxxxxxx"> ~ </form> 属性の method は入力フォーム内のデータのサーバへの送信方法を指定します method には GET と POST が指定できます GET は URL の後ろにくっついてデータが送信され POST はプログラムに直接データが送られるので パスワードなどを送信する際は POST を使用します action はサブミットされたときの動作を指定します 基本的には データを渡すプログラムや ページのアドレスを指定します フォームタグは単体では動作しません フォームタグ内部に記述する <input> タグなどで 実際のフォームを形成していきます 以下のファイルを作成することで <input> タグの種類を確認してください 例 ) form.html <head><title>html 基礎講座 Form</title></head> <form method="post" action="../index.html"> <input type="text" name="mojiretu"> <input type="password" name="pwd"> <input type="file" name="filepath"/> <input type="radio" name="yn" value="yes" checked>yes <input type="radio" name="yn" value="no" checked>no <input type="checkbox" name="age" value="age20">20 代 <input type="checkbox" name="age" value="age30">30 代 <input type="checkbox" name="age" value="age40">40 代 <input type="button" value=" ボタン 1"> <input type="image" src="paint.jpg"> <input type="submit" value=" 送信 "> <input type="reset" value=" クリア "> </form> <a href="./sample/form.html" target="_blank">form へのリンク </a> 入力フォームは <input> タグの type 属性によって決まります それぞれの type がどういうフォームになってるか確認しましょう method を POST GET それぞれにして 送信ボタンを押してみましょう URL に変化があるはずです 7