ウェブページの仕組みあなた 1 URL を入力力する 1 講 HTML サーバー 3 リクエストブラウザに表示するウェブページの内容を指示するために使われるコンピュータ言語それが HTML 2 リクエストを解析 + 処理理 HTML を解釈してウェブページとして表示ブラウザ H

Size: px

Start display at page:

Download "ウェブページの仕組みあなた 1 URL を入力力する 1 講 HTML サーバー 3 リクエストブラウザに表示するウェブページの内容を指示するために使われるコンピュータ言語それが HTML 2 リクエストを解析 + 処理理 HTML を解釈してウェブページとして表示ブラウザ H"

たみじろうますはら
5 years ago
Views:

1 0 からのプログラミング講座第 1 講本文書のいかなる部分をも事前の許可なく複写したり転送したりすることはできません HEART QUAKE 1

2 ウェブページの仕組みあなた 1 URL を入力力する 1 講 HTML サーバー 3 リクエストブラウザに表示するウェブページの内容を指示するために使われるコンピュータ言語それが HTML 2 リクエストを解析 + 処理理 HTML を解釈してウェブページとして表示ブラウザ HTML や画像を返却 4 講 HTML Java MySQL の連動 2 講 Java 3 講 MySQL 2

3 第 1 章 HTML HTML は Internet Explorer や Firefox Chrome などのインターネットプラウザ上にウェブページを表示するための言語ですわたしたちがふだん利利用しているウェブサイトはどのようにして記述されているのか詳しく見見ていきます 3

4 ゴールイメージ l HTML の完了了条件 - 以下のような自己紹介サイトが作成できること 4

5 HTML とは (1/2) l HTML - ウェブページを作成するために利利用される言語 - HyperText Markup Language の略略 ü HyperText : 複数の文書を相互に関連付け結び付ける仕組みテキストを超えるという意味から ü HTML ハイパーテキストに目印をつける言語 - 目印をつける (Markup) というのは文書の各部分がどんな役割を持っているのかを示すということ - コンピュータに理理解できるように文書の構造を定義することが HTML の最も重要な役割 5

6 HTML とは (2/2) 普通の文章 HTML とは? HTML の基本 HTML( エイチティーエムエル HyperText Markup Language) はウェブページを作成するために開発された言語です現在インターネット上で公開されてるウェブページのほとんどは HTML で作成されています HyperText Markup Language を日本語で表すならハイパーテキストに目印をつける言語くらいの意味になりますハイパーテキスト (HyperText) とはハイパーリンクを埋め込むことができる高機能なテキストですハイパーリンクというのはウェブページで下線の付いたテキストなどをクリックすると別ページへ移動するあのリンクのことですマークアップのイメージ < これはタイトル >HTML とは?< ここまで > < これは見見出し >HTML の基本 < ここまで > < これは段落落 >HTML( エイチティーエムエル HyperText Markup Language) はウェブページを作成するために開発された言語です現在インターネット上で公開されてるウェブページのほとんどは HTML で作成されています < ここまで > < これは段落落 >HyperText Markup Language を日本語で表すならハイパーテキストに目印を開始タグと呼ぶつける言語くらいの意味になりますハイパーテキスト (HyperText) とはハイパーリンクを埋め込むことができる高機能なテキストですハイパーリンクというのはウェブページで下線の付いたテキストなどをクリックすると別ページへ移動するあのリンクのことです < ここまでね > コンピュータは各部の役割が理理解できないコンピュータは各部の役割を理理解できる! 6

7 HTML の書き方 (1/4) l HTML は非常に簡単な言語です簡易易なウェブページであれば数種類タグを覚えるだけで作成することができます l.html ファイルを作成内容を記述しサーバーで実行行をすればウェブページの出来上がり <html> <head> <meta charset= utf-8 > <title> ウェブページのタイトル </title> </head> <body> <h2> ウェブページの見出し </h2> ウェブページを作成しました! </body> </html> 時間制限 10min をダブルクォーテーションと呼びますブラウザで表示保存する際は hello.html という名前で作成してください 7

