<48746D6C8AEE91628D758DC02E786C73>

Size: px

Start display at page:

Download "<48746D6C8AEE91628D758DC02E786C73>"

へいぞうこうい
5 years ago
Views:

1 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> 株式会社 EmEO 沖縄 1

2 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

3 背景色の変更ページに背景色を付けていきます背景色を付けるにはタグに bgcolor 属性を追加します index.html で作成したタグを以下のように書きかえて見ましょう <body bgcolor="pink"> <body bgcolor="#66cc66"> 背景色をピンクにする色をRGB( 赤緑青 ) で指定する 1-3.HTML のソースソースの表示 Internet Explorerを起動しメニューの [ 表示 ] - [ ソースの表示 ] でWeb 画面のソースを表示できる参考とほほのWWW 入門 3

4 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=" にジャンプ </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

5 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

6 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

7 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

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合