8 HTML の書き方 (2/4) HTML ヘッダブラウザからは見見えないウェブページに関するあれこれを設定するボディブラウザから見見えるウェブページの中身をあれこれ記述 <html> <head> <meta charset= UTF-8 /> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <meta name= keywords content= このページのキーワード /> <meta name= description content= このページの概要 /> <link rel= stylesheet href= style.css /> <script type= text/javascript src= common.js ></script> <title> ウェブページのタイトル </title> </head> <body> <h1> ウェブページの見出し </h1> <p> ウェブページを作成しました!</p> </body> </html> 8

9 HTML の書き方 (3/4) l HTML の記述は小文字半角で l < 開始タグ > ~ </ 終了了タグ > で内容を囲む要素 (element) の種類を指定しますどのような要素に割り当てるかはタグの種類を使い分けます見見出しなら表なら <h2> 文字 </h2> <table><tr><td> セル 1</td><td> セル 2</td></tr></table> - 要素内容を持たない空要素 <br> や <img> のように要素内容を持たない空要素 (empty element) と呼ばれるものもあります改行行 <br> 画像 <img src= hoge.jpg > break の略略表示したい画像ファイルの名前 9

10 HTML の書き方 (4/4) HTML タグの例例 - h1 ~ h6 - p - table ü tr / th / td - ul / ol ü li - dl ü dt / dd - div - form - a - img - span - Input - button - select ü option - textarea タグの意味を調べてみましょう HTML タグリファレンス : 10

11 時間制限 15min 実習 (1/3) l 自己紹介ページを作成してみましょう - テキストエディタで以下の画像と同じ内容スタイルの HTML ファイルを作成してくださいページタイトル <title> 見見出し 1 <h1> リンク <a href > ヒント : HTML リンクで検索索! 参考サイト : 11

12 時間制限 10min 実習 (2/3) l 自己紹介ページに画像を表示してみましょう画像 <img> html ファイルと同じフォルダに画像ファイルが存在すること注意画像のファイル名は日本語 ( 例例 : 画像.jpg) ではなく半角英数字 ( 例例 :gazo.jpg) にすることヒント : HTML 画像で検索索! 参考サイト : 12

13 応用課題実習 (3/3) l 自己紹介ページ表組みを表示してみましょう見見出し 2 <h2> 表組み <table><tr><td> ヒント : HTML テーブルで検索索! 参考サイト : 13

ウェブページを公開する 1. HTML ファイル画像ファイル CSS ファイル ( 後述 ) などを用意します 2. ウェブサーバを用意しますウェブサーバとはインターネットから 24 時間 365 日接続できる公開されたコンピュータというイメージです一般的にはレンタルサーバと呼ばれるサービスを利利用します 3.

14 ウェブページを公開する 1. HTML ファイル画像ファイル CSS ファイル ( 後述 ) などを用意します 2. ウェブサーバを用意しますウェブサーバとはインターネットから 24 時間 365 日接続できる公開されたコンピュータというイメージです一般的にはレンタルサーバと呼ばれるサービスを利利用します 3. FTP ソフトでアップロード FTP(File Transfer Protocol) とはファイルを転送するための通信のことです FTP の通信方式を利利用しファイルを転送するソフトウェアを使ってサーバへ 1. で用意したファイルをアップロードします FFFTP という無料料ソフトが有名です 4. ブラウザでアクセスしてみましょうあなたウェブサーバ利利用者 FTP でファイルをアップロード 14

15 HTML 補足資料料 15

16 HTML5(1/2) l HTML5 の特徴 - Flash でしかできなかったことができるように! ü 音声や動画の埋め込みが簡単にできる! ü グラフィックデザインの表示が簡単にできる! - HTML4 ではできなかったこと ü 位置情報を取得できる ü クライアント側にデータベースを保持できる ü フォーム機能の充実 16

17 HTML5(2/2) l 簡潔になった HTML5 の書き方 HTML5 HTML4 <!DOCTYPE html> <html lang="ja"> <head> <meta charset= utf-8 /> </head> <body> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> 17

18 XML(1/2) l XML - EXtensible Markup Language の略略 ü extensible: 拡張可能なの意 ü HTML はタグの意味があらかじめ決められているのに対し ( 例例 :h2 table img) ü XML はその意味を独自に決めることができる ü 従ってシステム間でタグの意味を ü 独自に決めてデータの連携を ü 行行うことができる 18

19 XML(2/2) l システム間のデータ連携に利利用される XML NP ベンダーこういうデータを下さいどのタグにデータを入れたらいいですか? というタグでお願いしますかしこまりました <xml> < 売上 > < 顧客 ID> </ 顧客 ID> < 金額 > </ 金額 > </ 売上 > </xml> 19

20 URL の仕組み (1/4) l FTP ソフトでアップロードしたファイルにはどうやってアクセスする? - ウェブサーバにはドメインが割り当てられています実習で使用するウェブサーバには a1.zeroprm.com というドメインが割り当てられています - ウェブサーバ上にあるファイルにはドメイン + ファイルの場所を URL としてインターネットを通じてアクセスすることができますウェブサーバ b3 chiba hello.html a1.zeroprm.com / b3 / chiba / hello.html 20

21 URL の仕組み (2/4) l ファイル名に使える文字列列は? - 作成する HTML ファイルや画像ファイルはどんな名前をつけてもよいのでしょうか? ü いいえ使用できるのは半角英数字とハイフン (-) アンダースコア (_) のみです - 全角文字やスペースハイフンとアンダースコア以外の記号は使用できません ü 拡張子も重要ですファイル名の最後に.html をつけるとファイルは HTML ファイルとして認識識されますこの.html 部分を拡張子と呼びます Index.html profile.html 正しいファイル名誤ったファイル名 Index.html self_intro.html my-home.html iloveyou.html 全角文字が使われている Index.html 半角スペースが使われている iloveyou!.html 使用できない記号が含まれている 21

22 URL の仕組み (3/4) l IP アドレスで場所を調べる - Web や電子メールなど - インターネット上の便利なサービスを - 利用するためには IP アドレスという - 数値が必要になります - IP アドレスはインターネット上で - 端末を識別する住所のようなものです X X X.1.3 インターネット上の住所を表します X X X

23 URL の仕組み (4/4) l ドメインネームシステム (DNS) で変換する - IP アドレスに対応する名前をドメイン名と言います - 例えば netprotec-ons.co.jp のような名前がドメイン名です ü ドメイン名は組織名 + 組織の種別 + 国名からなります - ドメイン名から IP アドレスを変換する仕組みを - DNS ( ドメインネームシステム ) といいますドメイン名 netprotections. co. jp 組織名組織種別国名 IP アドレス 192.1XX

24 ウェブサービスとの連携 l HTML は前述のとおり外部にあるさまざまなファイルやコンテンツを簡単にページ上に関連付け表示することができます l この機能を利利用して多くのウェブサービスがコンテンツをユーザが自分のホームページに埋め込むことができるサービスを用意しています l たとえば - Youtube では動画を簡単に埋め込むことができます - Google Map では地図を簡単に埋め込むことができます - Twitter ではタイムラインを簡単に埋め込むことができます l さきほど実習で作成した自己紹介ページにそれぞれ埋め込んで表示してみましょう 24

25 いろいろなものを埋め込む (Google Map) 2 リンクボタンをクリック 1 地名を検索索する 3 埋め込みコードを HTML に挿入 25

26 いろいろなものを埋め込む (Youtube) Try it yourself Youtube 埋め込みなどで検索索してみよう 26

応用課題いろいろなものを埋め込む (Facebook いいね ) Facebook Developers: http://developers.facebook.

27 応用課題いろいろなものを埋め込む (Facebook いいね ) Facebook Developers: Try it yourself ( 注 ) HTML5 ではなく iframe を選択すること 27

28 HTML フォーム l ウェブサイトには左図のようにユーザーが情報を送信するために使用するフォームという機能があります - これを HTML で実現するのが HTML フォームです l 会員情報の登録欄や検索索条件の入力力欄などフォームの利利用範囲は非常に多岐にわたります - たとえば会員登録ページじゃらんの検索索ページ Twitter の投稿 / 検索索ページなども全て HTML フォームを使用しています 28

フォーム部品の種類 HTML フォームを構成するフォーム部品はその記述の方法により見見栄えや機能が大きく異異なりますテキストボックス型 <input type= text name= shimei size= 40 > ラジオボックス型 <input type= radio name= gender value= male > 男 <input type= radio name=

29 フォーム部品の種類 HTML フォームを構成するフォーム部品はその記述の方法により見見栄えや機能が大きく異異なりますテキストボックス型 <input type= text name= shimei size= 40 > ラジオボックス型 <input type= radio name= gender value= male > 男 <input type= radio name= gender value= female > 女プルダウン型 <select name= blood > <option value= A >A 型 </option> <option value= B >B 型 </option> <option value= O >O 型 </option> <option value= AB >AB 型 </option> </select> テキストエリア型 < textarea name= kanso rows= 4 cols= 40 > </textarea> ボタン型 <input type= submit value= 送信 > <input type= reset value= リセット > 29

30 フォームの作成方法 <form action= sousin.php method= get > 送信ボタンがおされると入力力されたデータを引き継いで sousin.php が実行行されることを意味しています詳細は 2 講にて名前 :<input type= text name= shimei > この間が Form タグ性別 :<input type= radio name= gender value= male > 男 <input type= radio name= gender value= female > 女血液型 :<select name= blood > <option value= A >A 型 </option> <option value= B >B 型 </option> <option value= O >O 型 </option> <option value= AB >AB 型 </option> </select> name = shimei はテキストボックスに shimei という名前をつけたことを意味しています詳細 2 講にてご感想 :<br> <textarea name= kanso rows= 4 cols= 40 ></textarea> <input type= submit value= 送信 ><input type= reset value= リセット > </form> 30

31 時間制限 20min 課題 l 以下のような入力力フォームを作成してみましょう - 顧客企業の情報登録を行行うフォームです - 企業名 URL 所在地担当者を入力力させます - 所在地は国内国外から選ばせます kadai.html 1 顧客企業名 2URL Try it yourself 前の 2 ページを参考にしてください 3 所在地 4 担当者名ポイント表示がキレイにいかない場合は改行行タグ <br> を書くとキレイになります 31

32 CSS CSS はウェブサイトをデザインするための言語です HTML は原則としてウェブサイトの構造を表すための言語であり色やフォント配置といったデザインは CSS によって行行われます 32

33 CSS とは (1/2) l HTML のみで作成したページは装飾もなく非常に味気ないものでした l なぜなら HTML は文章の構造を定義するための言語でありデザインを定義するための言語ではないからです l ウェブページではデザインを CSS という言語によって定義します - CSS は Cascading Style Sheets の略略です - HTML がウェブページ内の各要素の意味や情報構造を定義するのに対して CSS ではそれらをどのように装飾するかを定義します - 例例えばウェブページが表示される際の色サイズレイアウトやプリンタで印刷出力力される際のスタイルなどを細かに指定することができます HTML CSS スタイルを別に定義 33

34 CSS とは (2/2) l CSS とはパワーポイントのスライドマスター - 全てのページに会社のロゴやコピーライトを入れるのは面倒くさい - 1 箇所修正したら全部修正しないと行行けない HTML HTML CSS スタイルを別に定義 HTML 34

35 CSS/Sample1 CSS の書き方 (1/3) l CSS の基本書式 (1) - CSS は HTML ヘッダ中で指定を行行います <style type="text/css"> p { } </style> color: red; これは p タグを赤色に変える CSS の記述です - または CSS ファイルを別途作成し HTML ヘッダ内で読み込ませることで複数のページで共通の CSS ファイルを利利用することができます <link rel="stylesheet" href="style.css"> 35

36 CSS/Sample2 CSS の書き方 (2/3) l CSSの基本書式 (2) - CSSでスタイルを指定するにはどの部分に対してセレクタどのスタイルをプロパティどのように値適用するかを指定しますセレクタ HTML 文中の特定の要素を選択するために使用しますたとえば要素の種類で選択するタイプセレクタでは p や h2 といったタグの種類で CSS の適用範囲を決めることができますこのほかに各要素に属性として与えられた id や class もセレクタとして利利用できます - 以下の使用例例では p 要素の色を青くしフォントサイズを 30px に変更更するスタイルを指定しています p { color: blue; } font-size: 30px; こんな CSS を使わなくても <h1> を使うと文字は大きく表示されるよそんな疑問もごもっとも実はブラウザがデフォルトのスタイルというを持っていて CSS が適用されていないときには自動的にそのデフォルトスタイルが適用されているのです 36

37 CSS/Sample3 CSS の書き方 (3/3) l CSS の基本書式 (3) - p などの要素によらず要素の属性として指定された id や class でスタイルを指定することもできます - たとえば次のような HTML があったとしましょう <h2 class= blue_text id= blue_title > 見出しだよ </h2> <p class= blue_text > 段落だよ </p> - この HTML にあるクラス blue_text に一律律色を青くしフォントサイズを 30px に変更更する CSS を定義してみましょう.blue_text { color: blue; } font-size: 30px; 37

38 補足 HTML の書き方他のサーバにあるファイルへのリンクに使用 l 別のファイルを指定する HTML は他ファイルとの関連付けを行行えることが特徴です他ファイルの位置を示す文字列列をパス (Path) といいます - 絶対パスどこから見見ても変わることのない位置な場所です ü URL で指定するからはじまる URL でファイルを指定します <a href= > 文字 </a> ほかにもあらかじめ決められた基準となるディレクトリから見見たファイルの位置を絶対的に記述する方法もあります例例 ) /dir1/dir2/page1.html 同じサーバ内でのリンクに便便利利ドメインが変わっても大丈夫 - 相対パス自分のファイルパスからの相対的な位置で指定します同じディレクトリのファイルひとつ上の階層のディレクトリのファイル <a href= temrs.html > 文字 </a> <a href=../temrs.html > 文字 </a> 38

39 補足 APPENDIX l 文字コードとテキストエディタ - 文字はコンピュータ上では固有の数字であらわされている日本語の場合はこのコード体系が全部で 3 種類あります ü UTF-8 ü Shift-JIS ü EUC-JP - Windows のメモ帳ではこのうち Shift-JIS にしか対応していないためウェブページをコーディングするには不不向きである - そこで HTML の記述にはフリーかつ高性能なテキストエディタを使用することが多い ü さくらエディタ ü TeraPad ü 秀丸 ( 有料料 ) このうち海外でも広く普及している UTF- 8 の利利用が国内でも広がっており現在は多くのウェブページがこの文字コードで記述されています 39

40 まとめ第 1 講で学んだこと l HTMLとは何の略略かを知りいくつかのHTMLタグを利利用して実際に自己紹介ページを作りました l GoogleマップやYoutubeといった既存のウェブサービスの埋め込みコードを取得して自分のサイトに埋め込む方法を学びました l 入力力フォームの作り方を知り実際に自分で入力力フォームの作成を行行うことが出来ました 40

41 お疲れ様でした!! 41

<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 の場合